I'm new on dc.js and I have some questions about flexibility of dc.
First, I have looked for answers but haven't yet found any of them.
1) I'm using dc.sunburst chart. I was wondering if it was possible to create Zoomable sunburst as it is actually the case with d3.js. If yes, can you provide a piece of code please..?
2) I'm using crossfilter for interacting several graphs together. However I would like that one of them would not be possible to filter with. I mean that it updates with his dimension/group when filtering on other chart but that filtering other chart clicking on it would be impossible. Any ideas ?
Like: dc.rowChart().on("click", Do not filter)
3) I want to create a dropdown (using dc.menuSelect and crossfilter) on a two-dimension. When I create this chart the dropdown is like:
Bâle, A1
Bâle, A2
...
Bâle, N2
And I would like something more like:
Bâle
A1
A2
...
N2
Zürich
A1
...
N2
Thanks for your answer !!
I'll answer just question number 2, since I know the answer to that one.
dc.js does not provide an option to disable the click behavior for the row chart. However, in this case you can just override the handler:
rowChart.onClick = function() {};
The greatest strength of dc.js is also its greatest weakness: there have been a lot of contributors, which means the library has a ton of features. However, the interface may not always be consistent. In this case, many of the charts can have filtering disabled by calling .brushOn(false) - but not the row chart!
At the same time, dc.js is designed with an open architecture and there is almost always a way to workaround or patch in extra features.
Related
I am aiming to create a d3.js visualisation dashboard that shows the flow of mutual connections based on a selection for 'a', that provides a statistic for 'b', shaped like a Sankey/Parallel Set. For instance, if 'a' is the user selection, where they select 3 of 11 characteristics of people, then b would be a count of how many people in our sample have all three characteristics.
Think of this like a Sankey/Parallel Set diagram where on the left we see the characteristics (Happy, Loyal, Calm), flowing into one container (200/1000 (with characteristics selected/total population).
I am wondering if anyone knows a pre-established way to JUST displays the crossover that the user defines in a navbar pre-selection.
Thanks.
Data:
![It's a boolean array, with totals. It's like a permutations and combinations spreadsheet
]1
try this for a variety of sankey's,
https://observablehq.com/search?query=sankey
So if you're looking to make a crossover slankey like me, I recommend modelling here:
http://sankeymatic.com/build/
Once you get into it, it's very easy to label what the final node should be, and encourage output to flow to that node.
Hope this helps!
I am trying to convert d3v3 Stacked bar chart with tooltips (http://bl.ocks.org/mstanaland/6100713) into d3v4. After many attempts still unable to get the chart running in d3v4.
Currently I have issue in changing below d3v3 code snippet to d4v3 code. Can anyone help me on this.
// Transpose the data into layers
var dataset = d3.layout.stack()(["redDelicious", "mcintosh", "oranges", "pears"].map(function(fruit) {
return data.map(function(d) {
return {x: parse(d.year), y: +d[fruit]};
});
}));
Below are part of the links refereed for this task.
https://github.com/d3/d3/blob/master/CHANGES.md, https://github.com/d3/d3-shape/issues/93, {d3.js} migration v3 to v4: code work on v3 (d3.layout.stack()) error v4 (d3.stack())
I would personally base any chart of Mike Bostock when you're making new charts if you're not familiar with d3.
I based it of this example
And here's my result taking the data from your example (I assumed you want your data to be hardcoded) Including the tooltip as well.
Plunker
Only real change I had to make was this:
.text(d[1] - d[0]);
In the tooltip mousemove event, take a look through the changelog as well for further version conversion in the future.
Newbie here.I am trying to build a horizontal calendar to indicate people on vacations. I have placed the mockup below with annotation of key feature, I'm trying to incorporate.
Legend Y - Indicates the person
Legend X - Indicates the Month and year.
Each cell is color coded based on holiday or vacation or weekend.
The calendar part (not including legend area) should be draggable.
I have got rough implementation going...I am able to get the first horizontal calendar,
Code: http://jsbin.com/xumabavo/1/edit
Is my approach correct?
how to stack each other?
How to enable dragging and render dates before and after the window?
Thanks for helping out.
Is my approach correct?
Yes. Mockup is crucial. Prototype as well. It looks to me that you have confidence, determination, and intelligence necessary for this project.
How to stack each other?
I gather you will get overall data as an array of individual data specific for particular person. You can use index of that array (index corresponds to a person) to shift all visual elements to the appropriate row - in other words, to stack the data. Callback functions can have two parameters d (data) and i (index), something like this:
.style( "background-color", function( d, i ) {
// d is datum being rendered
// i is datum's index in dataset
// return value based on logic
} )
How to enable dragging and render dates before and after the window?
It seems to me you would benefit from analyzing this small app: link
I have a set of data for dates. What value should I provide the X axis values? How do I make Rickshaw display the X data values as dates?
I looked around the docs and examples and cannot find anything.
I've just started using Rickshaw and was in the exact situation.
But, before I go any further, Rickshaw documentation is virtually nonexistent which is very upsetting because the performance of Rickshaw compared to other JS graphing libraries is outstanding.
The best way to find examples is to dig into the source code and example code on their github page try to make sense of things (not the way documentation should be).
That being said, let's try and build a strong base of questions/answers here on StackOverflow!
So, back to the question :) It looks like you've already found your own solution to the question, but I'll provide my solution as well.
Rather than using Rickshaw.Graph.Axis.Time, I've used Rickshaw.Graph.Axis.X and set the tickFormat accordingly.
var data = [ { x: TIME_SINCE_EPOCH_IN_SECONDS, y: VALUE },
{ x: NEXT_TIME_SINCE_EPOCH_IN_SECONDS, y: NEXT_VALUE } ]
var xAxis = new Rickshaw.Graph.Axis.X({
graph: graph,
tickFormat: function(x){
return new Date(x * 1000).toLocaleTimeString();
}
})
xAxis.render();
toLocaleTimeString() can be any of the Javascript date functions, such as toLocaleString(), toLocaleDateString(), toTimeString(), or toUTCString(). Obviously, because the tickFormat takes a function as an argument one can supply their own formatter.
Koliber, I'd be interested to understand your answer if you could provide more detail as well.
Additional to Lars' reply, I found by default Rickshaw is calling
.toUTCString(x.value*1000) //(just ctrl+F to find where =) ).
In my case, I saw different time label on X between Graphite and Rickshaw for this reason, and it works beautifully once I changed it to
.toLocaleString(x.value*1000).
Plus, you may need modify this in two places : Rickshaw.Graph.Axis.Time and the ...HoverDetails
I have finally figured out that the X axis values should be epoch time values. Then, using the code from the examples I was able to show a proper time scale.
I still have a problem because I would like to show the tick marks on weeks on the X axis. However, setting timeUnit to 'week' causes JavaScript errors. It works with other time units though.
None of this worked for me. What worked with angularjs was:
'x' : d3.time.format.iso.parse(date).getTime(), 'y' : 10
I have a chart here: http://jsfiddle.net/wergeld/bx82z/
What I need is for the stacked bars and the scatter points to line up on each other based on the data X-element (county name in this case).
Getting the bars to stack was simple. But as you can see in the example the scatter points show up in the middle of the chart - not on the same x-value as the others.
I suppose I could create a category list (using the county names) but there may be cases where I do not have all 3 data elements for all counties - how to handle that scenario?
I did great the category axis and it is still doing the same thing: http://jsfiddle.net/wergeld/YckwW/
You were not defining the series correctly to achieve what you were wanting. See updated jsfiddle for what I think you are looking for.
In the cases where you are missing a piece of data for one of the countries you could always use null, which simply means there is nothing to display for that data point. See Missing Data Sample for an example. It is case sensitive so make sure that null is all lower case.