A

Alex Stulov

@alexstulov·31 public vizzes

Loading thumbnail…

Fork of Organization Graph Diagram

A force-directed graph maps the Kenneth Rainin Foundation's organizational network, with colored main nodes representing key partners like Arts Web, Social Impact Commons, and AmbitioUS, connected by links to smaller child and leaf nodes. The visualization uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to position nodes, while rendering elements as SVG circles, lines, and text labels. Node sizes vary by hierarchy level, and dragging repositions nodes via d3.drag, with data generated programmatically in data.js.

Loading thumbnail…

Voronoi Overlay With Labels

This example shows a multi-series line chart of cumulative COVID-19 deaths per country over time. A Voronoi overlay, built with `d3.Delaunay` and `d3.voronoi`, captures mouse hover events across the SVG, highlighting the nearest data point and its corresponding country line. The chart uses a logarithmic Y-axis and a time-scaled X-axis, with a tooltip labeling the active country, death count, and date. Data comes from the CSSE COVID-19 global time-series dataset, rendered using React and D3 v7.

Loading thumbnail…

Multiple Colored Lines With Voronoi Overlay

This example visualizes global COVID-19 deaths over time with multiple colored lines, one per country, on a log-scaled y-axis. Hovering near any line highlights that country’s full path in black, using a `d3.Delaunay` Voronoi overlay to capture mouse proximity. The chart is built with React and renders SVG, using `d3.scaleTime`, `d3.scaleLog`, and `d3.line` for the axis and line generation. Data comes from the CSSEGISandData COVID-19 time-series CSV, parsed with `d3.csv` and `timeParse`, showing roughly twenty countries.

Loading thumbnail…

Multiple Colored Lines

This example displays global COVID-19 cumulative death counts over time as multiple colored lines, one for each country. The visualization uses a logarithmic y-axis to accommodate the wide range of values, with grid lines extending across the chart from both axes. Built with React and D3 v7, the chart renders SVG paths using `d3.line`, `scaleTime`, and `scaleLog`, while axes are generated with `axisBottom` and `axisLeft`. Data comes from a CSV file processed with `d3.csv` and `timeParse`. Each country is assigned a random RGB stroke color.

Loading thumbnail…

Visualization Labels

This example visualizes cumulative global COVID-19 deaths over time using a line chart. The time axis spans the dataset’s date range, while a logarithmic scale maps death totals. The chart includes labeled axes for “Time” and “Cumulative Deaths,” plus a title and horizontal/vertical marker lines with annotations. The visualization is built with React and SVG, using D3 v7 functions such as `scaleTime`, `scaleLog`, `line`, `axisBottom`, and `axisLeft`. Data comes from the CSSEGISandData COVID-19 global time-series CSV, loaded via `d3.csv`.

Loading thumbnail…

Coronavirus Log Chart

The chart displays global cumulative COVID-19 deaths over time on a logarithmic scale, making early exponential growth visible while compressing later, larger values. A vertical marker line indicates the current date, and a horizontal marker shows a specific death count. The visualization uses a React component structure with D3 v7’s `scaleTime`, `scaleLog`, and `line` generator to render an SVG path. Axes are drawn via `axisBottom` and `axisLeft`, with data sourced from the CSSE COVID-19 time series CSV, processed using `csv` and `timeParse`.

Loading thumbnail…

Coronavirus Line Chart

A line chart tracks cumulative global COVID-19 deaths over time, using a black, five-pixel-wide path scaled to the full window. A horizontal marker at four million deaths and a vertical “now” marker at the latest date highlight key thresholds. The visualization is built with React components and D3 v7, using `scaleTime`, `scaleLinear`, and `line` for the path, plus `axisBottom` and `axisLeft` for gridlines. Data comes from a CSV of Johns Hopkins global death counts, aggregated by day and rendered as SVG.

Loading thumbnail…

Summarizing Coronavirus Data

This visualization summarizes the global death toll from the COVID-19 pandemic, displaying a text message that reports the total number of deaths and the most recent date in the dataset. The code uses React with hooks to fetch and manage data, and D3 v7’s `csv` and `format` functions to load and parse the Johns Hopkins Coronavirus Dataset. It calculates the sum of the latest column of death counts across all countries and formats the result with comma separators. The display updates from a loading state to the final summary once the data arrives.

Loading thumbnail…

HIV/AIDS Choropleth Map

This choropleth map displays the global prevalence of HIV/AIDS among adults aged 15–49 for the year 2017, using color intensity to represent infection rates. Countries with missing data appear grey. Built with React and D3 v5, the visualization uses d3.geoNaturalEarth1 and d3.geoPath to render country boundaries and graticules from World Atlas TopoJSON, while d3.scaleSequential with an interpolateYlOrRd color scale maps data values. The underlying dataset is sourced from the Institute for Health Metrics and Evaluation (IHME).

Loading thumbnail…

Missing Migrants Scatter Plot Log Scale

