P

Peter Krevenets

@GuRuGuMaWaRu·43 public vizzes

Loading thumbnail…

World Map

A world map visualization displays countries as filled teal polygons against a light gray sphere, with graticules and interior borders in contrasting strokes. The map uses the Natural Earth projection via `geoNaturalEarth1` and renders paths with `d3.geoPath`. TopoJSON data from the world-atlas dataset is loaded with `json()` and converted to GeoJSON features and a country mesh using `feature` and `mesh`. The React component structure relies on hooks to fetch data and render SVG marks.

Loading thumbnail…

Organization Network Graph

The visualization displays a network graph of interconnected community arts organizations in the San Francisco Bay Area. Using D3 v6’s `forceSimulation` API with `forceManyBody`, `forceLink`, and `forceCenter` forces, it renders SVG circles and links. Each main organization has colored child nodes with leaf nodes, and labeled text. Nodes are draggable through D3’s `drag` interaction. Data is generated programmatically with pre-defined color palettes from `colors.js`.

Loading thumbnail…

d3.js Force Starter

A small network graph displays three nodes as circles and two directed links as lines. The example demonstrates a force-directed layout using d3.forceSimulation with forceManyBody, forceLink, and forceCenter. Circle positions and line endpoints update on each simulation tick, rendering in SVG. The code defines three named nodes and two index-based links, showing basic force simulation setup with d3.v6.

Loading thumbnail…

Voronoi Overlay with Labels

A line chart displays global COVID-19 deaths over time, with each country plotted as a separate line. Hovering over any point triggers a Voronoi overlay, built with `d3.Delaunay`, to highlight the nearest data point and its corresponding country line. A tooltip shows the country name, total deaths, and date. The chart uses `d3.scaleTime` and `d3.scaleLog` for axes, with data sourced from a CSV.

Loading thumbnail…

Coronavirus Deaths over Time by Country with Voronoi Overlay

This visualization plots global COVID-19 death tolls over time for each country, using a logarithmic y-axis to accommodate vast differences in scale. A Voronoi overlay, built with `d3.Delaunay`, maps each data point to its nearest region, enabling hover interactions that highlight the corresponding country's line in black. The chart is rendered as an SVG using React, D3 v6 for scales and axes, and draws data from the CSSEGISandData COVID-19 GitHub repository.

Loading thumbnail…

Coronavirus Deaths Over Time by Country

This chart tracks cumulative COVID-19 deaths over time for each country, with each nation drawn as a randomly colored line using SVG paths in a React component. It uses a log-scaled y-axis via `scaleLog` and time-based x-axis via `scaleTime`, with axes rendered through `axisLeft` and `axisBottom`. The data is loaded from the CSSEGISandData COVID-19 global deaths CSV using `d3.csv` and `timeParse`, while line generation relies on `d3.line`.

Loading thumbnail…

Visualization Labels

This example displays global coronavirus deaths over time using a logarithmic y-axis to accommodate the wide range of values. A line chart shows the cumulative death count, with an interactive marker line identifying the most recent date. The visualization is built with React and D3 v6, using `scaleTime`, `scaleLog`, and `line` to generate the SVG path, while `axisBottom` and `axisLeft` render the axes. Data comes from the CSSEGISandData COVID-19 time-series CSV.

Loading thumbnail…

Coronavirus Log Y Axis

This chart displays the cumulative global COVID-19 death toll over time, using a logarithmic scale on the y-axis to reveal the exponential growth pattern. The React component fetches time-series data from the Johns Hopkins CSSE GitHub repository and renders an SVG line chart. The code uses D3 v6 scales (`scaleTime`, `scaleLog`) and axes (`axisBottom`, `axisLeft`), with the line generated via `line()`. Gridlines extend across the plot, and the chart fills the browser window, updating as new data arrives.

Loading thumbnail…

Coronavirus Linear Y Axis

This visualization tracks the cumulative global COVID-19 deaths over time using a linear y-axis scale, highlighting the exponential growth of the pandemic. The SVG line chart is built with React and D3 v6, using `scaleTime` for the x-axis and `scaleLinear` for the y-axis, with data fetched from the CSSEGISandData GitHub repository and aggregated by summing daily death counts. Grid lines and marker lines for the current date and value enhance readability.

