vmonney

Coronavirus Deaths Over Time by Country With Voronoi Overlay

This graphic displays cumulative COVID-19 death counts per country on a logarithmic scale, with each country’s trajectory drawn as a line over time. A Voronoi overlay using `d3.Delaunay` enables interactive highlighting: hovering over any cell activates the corresponding country’s line, which thickens and turns black. Built with React and rendered as SVG, the chart uses `d3.scaleLog`, `d3.scaleTime`, and `d3.line` to map data from the Johns Hopkins Coronavirus Dataset.

Oct 18, 2022

Coronavirus Deaths Over Time by Country with Voronoi Overlay

This visualization displays cumulative COVID-19 deaths over time for multiple countries as log-scaled line charts, with a Voronoi overlay enabling hover interactions. The React app loads data from a GitHub-hosted CSV and renders SVG paths using d3.line, d3.scaleLog, and d3.scaleTime. The VoronoiOverlay component leverages d3.Delaunay and d3.voronoi to create interactive cells, while custom XAxis and YAxis components use d3.axisBottom and d3.axisLeft. Gridlines and axis labels are styled via CSS tick rules.

Oct 18, 2022

Coronavirus Visualization labels

This visualization displays the global cumulative COVID-19 death toll over time as a single line graph, using a logarithmic y-axis to accommodate data growth from one to millions of deaths. The chart plots weekly date points, with grid lines extending across the plotting area. The visualization is built with React and D3 v7, using `scaleTime` and `scaleLog` for the axes, a `line` generator for the path, and `axisBottom`/`axisLeft` for tick marks. Data is fetched from the CSSE COVID-19 time series CSV, aggregated daily by summing confirmed deaths across all countries.

Coronavirus Log Y Axis

This chart tracks the cumulative global death toll from COVID-19 over time, using a logarithmic y-axis to compress the wide range of values. The line plot rises steeply, emphasizing the exponential early growth as cases spread worldwide. Built with React and D3 v7, it uses `scaleTime`, `scaleLog`, and a `line` generator to render the path, with `axisBottom` and `axisLeft` for gridlines. Data comes from the CSSE Johns Hopkins GitHub repository, aggregated from daily global CSV reports.

Coronavirus Linear Y Axis

A line chart displays the cumulative global death toll from COVID-19 over time. The y-axis uses a linear scale starting at zero, while the x-axis maps dates. The visualization uses D3.js (v7) and React (v18) to render the SVG path, with axes generated by `axisBottom` and `axisLeft`. Data is loaded from a CSV file of global deaths and aggregated by date. Grid lines are styled with a light gray color.

Coronavirus Basic line Chart

This line chart visualizes global COVID-19 death totals over time, using a time-series dataset from the CSSE at Johns Hopkins. It plots a single black path generated with d3.line, with axes built via d3.axisBottom and scaleTime/scaleLinear. React manages the SVG rendering, while d3-selection updates the axis. Two marker lines highlight the current date and the six-million-death threshold, styled with CSS classes in the accompanying stylesheet.

Summarising Coronavirus Data

This example summarizes the global death toll from the Johns Hopkins Coronavirus dataset. It displays a single large text element showing the total number of deaths and the date of the latest data column. The visualization loads the CSV with `d3.csv`, extracts the final column, and sums its numeric values using `Array.reduce`. It formats the result with `d3.format` and updates the page’s `pre` element via `getElementById`.

Oct 12, 2022

Loading and Parsing Coronavirus Data

This example demonstrates how to load and parse a CSV dataset containing CSS named colors using d3.csv. It displays the file size in kilobytes, the number of rows, and the number of columns in a large HTML <pre> element. The code fetches data from a GitHub gist URL and uses the Promise-based .then() method to process the returned array. It calculates the formatted CSV length with d3.csvFormat and reports the dataset’s dimensions.

Oct 10, 2022

HIV / AIDS Choropleth Map

This choropleth map visualizes the global prevalence of HIV/AIDS among adults aged 15–49 in 2017, using a yellow-to-red sequential color scale to show infection rates per country. Built with React and D3 v5, it projects country boundaries with d3.geoNaturalEarth1 and d3.geoPath, overlaying graticules and interiors. Country data from the IHME dataset is joined to geographic features via ISO numeric codes, with missing regions rendered in grey.

Oct 10, 2022

Missing Migrants Scatter Plot Log Scale

This scatter plot visualizes the Missing Migrants Dataset, with each circle representing a single migrant incident. The x-axis shows the reported date on a time scale, while the y-axis displays the total dead and missing on a logarithmic scale. The visualization uses React with D3 v5, employing scaleTime for dates and scaleLog for the numeric axis, with SVG circles rendered through custom React components. Hovering over a circle reveals the exact date via a tooltip.

