Example of a horizontally stacked bar chart, where the longest bar is drawn right up to the chart’s topmost edge:
Example of a vertically stacked bar chart, where the longest bar stops before the chart’s rightmost edge:
More precisely, it seems like the scale goes up to 20 here, as opposed to the biggest total stack value present in the data set, like 36 in the horizontal variant above which seems like an arbitrary enough number to align to – I guess except that it’s not a prime number.
I’ve been struggling to figure out why it behaves like this, but have thus far come up short. The two data sets have the same exact anatomy – are there any more props that has to be defined, other than type – when flipping the layout like this?
Well I’ve been reading the docs so much that I zoned out when it came to the domain prop, however that is the solution to this; domain={[0, 'dataMax']} and Bob’s your uncle.
Related
I have some labels arranged along the outside of a series of arcs (generated by pie charts). These labels are positioned along 'copies' of the pie arcs, which works to fit them nicely, but they unfortunately also cut them off prematurely, as seen in the screenshot below (in this case, an 'i' from the beginning and bracket contents at the end).
Is it possible to tell the text to extend beyond the path's limits? Or failing that, to extend the path itself along its existing course?
edit: The code I'm using to make the arcs is pretty much exactly what's found here: https://www.visualcinnamon.com/2015/09/placing-text-on-arcs.html.
I got a data set that where each sample has a size (0-1000) and a value (grade 1-5). I want to visualise the data with circles of different sizes along a line (domain axis), much like:
http://www.nytimes.com/interactive/2013/05/25/sunday-review/corporate-taxes.html?_r=1&
(note that circles even with the same effective taxrate do not overlap)
Example data:
sample 1: size 300 value 3.2
sample 2: size 45 value 3.8
sample 3: size 4400 value 4.0
sample 5: size 233 value 0.2
sample 6: size 4000 value 4.2
How can the data above be visualised using circles on a line (size decides diameter, value decides approximate position on the line) so that circles do not overlap?
I've been looking at D3's packing layout, but from what I can tell it doesn't support this out of the box. Anyone got any ideas on how to approach this?
Oooh, this one was a puzzle...
If you look at the code for the NYTimes graphic, it uses pre-computed coordinates in the data file, so that's not much use.
However, there's an unused variable declaration at the top of the script that hints that the original version used d3.geom.quadtree to lay out the circles. The quadtree isn't actually a layout method; it is used to create a search tree of adjacent nodes, so that when you need to find a node in a given area you don't have to search through the whole set. Example here.
The quadtree can therefore be used to identify which of your datapoints might be overlapping each other on the x-axis. Then you have to figure out how much you need to offset them in order to avoid that overlap. The variable radii complicate both functions...
I've got a test case implemented here:
http://fiddle.jshell.net/6cW9u/5/
The packing algorithm isn't perfect: I always add new circles to the outside of existing circles, without testing whether they could possibly fit closer in, so sometimes you get significant extra whitespace when it is just the far edges of circles bumping into each other. (Run it a few times to get an idea of the possibilities -- note that I've got x-variables distributed as random normal and r-variables distributed as random uniform.) I also got a stack overflow on the recursive methods during one iteration with N=100 -- the random distribution clearly wasn't distributed well enough for the quadtree optimization.
But it's got the basic functionality. Leave a comment here if you can't follow the logic of my code comments.
--ABR
Update
New fiddle here: http://fiddle.jshell.net/6cW9u/8/
After a lot of re-arranging, I got the packing algorithm to search for gaps between existing bubbles. I've got the sort order switched (so that biggest circles get added first) to show off how little circles can get added in the gaps -- although as I mention in the code comments, this reduces the efficiency of the quadtree search.
Also added various decoration and transition so you can clearly see how the circles are being positioned, and set the r-scale to be square root, so the area (not radius) is proportional to the value in the data (which is more realistic, and what the O.P. asked for).
D3's packing layout is not the answer here. It places circles in a spiral fashion around the existing group. Here's me reverse-engineering the algorithm behind packing layout:
I would suggest a force layout-based approach. That way, you can give your nodes force towards a gravitational center, and then let gravity do its thing.
Force layouts (e.g. Clustered Force Layout I) are usually animations, so you'll want to apply a static force layout.
I've wrapped up this approach in an example block, which looks like this:
The number of nodes in my d3 graph is too large. So I built a zoom mechanism in that graph. Now the problem is, I just cannot display text for each nodes since they will overlap each other. However when I zoom in to the nodes, the space is enough to display texts.
So how do I show texts when the space is enough to show all of them without overlapping?
I have had this same problem in the past. Unfortunately optimal label placement is not an easy problem. To mitigate overlap effects one option is to use a restricted force layout for label placement. You can also try using callouts to allow the labels to move farther away from the nodes.
In the past I have implemented a sort of greedy collision detection based algorithm that goes something like:
sort the labels in decreasing priority
for each label in the list // so most important first
if the label does not overlap any placed labels
place the label and add it to my collision data structure (e.g. quad tree)
else
hide the label
Obviously this will have some non-optimal cases and it can be slow if you have a lot of animations going on. But when you have the option to zoom in to see more label and if your absolute number of labels is not too high then it works quite well. There are also a number of obvious ways to speed it up like restricting testing to only labels within the view (but then you need to update on pan).
You may find some helpful suggestions here including an implementation of collision detection.
i am trying to figure out if there is a reasonably easy way to extend NVD3's lineChart model to allow variable stroke widths along each line path in a chart.
specifically, i am dealing with a simple line chart where i need to show the year-on-year growth of employment in different sectors (for which NVD3's lineChart works perfectly), while also giving an idea of the relative weight of these sectors (i.e. agricolture might be growing while employing only a few hundred people overall, while retail might be struggling but still be employing a large percentage of the population) - this won't be a linear scale of course, but assuming that relative weight of each sector varies across time, a thicker line could represent a sector with more employees than one with a thin line.
obviously i could very easily change the stroke width for the whole line using i.e. an average weight of each sector across the whole timespan, but as far as i understand there is no way in SVG to specify a varying width of a single path element: would it make sense to create an NVD3 model that builds on top of lineChart but splits each line into discrete polygons (triangles?) for each year-on-year period?
Looking for an answer to this myself. It seems there is no easy way, but one possibility is to use the stroke-dasharray attribute.
http://owl3d.com/svg/vsw/articles/vsw_article.html
Essentially, you can create a series of cloned paths, covering a range of stroke widths. If you turn them into dash arrays, you can play with the spacing between dashes to control which paths are visible at each point.
Depending on the shape and width you are looking for, you may also be able to fudge it by adding a second path element with a varying offset from the first.
Perhaps generate a closed path and apply a pattern fill or regular fill on that path. The closed path is effectively a triangle shape, to mimic a line of varied width.
Very casual javscript user here. Hopefully this makes sense.
I am tracking 20 different series on a stacked area chart with nvd3.js. These series fluctuate between positive and negative values, some on a huge base and some on a small base. The result is that - when one of the really big series is below the x axis - it pushes everything else underneath too, and the positive series won't appear above the x axis until you filter out the bigger players using the key.
The technically inelegant but good looking solution I have come up with is to split all of my negative values into one array, and all of my positives into another. The top half of the page is a positive values graph, the bottom half is negative values and they line up pretty nicely.
The weakness with this approach is when you go to interact with it as an end user. If I filter out a series (by unchecking it in the key) or change the graph mode (with the type selector) or zoom in on a series (by clicking it so the graph refocuses to that series only) then it will only affect whichever graph you clicked on. I would like to adjust these three click events (and any others I've missed?) so that your action is synchronised across both graphs.
Is this achievable? Any reading material I can dig through where somebody has done something similar? I imagine linking two representations of one data set (e.g a pie and column graph) is vaguely analogous.