Nikita Toropov

Organization Network Graph

This example shows a small organization network graph with three people (Alice, Bob, and Carol) connected by two links. It uses d3.forceSimulation with the forceManyBody, forceLink, and forceCenter forces to model the layout, rendering nodes as SVG circles in a static 960×500 canvas. The code selects the SVG container with d3.select and appends the circles, while the simulation’s tick event is logged to the console rather than driving any visual updates.

Mar 19, 2023

Coronavirus Deaths by Country with Voronoi Overlay

A multi-line chart displays cumulative global coronavirus deaths over time for each country, with a logarithmic y-axis. A Voronoi overlay, generated via `d3.Delaunay` from the chart’s data points, is rendered as pink cell boundaries across the plot area to illustrate spatial partitioning. The visualization uses React components, D3 v5 for scales and axes, and SVG paths for the lines and overlay, sourcing data from the CSSE COVID-19 time series.

Coronavirus Deaths by Country

This small multiple line chart shows the cumulative number of COVID-19 deaths per country over time, plotted on a log scale to accommodate wide variation in magnitude. Each country is rendered as a separate SVG path generated with d3.line, colored by randomly assigned rgb values. The visualization uses d3.scaleTime and d3.scaleLog for axes, d3.axisBottom and d3.axisLeft for ticks, and React with d3.v5 to build the interactive components. Data comes from the CSSE COVID-19 global time series, filtered to only country-level rows.

Visualization Labels

This example displays the global cumulative death toll from COVID-19 over time as a single black line on a log-scaled y-axis, with labeled axes and a title. The chart uses React to render an SVG and relies on `d3.scaleTime`, `d3.scaleLog`, and `d3.line` for data mapping and path generation, while `d3.axisBottom` and `d3.axisLeft` create the gridlines. Data comes from the JHU CSSE COVID-19 time-series CSV, aggregated daily across all countries, with deaths counted from the start of the outbreak.

Coronavirus Log Scale

This chart shows the global cumulative death toll from COVID-19 over time using a logarithmic y-axis scale, allowing early exponential growth to be compared alongside later plateaus and surges. The line is rendered as an SVG path generated with d3.line, while time is mapped by scaleTime and deaths by scaleLog. Axes are built with d3.axisBottom and d3.axisLeft, using tick formatting for compact notation, and the data is loaded from the Johns Hopkins CSSE CSV via d3.csv.

Coronavirus Linear Scale

This visualization shows the global cumulative death toll from COVID-19 over time as a single black line chart. The y-axis is a linear scale displaying total deaths, while the x-axis maps dates from the outset of the pandemic. Data comes from the CSSEGISandData COVID-19 time-series CSV, aggregated across all countries. Built with React and D3 v5, it uses `scaleTime`, `scaleLinear`, and `line` to generate an SVG path, with axis ticks rendered via `axisBottom` and `axisLeft`.

React + D3 Axes

This example shows the global cumulative death toll from COVID-19 over time, rendered as a line chart with React and D3. A horizontal reference line marks the 6.5 million death threshold, while a vertical line highlights a specific date, labeled with its formatted value. The chart uses d3’s `scaleTime`, `scaleLinear`, and `line` to map the data, while a custom `XAxis` component leverages `axisBottom` for tick generation. The raw data is fetched from a CSV hosted by the CSSE at Johns Hopkins.

Coronavirus Line Chart

This line chart displays the total global COVID-19 deaths over time, based on data from the CSSE at Johns Hopkins University. It includes a vertical marker at the most recent date and a horizontal reference line at 6.5 million deaths. The visualization is built with React and D3 v5, using `scaleTime`, `scaleLinear`, and the `line` generator to render an SVG path. The CSV data is loaded and transformed with `d3.csv` and `timeParse`.

Summarizing Coronovarious Data

The visualization presents the global death toll from COVID-19 as a single large text message, displaying a comma-formatted cumulative death count alongside the latest date from the dataset. It loads time-series death data from the Johns Hopkins University CSSE GitHub repository and uses d3.csv to parse it, then d3’s `format` function to format the total. The page renders the result in a simple HTML `<pre>` element, updating its text content via JavaScript without any charts or graphical encoding.

Fork of Missing Migrants on a Map

This map visualizes the share of the population aged 15–49 infected with HIV/AIDS in 2017, using a yellow-to-red sequential color scale on a natural Earth projection. It loads world country boundaries as TopoJSON, HIV prevalence data from an IHME CSV, and ISO country codes, then joins them by numeric code via React state. The visualization renders SVG paths with d3.geoPath and d3.geoNaturalEarth1, coloring each country based on the maximum prevalence value.

Missing Migrants on a Map

This visualization maps the global distribution of missing migrants, with circle size encoding the total number of dead and missing per reported location. The map uses a natural Earth projection via `geoNaturalEarth1` and renders geographic features with `d3.geoPath`, including land masses, graticules, and interiors. The React app loads CSV data from a GitHub gist using D3’s `csv` parser, while world topology comes from the world-atlas package. The size scale uses `scaleSqrt` to map values to circle radii, and SVG circles are positioned using the projection’s coordinate output.

Fork of Missing Migrants Scatter Plot

This interactive scatter plot displays the Missing Migrants Dataset, with each circle representing a single migration event. The x-axis shows the reported date on a time scale, while the y-axis uses a logarithmic scale to display the total number of dead and missing individuals. The visualization is built with React and D3 v5, using the `scaleTime` and `scaleLog` functions for axis scaling and SVG circles for data points. Hovering over a circle reveals the exact date via an SVG `<title>` tooltip.

