I am using the pack layout for packing different no of equal sized circles. I have a group of clusters to be visualized. So I am calling pack function for each cluster of circles. In all the d3 examples the diameter is either calculated with the given size or fixed diameter. I would like to calculate it according to the no of circles to be packed. So how do I calculate the packing circle diameter?
is there any formula so that I can pack the circles without wasting the space.
If you truly don't care about relative sizing of the circles, then you could make your JSON file represent only the data you care about(say, names) and feed your packing function a dummy value that the 'value' accessor function is expecting.
For instance:
var circleChildren = [{
"value": 1
}, {
"value": 1
}, {
"value": 1
}, {
"value": 1
}];
would give you a JSON object that you can use as children for your packing function:
var circleInput = Object();
circleInput.children = circleChildren;
You can verify that in your console by running:
bubble.nodes(circleInput)
.filter(function (d) {
return !d.children; //we're flattening the 'parent-child' node structure
})
where bubble is your D3 packing bubble variable.
Here's a fiddle that demonstrates that. It may have some extra things but it implements what you're looking for. In addition, you can play around with the number of circles by adding more dummies in the JSON file, as well as changing the SVG container size in the diameter variable. Hope that helps!
EDIT: The size of your layout(in this case, a misnomer of the 'diameter' variable) directly determines the size and diameter of your circles within. At some point you have to assign the pack.size() or pack.radius() value in order for your circles to display within a layout(documentation ):
If size is specified, sets the available layout size to the specified two-element array of numbers representing x and y. If size is not specified, returns the current size, which defaults to 1×1.
Here you have several options:
If you want your circles to be 'dynamically' sized to your available element's width (that is, if you want them to cover up all the element width available) then I'd recommend you get your element's width beforehand, and then apply in your pack() function. The problem is then you have to think about resizing, etc.
If you want to keep the maximum sizing available, then you have to make your viz responsive. There's a really good question already in SO that deals with that.
I know this isn't the full solution but hopefully that points you in the right direction for what you're trying to do.
FURTHER EDIT:
All of a sudden, another idea came to mind. Kind of an implementation of my previous suggestion, but this would ensure you're using the maximum space available at the time for your circle drawing:
zone = d3.select("#myDiv");
myWidth = zone.style("width").substring(0, zone.style("width").length - 2);
Related
I am very new to D3. I have a large JSON array that I am pulling into D3 via AJAX to make bar graphs. The array is used to generate multiple slides in a Bootstrap carousel, where each slide is an element of the array (i below) with corresponding sub elements. I have run into issues setting up x and y scale's by extracting directly from this large array so I have put the necessary values in separate arrays (although this obviously has not solved the problem yet).
These arrays, which are the same length as the number of slides, are maxDefectCounts() and numberOfBars(). Note, they are not associative arrays/JSON, they are data that I have extracted from the JSON.
I would like the height of the largest bar in each slide to be equal to maxDefectCounts[i] where i is the current slide. I would like the width of the bar to be numberOfBars[i] / width of SVG that the bar chart is bound to.
For the y-scale I have tried the following with no luck. I'm not sure if you can bind a separate data element to a scale function (note that I am using j instead of I in the function below so as not to be confused with i, which is the slide number)
var y = d3.scale.linear()
.range([height,0])
.data(maxDefectCounts)
.enter()
.domain([0,function(d,j){return d[j];}]);
For width what I am currently doing is iterating through the different bars in d.binSummary and using a fixed value of barWidth (this is for testing). Since each slide has a different number of bars, I would like this to be proportional to numberOfBars[i] instead of this fixed value
var bar = paretoBox.selectAll("g")
.data(function(d) {return d.binSummary;})
.enter()
.append("g")
.attr("transform",function(d,j) {
return "translate(" + j * barWidth + ",0)";
});
Any advice would be much appreciated, thank you in advance.
I identified a workaround. Since independent values are needed for each slide, I built a loop that takes the original JSON as an input and builds a slide for each element. This allows the extraction of the needed information. A similar approach is used here with regard to building multiple charts with a single input array.
I have some geoJson data that I am charting using d3.geo.
When I write something like
d3.select("svg")
...
.attr("d", function(d) {
return path({
type:"MultiPoint",
coordinates: get_activity_coords_(d.activities)
});
})
I always get a circle for each coordinate. The coordinates represent locations of various stopping points of a journey. What I would prefer is a different shape for the first and the last coordinate.
Is it possible to do this using MultiPoint, is there an example that I can follow? I could draw the points one by one, but I recall reading that MultiPoint is far faster. Plus, the code would be much clearer to read.
Thanks a lot.
You can't do different shapes for MultiPoint geoJSON with d3.geo.path. You can change the radius based on a function, but it looks like you can only set it per feature and not per point, so you'd have to break your set of points into multiple features and lose any performance benefit from using the single element.
However, there are other ways to go about doing this.
One option, as you mentioned, is to create a nested selection with a separate <path> element for each point, and draw each path using a d3.svg.symbol() function. You can then customize the symbol function to be based on data or index.
var trips = d3.select("svg").selectAll("g.trips")
.data(/*The data you were currently using for each path,
now gets to a group of paths */)
.attr("class", "trips");
//also set any other properties for the each trip as a whole
var pointSymbol = d3.svg.symbol().type(function(d,i){
if (i === 0)
//this is the first point within its groups
return "cross";
if ( this === this.parentNode.querySelector("path:last-of-type") )
//this is the last point within its group
return "square";
//else:
return "circle";
});
var points = trips.selectAll("path")
.data(function(d) {
return get_activity_coords_(d.activities);
//return the array of point objects
})
.attr("transform", function(d){
/* calculate the position of the point using
your projection function directly */
})
.attr("d", pointSymbol);
Another option, which allows you to set custom shapes for the first and last point (but all intermediary points would be the same) is to connect the points as the vertices of a single, invisible <path> element and use line markers to draw the point symbols.
Your approach would be:
Create a <defs> element within your SVG (either hard-coded or dynamically with d3), and define the start, middle and end marker points within them. (You can use d3.svg.symbol() functions to draw the paths, or make your own, or use images, it's up to you.)
Use a d3.svg.line() function to create the path's "d" attribute based on your array of point coordinates; the x and y accessor functions for the line should use the projection function that you're using for the map to get the x/y position from the coordinates of that point. To avoid calculating the projection twice, you can save the projected coordinates in the data object:
var multipointLine = d3.svg.line()
.x(function(d,i) {
d.projectedCoords = projection(d);
return d.projectedCoords[0];
})
.y(function(d){ return d.projectedCoords[1];});
(You can't use your d3.geo.path() function to draw the lines as a map feature, because it will break the line into curves to match the curves of longitude and latitude lines in your map projection; to get the line markers to work, the path needs to be just a simple straight-line connection between points.)
Set the style on that path to be no stroke and no fill, so the line itself doesn't show up, but then set the marker-start, marker-mid and marker-end properties on the line to reference the id values of the correct marker element.
To get you started, here's an example using d3 to dynamically-generate line markers:
Is it possible to use d3.svg.symbol along with svg.marker
I want to set a minimum height on a stacked bar so that it always shows no matter how small the value.
Example:
If the stacked values are relatively close, the bars show no problem:
http://i41.tinypic.com/b88rc6.png
But if the values differ by a lot, then the smaller bar is not visible on the graph:
http://i40.tinypic.com/15rxwz6.png
I tried reading through the docs but didn't find any options for this. Help is appreciated!
Try to assing the smaller values to an other yaxis, so the graph will show 2 different yaxes, the first with a big interval, the second with an interval that permits to show correctly the smaller values (if you want to show the difference between the two kind of data, you could use min and max on the smaller yaxis).
axes: { [...], yaxes: { -big values- }, y2axes: { -small values-, min: -10, max: 10 }}
Don't know if that answer would be useful to you.
I've been able to build a Force Directed Graph using a Force Layout. Most features work great but the one big issue I'm having is that, on starting the layout, it bounces all over the page (in and out of the canvas boundary) before settling to its location on the canvas.
I've tried using alpha to control it but it doesn't seem to work:
// Create a force layout and bind Nodes and Links
var force = d3.layout.force()
.charge(-1000)
.nodes(nodeSet)
.links(linkSet)
.size([width/8, height/10])
.linkDistance( function(d) { if (width < height) { return width*1/3; } else { return height*1/3 } } ) // Controls edge length
.on("tick", tick)
.alpha(-5) // <---------------- HERE
.start();
Does anyone know how to properly control the entry of a Force Layout into its SVG canvas?
I wouldn't mind the graph floating in and settling slowly but the insane bounce of the entire graph isn't appealing, at all.
BTW, the Force Directed Graph example can be found at: http://bl.ocks.org/Guerino1/2879486enter link description here
Thanks for any help you can offer!
The nodes are initialized with a random position. From the documentation: "If you do not initialize the positions manually, the force layout will initialize them randomly, resulting in somewhat unpredictable behavior." You can see it in the source code:
// initialize node position based on first neighbor
function position(dimension, size) {
...
return Math.random() * size;
They will be inside the canvas boundary, but they can be pushed outside by the force. You have many solutions:
The nodes can be constrained inside the canvas: http://bl.ocks.org/mbostock/1129492
Try more charge strength and shorter links, or more friction, so the nodes will tend to bounce less
You can run the simulation without animating the nodes, only showing the end result http://bl.ocks.org/mbostock/1667139
You can initialize the nodes position https://github.com/mbostock/d3/wiki/Force-Layout#wiki-nodes (but if you place them all on the center, the repulsion will be huge and the graph will explode still more):
.
var n = nodes.length; nodes.forEach(function(d, i) {
d.x = d.y = width / n * i; });
I have been thinking about this problem too and this is the solution I came up with. I used nodejs to run the force layout tick offline and save the resulting nodes data to a json file.
I used that as the new json file for the layout. I'm not really sure it works better to be honest. I would like hear about any solutions you find.
I'm working with Graphviz API, Visual C++. Before I call gvLayout to calculate node coordinates, I have to set node width and height (for each node in the graph). The problem is, ND_width and ND_height macro approach, just does not seem to have affect, while setting same values with agsafeset works as expected. I just don't want to use string-based APIs like agsafeset, because I'm processing bunch of nodes in a loop, and prefer to set width and height values with ND_width(pNode) and ND_height(pNode) (or directly as pNode->u.width and pNode->u.height). What am I doing wrong?
Following code does not work (does not have any effect):
const DWORD dwPixelsPerInch = 96;
ND_width(pGvzNode) = (double)dwWidthInPixels / dwPixelsPerInch;
ND_height(pGvzNode) = (double)dwHeightInPixels / dwPixelsPerInch;
While following code works:
CStringA csaValue;
csaValue.Format("%f", (double)dwWidthInPixels / dwPixelsPerInch);
agsafeset(pGvzNode, "width", csaValue.GetBuffer(), "");
csaValue.Format("%f", (double)dwHeightInPixels / dwPixelsPerInch);
agsafeset(pGvzNode, "height", csaValue.GetBuffer(), "");
P.S.: I use Graphviz solely for layout, I do custom rendering, so all I need is calculation of nodes' and edges' coordinates (in pixels) given nodes' width and height (in pixels). I'm setting these values just before calling gvLayout (for "dot"). I'm setting agsafeset(pGvzNode, "fixedsize", "1", "") as well.
agsafeset sets the node attributes, which are used by gvLayout to calculate the layout information, while ND_width and ND_height are used to get the layout size. Before gvLayout is called, the ND_width and ND_height can set the values, but the values you have set will be overwritten by gvLayout. So you must use agsafeset, the ND_width and ND_height cannot work.