Garrett Siegel

@garrettsiegel·4 public vizzes

Rendering Data with React

This example visualizes CSS named colors as a radial pie chart, with each color represented by a slice of equal angular width. The visualization loads color data from a CSV file using the `csv` utility from D3 v5, then renders the chart as SVG paths using React components. React's `useState` and `useEffect` hooks manage the asynchronous data loading, while D3's `arc` generator computes each path’s geometry based on the data’s index. The chart displays the entire color spectrum arranged around a central point, with fill colors taken directly from the hex values in the dataset.

Jul 31, 2022

Loading thumbnail…

Tesla

This visualization displays Tesla call volume against strike price for a single Friday, using an area mark to emphasize the distribution. The chart is built with the Vega-Lite API, which composes the specification from chained methods like `markArea()` and `encode()`, and is rendered by the Vega-Lite and Vega libraries. Data is loaded asynchronously from a CSV via `d3.csv`, pulling from the UCI Auto MPG dataset. The visual styling is customized through a configuration object that disables axis domains and adjusts label fonts.

Jul 30, 2022

Loading thumbnail…

Vega-Lite API Fork

This example presents a scatter plot of IBM intraday trading volume, with each circle sized and colored to emphasize fluctuations over time. The visualization is built using the Vega-Lite API, which registers with Vega, Vega-Lite, and D3 v5 to render SVG output and tooltips. Data is loaded asynchronously from a CSV file via d3.csv, sourced from the UCI Machine Learning Repository’s Auto MPG dataset, though the code actually fetches IBM intraday data from a Gist. The chart auto-fits to the window size and applies custom axis and font styling from a configuration object.

Jul 10, 2022

Loading thumbnail…

SMILEY FACE DATA VIZ

A grid of smiley faces demonstrates randomized variation in facial features and color. Using React components for structure and D3.js for the mouth arc, the example maps random values to stroke width, eye size and placement, mouth radius and width, and HSL fill hue. Each of the 18 faces is generated with distinct parameters, showcasing modular SVG composition.

Jul 7, 2022