Trang Nguyen

@trang-ngn·6 public vizzes

Fork of Missing Migrants Date Histogram

This visualization shows the monthly count of dead and missing migrants, with a bar chart displaying the total per month over time. The data comes from the Missing Migrants Dataset. The bars are rendered as SVG rectangles using React, with scales and binning handled by d3.scaleTime, d3.scaleLinear, d3.bin, and d3.sum. Axes are custom components using d3.ticks and time formatting with d3.timeFormat.

Dec 31, 2024

Loading thumbnail…

Fork of Sized Points on a Map

This fork visualizes world city populations over 50,000 as semi-transparent circles sized proportionally to population. The map uses a Natural Earth projection with graticules and country boundaries rendered via `geoNaturalEarth1` and `geoPath`. React manages state and renders SVG marks, while D3’s `scaleLinear` maps population to circle radius. Data comes from Simplemaps’ World Cities Database and World Atlas TopoJSON.

Dec 31, 2024

Loading thumbnail…

Fork of Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent teal circles whose radii are scaled linearly by population. The visualization uses d3.geoNaturalEarth1 for projection, d3.geoPath to render landmasses and country borders, and d3.geoGraticule for background grid lines. React manages the component state, with d3.csv fetching city data from Simplemaps and d3.json loading world-atlas TopoJSON. Circles are sized via d3.scaleLinear, capped at a 15-pixel radius.

Dec 31, 2024

Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, comparing displacement and horsepower with semi-transparent points that reveal data density. The visualization is built using the Vega-Lite API, which programmatically constructs the chart specification, while D3.js loads the auto-mpg dataset from a CSV file. The chart uses a custom dark-themed configuration to improve readability, with tooltips enabled via Vega-Tooltip for interactive data inspection.

Dec 27, 2024

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between fuel efficiency (mpg) and horsepower for cars, with each point’s color indicating the country of origin and its size reflecting vehicle weight. A tooltip reveals the car’s name on hover. The visualization is constructed programmatically using the Vega-Lite API, with a custom configuration for axis styling and tooltip formatting. Data is loaded from a CSV file via `d3.csv`, and the chart is rendered into an SVG using the Vega-Lite and Vega libraries, with interactivity enhanced by the Vega Tooltip handler.

Dec 27, 2024

Loading thumbnail…

Fork of Hello HTML

This example displays a simple smiling face drawn as three SVG circles on a yellow background. The code uses static SVG circle elements with fixed coordinates, setting a large yellow outer circle with a black stroke, along with two smaller black circles for eyes. It renders entirely through plain HTML and SVG markup, without any JavaScript libraries or data sources, and assumes a viewport of 960 by 500 pixels. The face is centered horizontally and vertically, with the eyes positioned symmetrically around the center point.

Dec 24, 2024