Javascript D3.js Nested Axis Labels for Radar Chart - javascript

I would like to add nested axis Labels to my radar chart. All online resources just show a singular axis.
An example of the image I am trying to reproduce is shown in the below figure.
The axis is Management.sr_lvl_1, Management.sr_lvl_2, Management.sr_lvl_3... However, I want the word management to appear only once in the label which spans across all sr_lvl

Related

Zoomable Sunburst

I'm trying the Sunburst chart. After struggling with the dimension, it's beginning to show like I wanted.
However, I just realised that selecting slices in the Sunburst doesn't change its shape. It only greys out non-selected slices. On the other hand, when selecting values on an associated chart, the Sunburst reshapes indeed. The very dc.js example behaves like this.
Although understanding that the greyed out slices are kept on screen in order for the user to be able to select them, I was expecting the Sunburst to implement that zoom out by clicking on the centre, or keeping a reset link outside.
Is there a way to redraw the Sunburst that rolls over the visible slices and hides the non-selected, just like the D3 Zoomable Sunburst?

One legend, multiple charts Chart JS

I have two pie charts with different data but same labels and background colors. How can I create a standalone legend (a legend without a chart) using ChartJS so that the legend corresponds to both the pie charts at the same time?
I tried creating a pie chart with the data array set to an array of 0s. However, that causes an empty pie chart to be generated, which takes up a lot of space; so that's a no go.
Any help would be deeply appreciated.

How to avoid overlaps in d3js scatter plot

I have some random data points[{label, count},....] and simply want to plot them on a 2D Scatter plot. But I am not sure if there is a way to avoid overlapping of any two bubbles.
Lets say I have a plane of 600x600. So all I want to do is just scatter the points anywhere on the chart with only condition that no two bubbles(i.e. data points) should overlap or hide each other on the plane.

Responsive grouped bar chart in d3js with responsive scale values

I am following this example to create grouped bar chart. But the chart lacks responsiveness. I want to run it dynamically in all kinds of devices. I want to make it look something like the below chart(not same as chart above copied from an example of a responsive chart):
And also in above example the x-axis range is overlapped is it possible to make it tilted to so that all values are clear something like below pic so that all x axis range values are displayed.
The responsiveness of the chart is fixed however the scale values overlap on each other and instead of overlapping I want them all to adjust and appear.

Creating a radar chart with d3 and multiple diagonal brushes

I am looking to create a radar chart with multiple diagonal brush selections. I have the radar chart here, and there are examples of using multiple brushes with parcoords. However, I have not seen any examples of using a brush to select on the diagnoal. Basically, I would like to turn this parallel coordinate chart into a radar chart, keeping the brushing capabilities, but I am not sure how to do this, as the axes will be at random places and angles. Thank you!
You cannot change axis generation in parcoords. It's hard-coded as a set of parallel vertical lines.
You would have to modify parcoords.js to suit your needs, which does not seem to be a trivial task.

Categories

Resources