Loading thumbnail…

React + D3 Axes

This example shows a line chart of cumulative global COVID-19 deaths over time, with a vertical marker at the most recent date and a horizontal marker at one million deaths. It builds the axes and chart using React components that wrap D3 v6 APIs, including `scaleTime`, `scaleLinear`, `axisBottom`, and `line`. Data is loaded via `d3.csv` from a Johns Hopkins CSSE repository. The chart renders as SVG, with styled gridlines and marker labels formatted using `d3.format`.

Loading thumbnail…

Coronavirus Line Chart with 10,000 and Now Markers

This example displays global COVID-19 deaths over time as a line chart, with a horizontal marker at the one million death threshold and a vertical marker at the most recent date labeled “now.” The visualization uses d3.scaleTime and d3.scaleLinear to map dates and death counts, while d3.line generates the SVG path. Data is loaded via d3.csv from the CSSEGISandData COVID-19 time series repository, and the chart is built with React components rendering SVG elements.

Loading thumbnail…

Coronavirus Line Chart with 10,000 Marker Line

This visualization shows the cumulative global death toll from COVID-19 over time as a single black line chart, with a horizontal marker line highlighting the point at which 100,000 deaths were reached. The chart uses React to manage the SVG rendering, while D3 v6 functions like `scaleTime`, `scaleLinear`, `extent`, and `line` compute the scales and path geometry. The data is fetched live from the CSSEGISandData GitHub repository’s time-series CSV and aggregated by summing daily deaths across all countries. The full-viewport SVG is drawn with a stroke-width of 4 for the main path and a thinner line for the fixed threshold.

Loading thumbnail…

Summarizing Coronavirus Data

This example uses D3.js to summarize the Johns Hopkins Coronavirus Dataset, fetching the global deaths time-series CSV and displaying the most recent total. The code loads the data with `d3.csv`, identifies the final date column, and sums all reported deaths for that date with `data.reduce`. It then formats the integer using `d3.format` and presents the result in a large red `<pre>` element. The visualization is a text-only summary, showing the cumulative death count and the corresponding date as plain text.

Loading thumbnail…

Loading and parsing Coronavirus data - with D3

This example demonstrates how to load and parse the Johns Hopkins Coronavirus dataset using D3’s `d3.csv` method. It displays a summary of the fetched data in a large `<pre>` element, showing the file size in kilobytes, the total column count, and the number of data rows. The code retrieves the data from a raw GitHub URL, and uses `d3.csvFormat` to calculate the file size and `data.columns` to determine the column count. It uses D3 v6 (via `d3.min.js`) and runs entirely in the browser through a bundled script.

Loading thumbnail…

HIV/AIDS Choropleth Map

This choropleth map visualizes HIV/AIDS prevalence among adults aged 15–49 across countries for the year 2017, using a yellow-orange-red sequential color scale. It loads country geometries from the world-atlas TopoJSON dataset and prevalence data from an IHME CSV, joining them via ISO country codes. The React-based component uses d3.geoNaturalEarth1 and d3.geoPath to render SVG paths, with d3.geoGraticule for grid lines and grey fill for missing data.

Loading thumbnail…

Mssing Migrants Scatter Plot Log Scale

This example visualizes the "Total Dead and Missing" from the Missing Migrants Global dataset as a scatter plot with a logarithmic y-axis, plotted over time. The SVG rendering uses React and D3 v6, with scales created via `d3.scaleTime` and `d3.scaleLog`. A path connects the points using `d3.line` with natural curve interpolation, while circles provide hover tooltips formatted with `d3.timeFormat`.

Loading thumbnail…

Mssing Migrants Scatter Plot

This scatter plot visualizes the relationship between reported dates and total dead and missing migrants from the Missing Migrants Global dataset. The time-scaled x-axis plots daily records against the linear y-axis, with individual data points rendered as small circles and a smooth curve connecting them via d3.line with curveNatural. React manages the component state, while d3.csv loads and parses the data, d3.scaleTime and d3.scaleLinear handle the scales, and SVG renders the axes and marks with a tooltip showing formatted dates.

