J

Josh Zalcman

@Josh-Zalcman·19 public vizzes

Loading thumbnail…

Historical Space Launches on a map

This example shows historical space launch sites as red circles on an equal-earth projection map, with circle size scaled by the number of launches per site. A linked date histogram with a brushed time range filters the map to show only launches within the selected period. The visualization is built with React and D3 v7, using `geoEqualEarth` and `geoPath` for the map, `scaleSqrt` for circle sizing, and `brushX` for the interactive date filter. Data comes from a CSV of historical launches and world atlas TopoJSON.

Loading thumbnail…

Multiple Views

This interactive visualization combines a geographic bubble map with a time-series histogram to explore migrant deaths and disappearances. The map displays circles sized by the total dead and missing count using a square-root scale, with an equal Earth projection rendered via `d3.geoPath`. The histogram bins reported dates by month using `d3.bin` and `d3.timeMonths`, with a brush (`d3.brushX`) that filters the map’s data in real time. Both views are built with React and D3 v7, using data from the Missing Migrants Project.

Loading thumbnail…

Missing Migrants on a map

This visualization maps missing migrants globally using an equal Earth projection, with red circles sized by the number of dead and missing individuals at each recorded location. The map displays landmasses, graticules, and country borders, while semi-transparent circles overlaid on the geographic coordinates reveal spatial patterns in migrant fatalities. Built with React and D3 v7, the example uses `d3.geoEqualEarth`, `d3.geoPath`, `d3.geoGraticule`, and `d3.scaleSqrt` for sizing, rendering all elements as SVG paths and circles. Data comes from a CSV of the Missing Migrants Project, loaded via `d3.csv`.

Loading thumbnail…

Working with time

This visualization displays monthly totals of dead and missing migrants along global routes, drawing on a 2019 Missing Migrants dataset. It aggregates reported incident dates into monthly bins using d3.bin and d3.timeMonths, then renders the aggregated sums as bars. The React application uses d3.scaleTime for the x-axis and d3.scaleLinear for the y-axis, with custom SVG axis components and marks. A tooltip on each bar reveals the precise monthly count via a d3 title element.

Loading thumbnail…

scatter with menus

This interactive scatter plot displays the Iris flower dataset, letting users explore relationships between sepal and petal measurements through dropdown menus that control the x and y axes. The visualization, rendered with React and D3 v7, uses `scaleLinear` for axes, `scaleOrdinal` for species coloring, and SVG circles for data points. Hovering over the color legend highlights a selected species while dimming others, and tooltips reveal exact values via SVG `<title>` elements.

Loading thumbnail…

Points on a map

This example displays city populations as scaled dots on a world map, using a square-root size scale to encode population values. The map is rendered with a D3 geoEqualEarth projection and geoPath, drawing land masses, graticules, and the sphere. Data comes from a CSV of world cities, fetched via D3’s `csv` method, while geographic topology is loaded as JSON and processed with TopoJSON’s `feature` and `mesh` functions. Circles are positioned by projecting each city’s latitude and longitude, with opacity set to 0.3 for a layered effect.

Loading thumbnail…

React menu

A React-based menu demonstrates state management and component reuse. The example presents a dropdown selector with two pet options, Goldfish and Dog, and updates a displayed label based on the user’s selection. The `Dropdown.js` component uses React’s `useState` hook and an `onChange` event handler to manage the selected value. The app is built with React and ReactDOM, rendered into an HTML page that loads the libraries from unpkg. The data structure is a simple array of `{value, label}` objects, and the chosen value is logged to the console.

Loading thumbnail…

React Starter

This example renders a minimal React application that displays the text “Hello” inside a full-screen viewport. It uses React 17 and ReactDOM to mount a functional component into a root div, with the page styling supplied by inline CSS in the HTML file. The code demonstrates a bare-bones setup for combining React with a web page, serving as a starting point for building interactive data visualizations with additional libraries. No data or visualization logic is present; the focus is solely on the foundational infrastructure.

Loading thumbnail…

World Map

This example displays an orthographic world map, highlighting landmasses in teal against a light gray sphere with graticules. The visualization uses a React front-end with D3's `geoOrthographic` and `geoPath` functions to project geographical data from a remote TopoJSON source (`world-atlas`). The `topojson` library's `feature` and `mesh` functions process the country boundaries and interior borders, rendered as SVG paths within a single view.

