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.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I need to use JavaScript based charting library. There are lots of good JS library for charts:
D3.js
Google charts
ChartJS
n3-charts
EmberCharts
Meteor Charts
HighCharts
and so on....
While these libraries provide lots of options, it also creates confusion, it’s really hard to pick right chart for your data.
I have following questions:
Is there any guideline for selecting charts based on data?
How do you categorize your data? I am getting JSON data from a web service, Data can be multi-dimensional. There is no restriction on no. of columns and no. of rows. If data is too large, does it make sense to prevent users from selecting some charts?
There's two ways to understand your question, and both involve very complex answers.
Choosing the right visualization
Whole books have been written on the topic. One of the best guides that I know of is SeeingData's Inside the Chart series. They have an article for each of the more common chart types (bar, pie or radar charts, scatterplots etc.), each detailing what you can see in it, what data it is for and what kind of information it can hide.
As a rule of thumb, if you have a lot of continuous data, like a time series, use a line chart. If you have few datapoints or the data is discrete, bar chart is there for you. Use stacked variants if you're presenting shares (although stacked line chart, or area chart tends to be hard to read). If presenting correlation, use a scatter plot. Changes and differences are best shown on a slope graph. Showing ratios of a single datapoint? If you have just two or three competing fields, use a pie chart, for more elements, a single stacked bar is usually a better choice.
There are more types of graphs, but unless your readers are adept in statistics, they probably won't be able to read them. Remember that it's your responsibility as an author to choose the correct graph type, which does not mislead the readers and which communicates the story of the data the best. Note that there might be more stories in one dataset, hence more graphs, more views of it.
A more general advice is: don't be creative. Good intentions (I want my chart to look cool) often lead to disasters, like this misleading Gun deaths in Florida chart. Just stick to the basics, don't do fancy faux 3D charts and let the data speak for themselves. As Edwart Tufte put it
Show data variation not just design variation
Choosing the right visualization library
Main factors are your requirements, complexity of the task and your coding skills. Google Charts is an online Excel, you click your mouse a couple of times and out comes a decent graph. However, your customization options are very limited, if you don't like the output, you'll have to look elsewhere.
D3.js on the other hand is a low-level tool with quite steep learning curve. It takes a better part of the day to make your first bar chart. Most important fact is, it's not a graphing library, it's data driven documents library. Yes, it does have some helper functions for graphs, but you have to construct them from scratch and it takes a lot of time and effort. You need to know your SVGs, HTML and CSS, as that's what you'll be manipulating. The reward is its extreme flexibility, you can make whole apps based on D3. With skill, it can completely replace jQuery. It's a lot more and a lot harder than a simple pie chart generator.
If a simple pie chart generator is what you want, but Google Charts don't offer the options you need, then the true graphing libraries like Highcharts are for you. They take data in a lot of formats, let you choose the basic output type (eg. pie vs. bar chart), do a little bit of customization and off you go. It's the middle ground.
I don't use the framework-specific libs like n3, Ember or Meteor charts, but I'd guess they fall closer to Highcharts than D3. Just check if all you need is to supply data and a configuration object, or if you're down to creating and setting up individual SVG DOM nodes.
Generally, if don't know what to choose, go from the least complex ones. Try to make it in Excel first. Then in Google charts. Then learn some JavaScript and try the Highcharts or your framework-specific library. And only if you still need more options go for the big guns like D3.
Though I can write dc.js applications, I still don't understand how dc uses crossfilter objects, ie the dimensions and groups in various charts. When we click on an graph element, for instance, a pie chart slice, I believe dc is applying filters on the dimension, but does it manipulate the crossfilter object as well? Anyone knows of any document/article explaining how dc interacts with crossfilter objects? I know of http://www.codeproject.com/Articles/693841/Making-Dashboards-with-Dc-js-Part-Using-Crossfil
which is really good for beginners, but it does not go deep dive on this specific subject.
For instance, I have this dc chart: http://bit.ly/1nStSh3
Basically the dataset has object names (4 of them, P, Q, S, T) and its size for various dates. The two piecharts show the size for dates and objects respectively. There is a line chart which shows the data growth over a period of time. Now, when I click on the second graph, ie object names, both line chart and the first pie chart auto adjusts, but when I click on the first pie chart, the line chart does not change.
Your particular question is covered by the crossfilter documentation and the dc.js FAQ: a dimension does not observe its own filters, but only the filters on other dimensions.
To get the charts to respond to each other, create a duplicate of the dimension (construct another one with the same arguments) and put the charts on separate dimensions. (There is also work underway to reflect the brushing/filter state between charts that share the same dimension.)
As to your larger question, no, there is no documentation on the interaction between dc.js and crossfilter that I know of. As the principle maintainer (but not the original author) of dc.js, I hope to write such documentation in the next year.
There actually isn't much magic to it: charts just update the dimension filters and then trigger redraws on the charts in their group. The d3 transitions within each chart are what make it look fancier than that.
I'm quite confused and might need help just formulating the question, so please give good comments...
I'm trying to crossfilter some data where each data point has its own sub-dataset that I want to chart and filter on as well. Each point represents a geographic region, and associated with each point is a time series which measures a certain metric over time.
Here's what I've got so far: http://michaeldougherty.info/dcjs/
The top bar chart shows a particular value for 10 regions, and the choropleth is linked with the same data. Now, below that are two composite line charts. Each line corresponds to a region -- there are 10 lines in each graph, and each graph is measuring a different metric over time. I would like the lines to be filtered as well, so if one bar is selected, only one line will show on the line chart.
Moreover, I want to be able to filter by time on the line charts (through brushing) in addition to some other filter, so I can make queries like "filter out all regions whose line value between 9 AM and 5 PM is less than 20,000", which would also update the bar and choropleth charts.
This is where I'm lost. I'm considering scrapping DC.js for this and using crossfilter and d3.js directly because it seems so complicated, but I would love it if I'm missing something and DC.js can actually handle this. I'd also love some ideas on where to start implementing this in straight crossfilter, because I haven't fully wrapped my head around that yet either.
How does one deal with datasets within datasets?
Screenshot of the link above included for convenience:
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.
I am new to d3.js but have managed to make two individual charts as in introduction.
I have a map chart, which has dots representing monitoring stations.
I also have a line chart which has multiple timeseries (data from json) from one monitoring station.
What I would like to do. Have the two charts on one page. When you mouseover or click on a station on the map the data is loaded and displayed on the line chart. When a new station is selected on the map, the data transitions on the line chart
The question I have is one of style. With the two separate charts what is the best way to combine them?
With the transition, I have searched but have not found any simple examples that has two charting elements where interacting with one effects the other. Should I combine all the timeseries data into one json file (say 4 timeseries times 50 stations) or have 50 json files?
Thanks
Unless your timeseries data is very large, I would just put everything in one JSON file to make things simpler and so that changing stations can take place entirely client side.