PadoSensei

Coronavirus Deaths Over Time by Country With Voronoi Overlay

A line chart displays cumulative COVID-19 deaths over time, with a gray line for each country from the Johns Hopkins dataset. A Voronoi overlay, built with `d3.Delaunay`, enables hover interaction: moving the mouse over any point highlights the corresponding country’s full line in black and shows a tooltip with its name, death count, and date. The SVG chart uses `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` for axes and paths, with React handling state updates.

Apr 9, 2021

Covid Global Deaths By Country Over Time With Voronoi Overlay

This chart displays cumulative COVID-19 death counts for multiple countries over time, using a multi-line graph rendered with SVG paths. A Voronoi overlay, built with `d3.Delaunay` and `voronoi.renderCell`, is drawn in pink on top of the lines to enable precise mouse interaction with individual data points across the densely packed trajectories. The chart loads global time-series data from the CSSEGISandData COVID-19 GitHub repository, parses it with `d3.csv` and `timeParse`, and scales the axes with `scaleTime` and `scaleLinear`. React manages the component structure, while D3 handles axis generation via `axisBottom` and `axisLeft`.

Apr 6, 2021

Covid Global Deaths By Country Over Time

This line chart shows cumulative COVID-19 death totals for each country over time, with every country represented as a separate colored path. The chart uses an SVG rendering with React components, while D3’s `scaleTime`, `scaleLinear`, and `line` generator handle the axes and path construction. Data is loaded from the CSSEGISandData GitHub repository via `d3.csv`, and the Y-axis uses D3’s `axisLeft` with tick formatting to display compact death counts. Multiple countries are rendered simultaneously, allowing visual comparison of pandemic trajectories.

Apr 6, 2021

Covid Deaths by Country Over Time

This visualization displays the global total of COVID-19 deaths over time as a single blue line chart. Built with React and D3 v6, it aggregates daily death counts from the CSSE COVID-19 time series dataset. The chart uses d3.scaleTime for the x-axis, d3.scaleLinear for the y-axis, and d3.line to generate the SVG path. Proper axes with gridlines are rendered using d3.axisBottom and d3.axisLeft, providing a clear view of the pandemic’s mortality trend.

Apr 6, 2021

Testing Coronavirus Linear Y Axis

A line chart displays the cumulative global death toll from COVID-19 over time, using a linear y-axis that starts at zero. The chart emphasizes the steep, near-exponential growth of deaths by avoiding a logarithmic scale. The visualization loads data from the Johns Hopkins Coronavirus dataset via `d3.csv` and renders an SVG path generated by `d3.line` with `d3.scaleTime` and `d3.scaleLinear` axes. The React component uses `d3.axisBottom` and `d3.axisLeft` for ticks and gridlines.

Apr 5, 2021

Covid Global Deaths Line Chart

This chart displays cumulative global COVID-19 deaths over time as a single black line, with green marker lines highlighting both the current date ("Now") and a death total of 2.5 million. The React component uses d3.scaleTime and d3.scaleLinear to map dates and death counts to SVG coordinates, while d3.line generates the path. Axes are rendered via d3.axisBottom, and data comes from a global CSV time-series file aggregated by summing country values.

Apr 5, 2021

Global Covid Deaths - Basic Summary of Deaths

This example shows the total number of global COVID-19 deaths as of the latest date in the dataset, displayed as large text in a `<pre>` element. It loads the Johns Hopkins CSSE time-series CSV, reads the final date column, sums all numeric values with `Array.reduce`, and formats the result with `d3.format`. The visualization relies on `d3.csv` for data loading and updates the page text via the DOM.

Apr 2, 2021

Choroleth Map for HIV/AIDS

A choropleth map displays HIV/AIDS prevalence for the year 2014, with countries colored on a yellow-orange-red sequential scale. The visualization uses React with d3.geoPath to render geographic features, while d3.geoNaturalEarth1 and d3.geoGraticule create the map projection and graticule. Data from a CSV file is joined to country shapes via ISO country codes, with missing data filled in white.

Apr 1, 2021

Optimized React w/ Brushing

A choropleth of missing migrant incidents combines a world map with a filterable timeline. Geographic data from the World Atlas TopoJSON renders via `d3.geoPath` and `d3.geoGraticule` in an SVG, overlaid with circles sized by `d3.scaleSqrt`. A date histogram below, built with `d3.scaleTime` and `d3.histogram`, uses `d3.brushX` to select a date range. This brushing interaction filters the bubble map circles, revealing temporal patterns in the dataset.

Mar 31, 2021

Missing Migrants Combo Viz w/ Brush

A combo visualization displays the global distribution of missing and dead migrants using a natural Earth projection world map with scaled circles, paired with a time-series histogram of monthly totals. A brush on the histogram filters the map by date range, though the filtering logic is not implemented. Built with React and D3 v6, it uses `d3.geoPath`, `d3.scaleSqrt`, `d3.bin`, and `brushX`. Data comes from a CSV subset of the Missing Migrants Project, rendered as SVG.

