gzm17

@gzm17·6 public vizzes

Fork of Migrant Deaths Linked Views with Fast Brushing

This visualization combines a world map of migrant deaths with a time-series histogram, enabling linked brushing to filter events by date. The map uses a natural Earth projection with scaled circles, while the histogram aggregates monthly death tolls. Built with React and D3 v5, it employs `d3.geoNaturalEarth1`, `geoPath`, `scaleSqrt`, `brushX`, and reusable components. Data comes from the Missing Migrants Project CSV, with country boundaries from World Atlas TopoJSON.

Jun 17, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents an interactive scatter plot of the Auto MPG dataset, using circle marks to show the relationship between miles per gallon and horsepower. Point color encodes the country of origin, while size maps to vehicle weight. Built with the Vega-Lite API, the visualization loads data via D3’s `csv` function and renders to SVG. The code configures the chart’s dimensions and appearance through a custom config object, and tooltips are enabled via the Vega Tooltip handler.

Jun 14, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 and the Fetch API. It fetches a list of CSS named colors from a GitHub Gist and displays a summary of that dataset: the file size in kilobytes, the number of rows, and the number of columns. The code highlights two approaches: using `d3.csv` to fetch and parse directly, and an alternative method that uses `fetch` with `async`/`await` alongside `d3.csvParse`. A commented-out section shows an older "pyramid of doom" pattern. The results are rendered as large text in an HTML `<pre>` element, with a font size set via CSS.

Jun 13, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a yellow smiley face that fills the browser window, using React components to structure the SVG elements and D3’s `arc` generator to create the mouth shape. The face is centered via a D3 `arc` path with specified inner and outer radii and angles, while the eyes and head are plain `<circle>` elements. The code imports `arc` from `d3` and uses `ReactDOM.render` with SVG attributes like `stroke-width` and `transform` applied declaratively. The visualization is responsive, with dimensions based on `window.innerWidth` and `window.innerHeight`.

Jun 12, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

This example displays a static smiley face constructed from SVG circles: a large yellow head with a black outline and two smaller black circles for eyes. The code uses React and ReactDOM to manage the page, while the face itself is drawn directly in the markup. The rendering relies on SVG primitives within a fixed 960-by-500 viewport, with coordinates placed to center the head and position the eyes symmetrically. The project shows a foundational step toward a more complex face, with only the head and eyes present so far.

Jun 12, 2022

Loading thumbnail…

Fork of Hello HTML

This example shows a simple yellow circle with two black eyes rendered as an SVG face on a 960-by-500 canvas. The static drawing is built directly with SVG `circle` elements, while React 16.7.0 is loaded from unpkg and logged to the console, demonstrating a minimal integration of the library with plain HTML. No interactive behavior or data binding is implemented.

Jun 12, 2022