Loading thumbnail…

Line chart Temperature

A line chart displays temperature readings over time, with individual data points highlighted by circles that reveal the exact date on hover. The visualization loads CSV data from a GitHub gist and renders it as an SVG using React components. Axes are generated with d3.scaleTime and d3.scaleLinear, while the curve is drawn with d3.line and the curveNatural interpolation. Styling comes from external CSS, and the chart follows a simple top-down layout with labeled axes for time and temperature.

Loading thumbnail…

Iris data

This scatterplot displays the Iris flower dataset, plotting petal length against sepal width for individual flowers. The visualization uses React with D3 v7’s `scaleLinear` and `extent` functions to map the data to SVG coordinates, rendering each sample as a circle. Axes are generated via custom components, with tick marks and labels styled through CSS. The data is loaded asynchronously from a remote CSV using D3’s `csv` function, and the chart includes tooltip formatting for x-axis values.

Loading thumbnail…

refactored bar chart

This bar chart displays the populations of the top 10 countries for 2020, with country names on the y-axis and population values on the x-axis. Built with React and D3 v7, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, rendering bars as SVG rectangles. The data is loaded via `d3.csv` from a GitHub gist, and formatted tick labels use `d3.format` to abbreviate large numbers. Tooltips show exact values when hovering over each bar.

Loading thumbnail…

UN data

This bar chart displays the top ten countries by population in 2020, based on UN population data loaded from a CSV file. The visualization uses React for component structure and D3 v7 for scales, axes, and SVG rendering. The `scaleBand` positions the country labels on the y-axis, while `scaleLinear` maps population values to bar widths, with gridlines and tick labels generated from the x-scale. The data is fetched asynchronously via `csv()` and sorted alphabetically before being rendered as SVG rectangles.

Loading thumbnail…

Loading Data with React and D3

This example shows a donut chart where each slice represents a color from a CSV file. The chart is generated by loading the data with `d3.csv`, then computing the pie slices with `d3.pie` and `d3.arc`. Hovering over a slice displays the color name below the SVG. The visualization is built with React, using `useState` and `useEffect` to manage the asynchronous data loading and rendering.

Loading thumbnail…

vega-lite-tutorial

This visualization shows the number of space launches over time by nation, filtered to the USA, China, USSR, Russia, and Japan. It uses semi-transparent, stroked circles to represent each launch, with time on the x-axis and nation on the y-axis. The example is built with the vega-lite-api, which registers Vega and Vega-Lite, and loads data from a CSV via d3.csv. The chart’s appearance is customized through a shared config object, and it renders as a full-window SVG with tooltips provided by vega-tooltip.

Loading thumbnail…

Loading and parsing csv data

This example demonstrates the fundamental first step of working with external data in D3: fetching a CSV file from a GitHub gist and parsing it into JavaScript objects. The code uses the modern Fetch API to retrieve the text content, then applies `d3.csvParse` to convert the raw string into an array of typed data objects. Although the parsed result is not yet visualized, the example clearly shows the pipeline of loading and structuring data that subsequent visualization code will consume. The implementation relies on D3 v7 and async/await syntax for clean asynchronous handling.

Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse cursor across an SVG canvas, updating its position in real time as the pointer moves. Built with React and D3 v7, the visualization uses a stateful `mousePosition` variable updated via an `onMouseMove` event handler on an SVG element, rendering the circle with D3's SVG primitives.

Loading thumbnail…

Sad

This example renders a minimalist, sad-faced emoji as a static SVG graphic. A large yellow circle forms the head, outlined in black, with two smaller black circles positioned as eyes and a crescent-shaped path as a downturned mouth. The visualization is built using React and d3.v7, leveraging d3’s `arc` generator to construct the mouth’s path geometry with specified inner and outer radii and angular spans. The SVG elements are composed within a React component, using precise coordinates and transforms to place facial features symmetrically around the canvas center.

Loading thumbnail…

Smiley

A yellow smiley face is rendered as an SVG using React and D3. The face consists of a yellow circle with a black stroke, two black eye circles, and a mouth drawn as an arc path using the `d3.arc` API with specified inner and outer radii and angles. React manages the SVG elements, while D3’s `arc()` generator computes the mouth’s path data. The layout uses fixed pixel dimensions and positions centered on a 960 by 500 canvas.