Mar 31, 2021

Missing Migrants Combo Viz

This combo visualization displays global migrant deaths and disappearances through two coordinated views. A world map using `geoNaturalEarth1` and `geoPath` projects circles scaled by `scaleSqrt` to represent cumulative fatalities per location, while an overlaid histogram uses `scaleTime`, `bin`, and `timeMonths` to aggregate the same data by reported date. React manages state through hooks, with D3 v6 handling data loading via `csv` and `json`, and the TopoJSON `feature` and `mesh` APIs rendering land and borders. Circle opacity and axis styling are defined in CSS.

Mar 30, 2021

Migrant Deaths

This chart visualizes the total number of migrants reported dead or missing over time, using a bar chart where each bar represents a monthly bin. The data is loaded from a CSV file and processed using D3’s `bin` and `timeMonths` functions to aggregate the counts, while the y-axis scales the maximum total. The visualization is rendered as SVG elements within a React application, with axes and marks generated by custom components like `XAxis`, `YAxis`, and `Marks`. The chart highlights the temporal distribution of migrant fatalities, with tooltips showing exact totals on hover.

Mar 30, 2021

Missing Migrants on World Map

This interactive map visualizes the geospatial distribution of missing and dead migrants worldwide, with circle size encoding the total number of casualties per incident. Built with React and D3 v6, it renders a natural Earth projection using `geoNaturalEarth1` and `geoPath`, overlaying graticules, landmasses, and country borders from the World Atlas TopoJSON dataset. Migrant incident data from a CSV file is projected onto the map, with point radii scaled by a square-root scale. The visualization uses SVG for crisp rendering and semi-transparent white circles to convey density.

Mar 30, 2021

World Map Points

A world map rendered with D3's geoNaturalEarth1 projection and geoPath displays cities as semi-transparent circles sized by population via a square-root scale. The map includes graticules, landmasses, and country borders from the world-atlas TopoJSON dataset, transformed with topojson.feature and topojson.mesh. City coordinates and populations load from an external CSV, while React manages the SVG rendering. This example demonstrates combining geographic basemaps with proportional point symbols in a single React component.

Coloured ScatterPlot Menu

This interactive scatterplot displays the classic Iris flower dataset, allowing users to select which measurements appear on the X and Y axes via dropdown menus. The visualization is rendered as an SVG using D3 v6 within a React framework, with marks colored by species and an interactive color legend that fades unrelated points on hover. The code utilizes D3 scales like `scaleLinear` and `scaleOrdinal` to map data to positions and colors, with `csv` loading from a GitHub gist.

Coloured ScatterPlot Menu with Interactive Legend

This interactive scatterplot uses the classic Iris flower dataset to explore relationships between four measurements—sepal length, sepal width, petal length, and petal width—across three species. Two dropdown menus let users select which numeric attributes appear on the x and y axes, while a categorical color legend assigns distinct hues to each species. Built with React and D3 v6, the SVG rendering uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for colors, and custom React components for axes, marks, and legend. The legend displays clickable color swatches that also serve as static labels, with axis ticks formatted using `d3.format`.

ScatterPlot with Colour Legend

This interactive scatterplot visualizes the Iris flower dataset, comparing sepal and petal measurements across three species. Users can dynamically select which attributes to plot on the X and Y axes via dropdown menus, with points colored by species using a d3.scaleOrdinal legend. Built with React and D3 v6, the SVG visualization renders axes and circular marks through reusable components, while d3.csv loads the data and d3.extent computes scale domains for responsive axis ranges.

Refactored ScatterPlot with Menu

This interactive scatterplot displays the Iris dataset, allowing users to select which quantitative attributes appear on the x- and y-axes via two dropdown menus. Built with React and D3 v6, it renders SVG circles positioned by `scaleLinear` scales. The code uses `d3.csv` for data loading and custom React components for the axes and marks, with dropdown selection triggering state-based updates to the visualization.

Mar 26, 2021

ScatterPlot with Menu

An interactive scatterplot of the Iris dataset displays measurements of sepal width, sepal length, petal width, and petal length as points. Users select which measurements appear on the X and Y axes via two dropdown menus, with axis labels updating accordingly. Built with React and D3 v6, the visualization uses `d3.scaleLinear` for axes, `d3.extent` for domains, and renders SVG circles, lines, and text. Data is loaded from a CSV using `d3.csv`, and components for axes, marks, and dropdowns are modularized into separate React files.

React Menus

This example shows a React-based user interface for selecting a pet from a dropdown menu, displaying the chosen option as plain text next to the label. The app uses the `useState` hook to manage the selected value and passes it to a custom `Dropdown` component, which renders a native HTML `<select>` element. The `Dropdown` component receives an array of option objects (each with `value` and `label` properties) and triggers an `onSelectedValueChange` callback on user interaction. The code leverages React and ReactDOM to mount the application to a root `div` element, with the `index.html` file linking to React 17 production builds.