Loading thumbnail…

Missing Migrants - Multiple Views w Brushing

This visualization presents global missing migrant incidents using two linked views. A world map displays incidents as proportional circles, sized by the total dead and missing, using `d3.geoNaturalEarth1` projection and `d3.geoPath` for map features. A time-series histogram beneath, built with `d3.bin` and `d3.scaleTime`, aggregates counts by reported date. Brushing the histogram with `d3.brushX` filters the map’s circles, dynamically updating the geographic view. Data comes from a CSV of missing migrant reports, with map base layers rendered as SVG paths.

Loading thumbnail…

Missing Migrants - Multiple Views

This interactive visualization combines two coordinated views of missing migrant incidents. A world map uses a natural Earth projection with graticules to display incident locations, with circle sizes scaled by the square root of deaths and missing persons. Below, a time-series histogram bins reported dates into monthly intervals, summing the total dead and missing per month. The map is rendered using d3.geoPath and d3.geoNaturalEarth1, while the histogram leverages d3.bin, d3.scaleTime, and d3.scaleLinear. Data comes from the Missing Migrants Project CSV, loaded with d3.csv, with geographic boundaries from world-atlas TopoJSON.

Loading thumbnail…

Migrant Deaths Chart (aggregate by month)

This visualization aggregates migrant deaths by month, displaying a bar chart of total dead and missing individuals over time. Using D3.js v6 and React, it loads CSV data from a Missing Migrants dataset, bins reported dates into monthly intervals with `d3.bin` and `timeMonths`, and sums the corresponding death counts. The chart renders as SVG, with time-scaled x-axis ticks formatted via `timeFormat`, a linear y-axis for death totals, and tooltips on each bar showing the count.

Loading thumbnail…

Missing Migrants on a Map

This visualization displays global migrant deaths and disappearances as circles on a natural Earth projection map. Dot size encodes the total dead and missing per incident location, overlaid on graticules and landmasses from a TopoJSON world atlas. React manages the component tree, while D3’s `geoPath`, `geoNaturalEarth1`, and `geoGraticule` handle projection and rendering. A CSV dataset supplies coordinates and casualty figures, with mark radius scaled by `d3.scaleSqrt` for proportional visual encoding.

Loading thumbnail…

Points on a Map, Using Size

This visualization shows a world map with circles representing cities whose population exceeds 50,000 people. The size of each circle is proportional to the city's population, using a square root scale to map population values to radii. The map displays land masses in gray, graticules and interiors as thin lines, and the cities as semi-transparent teal dots. The code uses `d3.geoPath` with the `geoNaturalEarth1` projection to render the map, and `d3.scaleSqrt` to create the size encoding. City data comes from a CSV file containing global city populations, while country boundaries are loaded from a world-atlas JSON file.

Loading thumbnail…

Points on a Map

This example displays a world map with points marking cities. The visualization uses a Natural Earth projection, rendered as a sphere with graticules and landmasses, overlaid with semi-transparent teal circles representing city locations from a CSV dataset. The map is drawn using SVG paths generated by `d3.geoPath` and the `geoNaturalEarth1` projection, while city coordinates are projected and placed as circles. The React application loads the world atlas and city data via `d3.json` and `d3.csv` helpers, with the map and points updated upon data arrival.

Loading thumbnail…

Interactive Color Legend

This interactive color legend visualizes the Iris dataset as a scatter plot, where hovering over a species name in the legend highlights only the corresponding data points while dimming the rest. The chart uses React with D3 scales to map sepal and petal measurements to x and y positions, while a D3 ordinal color scale assigns distinct colors to each species. The ColorLegend component triggers hover state updates that filter the rendered marks, and native SVG circle titles provide simple tooltips on data points.

Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris dataset, displaying sepal and petal measurements for three flower species distinguished by color. Users can switch the x- and y-axes between four measurement attributes via dropdown menus. The example uses React with D3 v6 scales and axes, rendering SVG circles and a custom color legend. Data is loaded asynchronously using D3’s `csv` loader and mapped to linear scales with `.nice()` formatting.