This visualization uses a scatter plot to display the Missing Migrants Dataset, with each point representing a single event where the x-axis shows the reported date and the y-axis shows the total dead and missing. The y-axis uses a logarithmic scale to handle the wide range of values, from 1 to the maximum in the dataset. The implementation leverages React with D3 v5 APIs such as `scaleTime`, `scaleLog`, `extent`, and `timeFormat`, rendering the chart as SVG with custom axis components and marks.

Loading thumbnail…

Missing Migrants with Brushing

This visualization combines a world map and a time-series histogram to explore the Missing Migrants Dataset. A bubble map plots each migrant death or disappearance event, with circle radius scaled by the total dead and missing count using `d3.scaleSqrt`. Below, a bar chart aggregates deaths by month, and users can brush over the time axis with `d3.brushX` to filter the map, highlighting events within the selected date range. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` with world-atlas TopoJSON data, while the React components manage state and rendering.

Loading thumbnail…

Missing Migrants on a Map with Time

This interactive visualization combines a world map with a time-series histogram to explore the Missing Migrants Dataset. The map uses d3.geoNaturalEarth1 and d3.geoPath to render country boundaries, with circles sized by d3.scaleSqrt according to the total dead and missing per event. A linked date histogram below aggregates monthly totals, using d3.bin and d3.scaleTime. The React components manage state and rendering, with tooltips provided by SVG title elements. Data comes from a CSV of reported incidents, and world geography uses TopoJSON from the world-atlas package.

Loading thumbnail…

Fork of Missing Migrants Date Histogram

A histogram aggregates monthly totals of dead and missing migrants from the Missing Migrants Dataset. The chart displays time on the x-axis and the summed count per month on the y-axis, with SVG rectangles representing each bin. Built with React and D3 v5, it uses `d3.bin` to create monthly thresholds and `d3.sum` to aggregate values, while custom axis components render the scales. Tooltips show exact totals on hover.

Loading thumbnail…

Points on world map

This visualization displays world cities as scaled circles on a natural Earth projection, with marker size encoding population using a square-root scale. The map renders land masses, graticules, and country borders in muted grays, while semi-transparent teal points overlay major urban centers. Built with React and D3 v7, it uses `geoNaturalEarth1` with `geoPath` for geographic projection, TopoJSON for world atlas data, and `scaleSqrt` to map population values to circle radii. City coordinates and populations come from a CSV dataset loaded via D3’s `csv` function.

Loading thumbnail…

Scatter plot with interactive color legend

This interactive scatter plot visualizes the Iris dataset, showing relationships between flower measurements selected via dropdown menus. A color legend on the right highlights points by species, dimming all other data when a species is hovered. Built with React and D3 v7, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for categorical colors, and renders SVG circles with tooltips. The dataset is loaded as CSV and parsed into numeric values for plotting.

Loading thumbnail…

Scatter plot with color legend

An interactive scatter plot of the Iris Dataset allows users to select which flower measurements to display on the x and y axes via dropdowns. The plot uses D3.js v7 scale functions to map data to SVG coordinates and a color legend to distinguish three iris species. The React code renders the plot declaratively, with custom components for axes, marks, and the legend, using D3’s data loading from a CSV URL.

Loading thumbnail…

Colored scatter plot

This interactive colored scatter plot visualizes the Iris dataset, showing relationships between sepal and petal measurements across three flower species. Users can select which attributes to plot on the X and Y axes using dropdown menus. The visualization uses D3 v7 scales (scaleLinear for axes, scaleOrdinal for categorical color encoding) within a React framework, rendering SVG circles colored by species. Data is loaded via d3.csv from a GitHub gist, with formatted tick labels and axis titles generated from selected attribute names.

Loading thumbnail…

Polish scatter plot with menus

This interactive scatter plot displays the Iris dataset, encoding measurements like petal length and width as circle positions. Dropdown menus let users switch which attributes map to the x and y axes. The visualization renders using SVG within a React component, leveraging D3's `scaleLinear`, `extent`, and `nice` for axis scaling and ticks. Custom `AxisBottom` and `AxisLeft` components handle tick marks, while `Marks` draws labeled data points.

Loading thumbnail…

Scatter plot with menus

This interactive scatter plot explores the Iris dataset, plotting measurements like petal and sepal length and width as adjustable axes. Two dropdown menus let a user select which quantitative attribute drives the x- and y-axes, with axes labels updating accordingly. Built in React (v17) with d3.v7, it uses `scaleLinear`, `extent`, and reusable SVG axis and circle mark components. The axes and points render as SVG, formatted with a custom tick format that abbreviates large numbers.

Loading thumbnail…

React Menus

This example demonstrates a simple pet-selection form built with React, offering a dropdown menu with a default value of “Hamster”. It shows how React state manages the currently selected option and updates the interface when the user chooses a different value. The code uses the `useState` hook to track the selection and renders a reusable `Dropdown` component built from a native HTML `<select>` element with `<option>` items. The data is a static array of pet names, and the styling uses large fonts for the label and select controls.

Loading thumbnail…

World map

This example displays a world map using the Natural Earth projection, rendered as a static SVG. The visualization presents landmasses in a teal color over a light gray sphere, with graticule lines and interior boundaries drawn in contrasting strokes. Built with React and D3’s geoNaturalEarth1, geoPath, and geoGraticule functions, it layers the sphere, graticules, land features, and interior meshes. The data is sourced from the world-atlas TopoJSON, processed using the topojson library’s feature and mesh functions.

Loading thumbnail…

Stylize time line chart

This line chart visualizes temperature readings from a week in San Francisco, using a smooth natural curve to connect daily data points. Built with React and D3 v7, the visualization renders as SVG and includes circular markers with tooltips for individual values. The time-based x-axis uses `d3.scaleTime` with daily ticks, while the y-axis maps temperature using `d3.scaleLinear`. Styling emphasizes the teal line and circles against muted axis ticks, with labeled axes for Time and Temperature.

Loading thumbnail…

Stylize Bar chart

A horizontal bar chart displays the ten most populous countries for 2020, using data from the UN Population 2019 CSV. The bars are styled with a teal fill, rounded padding between bands, and a Poppins font for labels. React components render SVG axes and marks, with D3 v7 scales (`scaleBand`, `scaleLinear`) positioning elements and formatting tick values as billions.

Loading thumbnail…

Refactor Bar chart

This bar chart visualizes the population of the top 10 countries in 2020, using horizontally-oriented bars. Built with React and SVG, the example decomposes the visualization into reusable components: `AxisBottom`, `AxisLeft`, and `Marks`. It uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the population x-axis, and `d3.max` for domain calculation. Data is loaded asynchronously from a CSV file via a custom `useData` hook, which fetches and parses the UN Population 2019 dataset.

Loading thumbnail…

Bar chart

This bar chart displays the top 10 countries by 2020 population from a UN Population dataset loaded via `d3.csv`. It uses React with hooks (`useState`, `useEffect`) to fetch and store the data, then renders SVG rectangles scaled by `d3.scaleBand` for countries and `d3.scaleLinear` for population values. Gridlines and axis ticks are generated with `xScale.ticks()`, and the chart is drawn within a margin-based layout.

Loading thumbnail…

Fork of Loading data with React and D3

A pie chart displays the full set of CSS named colors, loaded from a CSV file using `d3.csv` within a React component. The chart uses `d3.pie` and `d3.arc` to generate SVG `path` elements, with each slice filled by its corresponding RGB hex value from the data. The visualization updates via React state and `useEffect`, rendering a loading message until the data arrives.

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile characteristics from the UCI Machine Learning Repository’s Auto MPG dataset. The scatter plot displays each car’s origin on the x-axis and its horsepower on the y-axis, with semi-transparent points and tooltips revealing the vehicle name. Built with the vega-lite-api, it uses vega-lite encoding functions like `vl.x().fieldN` and `vl.y().fieldQ` to map fields. The visualization pulls data via `d3.csv`, customizes axes and labels through a `config` object, and renders full-window SVG using vega-tooltip for interactive hover details.

Loading thumbnail…

Loading data with React and D3

This example demonstrates how to load and display a CSV dataset in a React application, showing a text summary of the data size, row count, and column count once the file is fetched. The code uses React’s `useState` and `useEffect` hooks to manage the asynchronous loading state, while D3’s `d3.csv` fetches the data from a GitHub gist URL and `d3.csvFormat` converts it back to a string to calculate its size in kilobytes. The visualization initially displays “Loading…” and updates to the summary once the data arrives.

Loading thumbnail…

Loading and parsing CSV

This example demonstrates how to load and parse a CSV file from a remote URL using D3 v7. The visualization displays a text summary showing the file size in kilobytes, the number of data rows, and the number of columns after parsing. It uses `d3.csv()` to fetch and parse the CSS named colors dataset from a GitHub gist, then `d3.csvFormat` to measure the data. A commented-out alternative shows the equivalent approach using `fetch` and `d3.csvParse`.

Loading thumbnail…

Mouse follower

A yellow circle follows the cursor across an SVG canvas, updating its position in real time. Built with React and D3 v7, the visualization uses React's `useState` and `useCallback` hooks to track mouse coordinates via the SVG `onMouseMove` event, then re-renders the circle with the new `cx` and `cy` attributes. The SVG rendering approach keeps the circle's radius constant at 30 pixels.

Loading thumbnail…

Hello HTML

Five identical smiley faces render in a row using React components that compose D3-shape primitives. Each face features a star-shaped background generated with `symbol` and `symbolStar`, circular eyes, and an arc-based mouth built with `d3.arc`. The React app maps over an array from `d3.range` to instantiate each `Face` component, which positions all elements via SVG transforms. Colors and dimensions scale proportionally with the fixed width and height, creating a uniform grid of green faces.