Kelly Egan

@kellyegan·10 public vizzes

D3 Bar chart

This example displays a horizontal bar chart of United Nations population estimates for 2020, using React to manage state and render SVG rectangles. The code loads CSV data via `d3.csv`, then maps country names to a `scaleBand` y-axis and population values to a `scaleLinear` x-axis. Each bar’s width is set by the scaled population, with heights determined by `yScale.bandwidth()`. The chart updates once data arrives, showing a loading message until then.

Apr 1, 2021

Loading thumbnail…

D3 Bar chart

This example shows a D3 bar chart that renders United Nations population data from 2019, loaded from a CSV file hosted on GitHub. The visualization is built using React and D3 v5, with the chart embedded inside a React component. The code uses `d3.csv` to fetch the dataset and renders the visualization within the React DOM, leveraging React’s component structure for the user interface. The example demonstrates an integration of D3’s data handling capabilities with React’s declarative rendering, though the initial state displays a placeholder message instead of the chart.

Apr 1, 2021

Loading thumbnail…

CSS color visualization

This visualization displays all CSS color names as a pie chart, with each slice colored by its corresponding hex value. The chart is generated in React using d3.v6's pie layout and arc generators to compute the slice geometries. Data is fetched from a Google Sheets CSV, and the resulting SVG renders each path with a fill color taken directly from the spreadsheet’s "Hex value" column. The code relies on React state and effects to load the remote dataset asynchronously.

Mar 24, 2021

Loading thumbnail…

Parsing CSV data with D3

This example demonstrates the D3.js `d3.csv` API for fetching and parsing remote CSV data, presenting a summary of the dataset as large right-aligned text. It loads a Google Sheets CSV export and reports the row count, column count, and formatted data size in kilobytes. The visualization uses promises and the `d3.csvFormat` function to calculate the data’s total size, with the result displayed inside a `pre` element via JavaScript DOM manipulation. An alternative commented-out approach using `d3.csvParse` and `fetch` is also included for comparison.

Mar 24, 2021

Loading thumbnail…

Vega-Lite API

This example demonstrates a scatter plot of automobile data, showing the relationship between miles per gallon and horsepower, with tooltips displaying vehicle names. The visualization is built using the vega-lite-api library, which provides a fluent JavaScript interface for the Vega-Lite grammar. The code registers Vega and Vega-Lite, loads the auto-mpg dataset from a CSV file via d3.csv, and renders the plot as a scalable vector graphic. The visualization fills the entire browser window and employs a dark-themed configuration to enhance readability, with a low opacity mark size for improved depth perception.

Mar 22, 2021

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork! Fork! Fork!

This example displays a message summarizing a remotely loaded CSV dataset, showing the row count, column count, and approximate file size in kilobytes. It uses React hooks (`useState`, `useEffect`) to manage data loading and rendering, while `d3.csv` fetches the spreadsheet from a Google Docs URL. The `message` helper builds the text output using `data.length`, `data.columns`, and `d3.csvFormat` to measure the string length. The visualization is minimal, rendering the summary in a large `<pre>` tag with no chart or graphical encoding.

Mar 22, 2021

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Hello HTML

A single orange circle follows the cursor across an SVG canvas, responding to mouse movements in real time. The visualization demonstrates a React component managing mouse position state through the `useState` and `useCallback` hooks, while D3’s `arc` import is declared but unused. Rendering relies on ReactDOM to inject the SVG into the DOM, with the circle’s coordinates updated directly from `clientX` and `clientY` events. The example shows a minimal integration of React and D3 for interactive, event-driven graphics.

Mar 22, 2021

Loading thumbnail…

Loading CSV data

This example demonstrates how to fetch a CSV file from a Google Sheets public URL and log its contents to the browser console. The code uses native JavaScript `fetch()` and `async`/`await` syntax to retrieve the text, avoiding external libraries. It features a simple HTML page with a centered "Hello CSV Fetch" heading and large font styling. The data source is a Google Sheets CSV export endpoint, and the fetched text is printed via `console.log()`. Two commented-out alternative promise-based approaches are also shown, though the active implementation is the async/await version.

Mar 16, 2021

Loading thumbnail…

Fork of Fork of Hello HTML

A grid of eighteen smiling cartoon faces fills the screen, each rendered with randomized facial features. The faces are built from React components that compose SVG circles for the head and eyes and a D3 arc path for the mouth. D3’s `range` generates the face count, while `Math.random` varies eye offset, eye radius, and mouth dimensions per face. The code relies on ReactDOM to mount the components and D3 v6’s `arc` generator to define the mouth shape.

Mar 15, 2021

Loading thumbnail…

Fork of Hello HTML

This interactive web page uses React and D3 to render a simple, stylized face as an SVG graphic. It displays a yellow circle with a black outline, two black circular eyes, a red elliptical tongue, and a black mouth arc. The code calculates the layout using D3’s `arc` function and applies a mask to shape the tongue, with all elements positioned relative to the center of the canvas.

Mar 12, 2021