Sung Lee

@sunglee·2 public vizzes

Fork of Loading Data with React & D3

This example shows a vertical stack of colored horizontal bars representing CSS named colors from a CSV file, loaded via the `d3.csv` utility. The React `useState` and `useEffect` hooks manage the asynchronous data loading and trigger a re-render once the data arrives. Each row displays a bar with its background color set to the `RGB hex value` column. While the data loads, a simple "Loading..." message appears. The code uses React 16.9, D3 v5, and renders divs directly through `ReactDOM.render`.

Feb 28, 2021

Loading thumbnail…

D3 Starter

This example demonstrates a minimal bar chart template using D3, rendering four country population values as equal-sized squares. The SVG canvas is initialized with fixed dimensions, and the code loads data from a CSV file via `d3.csv`. Each rectangle is appended using the data join pattern (`.selectAll('rect').data(data).enter().append('rect')`), though all bars share the same 300×300 size. The visualization relies on D3 v6’s module imports, `select` and `csv`, to process the data and update the DOM without any scales or axes.

Feb 21, 2021