davidelowe

@davidelowe·4 public vizzes

Fork of Fork of Loading Data with React_DL

A React application loads a CSV of CSS named colors from a GitHub gist using D3’s `csv` utility, then renders each color as a semicircular SVG path with `d3.arc`. The component uses React state and hooks (`useState`, `useEffect`) to display a loading message until the data arrives. Once loaded, the color swatches form a large fan-like shape, with fill colors taken directly from the hex values in the dataset.

Mar 18, 2021

Loading thumbnail…

Fork of Loading Data with React_DL

This example demonstrates loading a CSV dataset of CSS named colors using D3’s `csv` utility, then rendering each color as a horizontal strip in a stacked bar-like layout via React state and `useEffect`. The visualization appears only after the data is fetched, with a loading message shown beforehand. The code uses React 16.9, ReactDOM, and D3 v5, pulling from a GitHub-hosted CSV file and mapping each row’s RGB hex value to a styled `<div>`.

Mar 18, 2021

Loading thumbnail…

Fork of Vega-Lite API_DL

This scatterplot visualizes the relationship between engine displacement and horsepower for individual car models, colored by their country of origin. Data comes from the auto-mpg dataset fetched via d3’s `csv` utility. Using the Vega-Lite API, the chart encodes quantitative fields on x and y axes with a circle mark, while categorical origin color uses a custom range. Custom axes styling and a tooltip display attributes like mpg and model name.

Mar 10, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I_DL20210228

A static SVG face built with two concentric circles forms the head, with a large lightblue circle outlined in black and two smaller pink circles as eyes. The example uses raw SVG elements—`<circle>` with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes—rather than a JavaScript library. The face is centered on a 960×500 canvas, with the head radius set to 245 and eyes positioned symmetrically at x-coordinates 350 and 600. The rendering relies entirely on hardcoded attribute values, with no interaction or animation.

Feb 28, 2021