davelandry

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

davelandry

When passing the .id( ) method an array instead of a single key, the Tree Map visualization will group squares based on the keys (and order) you pass it in the array.

The values of the new grouped squares are averaged, by default. This aggregation can be changed using the .aggs( ) method.

When clicking on a grouped square, the visusalization will automatically zoom into that group, showing the items within it. This feature can be toggled using the .zoom( ) method.

Featured on D3plus.org

davelandry

The Stacked Area chart is a variation of the Chart Visualization with values drawn as areas stacked on top of one another with a continuous x-axis. This visualization allows a quick assessment of how the data breaks up by share of the whole over a specified variable, most commonly "time".

Featured on D3plus.org

davelandry

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

davelandry

When passing the .color( ) method a key, D3plus will map the associated values to a color scale, and display that scale on the bottom of the visualization.

The legend for the color scale can be hidden by toggling the .legend( ) method.

Featured on D3plus.org

davelandry

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

An easy way to map data to locations around the world. The .id( ) key in your data must match the "id" key in the topojson that you import.

Featured on D3plus.org

davelandry

With the Network visualization, if Node Positions are not specified, D3plus will determine a layout that aims to reduce node and edge overlapping. This layout happens dynamically, on the fly, and you will see this if you refresh the page.

Featured on D3plus.org

davelandry

Tree Maps are a great way to show your dataset as shares of a whole. Unlike Pie Charts, which have a lot of unused white space along the edges of the visualization, Tree Maps allow for smaller data points to become much more visible because the visualization is allowed to take up the entirity of the screen space.

Featured on D3plus.org

davelandry

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