KenGondor

@KenGondor·3 public vizzes

Loading Data with D3 and React

This example shows a bar chart of the top 10 most populous countries for 2020, ranked by population, rendered as SVG in a React component. It demonstrates loading external CSV data with `d3.csv` in a React hook, then mapping that data to `scaleBand` and `scaleLinear` axes. Custom React components `AxisX` and `AxisY` programmatically draw ticks and labels using D3's scale methods, while bars are plain `<rect>` elements sized by the scales. The data originates from a UN population dataset hosted on GitHub.

May 7, 2021

Loading thumbnail…

CSV

This example demonstrates a bare-bones CSV parsing workflow using D3 v6. It fetches a remote text file containing CSS color data from a GitHub gist, then parses it with `d3.csvParse` to produce a JavaScript array of objects. The parsed data is logged to the browser console, while the container element remains empty, as the code does not yet render any visualization. The page itself is a minimal HTML document that loads D3 from a CDN and relies on the native Fetch API to retrieve the external data source.

May 6, 2021

Loading thumbnail…

D3

A cartoon yellow face is rendered as a reusable React component, assembled from separate SVG parts for its background circle, eyes, and mouth. The code builds each facial feature as an independent React component, then composes them in an `App` component using a `FaceContainer` that centers the drawing within an SVG canvas. The mouth uses the D3 `arc` generator to create a U-shaped smile, while the eyes are simple circles offset from the center, and the face’s dimensions are calculated from the viewport height. All drawing occurs via SVG within a React framework, with D3 v6 providing the arc path calculation.

May 6, 2021