Zoomable Sunburst - javascript

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?

Related

Javascript D3.js Nested Axis Labels for Radar Chart

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

Highchart: Bar chart showing duration between events

I need to create a chart that shows a series of events (see image, in this case 6) that have a duration of time between them.
I've been able to approximate this with a sankey chart and curveFactor:0, but I can't seem to adjust the space between each node.
Is there some way I can achieve this? It doesn't have to be sankey chart. I can use anything in the Highcharts library. I'd also considered a stacked bar chart but ran into another set of issues.

Multiple brushes in dc.js graphs

I'm wondering whether there is some high level way of having more than one brush on a graph. Here's the problem:
I have a stacked bar chart where each bar represents one weekday and different metrics are stacked on top of one another (stacked line charts are not available yet as far as I know). Now I would like to let the user select the days to display (and the selection should propagate into the other graphs). Everything works great with the brush on, but if you want to choose Sunday, which is at the end of the graph, and Monday which is at the beginning, you can't do that using a single brush. Anybody knows of a way to add more brushes?
Alternatively I'm looking for a way to add a click event listener that would "activate" the day you click on in a similar way like a ring chart section would work.
Thanks a lot for your ideas,
Renra
You could try using an ordinal x axis instead of a linear one. The default behavior for ordinal bar charts is to click to select/deselect bars instead of range selection.
That's chart.x(d3.scale.ordinal()).xUnits(dc.units.ordinal). If you are using dc 1.7.1 of earlier, you may have to specify the domain by d3.scale.ordinal().domain([’Monday',...])

Link two D3 plots

I'm trying to link two D3 plots so that selecting part of the histogram on the right, causes a certain scatter plot to display on the left.
This is my attempt.
My current question is why the right plot isn't rendering, which I think goes back to how to create and refer to multiple SVG tags in d3.
D3 has SVG controls for this type of situation. What you are looking for is a brush with context.
Here are the API docs:
https://github.com/mbostock/d3/wiki/SVG-Controls
And here are two great examples:
http://bl.ocks.org/mbostock/4063663
http://bl.ocks.org/mbostock/1667367

select an area of a scatter plot in javascript

I am trying to achieve the following with javascript:
draw a scatter plot with many (~10,000) points
allow the user to draw a curved shape on top of the plot to select a region (I am open to exactly how the shape is designed: an ellipse would be fine, or a polygon, or a path defined by bezier curves)
get a list of the points inside the selected area and do something with them.
Obviously, it is step 2 that is causing the problem. I have previously used jqplot to something similar to the above using a rectangular selection, but it is vital for the purposes of this project that the user be able to select an elliptical region.
Can anybody give any hint as to which javascript library would allow this?
I know that you can create paths using Raphael. I would have though that the most difficult part of this would be the last, but I did find this (yes, I know it's VB, but it gives a basis that can be applied to JavaScript).

Categories

Resources