I'm wondering whether there is a clever way to arbitrarily sort my groups in a numerical bar chart - I tried to redefine .ordering(), but the method is not called. Which makes sense, since you want your numerical data usually naturally sorted.
My goal is to sort my bar chart e. g. by the group values instead of the group keys. I can imagine just returning a sort index in my chart's .keyAccessor() - is there a more direct method, like enabling .ordering() for numerical bar charts?
Thanks!
Related
This is half a question, as I have this 'sort of' thought through. Still, I'd like to have some confirmation. Here it goes:
From what I've seen so far, a group holds all the information necessary for a plot. Let's imagine a bar chart for the 'canonical' dc data array. We define a dimension on type and then a group. The group data will give us all the necessary coordinates for drawing the bars.
Why do we need dimensions, then? Is this for plotting, or just for keeping track of the filters and dynamically updating the chart?
This is only half an answer. :)
Yes, there is some redundancy between dimensions and groups for sure.
The group key function needs to be a refinement of (and must be consistent with) the dimension key function.
There's only one place where I've found it's helpful to refine the group key function more than the dimension key function: when the dimension is time and the group is some quantization of time like months or hours. Otherwise there is no need to specify the group key function at all. I haven't seen too many people create sets of time-series charts where different charts are quantized at different levels, so I am not sure if that's the motivation.
Filtering happens through the dimension, not the group, and a group does not observe its dimension's filters - so you might want them to be different objects so you that you can optionally have the chart respond to its own filters. That's pretty rare, though - usually a chart will read data from a group on the dimension it filters.
Any other reasons? Please add to this list!
I am just checking if we could consistently maintain a single color for specific entries through out all graphs. Is there any way?
-yash
I'm trying to reduce the number of points in a DC.js line chart to improve performance. The docs lead me to believe xUnits() is the way to do this:
The coordinate grid chart uses the xUnits function to calculate the number of data projections on x axis such as the number of bars for a bar chart or the number of dots for a line chart.
but xUnits does not even seem to be used:
http://jsfiddle.net/m5tguakf/2/
What am I doing wrong?
The number of points is actually determined by crossfilter - dc.js doesn't do any aggregation on its own, so it has no way to add or reduce the number of points.
That documentation may be misleading - it doesn't alter the shape of the data. xUnits is really just needed for dc.js to know the number of elements it is going to draw. It's used for two purposes:
to determine the width of bars or box-plots
to know whether the x scale is ordinal or quantitative
Could dc.js just count the number of points in the crossfilter group? Perhaps.
Anyway, to get back to your original question: if you want to reduce the number of points drawn, aggregate your data differently in your group. Usually this means creating larger bins which either sum or average the data which fall into that interval.
As a simple example, you can combine every other point in your fiddle by binning by even numbers, like so:
var BINSIZE = 2;
// ...
speedSumGroup = runDimension
.group(function(r) { return Math.floor(r/BINSIZE) * BINSIZE; })
// ...
http://jsfiddle.net/gordonwoodhull/djrhodkj/2/
This causes e.g. both Run 6 and Run 7 to fall in the same bin, because they have the same group key. In a real example, you'd probably want to average them, as shown in the annotated stock example.
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 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.