Tell us what works and what could be better. We read every submission.
@anotherjavadude·6 public vizzes
This example displays the same hierarchical JSON dataset as two different D3 layouts: a tree and a cluster. Users toggle between the two views using the "Tree" and "Cluster" buttons, which trigger an `update` function that rebuilds the visualization. The code uses `d3.layout.tree()` and `d3.layout.cluster()` to compute node positions, and `d3.svg.diagonal()` to draw curved links between parent and child nodes. Each node is rendered as a circle with a text label, and the SVG canvas is recreated on every layout change.
A simple tree diagram visualizes hierarchical JSON data, with red circular nodes connected by curved diagonal links. Hovering over a node reveals a tooltip displaying the node's name and its associated "info" attribute from the data. The visualization uses d3.layout.tree to compute node positions and d3.svg.diagonal for the link paths, with mouseover, mousemove, and mouseout events controlling the tooltip’s appearance and content.
This stacked bar chart displays five categories with three series each, using a simple matrix as its data source. The code relies on d3.layout.stack() to transform the raw matrix into stacked values, then renders rectangles via d3.scale.ordinal for x-positions, d3.scale.linear for heights, and a color scale for series. Console logs expose the matrix-to-stack transformation process, while SVG groups and rects are positioned with negative y-coordinates to build the upward stack from a baseline.
The visualization displays monthly casualties of the Crimean War, stacked by cause into three categories: wounds, other, and disease, using an ordinal x-axis for dates and a linear y-axis for counts. It reconstructs a classic Protovis example in D3 v2, employing the d3.layout.stack layout to transpose the CSV data into layers and render them as rect elements. Gridlines and date labels are generated via d3.scale.ordinal and d3.time.format, while the chart uses color-coded fills from d3.scale.ordinal.
This example demonstrates how SVG group elements organize and apply shared styling in a D3.js visualization. The code creates a 400-by-400 pixel SVG canvas using d3.select and appends a dark gray rectangle as background. A group (`svg:g`) is then added, containing an orange circle and a large text label, while a second, smaller white text element is appended directly to the canvas outside any group. The visualization relies on d3.v2’s SVG manipulation methods, including `append`, `attr`, and `style`, to show that group-level attributes affect all child elements, whereas ungrouped elements require individual property assignments.
This example shows a minimal hierarchical tree visualization of hardcoded parent-child data, with labeled circular nodes connected by curved diagonal links. The code uses `d3.layout.tree` to compute node positions and `d3.svg.diagonal` for the link paths, while rendering nodes and text as SVG circles and labels. The tree is laid out left-to-right with a 400×300 pixel canvas, and node labels alternate sides based on whether a node has children.