mengdong

@Cpaster·8 public vizzes

Fork of Gantt Chart of USSR Elites

This visualization shows the career timelines of Soviet political elites, with horizontal bars indicating each individual’s period of political activity from the 1950s through the USSR’s collapse. The chart uses d3.v5 to bind the data and render an SVG, with a grid layout and hover tooltip. The code reads a static array of elite members and maps their start and end dates to bar positions, while a CSS-styled tooltip appears on mouseover to show details.

Jul 23, 2021

Loading thumbnail…

Fork of Rendering Data with React & D3

This visualization displays all named CSS colors as a radial burst of arcs emanating from the center of an SVG canvas. Each arc represents a color entry from a CSV dataset, with its fill color set to the corresponding RGB hex value. The code combines React's state management and component rendering with D3 utilities: `d3.csv` fetches the data, `d3.pie` computes the arc angles, and `d3.arc` defines the path geometry. The rendering leverages React’s `useEffect` hook to load data asynchronously and maps each pie slice to a `<path>` element.

Jul 18, 2021

Loading thumbnail…

Fork of Rendering Data with React & D3

This example visualizes all CSS named colors as a radial burst of wedge-shaped arcs. Each arc represents one color from a CSV dataset, filled with its corresponding hex value. The code combines React hooks (`useState`, `useEffect`) with D3 utilities `csv`, `arc`, and `pie` to load and transform the data, then renders the SVG paths inside a React component. The visualization uses a fixed outer radius and centers the pie at the middle of an SVG canvas.

Jul 18, 2021

Loading thumbnail…

Fork of Fork of D3 Starter

A network diagram visualizes communication between servers, proxies, and devices. Nodes are positioned manually using pixel coordinates on a dark background, with Font Awesome icons indicating node type and connecting paths rendered as SVG curves using D3’s `linkVertical` template. Hovering over a node triggers a tooltip, and links are colored light grey with arrows showing direction. The source data is a hardcoded JavaScript object defining nodes and links, and the example uses D3 v6 to select the SVG element and append the tooltip.

Jul 18, 2021

Loading thumbnail…

Fork of Interactive Color Legend

A scatter plot of the iris dataset shows petal length against sepal width, colored by species. The visualization includes an interactive color legend; hovering over a species name in the legend highlights only the points of that species in full opacity, while all other marks fade to 20% opacity. Built with React and D3 v5, the example uses `d3.scaleLinear` and `d3.scaleOrdinal` for axes and color mapping, with SVG rendering for the marks and legend.

Jul 17, 2021

Loading thumbnail…

Fork of Missing Migrants Date Histogram

This visualization displays the total number of dead and missing migrants per month as a histogram, using data from the Missing Migrants Dataset. The React application loads the CSV data with d3.csv, then uses d3.bin and d3.sum to aggregate the monthly totals. The resulting bars are rendered as SVG rectangles with d3.scaleTime and d3.scaleLinear providing the x and y scales. The axis components are custom React components that use d3’s tick functions to generate grid lines and labels.

Jul 17, 2021

Loading thumbnail…

Fork of Migrant Deaths Linked Views with Fast Brushing

This visualization links a world map of migrant deaths to a time-series histogram, enabling fast brushing to filter the map by date range. The map uses a Natural Earth projection with graticules, while the histogram aggregates monthly totals using D3's binning and scaleTime. React's useMemo optimizes rendering, and brushX interactions update the filtered data. The map plots circles scaled by the square root of deaths, with data sourced from a CSV of migrant incidents.

Jul 16, 2021

Loading thumbnail…

Fork of HIV/AIDS Choropleth Map

This choropleth map visualizes the prevalence of HIV/AIDS across countries for the year 2017, using a yellow-to-red sequential color scale to represent infection rates. Countries with missing data appear gray. Built with React, the visualization uses d3.geoPath with a Natural Earth projection to render country boundaries from World Atlas TopoJSON, while graticules and interiors provide geographic context. Data is loaded from an IHME CSV dataset via d3.csv, with ISO country codes matched to geographic features.

Jul 16, 2021