Tom

@rugbyTomBB·2 public vizzes

Stylized Bar Chart

This stylized bar chart displays the ten most populous countries using data from the United Nations World Population Prospects 2019. The visualization uses React components with D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendering SVG rectangles as bars. Axis ticks are generated manually with `xScale.ticks()` and formatted using `d3.format`. The chart includes a population axis label and uses a hover tooltip via the SVG `<title>` element to show exact values.

Jan 5, 2020

Loading thumbnail…

Untitled

This example demonstrates a force-directed graph visualization using D3's `d3.forceSimulation` and `d3.forceLink` to position nodes and links based on simulated physical forces. The code renders the network with SVG circles and lines, updating positions each tick. It loads data from a static JSON file containing nodes and edges, and implements basic drag interaction via D3's `d3.drag`. The visualization highlights how force layouts distribute connected elements to reveal community structure.

Jan 5, 2020