Oct 8, 2022

Multiple Views with Brushing

A choropleth world map displays the total number of dead and missing migrants, with circles scaled by D3's `scaleSqrt`. A time-series histogram below, using D3's `scaleTime` and `histogram` binning, shows the same metric over time. Interactive brushing on the histogram filters the map's circles in real-time via a `brushX` event, demonstrating linked views. The visualization is built with React, rendered as SVG, and uses D3 v5 for projections and scales, with data loaded from a CSV file.

Oct 8, 2022

Multiple Views

This example shows a world map of migrant deaths and disappearances, with bubble sizes proportional to the total number of dead and missing per location. Below the map, a date histogram displays the monthly sum of these casualties over time, using a time-scaled bar chart. The map is rendered with `d3.geoNaturalEarth1` and `d3.geoPath`, while the histogram uses `d3.bin` and `d3.scaleTime`. Both views are built as React components with SVG, driven by CSV data on reported dates and coordinates.

Oct 7, 2022

Missing Migrants on a Map

A world map visualizes the locations and magnitudes of missing migrant incidents, with semi-transparent circles sized by the total number of dead and missing per coordinate. The visualization uses D3’s `geoNaturalEarth1` projection and `geoPath` for land and graticule rendering, while a square-root scale maps incident counts to circle radii. React manages the component state, loading CSV data and world-atlas TopoJSON via hooks. The SVG rendering provides a clean overview of global migration-related fatalities.

Oct 7, 2022

Missing migrants

This visualization aggregates monthly totals of dead and missing migrants from the Data Canvas Sense Your City Dataset, displayed as a bar chart over time. The x-axis uses a time scale while the y-axis shows cumulative counts. Built with React and D3 v5, it employs `d3.csv` for data loading, `d3.bin` with `timeMonths` thresholds for histogram binning, and `scaleTime`/`scaleLinear` for axes. SVG rectangles render the bars, with axis components and tooltips implemented via `AxisBottom`, `AxisLeft`, and `Marks`.

Oct 7, 2022

Points on a Map

This visualization displays a world map with circles representing the populations of cities, scaled using a square root scale from D3. The map, rendered as SVG in a React app, uses the D3 `geoNaturalEarth1` projection to place points. Geographic data comes from the world-atlas TopoJSON via `topojson.feature` and `topojson.mesh`, while city data loads from a CSV. The graticule, sphere, and land outlines are styled via CSS, and the semi-transparent teal circles have opacity set to 0.3.

Oct 6, 2022

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length and sepal width across three species. A color legend categorizes data points by species, and hovering over a legend item highlights the corresponding points while fading others to 20% opacity. The visualization is built with React and D3 v5, using `scaleOrdinal` for color mapping and programmatically generated SVG components for axes and marks.

Oct 4, 2022

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. Two dropdown menus, built with ReactDropdown, dynamically control which attributes map to the x and y axes, with the species determining point color through a d3.scaleOrdinal color scale. The React-based visualization uses d3.scaleLinear for axes, renders SVG circles via the Marks component, and includes tooltips showing formatted values. Data loading is handled by d3.csv with type coercion for numeric columns.

Oct 4, 2022

Menus with React

This example demonstrates a pet-selection dropdown menu built with React. It shows how a controlled `<select>` element updates a displayed value based on user interaction. The code defines a reusable `Dropdown` component that receives options, a selected value, and a change handler, using React hooks (`useState`) to manage state. The interface renders a large label and select box, with the chosen pet name reflected instantly. It uses React and ReactDOM to mount the app, with the dropdown options defined as a static JavaScript array of pet names.

Oct 4, 2022

Swiss Map

This visualization shows a choropleth-style map of Switzerland, displaying all municipal boundaries with a teal fill and interior borders in a lighter stroke. The map renders as SVG using React, with `d3.geoPath` and a projection applied to draw the geographic features from TopoJSON data loaded via `d3.json`. The data originates from the `swiss-maps` package on unpkg, which provides combined municipality geometry. The code also uses `@turf/bbox` to compute the map’s extent, though the bounds are not explicitly applied to scale the view.

World Map

This visualization displays a world map using an SVG projection, with landmasses filled in teal, graticules in light gray, and country borders drawn as interior lines. The map is rendered with React and D3 v5, using `d3.geoNaturalEarth1` for the projection, `d3.geoPath` to generate paths, and `d3.geoGraticule` for the grid. Geographic data comes from the World Atlas TopoJSON file, which is loaded via `d3.json` and processed with `topojson.feature` and `topojson.mesh`. A subtle sphere outline frames the map against a neutral background.

