Lun

@CloudLun·2 public vizzes

Networking Graph

This visualization shows a force-directed network graph of countries, with each node representing a country and links connecting them. Node color and size encode five highlighted nations (Afghanistan, Myanmar, South Sudan, Syrian Arab Rep., and Venezuela), with a legend identifying each group. The code uses D3 v4’s `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes, while links are rendered as SVG lines with stroke width proportional to link weight. Rendering is done declaratively in React, with nodes as SVG circles and drag interactions enabled via `d3.drag`.

Apr 7, 2022

Loading thumbnail…

Making a barchart

This example shows a horizontal bar chart of population figures for nine countries, drawn as an SVG. The chart maps population values to bar widths using D3’s `scaleLinear` and countries to vertical bands with `scaleBand`, then renders the bars as `rect` elements. Data is loaded from a CSV file with `d3.csv`, with population values multiplied by 1000, and axes are omitted, focusing solely on the bar geometries. The bars are styled with a steelblue fill via CSS, and the SVG is sized at 960 by 500 pixels.

Mar 14, 2021