I want to draw a D3 pie chart. Initially the arc segments will be hidden, then I want to animate them sequantially one by one to make them visible in response to keyboard/mouse events from the application flow.
The application flow is a linear: E.g. part 1, animate first arc segment to make it visible. Part 2, animate second segment to make it visible. Part 3, etc. until the pie is completely visible.
I'm interested in using the Swiper project - http://www.idangero.us/swiper/api/#.VqemYVOLQmI - so moving to each slide would trigger an event that would make an arc visible (i.e. onSlideChangeEnd would show each sequential arc)
One approach I could take would be to draw the pie segment as initially invisible, then use a style transition to make it visible:
d3.selectAll(“.segment1”).transition().duration(500).style("fill", "#7FB9E6”);
This could make each sequential arc visible in response to each event.
However that’s not quite the look I’m going for - I want the animation on the fill of the arc to appear like it’s moving from left to right, e.g. in this kind of "sweep" animation: http://jsfiddle.net/thmain/xL48ru9k/1/
Is this kind of animation possible to use if I’m not updating data using D3 (i.e. the chart is already created, I just want the arcs to appear sequentially in response to an event).
I'm new to animation / tweening so help is appreciated. Thanks.
One idea is to initialize the chart with all the values initially set to zero. Then, as your user swipes through your content, just update each element as needed with each items' respective data value.
I think (I haven't tried it) that it would create a 'bumping' effect, where each time a user swipes (or whatever the function call is) the chart's slices would 'add' a slice and resize the visible slices' portion of the data shown (if that makes sense).
The easiest way is probably to leverage the d3.svg.arc shape directly (a pie chart is merely a "helper" for creating many of these). If you know what the total of the data is, you can calculate the angle of each arc individually, and show/hide/animate them at will.
Related
I am trying to adapt the animated grouped bar chart example from
https://bl.ocks.org/aholachek/fb0c1cd7ea9707bc8ff55a82402c54b1
for my own purposes. One modification that I am stuck at right now is that my data will have a variable number of groups and the xAxes and blocks have to resize accordingly.
I have already added the resizing of the domains with
x0.domain(data[Object.keys(data)[0]].map(obj =>obj.name))
x1.domain(valueKeys).rangeRound([0, x0.bandwidth()])
in the update function, but this does not seem to be enough. While the width of the bars is resized correctly, the x values are not spaced out evenly and instead get pushed into the far right corner of the graph when adding more elements after the initial creation for example.
For now I only care about the grouped version, not the stacked one.
I would appeciate any pointers
Problem could be solved by clearing out the barContainer before the update. This of course prevents transitions on the already existing bars, but that is good enough for me
Is there a way to create a horizontal bar chart (or modify the row chat)?
The row chart does almost what I want, however I want the y axis to be a continuous variable and it seems the row chart defines the y axis in terms of discrete/ordinal variables.
I was also thinking about rotating the svg with d3. (Rotating the whole div worked, however the brush effect did not rotate too).
I was thinking:
dc.renderAll();
d3.select("body").select("#barChart3").select("svg").attr("transform", function(d) { return "rotate(90)"});
however that erased the whole chart rather than rotating it.
Any suggestions?
Update:
I am having some success with rotating the svg (the brush works), however the graph is being cut off and I can't figure out why...
The two charts are completely different codebases and have different features. The Y axis of a row chart does not even use a scale, so you are quite right that it can't be made continuous in its present form.
It is an eventual goal to merge them, but for now I think rotating is your best bet.
As for the clipping problem you're having, look for the clip-path attribute on the generated SVG. It would need to be rotated as well, but for a quick fix you can probably remove it.
I have a javascript class that uses an SVG to draw a set of cartesian graphs using paths (with both line and curve segments)
Now, the code must intercept a click event on the graph area, and if the click is on - or near - one of the path, it must take the X value, and get the Y values of other paths on the graph.
Click ON the graph area is not a problem with native events, but detecting click NEAR the graph and get all the Y values is a thing that I don't know how to do, because I'm searching for a method using the native JS function and methond, if available.
Yes, I can render every curve in a 2d array and do a lookup, but I'm trying to avoid it. Is there a way to do it without "reverting" to the math approach?
Draw the same curve with a stroke and stroke-width (to make it wider) but make it visibility="hidden" and then use the pointer-events property to make the hidden stroked curve clickable. You can either put the hidden curve on top or underneath the original stroke but if you put it underneath you'll probably want to make the original curve pointer-events="none"
I need a Time Line For My Web Project.
Something like this - I read the code of this Time Line but did not understand it because it is not documented enough.
My problem is the math behind all of this (not the interaction with the canvas).
I have read several articles about the math of the scroll bars, but none of them talk about zoom.
Some
articles suggest to hold canvas element with very large width value - and to display just the
View Port.
I don't think that's the right way to do it - I want to draw just the correct viewport.
In my project, I have array of n points.
Each point holds time value represented in seconds, but not all of the points are within the Viewp Port.
Considering the current zoom level, how do I calculate:
What points should be drawn and where to draw them?
What is the size and position of the thumb?
Any articles / tutorials about such a thing?
You might be able to use something like Flot which handles the placement of points, as well as zooming and panning. Here's an example of that.
There are a bunch of other drawing libraries, here a good list.
You always have Raphealjs.com , one of the most used library to play with SVG, with this you can write your own js to generate the timeline.
I am writing an app that uses Highcharts, and in one instance I want to have a "slider" at the bottom of the chart that extends up vertically over the chart. Moving the slider will update other parts of the page based on where the user moves the slider on the chart.
The problem is that when drawing anything on top of the Highchart (image or a div) the performance becomes absolutely unacceptable. The slider simply cannot keep up with the mouse movements See a jsfiddle here. Note - this only happens when working with a large number of data points (which is absolutely unavoidable in my case).
Is there anything that I can do, short of not drawing on top of the chart?
I suspect the slowness is because the browser has to redraw the chart (either the whole thing or parts of it) as the div slides over it. With a large data set to redraw the chart from, this becomes annoyingly slow.
There are solutions, but not all of them are always acceptable:
You can try reducing the number of points in your data set by sampling it at a lower rate.
You can try windowing, so that the viewer only shows a range within the entire set. For example, if you have 10,000 data points your window can slide along the data set, showing only 1,500 points at a time as opposed to all 10,000 points.
Move to a different technology such as Flash or Silverlight.
Like I said, though, not all of these or even any of them will work for you.
I noticed that when you drag the slider over the graph it still highlights the datapoints. You probably should set pointer-events:none on that part of your chart while dragging the slider, that will allow browsers to not check pointer-events in that subtree (which if you have a lot of datapoints can be somewhat expensive, especially if you update these elements on hover).