Loading thumbnail…

Scatter Plot with Color

A scatter plot of the Iris dataset, with color encoding species and dropdown menus to select which flower measurements appear on the x and y axes. The visualization uses React with hooks to manage state and D3 v6 scales for positioning axes and circles, rendered as SVG elements. Axis ticks and labels are generated manually with JSX, while the ordinal color scale maps the three species to a custom palette. Data loads asynchronously via d3.csv from a remote URL.

Loading thumbnail…

Polished Scatter Plot with Menus

A scatter plot of the Iris dataset rendered in SVG, with dropdown menus to select which quantitative attribute maps to the x- and y-axes. The React app uses `useState` and `useEffect` to load and manage data, while D3's `scaleLinear`, `extent`, and `format` handle scaling and tick formatting. Reusable SVG components draw axes and marks, with axis labels updating dynamically based on the selected attributes.

Loading thumbnail…

Scatter Plot with Menus

A scatter plot of the Iris dataset rendered with SVG, where dropdown menus allow the user to select which attribute maps to the x- and y-axes. The visualization uses React with hooks for state management, D3 scales and axes for positioning, and a custom Dropdown component to update the selected attributes. Circles represent each flower, with a tooltip showing the x-axis value.

Loading thumbnail…

React Dropdown

This example demonstrates a simple React component that renders a dropdown menu for selecting an animal from a hardcoded list of options. It shows how React state manages the currently selected value and updates the UI in response to user interaction. The implementation uses React hooks like `useState` to track the selection, and the `Dropdown` component receives options and a callback via props. While the code imports `range` from D3 v6, that function is not actually invoked, leaving the visualization’s logic purely React-based without any D3 rendering.

Loading thumbnail…

React Starter with D3

This example demonstrates a minimal integration of React and D3 in a single-page application. It renders a static "Hello" message inside a React component, with the page styled to have no margins and hidden overflow. The code imports React, ReactDOM, and the `range` function from D3 v6, then mounts the App component to the root div. The HTML loads React 17, ReactDOM 16.7, and D3 6.5 from CDN, relying on a bundled JavaScript file for execution.

Loading thumbnail…

Stylized Line Chart (Temperature in San Francisco)

A stylized line chart displays temperature readings in San Francisco over time, using a smooth natural curve and a red dot at each observation. The visualization loads CSV data via D3's `csv` function, scales time and temperature with `scaleTime` and `scaleLinear`, and renders SVG paths and circles. React manages the component state, while D3's `line` with `curveNatural` creates the curved path, and axis components generate ticks with grid lines.

Loading thumbnail…

Stylized Scatter Plot (Iris Data)

This example visualizes the Iris dataset as a scatter plot, mapping sepal length to the x-axis and sepal width to the y-axis with a circle for each sample. The SVG is rendered with React, using d3.scaleLinear for the scales and d3.extent to set the domains. Axes are custom components that draw tick marks and labels, while the marks use a native `<title>` element for tooltips. The data is loaded asynchronously via d3.csv and parsed into numeric fields.

Loading thumbnail…

Stylized Bar Chart

A stylized bar chart displays the top 11 most populous countries based on United Nations World Population Data 2019. Highlighted bars, colored teal with a Poppins font, extend from the left, with a population axis beneath. The visualization uses D3 v6 scales and formats, including `scaleBand`, `scaleLinear`, and `siFormat`, within a React component. The code renders SVG elements directly, with axes and marks built from custom components that map data to coordinates and include tooltips via `<title>` elements.

Loading thumbnail…

Refactored Bar Chart

This example shows a horizontal bar chart of United Nations world population data for 2020, listing the top 11 countries sorted by population. The visualization uses React to render SVG elements, with D3.js v6 providing the `scaleBand` and `scaleLinear` functions to map data to coordinates. The `useData` hook asynchronously fetches and parses a CSV file via D3’s `csv` method, while separate components (`Marks`, `AxisBottom`, `AxisLeft`) encapsulate the bars, x-axis, and y-axis. A minimal loading state appears until the data is ready.

