i am new in d3.js and i am trying to make a pie chart but in the structure i got two append one is append(“svg : g”) and another one is append(“svg: svg”),i am bit confused.So what is the difference between in this two append method?
Related
I'd like to visualize how one variable in my dataset correlates with 13 other variables. Seaborn's PairGrid allows me to do this fairly easily, but the resulting figure ends up being a single row of graphs with 13 columns. For FacetGrid, there is a wrap_cols parameter that can be passed to make this type of plot look more attractive. Any suggestions for how to implement this column wrap with PairGrid?
The code I'm currently using to generate the 1x13 plot:
g = sns.PairGrid(dataframe, hue=classes, y_vars=var_of_interest, x_vars = list_of_13_covariates)
g.map(plt.scatter)
The PairGrid object does not have a col_wrap parameter.
See the docs here:
http://seaborn.pydata.org/generated/seaborn.PairGrid.html#seaborn.PairGrid
Still using DC.JS to get some analysis tools written for our tool performance. Thanks so much for having this library available.
I am trying to show which recipe setup times are the worst for a given set of data. Everything works great as long as you show the whole group. When you only display the specified topN using .rowscap on the rowChart the following happens:
The chart will show the right number of bars and they are even sorted properly but the chart has picked the topN unfiltered bars first and then ordered them. I want it to pick the topN from the ordered list, not the other way around. See jsfiddle for demo. (http://jsfiddle.net/za8ksj45/24/)
in the fiddle, the longest setup time belongs to recipeD.
But if you have more than two recipes selected before recipeD
it is dropped of the right (top2) chart.
line 099-110: reductio definition
line 120-140: removal of empty bins (works okay)
(This is very similar to a problem Gordon helped resolved earlier (dc.js rowChart topN without zeros) and I reused the code from that solution. Something went 'wrong' when I combined it with the reductio.js library.)
I think I am not returning the value portion of the reductio group somewhere but have been unable to figure it out. Any help would be appreciated.
The issue is that at the time you .slice(0,n) the group in your function to remove empty bins, the group is not ordered, so you effectively get a random 2 groups, not the top 2 groups. This is actually clear from the unfiltered view, as the "top2" view shows the 2nd and 3rd group from the "all" view, not the actual top 2 (at least for me).
The previous example worked because Crossfilter's standard groups are ordered by default, but in the case of a complex group like the one you are generating with Reductio, what should it order by? There's no way it can know, so Reductio doesn't mess with the ordering at all, which I suppose means it is ordering by the value property, which is an object.
You need to add one line to order your FactsByRecipe group by average and I think it should fix your problem:
FactsByRecipe.order(function(d) { return d.avg; });
Note that there can only be one ordering on a Crossfilter group, so if you want to show "top X" for more than one property of that group you'll need to create another wrapper (like the remove empty bins wrapper) but have the "top" function re-sort the group by the ordering you want.
Good luck!
They have been various discussions on how to use dc.js simply as graph library (eg. to draw a piechart, a barchart...) without needing crossfilter, for instance if you simply want to draw a single pie when the data is already a (label, value).
I didn't find any example of how to do that. Is this possible on the 2.0 branch? Will it work for every chart?
So the "normal" way is to define data(), but as this function is already defined internally from some charts, it doesn't work that well:
in http://github.com/dc-js/dc.js/issues/584
Details: the following charts use .data() internally:
Stack Mixin (thus Line and Bar) - filters and then does stack d3.layout.stack on the data Cap Mixin (thus Pie and Row) - optionally limits the number of bins, sorts the groups using the ordering, and optionally creates the "others" bin
Number Chart - looks to see if the group has a value() function (e.g. it's a group-all). Otherwise, takes the top value. Runs the valueAccessor on the result (!!!)
Box Plot - adds a mapping function to the data. Filters out values (which are themselves arrays) that are of length 0.
I have a D3 tree layout.There will be relation between any two nodes,based on this relation i want to show some connection between 2 nodes.Till now i was using circles.on onmouse circles of the 2 nodes will be in some specified color.circles were not covering images exaclty.so i applied transform but it disturbing some other functionalities.
my sole purpose is to show some connection between any two nodes using circles or something else.i tried applying circles using CSS3 but it didnt work
is there any way to achieve my requirement
If I am understanding you, there are different ways to achieve this, and this is only one.
Consider this:
function highlight() {
var selectedClass = d3.select(this).attr("class");
d3.selectAll("circle")
.style("fill",function(d) {
if ( selectedClass == d3.select(this).attr("class"))
return "magenta";
});
}
Assuming you have established the relationship between any given number of nodes (two or more) by assigning them the same class (perhaps a big assumption), then code like the one above can display such relationship. If you click on one of the nodes (this function is called by the node .on("click"...), the others will also display the desired change, illustrated here by a change in color. Does this help?
I have a line graph which is updated based on values chosen from two dropdown lists. The data is updated as per gist below. Everything is working perfectly and all data is being returned correctly but when try to apply this updated data to the existing line/path and update the graph - the line/path disappears and I get a parsing error. Know it is something to do with how I'm applying this new data to the line/path - can anyone help?
https://gist.github.com/Majella/202df0a4a5a3ad20fb92
I'm not quite sure if you'd like to (a) update the existing line with new data, or (b) keep the existing line and add a second line with the new data.
For (a), you would need to re-join newdata to the original line and then redraw it. This can be achieved with a simple redraw function where the function parameter is the dataset. You can see an implementation of this in Mike Bostock's General Update Pattern post or in an even simpler example I made to demonstrate this.
If (b), you would perform a data-join for the new data as you did for the first dataset, something like:
var data2 = svg.selectAll('.newData')
.data(newdata)
.enter().append('path')
.attr('class', 'newData)
.attr( "d", line(newdata));
And it would add a second line to the graph.