erahma

@erahma·4 public vizzes

Cars Report

This example shows a minimal React-based report that displays the make of the first car in a static JSON dataset. The page renders the text “Honda” in a large `<pre>` element alongside an empty `#root` div. The data, defined in `cars.js` as a parsed JSON array of car objects, is imported into `index.js` and accessed directly to populate the message. React is used for the component structure, though no visible React components are rendered, and the visualization relies purely on DOM text manipulation.

May 23, 2020

Loading thumbnail…

Untitled

This example displays a world map with cities whose populations exceed 50,000, using circles sized by population via a square-root scale. It renders country boundaries and graticules using `d3.geoPath` with TopoJSON data from World Atlas, while city locations come from the Simplemaps World Cities Database. The React app uses `useWorldAtlas` and `useCities` custom hooks to load data, then passes a size scale and value accessor to a `Marks` component that draws the SVG output.

May 23, 2020

Loading thumbnail…

Cars Report

This example renders a static report page with a simple header message. The app uses React to mount a single component that displays the text “Hello React!” inside a styled div, while a separate `<pre>` element remains empty. The ReactDOM.render API binds the component to the root element, and the page loads through a bundled JavaScript file. No data processing, interaction, or charting libraries appear in the code, as the visualization consists solely of this minimal text output.

May 23, 2020

Loading thumbnail…

Sized Points on a Map

This example displays cities with populations over 50,000 as sized points on a world map, using a square-root scale to encode population by circle radius. The map renders with the `geoNaturalEarth1` projection and `geoPath` in React, showing graticules and country boundaries from World Atlas TopoJSON. City data comes from Simplemaps via CSV, loaded with `d3.csv`. Circles are drawn with SVG, styled with a teal fill and 0.3 opacity.

May 23, 2020