Loading thumbnail…

Axes with React & D3

A horizontal bar chart displays the 11 most populous countries in 2020, using United Nations World Population Data 2019. React manages the component state, loading the CSV via `d3.csv` and sorting/slicing the data. D3’s `scaleBand` and `scaleLinear` position the bars, while custom SVG groups render tomato-colored gridlines and axis tick labels from `xScale.ticks()`. All marks are drawn as SVG elements within a translated `<g>` group, using margins to align the chart.

Loading thumbnail…

The Margin Convention

This example shows a horizontal bar chart of the top ten most populous countries, using data from the United Nations World Population Data 2019. The chart is rendered as an SVG in a React component, with the bars sorted in descending order of population. The code builds the visualization using d3.scaleBand for the y-axis categories, d3.scaleLinear for the x-axis values, and d3.csv to load the data, positioning all elements within a defined margin using a translation transform.

Loading thumbnail…

Pathetic Bar Chart

This example uses a bar chart to display the top eleven countries by population from the United Nations World Population Data 2019, though the visualization intentionally lacks clear labeling or styling. React manages the component state and rendering, loading the CSV data via d3.csv and sorting it before displaying. The SVG output uses d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis to size the rectangles, resulting in a chart that visually communicates little beyond raw bar lengths.

Loading thumbnail…

Rendering colors data with React

This example renders a color wheel of all named CSS colors using React and D3. The data comes from a CSV file listing CSS color names and their hexadecimal RGB values. React manages the loading state with hooks, while D3’s `pie` layout computes arc angles and `d3.arc` generates SVG path data. Each color appears as a slice of the wheel, filled with its corresponding hex value, rendered inside an SVG element.

Loading thumbnail…

Rendering data with React

The visualization displays 148 CSS named colors as a vertical stack of horizontal bars, each colored with its corresponding hex value. Built with React, the app uses the `useState` and `useEffect` hooks to fetch a CSV file from a gist via `d3.csv`, then maps each row to a styled `<div>` element. React’s `backgroundColor` property applies the color, while the fixed width and height create the stacked band effect. The example demonstrates how D3’s data-loading API integrates with React’s component-based rendering model.

Loading thumbnail…

Loading data with React & D3

This example demonstrates a minimal React application that loads a CSV file of CSS named colors using D3 utilities. It shows the downloaded data’s size, column count, and row count in a simple text display. The code uses React’s `useState` and `useEffect` hooks, with `d3.csv` to fetch the remote file and `d3.csvFormat` to measure its serialized size. The interface initially shows “Loading...” then updates once the async data fetch completes.

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes automobile fuel efficiency and performance data from the UCI Machine Learning Repository’s Auto MPG dataset. It shows the relationship between miles per gallon and horsepower, with color encoding country of origin, size encoding vehicle weight, and tooltips revealing car names. The visualization is built using Vega-Lite’s API built on D3, employing vl.markCircle and its encoding methods. The D3 csv function loads the data, while custom configuration in config.js adjusts axis styling for readability.

Loading thumbnail…

Loading and parsing CSV data - with fetch

This example demonstrates how to load and parse a remote CSV file using the built-in `fetch` API. It displays the file size in kilobytes, the number of columns, and the number of rows in the parsed dataset. The code uses D3 v6’s `csvParse` method to convert the fetched text into a tabular data structure. The CSV data is retrieved from a GitHub Gist containing CSS named colors, and the results are rendered as plain text in a large `<pre>` element.

Loading thumbnail…

Smiley Face Part I

A grid of identical smiley faces renders as reusable React components, each built from a yellow background circle, two black eyes, and a mouth drawn with an SVG path. The mouth uses `d3.arc` to generate a half-circle arc from specified radius and width parameters. All faces share fixed dimensions and offsets, with the SVG canvas set to hide overflow. The code demonstrates component composition and data-driven shape generation in `d3` v6 within a React 17 application.