Rendering Data with React

A radial burst of CSS named colors, each rendered as a slice of a pie chart, displays the full color palette from a CSV dataset. React components map each data row to an SVG `<path>` element, with React's `useState` and `useEffect` hooks managing the asynchronous loading of the data via D3's `csv` method. The visualization uses `d3.pie` and `d3.arc` to compute the angular and radial geometry, while each slice is filled with its corresponding hex value from the data.

Stacked Bar Chart Vega Lite API

A stacked bar chart displays population distribution by country across religious groups, using categorical colors to distinguish religions and sorting countries in descending order. Built with the Vega-Lite API for declarative charting, it loads CSV data via `d3.csv` from a remote URL, then renders as an SVG view with custom axis styling and tooltips from `vega-tooltip`. The visualization integrates Vega, Vega-Lite, and D3 v5, wrapping the specification in a responsive layout that fits the browser window.

Bar Chart Vega-Lite API

This bar chart displays population by country for 2015, with countries sorted in descending order along the x-axis and population values on the y-axis. The visualization is built using the Vega-Lite API, which composes a markBar specification with fieldN and fieldQ encodings, and renders via Vega’s SVG renderer. Data is loaded asynchronously from a CSV file using d3.csv, while a custom config adjusts axis styles and tooltip font sizes. The chart dynamically fits its width and height to the window viewport.

Line Chart With Vega-lite API

This example displays a line chart of weekly temperature data for San Francisco, loaded from a CSV file via the `d3.csv` function. The visualization is built entirely with the `vega-lite-api` library, which abstracts Vega-Lite specifications into a chainable JavaScript API. The chart encodes timestamps on the x-axis and temperature on the y-axis, with a tooltip showing the temperature value. Custom axis and label styling are applied through a shared config object, and the rendered SVG is fit to the browser window's dimensions.

Stylized Line Chart

This stylized line chart visualizes temperature over time for a week, using a natural curve to smooth the data. Built with React and rendered as SVG, the chart uses D3’s `scaleTime`, `scaleLinear`, and `curveNatural` to map timestamps and temperature values. The data is loaded from a CSV file containing San Francisco week temperature readings. Styling includes a Poppins font, custom tick marks, and a thick teal line with rounded joins, while circles for individual points are commented out in the code.

Scatter Plot

This scatter plot visualizes the Iris Dataset, plotting sepal length on the x-axis against sepal width on the y-axis. The React application loads the CSV data via `d3.csv` and renders the chart as an SVG. It uses D3 v5 scales (`d3.scaleLinear`) and extent to compute axes, with tick marks styled via CSS. Hovering over a circle reveals its sepal length using an SVG `<title>` tooltip.

Sep 29, 2022

Stylized Bar Chart

This stylized bar chart displays the population of ten countries, with horizontal bars extending from a common baseline. The visualization is built with React, rendering SVG elements directly, and uses D3 v5 utilities like `scaleBand` and `scaleLinear` to map the population data to pixel coordinates. The data is loaded asynchronously from a CSV file hosted on GitHub using `d3.csv`, with the chart applying a custom formatting function to abbreviate large population values. Axis ticks and labels are styled with Poppins font and muted colors.

Sep 29, 2022

My Vega-Lite API Template

This interactive scatter plot visualizes the relationship between miles per gallon, horsepower, weight, and origin for a set of automobiles loaded asynchronously from a CSV via D3’s `csv` function. Rendered with the Vega-Lite API, the chart encodes continuous fields on x- and y-axes, categorical origin on color, and weight on point size, with tooltips revealing car names. The visualization adapts to the window size and uses a custom dark theme defined in a shared config object, with D3 version 5 and Vega-Lite v4.0.0-beta.1.

Sep 27, 2022

Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data from a remote URL and displaying summary statistics as text. It uses the D3 v7 `d3.csv` function to fetch and parse a gist-hosted file containing CSS named colors, then computes the formatted data size in kilobytes, row count, and column count. The resulting message is rendered inside a `<pre>` element styled with large font size. The code also references `d3.csvFormat` to determine total data size.

Sep 27, 2022

Mouse Follower

A simple interactive visualization renders a single circle that follows the mouse cursor across an SVG canvas. The circle’s position updates in real time, tracking the user's pointer movement. The example uses React’s `useState` and `useCallback` to manage the mouse coordinates, and renders the circle via an SVG `<circle>` element with `cx` and `cy` attributes set from the current mouse position. The `onMouseMove` event handler on the SVG element captures the cursor's `clientX` and `clientY` values, which are then used to update the circle’s location.

Sep 25, 2022