Any tips on how would I go about producing a stacked bar chart with multiple levels?
Similar to having floated divs that slip underneath. But I understand that svg doesn't have the concept of floating, so something more rigid based upon the svg width.
I've just finished "interactive data visualisations" book, which is great but I think I'm hitting on an advanced topic and I've had no luck in the d3 documentation so far.
I think I may of come up with the solution, or at least the direction.
This example: http://bl.ocks.org/mbostock/3888852 it is of pie charts but the principle is the same.
It shows that it can be separate diagrams i.e. separate svg elements. However they are still drawn out in one go with d3.js treating it as one big diagram.
I can then use normal css to lay it out, e.g. display:inline-block.
Thanks Lars for the indication that multiple charts would do it.
Related
I'm trying to create a geochoropleth that maps subregions, but also includes outlines of larger regions. (You can think of it like mapping counties, but then wanting to include thicker outlines of states). Not all subregions are part of larger regions that need to be outlined. (Most aren't.) You can see an example of what I'm trying to replicate here:
What's the best way to add this regional outline to my map? I've tried keeping the regions and subregions as two separate files, with two overlaygeojsons calls in my geochoropleth call (with added d3 styling to change the fill and stroke to just be an outline). But when I do - the projection of the regional outline layer is strangely offset from the lower one.
I've also considered having both sets of boundaries in just the one geojson. However, I wasn't sure how to work with this.
While it would be nice to be able to mouseover the boundaries of the larger regions and get a tooltip before crossing over into the individual subregions and getting their tooltips, this isn't a must. I could live with just outlines around the regions. Please advise on the best way to do this. Happy to provide more detail, and thanks so much!
EDIT: I discovered that I had a misplaced transform tag which is what offset the second layer. Fixed now!
How would I create such a view in D3.js -- a central node with self-positioning outer bubbles, all containing text? I'm browsing their gallery but haven't found anything specifically like this. I understand it's good StackOverflow practice to show what one already tried, but I just don't know with which model I'm supposed to start; I played around with a Force Directed Tree with really big radii but it doesn't seem super appropriate.
PS: Icing on the cake would be to have the following connection descriptors as well, but I can also do without. Thanks!
I agree with the suggestion to extend the force-directed graph demo. Here's a quick and dirty fork of that example: https://observablehq.com/#yousefamar/connected-text-bubbles
The text in each bubble is a foreignObject for flexibility, since I found it easier to put a p in the bubbles than svg text. This way you can also use overflow scrolling if there's too much text. pointer-events: none is so that the text can't be selected, and so that you can therefore drag the bubble through the text.
There is probably a lot you can improve there too, e.g. in order to create a gap in the lines, I put a white rect behind the text, but it's an arbitrary width. I remember however that there is some getComputedTextLength function to get the exact width of the label text, which is probably better.
I am searching a way to do the following charts with D3.js and as I'm new to this, I have no idea at the moment how to sort the squares.
Tried some research for charts like this:
Square chart
Proportional Aera Chart
but I did not find anything regarding D3.js.
Does anyone have an idea how to start or proceed?
I think I could manage to create an area with all squares in the right dimensions, but I do not know how to sort them dynamically, so they would group together automatically as shown especially in the first image, when their sizes do not match perfectly but differ a lot.
Thanx for any help, hirschferkel
This example from Mike Bostock is, I think, the sort of thing you're after:
https://bl.ocks.org/mbostock/8fe6fa6ed1fa976e5dd76cfa4d816fec
I suddenly came accross maybe a similar chart: It's called demers cartogram. There is a way to create it in d3.js but it does not look as good as Arc Gis creates it, where the alignment of squares looks much cleaner.
Demers Cartogram with d3.js
Demers Cartogram with ArcGis
I am using NVD3.js and want to create following chart:
As you can see - bars are stacked, two axis and grouped by x-axis
Using multiChart I got :
It is stacked, two axis, but not grouped by x-axis.
Maybe I need to use different chart type - not multiChart, but I didn't find bar charts where are two y-axis.
1) How can I achieve this using NVD3.js?
2) If it can not be done in NVD3.js, then which solution I can properly integrate?
Thanks!
The NVD3 Javascript library is, to quote their website, "an attempt to build re-usable charts and chart components". It's creators have made a couple key decisions in order to emphasize the reusability of the charts:
They have focused on implementing standard chart designs (line graphs, bar graphs, scatterplots), but implemented in flexible, interactive ways.
They have used the same data structure requirement for all the graphs:
The main data array contains multiple data series, each of which represents a logical grouping of the data;
Each series is an array of individual data objects containing two or more variables.
All the graphs have a similar style and reuse important pieces of code.
The NVD3 library allows you to create a grouped bar chart or a stacked bar chart, and even a chart that interactively animates between the two.
Adapting that chart to create a stacked and grouped bar chart is not a simple task, in part because the data structure would be different. You would need a three-level data structure (series > sub-series > datapoints, representing groups > stacks > bars) instead of the two-level (series > datapoints) structure used by NVD3.
All is not lost, however. NVD3 is built on the d3 Javascript library. D3 is much more flexible and open-ended; it doesn't define specific chart types, it defines a way of manipulating a webpage to make it match your data. You can use it to create any type of chart that can be drawn with HTML or SVG. But of course, that means that it is much more work, since you have to explicitly create all the parts of the graph, and make all the design decisions yourself!
I strongly recommend, if you want to use d3, start with the basics in the tutorials list or one of the introductory books. However, you'll also want to check out the gallery of examples, and from there you'll find the following charts that will be of particular interest:
Mike Bostock's Stacked Bar Chart
Bostock's Grouped Bar Chart of the same data
Ali Gencay's adaptation of those examples to create a stacked, grouped bar chart
Once you have become familiar with building charts in d3, you may want to open up the NVD3 source code to see if you can borrow some of their reusable code components (being sure to respect their licence terms, of course). However, I would not recommend doing so as a beginner -- it is a lot of code, and uses a lot of complex techniques to put all the pieces together.
At the risk of asking a silly question, why is each boxplot in d3.box (code and demo) placed in its own svg element? (more generally, placed in its own container element.) Or to put the question another way, why does d3.box only render one component of a chart, rather than all components of a chart? (given that each boxplot is likely to share a common y axis.)
Thanks in advance for any suggestions. I'm sure there's a sensible rationale for this; it's just not clear to me!
Technically, there is no reason to put everything into its own SVG. I don't know why it was done like this in the example, but usually you would have everything in a single SVG and group elements using svg:g elements.
The reason that most d3 components usually only do one thing is that is makes it easier to combine them. If, for example, d3.box rendered x and y axes (or just one of them), you would have to provide options for people who wanted no axes, or a different axis layout, or anything else that isn't covered by how the implementer designed it.
If you're looking for something more high-level that takes care of everything, check out nvd3.js.