React Starter Code

This example demonstrates a minimal React application that renders a static “hello world” message inside a 166x166 pixel container. It uses React 17 and ReactDOM to mount the component into a root div, with the app defined as a functional component returning JSX. The code shows the basic setup for integrating React with a visualization project, relying on the production builds of React and ReactDOM loaded from unpkg, and a separate bundled script containing the application logic.

World Map

This example renders a world map using a natural Earth projection. It displays landmasses and interior borders in teal and gray against a light sphere, with graticules indicating latitude and longitude lines. The visualization loads GeoJSON topology from the world-atlas package and processes it with topojson’s `feature` and `mesh` functions. It uses d3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` APIs within a React component, drawing all paths as SVG.

Line Chart of Temp

This line chart displays temperature readings over a week, with time on the x-axis and temperature on the y-axis. The visualization is built with React and D3 v6, using `scaleTime` and `scaleLinear` for axes and `line` with `curveNatural` to render a smooth path. Data is loaded from a CSV via `d3.csv`, while custom `XAxis` and `YAxis` components generate tick marks and labels. The chart includes axis titles and uses an SVG rendering approach, with the line styled in a teal color.

Mar 23, 2021

ScatterPlot Iris

This scatter plot visualizes the relationship between sepal length and sepal width for Iris flowers. The React application loads the Iris dataset CSV using d3.csv, then renders SVG circles positioned by d3.scaleLinear x and y scales. Both axes display tick marks and labels created with custom React components, while hover tooltips reveal exact values via SVG title elements. The plot uses a fixed teal color for all points and includes styled axis labels for clarity.

Mar 22, 2021

Stylish UN Population Bar Chart

This bar chart displays the top ten countries by population in 2019 using UN data loaded via d3.csv. The visualization orders the countries along the y-axis and shows their population values on x-axis bars, with D3’s scaleBand and scaleLinear determining the chart geometry. Rendered as a React SVG, the custom XAxis, YAxis, and Marks components map the data to rectangles, while d3.format converts numeric population labels into abbreviated billion (B) units.

Mar 22, 2021

UN Population Bar Chart Refactored

This example shows a horizontal bar chart of the top 10 most populous UN countries for 2020, with country names labeled on the y-axis and population counts on the x-axis. The visualization is rendered as SVG in a React component, using D3 v6 scales (scaleBand and scaleLinear) to map data, with separate XAxis and YAxis components drawing gridlines and tick labels. Data loads asynchronously from a CSV file via d3.csv in a custom useData hook, and React manages the component lifecycle.

Mar 20, 2021

UN Population Bar Chart

This example visualizes the top 10 countries by projected 2020 population using a horizontal bar chart. The React app fetches UN population data from a CSV file, then uses d3.scaleBand and d3.scaleLinear to map countries and population values to SVG rectangles. Axis ticks and labels are generated with d3 scale methods, while the chart is rendered entirely through React’s declarative SVG elements.

Mar 20, 2021

UN Population Data

This visualization displays all named CSS colours from the MDN Colour List as a single large pie chart. Each slice is drawn using D3’s `pie` and `arc` generators, with the slice fill set directly from the colour’s hex value in the data. The chart is rendered as SVG within a React component, using React hooks to load the CSV data asynchronously via D3’s `csv` function. The entire pie occupies the full width of the viewport, emphasizing the full spectrum of colour names.

Mar 19, 2021

CSS Colour List

This example displays a list of all named CSS colours, rendered as a large, centered title on a plain white page. The visualization is minimal, showing only the text “CSS Colours” without any graphical encoding of the colour values themselves. The code fetches a CSV file containing the colour names from a GitHub gist and parses it using `d3.csvParse`, but the parsed data is only logged to the console and not used for any visual output. The page uses D3 v6 for data loading, with the body styled at a font size of 13em to emphasize the title.

Mar 18, 2021

Mouse Follow

A circle inside an SVG follows the mouse's movement across the viewport in real time. The app initializes the circle at the center of a 960-by-500 coordinate space, then updates its position on every mousemove event. React’s `useState` and `useCallback` hooks manage the mouse coordinates, which are passed to the circle’s `cx` and `cy` attributes. The example renders using ReactDOM and React 16.13.1, with the SVG’s `onMouseMove` handler triggering the state update.

Mar 18, 2021

React the FirstFace

Four abstract smiley faces render in a row on a green SVG canvas, each composed of a circular head, two white eyes, and a dark mouth arc. Built with React and D3, the example uses modular components to assemble each face and the `d3.arc()` generator to shape the mouth path. All faces share identical geometry, generated by mapping over a `range(4)` array from D3.

Mar 18, 2021