chipbrownlee

@chipbrownlee·4 public vizzes

Loading and Parsing CSV Data

This example demonstrates the process of loading and parsing CSV data using D3 v7 and the Fetch API. It fetches a CSV file containing CSS named colors from a GitHub gist, parses the raw text with `d3.csvParse`, and displays basic statistics about the dataset. The visualization shows three key metrics: the file size in kilobytes, the total number of rows, and the number of columns, all rendered in large text within a `<pre>` element. The code uses `fetch` with an async function and updates the DOM via `textContent` to present the parsed data summary.

Nov 16, 2021

Loading thumbnail…

Fork of Smiley for Mouse Follower

A single yellow circle follows the mouse cursor across an SVG canvas, using React state to track pointer position. The app renders a `<circle>` element whose `cx` and `cy` attributes update on every `mousemove` event via the `onMouseMove` handler, with coordinates stored in the `mousePosition` state. It uses React hooks `useState` and `useCallback` within a React functional component, rendering directly through `ReactDOM.render`. No external data or animation libraries are involved; interaction is purely event-driven.

Nov 16, 2021

Loading thumbnail…

Fork of Map of top-rated restaurants in Greater Boston

This map visualizes the distribution of top-rated restaurants (4 stars or above) across Greater Boston towns, using a sequential color scale from light to dark red to indicate counts. The choropleth map renders town boundaries with `d3.geoPath` and a `geoIdentity` projection, coloring polygons grey where no data exists. Hovering over a town displays its name and count in a styled tooltip. The data comes from the public Yelp dataset, processed with D3’s `csv` and `json` loaders, and the map supports zoom interactions via `d3.zoom`.

Nov 16, 2021

Loading thumbnail…

Hello HTML

The gallery displays a grid of 18 identical, cartoonish yellow faces with black outlines, each generated with randomized facial feature parameters. Built with React and rendered as SVG, the example uses D3’s `arc` generator to construct the mouth shape, while all other components—the background circle, eyes, and face container—are hand-coded React components. Each face’s stroke width, eye offset, eye radius, and mouth dimensions vary randomly, demonstrating how component-based composition with D3 utilities can produce varied visual output.

Nov 16, 2021