Pie Charts are really easy to make with d3plus. The data only needs to have .id() and .size() values. In general, it operates very similar to tree maps, including data nesting and grouping.
Featured on D3plus.org
By using the .aggs( ) method, the aggregation method of different variables can be modified. In this example, the aggregation method for the "value" key is changed to "mean" (the default is "sum").
In addition to supporting all of the standard D3 array comparators, this method also accepts custom functions.
Featured on D3plus.org
From the D3 documentation:
Enclosure diagrams use containment (nesting) to represent the hierarchy. The size of each leaf node’s circle reveals a quantitative dimension of each data point. The enclosing circles show the approximate cumulative size of each subtree, but note that because of wasted space there is some distortion between levels; only the leaf nodes can be compared accurately. Although circle packing does not use space as efficiently as a treemap, the “wasted” space more prominently reveals the hierarchy.
Featured on D3plus.org
davelandry
/ README.md
Last active
August 22, 2016 15:24
Adding Static HTML Content to Large Tooltips
It is possible to add custom HTML content to large tooltips by passing an HTML-formatted string to the "html" key in .tooltip( ). In this example, a custom link to Google.com is inserted into the large tooltip that appears when clicking on a square in the Tree Map.
Featured on D3plus.org
Sometimes, data may already have inherit color values that you may wish to use.
In this example, we pass an attribute list to .attrs( ) and tell the .color( ) method to use the "hex" key for the color value. Attribute lists are beneficial when you have attributal data that matches to multiple data points, in this case each year's value has the same color.
Additionally, when a custom Color Parameters is defined, a Legend will display that shows each color group.
Featured on D3plus.org
Every method can be modified at any time after the initial drawing of a visualization.
In this example, after waiting 2 seconds, a new node and edge is added to the respective array variables, passed again to the .nodes( ) and .edges( ) methods, and the visualization is finally redrawn by calling the .draw( ) method once more.
Featured on D3plus.org
By default D3plus tries to print numbers and text in a clean, consistent way. Sometimes, customization may be required that is outside of this basic formatting.
The .format( ) method provides access to override the default "text" and "number" formatting functions. Each function gets passed both the value being formatted, and the key (if applicable) associated with that value.
In this example, the label "usd" is being changed to "Trade Value" and all values are being prefixed with "$" and suffixed with "USD". Hover over one of the Tree Map squares to see the modified output.
Featured on D3plus.org
D3plus Forms support nesting just like Visualizations.
Featured on D3plus.org
Using d3plus.color.text provides the ability to dynamically assign a text color (either light or dark) depending on a background color.
Featured on D3plus.org
Using d3plus.textwrap, SVG <text> elements can be broken into separate <tspan> lines, as HTML does with <div> elements. In this example, the first column shows normal wrapped text, the second column shows text that is resized to fill the available space, and the third column shows the default SVG behavior.
D3plus automatically detects if there is a <rect> or <circle> element placed directly before the <text> container element in DOM, and uses that element's shape and dimensions to wrap the text. If it can't find one, or that behavior needs to be overridden, they can manually be specified using .shape( ), .width( ), and .height( ).
Featured on D3plus.org