Mar 15, 2023

Multiple Views with Brushing

This example shows a world map with bubble markers indicating the total number of dead and missing migrants, alongside a time-series histogram of the same data. Brushing a date range in the histogram filters the bubbles shown on the map. The visualization uses React state to manage the brush selection, D3’s `geoNaturalEarth1` projection and `geoPath` for the map, `scaleSqrt` for bubble sizing, and `brushX` for interactive filtering. Data comes from a CSV of migrant incidents loaded via `d3.csv`.

Mar 15, 2023

Map and Bar

This example combines a world map with a time-series bar chart to visualize reported migrant deaths and disappearances. The map uses a natural Earth projection with proportional circles sized by the square root scale of the total dead and missing per location, while the lower histogram aggregates the same metric by month. The visualization is built with React and D3 v5, using d3.geoNaturalEarth1 and d3.geoPath for geographic rendering, d3.bin and d3.scaleTime for temporal binning, and loads data from a CSV of missing migrants alongside TopoJSON world atlas boundaries.

Mar 14, 2023

Missing Migrants 2

This visualization shows monthly totals of dead and missing migrants from a subset of the Missing Migrants Global dataset, with time on the x-axis and count on the y-axis as a bar chart. It loads CSV data via D3’s `csv` utility, bins entries by month using `d3.histogram` with `timeMonths` thresholds, and sums the total dead and missing per bin. The chart is rendered as SVG using React components, with axes from custom `AxisBottom` and `AxisLeft` components and bars from a `Marks` component, all styled via CSS.

Mar 14, 2023

Points on a Map

This example displays world cities as scaled circles on a natural Earth projection, with each circle’s radius proportional to its population. The map renders landmasses, graticules, and interiors using `d3.geoPath` and `d3.geoNaturalEarth1`, while the city points are drawn as SVG circles with a square-root scale for size encoding. The visualization loads geographic topology from `world-atlas` and city CSV data via `d3.csv`, using React hooks (`useState`, `useEffect`) to manage the asynchronous data fetching and triggering re-renders.

World Map

This example displays a world map rendered with SVG, showing landmasses, country borders, graticules, and a sphere outline. The visualization uses D3’s `geoNaturalEarth1` projection and `geoPath` to draw geographic features, with data loaded from the TopoJSON world-atlas dataset via `topojson.feature` and `topojson.mesh`. React manages the asynchronous data loading, and CSS styling separates land, interiors, graticules, and sphere appearances.

Interective Colour Legend

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between different measurements via dropdown menus that control the x and y axes. A color legend for species enables filtering through mouse hover, which fades non-matching points to reveal only the selected category. The visualization is built with React and D3 v5, using SVG rendering with scales from d3.scaleLinear and d3.scaleOrdinal, while the dropdown component comes from React Dropdown.

Fork of Scatter Plot with Menus and Colour and Legend

This interactive scatter plot visualizes the Iris dataset, letting users explore relationships between four flower measurements by switching the X and Y axes via dropdown menus. Each point is colored by species, with a legend clarifying the color encoding. The visualization is built with React functional components and renders SVG marks using D3 v5 scales. It leverages `d3.scaleLinear` for axes, `d3.scaleOrdinal` for categorical colors, and React state hooks to manage attribute selections.

Scatter Plot with Menus and Colour

This scatter plot of the Iris dataset uses interactive dropdown menus to explore relationships between measurements. Users can select different attributes for the X and Y axes, and the visualization color-codes each point by species using a D3 ordinal scale. Built with React and rendered as SVG, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and custom React components for the dropdowns and marks. The plot includes axis labels and tick formatting via `format('.2s')`, with tooltips showing the x-value on hover.

React Starter

This example shows a pet-selection dropdown built with React and D3, rendering a labeled menu with options for dog, cat, hamster, parrot, spider, and goldfish. The selected value updates React state via the `useState` hook, logged to the console, while a reusable `Dropdown` component maps over the option array to generate `<select>` elements. The code uses ReactDOM to mount the app and employs controlled component patterns with `onSelectedValueChange` callbacks, though no D3-specific APIs appear in the visible source.

Fork of Working with Time

This example shows a time-series line chart of San Francisco weekly temperatures, with daily points plotted along a smooth curve and native SVG tooltips on hover. The code loads CSV data, parses timestamps and numeric values with `useEffect`, and renders axes and marks using React components. D3’s `scaleTime`, `scaleLinear`, `extent`, and `line` with `curveNatural` handle scaling and path generation, while `timeFormat` formats tick labels. React state manages the fetched data, and SVG elements are produced from JSX in the `AxisBottom`, `AxisLeft`, and `Marks` components.

Working with Time

This scatterplot displays temperature readings over the course of a week in San Francisco, with time on the x-axis and temperature on the y-axis. The visualization uses React hooks to load a CSV dataset via `d3.csv`, then renders SVG circles with the help of `d3.scaleTime` and `d3.scaleLinear` for the axes. Each point is color-coded teal, and hovering reveals a tooltip formatted with `d3.timeFormat` that shows the day and temperature value.

Fork of Loading Data with React & D3

This visualization displays the top 10 countries by population using a horizontal bar chart. It loads UN population data via `d3.csv` and uses React state to manage the asynchronous data fetch. The chart is rendered with SVG, combining React components for axes and marks. `d3.scaleBand` and `d3.scaleLinear` position the bars, while `d3.format` converts population values to abbreviated labels like "B" for billions.