Toonysg

@Toonysg·5 public vizzes

Fork of Multiple Views Cleanup

This interactive visualization combines a world map of migration incidents with a time-series histogram. The map uses a natural Earth projection with graticules to display circles scaled by the total dead and missing, while the histogram below shows the same metric aggregated by month. Built with React and D3 v5, it uses `geoNaturalEarth1` and `geoPath` for the map, `scaleSqrt` for circle sizing, and `bin` with `timeMonths` for the histogram. Data comes from the Missing Migrants Global dataset.

Dec 24, 2021

Loading thumbnail…

Points on a Map

This example visualizes cities with populations over 50,000 as semi-transparent circles on a natural Earth projection. The map displays country boundaries, interiors, graticules, and a sphere outline, with circle size scaled by population using `d3.scaleSqrt`. The React-based visualization uses `d3.geoPath` for geographic rendering and `d3.geoNaturalEarth1` for projection, with city data loaded from Simplemaps via CSV and country shapes from World Atlas TopoJSON.

Dec 24, 2021

Loading thumbnail…

Fork of Smiley Face Part II

The example renders a static smiley face composed of SVG circles and an arc-based mouth, built from reusable React components (Face, Eyes, Mouth, BackgroundCircle). It visualizes a fixed facial geometry with yellow background, black-outlined eyes, and white highlights. The code uses D3's `arc()` generator to construct the mouth path and React state to track mouse position, which draws an additional black circle on screen that follows cursor movement. The visualization demonstrates component composition and event handling in React combined with D3 shape utilities, though the face itself does not react to user interaction.

Dec 22, 2021

Loading thumbnail…

parsing CSV data using fetch

This example demonstrates how to fetch and parse a CSV file using the browser's Fetch API, loading the data from a remote GitHub gist. The page also showcases modular ES6 imports with D3 v5, using `select` from `d3` to update the text of a `#message` div with a greeting from a local module. A separate stylesheet styles the message. The CSV parsing itself is initiated via an asynchronous `fetchText` function that requests the raw datasheet URL, though the fetched text is merely logged to the console and not further processed or visualized.

Dec 22, 2021

Loading thumbnail…

Fork of Hello VizHub

This example visualizes a smiley face rendered as an SVG, composed of a yellow circular background and a mouth arc drawn with D3’s `arc` generator. The React app uses `d3.select` to set a message and imports local modules, including `BackgroundCircle`, demonstrating ES6 module usage. D3 v5 and React are loaded via UNPKG, with the SVG centered using a `translate` transform.

Dec 21, 2021