the-1000th-summer

@the-1000th-summer·8 public vizzes

Document

This visualization displays the track of Typhoon Haiyan across the western Pacific, with a red dashed line connecting recorded positions on a Mercator projection. The map includes graticules, land masses, and country boundaries rendered from TopoJSON data. The path is drawn using d3.svg.line with cardinal interpolation, while d3.geo.path projects geographic coordinates onto the SVG canvas. The typhoon’s intensity class is embedded in the source data but not visually encoded.

Aug 10, 2021

Loading thumbnail…

Fork of Polished World Map

This map shows country boundaries and graticules projected with d3.geoNaturalEarth1 and rendered as SVG paths via d3.geoPath. The visualization uses world-atlas TopoJSON data, with countries filled in teal and internal borders drawn as thin lines. A single red circle marks the coordinates (130, 20). The React component loads the data with d3.json and topojson.feature/mesh, while custom CSS styles the sphere, graticules, land, and interior strokes.

Jul 27, 2021

Loading thumbnail…

World Map

This example displays a world map using an equal Earth projection, with each country rendered as a filled SVG path and the surrounding sphere shown in light gray. The visualization loads GeoJSON data derived from the World Atlas TopoJSON dataset and passes it through d3.geoPath with a d3.geoEqualEarth projection. Built with React and D3 v5, the map uses SVG elements for crisp, scalable rendering.

Jul 27, 2021

Loading thumbnail…

Loading Data with React & d3

This example shows a color wheel built from CSS named colors, where each color is represented as a slice of a pie chart rendered as SVG. The visualization uses React’s `useState` and `useEffect` hooks to asynchronously load a CSV file via d3.csv, storing the fetched data in state before rendering. Each slice’s path is generated with d3.arc, mapping the data’s RGB hex values to fill colors. While data loads, a simple “Loading…” message appears. The code relies on React 16.9 and d3 v7.

Jul 27, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile horsepower across model years, with translucent circular marks and hover tooltips revealing vehicle names. Built with the Vega-Lite API, it loads data from the UCI Auto MPG dataset via d3.csv and renders the visualization as SVG using the vega-lite-api library. The plot encodes year on the x-axis, horsepower on the y-axis, and uses a custom config for axis styling and tooltip font size.

Jul 27, 2021

Loading thumbnail…

Loading and parsing csv data

This example demonstrates the process of loading and parsing CSV data by fetching a file of CSS named colors from a GitHub gist and reporting its size, row count, and column count. The visualization uses D3.js v7’s `d3.csv` method to retrieve and parse the remote data, then `d3.csvFormat` to measure the data’s character length. The resulting three-line summary is displayed in large text within an HTML `<pre>` element, showing basic data loading in a plain browser page.

Jul 27, 2021

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas. The React app tracks pointer movement via an `onMouseMove` event handler, updating the circle’s `cx` and `cy` attributes through `useState` and `useCallback`. No external data is used; the visualization demonstrates real-time, state-driven rendering with React 16.9 and SVG.

Jul 27, 2021

Loading thumbnail…

Fork of HTrter

A grid of 18 smiley faces renders in React, each with a yellow circular background, two eyes, and an arc-shaped mouth. The faces use the D3 `arc()` API to generate mouth paths and the `range()` generator to produce the array of face components. Built with React and D3 v7, the visualization outputs SVG via a reusable `Face` component that composes sub-components for the background, eyes, and mouth, with randomized eye radii giving each face a distinct expression.

Jul 26, 2021