Edward Chung

@edward-designer·7 public vizzes

Fork of Coronavirus Deaths by Country over Time (with Voronoi Hover)

A multi-line chart tracks cumulative COVID-19 deaths over time for each country, using a logarithmic y-axis to accommodate wide numeric ranges. Hovering over any point triggers a Voronoi overlay, powered by `d3.Delaunay`, to highlight the nearest country’s full trajectory and display a tooltip with its death count and date. The visualization is built with React and D3 v5, rendering SVG paths via `d3.line` and scales from `d3.scaleTime` and `d3.scaleLog`. Data comes from the Johns Hopkins Coronavirus dataset.

Nov 2, 2023

Loading thumbnail…

React Menu

This visualization shows a simple HTML dropdown menu with two options, “Hello” and “World,” rendered as a React component. It uses the React 18.2.0 UMD build with `react-dom`’s `createRoot` to mount the `<select>` element into the page’s root div. The example demonstrates how to construct a basic interactive form control with React, styling the select font at 3em while keeping option text at 1rem for readability. No external data source is used; the content is hardcoded within the component’s JSX.

Nov 1, 2023

Loading thumbnail…

Polished World Map

This example displays a polished world map with natural Earth projection, rendering landmasses in teal, graticules, and country borders. It loads country boundaries from World Atlas TopoJSON and uses `geoNaturalEarth1`, `geoPath`, and `geoGraticule` from d3. The map is built with React and d3.v5, rendering SVG paths for spheres, graticules, land features, and interior mesh lines, styled through CSS classes.

Nov 1, 2023

Loading thumbnail…

World Map

This visualization renders a static world map using the Natural Earth projection, displaying country boundaries with white strokes, a gray graticule grid, and a bold black outline. It loads TopoJSON data from the `visionscarto-world-atlas` package and converts it to GeoJSON via `topojson.feature`. The rendering pipeline uses `d3-geo` functions including `geoNaturalEarth1`, `geoPath`, and `geoGraticule`, with React managing the application shell and D3 selections updating the SVG elements.

Nov 1, 2023

Loading thumbnail…

Vega-Lite API

This example demonstrates how the Vega-Lite API can be used to create an interactive line chart showing the price of electricity over time. The visualization plots a single series of Price values against a Date axis, with a tooltip that displays the exact price on hover. The code imports data from a CSV file hosted on GitHub, likely derived from the UCI Auto MPG dataset, and renders the chart using Vega-Lite’s `markLine` encoding. The implementation leverages the `vega-lite-api` library, registered with Vega and Vega-Lite, along with D3’s `csv` loader and the Vega Tooltip handler for interactive feedback.

Nov 1, 2023

Loading thumbnail…

React Starter

This example displays a static, smiling face built from SVG shapes, including a gradient-filled circle, two eyes, and an arc-shaped mouth. The face is centered within the viewport using a transformed group. The code combines React, the React DOM `createRoot` method, and the `d3` `arc` function to generate the mouth path. It defines an SVG linear gradient for the face fill and uses hard-coded coordinates and variables for layout, rendering entirely through React components.

Oct 31, 2023

Loading thumbnail…

Smiley Face I

This visualization shows a classic smiley face rendered as a static SVG graphic. The face consists of a large yellow circle for the head, outlined with a black stroke, and two smaller black circles for the eyes. The code uses inline SVG elements (`<svg>`, `<circle>`) defined directly within the HTML structure, with CSS applied to style the page body. The example demonstrates a minimal approach to creating simple vector graphics without additional JavaScript libraries or data sources.

Oct 31, 2023