Phronesis

HIV / AIDS Cases Scatter Plot

This scatter plot visualizes reported HIV/AIDS cases over time, showing the total count of dead and missing individuals per month. The visualization uses a logarithmic y-scale to accommodate the wide range of case values across the time series. Built with React and D3 v5, the code implements `scaleTime` and `scaleLog` for axes, `histogram` binning with monthly thresholds, and `sum` aggregation for bin totals. The SVG rendering uses custom `AxisBottom` and `AxisLeft` components, with circles representing individual data points from the Missing Migrants Global subset CSV.

Nov 26, 2021

Missing Migrants on a Map (Multiple Views w/ Brushing)

This example visualizes missing and deceased migrants on a world map, with a linked time-series bar chart below. Brushing the histogram filters the map’s circles by date range, while hovering any circle reveals its location, date, and total count. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` for the sphere, graticules, and country outlines, with circle radii scaled by `d3.scaleSqrt`. The histogram aggregates data monthly via `d3.histogram` and `timeMonths`, with brushing implemented through `d3.brushX`. Data comes from a CSV of global migrant incidents, rendered in SVG.

Missing Migrants on a Map (Multiple Views)

This interactive visualization combines a geographic bubble map with a time-series histogram to explore missing migrant incidents worldwide. The map projects incident locations using D3's `geoNaturalEarth1` projection and `geoPath`, with circle radii scaled by the square root of the death count via `scaleSqrt`. A histogram below aggregates incidents by month, using `scaleTime`, `timeMonths`, and the `histogram` binning API. Data comes from a CSV of global missing migrant records, rendered as SVG within a React framework using specified D3 v5 modules.

Points on a Map

This example plots the world’s most populous cities as translucent circles over a natural Earth projection, with circle size scaled by population using a square-root scale. A D3 geoPath renders country landmasses, graticules, and interior borders from World Atlas TopoJSON data, while React manages the component state and SVG rendering. City coordinates are projected via geoNaturalEarth1, and each point includes a tooltip showing city name, country, and longitude/latitude. Hovering over a country reveals its name through an SVG title element.

Tracking Migrant Deaths

This visualization tracks migrant deaths and disappearances over time using a histogram of monthly totals. The bar chart displays the aggregate number of dead and missing individuals per month, with a native tooltip on each bar showing the exact date range and total. The code uses React and d3.v5, leveraging `d3.bin` with `d3.timeMonths` thresholds to bin the data by month, `d3.scaleTime` for the x-axis, and `d3.scaleLinear` for the y-axis. Data comes from a CSV of the Missing Migrants Global dataset, rendered as SVG rectangles with axes built from custom React components.

Missing Migrants on a Map

This visualization displays global locations of missing migrants, with circle size encoding the number of dead or missing based on a square-root scale. A world map rendered with `d3.geoNaturalEarth1` and `d3.geoPath` shows country landmasses and graticules from World Atlas TopoJSON, while white semi-transparent circles mark each incident’s coordinates. The data comes from a CSV of migrant incidents, processed in React with D3’s `csv` and `scaleSqrt` functions.

Working with Time

This visualization shows temperature readings taken multiple times per day over a single week, plotted as a smooth line chart with individual data points. It uses a d3.scaleTime for the x-axis and a d3.scaleLinear for temperature, with CSV data loaded via d3.csv from a remote gist. The React app renders SVG axes and marks, using d3.line with curveCardinal for the path and d3.timeFormat for weekday labels. Hovering over each circle reveals a tooltip with the date, month, and temperature in Celsius.

Nov 23, 2021

Interactive Scatter Plot with Color Legend & Changeable Axes using D3 and React

This interactive scatter plot visualizes the classic iris dataset, allowing users to explore relationships between sepal and petal measurements. The chart uses React and D3 v5 with SVG rendering, featuring dropdown menus to change the X and Y axes, which updates the plotted points and axis labels. A color legend maps the three iris species, and hovering over a species in the legend highlights its data points while dimming others. The code uses `scaleLinear` for axes, `scaleOrdinal` for color encoding, and React's `useState` to manage interactive state.

World Map

This world map visualizes country boundaries using Natural Earth projection, with countries filled in dark green, graticules in grey, and interior borders in dark grey. The visualization uses React for component structure, D3 v5’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` for map rendering, and TopoJSON’s `feature` and `mesh` functions to parse world-atlas data. Hovering over a country reveals its name via an SVG `<title>` tooltip.

Scatter Plot with Color Legend

A React-driven scatter plot visualizes the iris dataset, displaying four numeric attributes as selectable X and Y axes via dropdown menus. Each circle represents a flower, colored by species through a legend using `scaleOrdinal`. The SVG rendering uses `d3.scaleLinear` and `d3.extent` for axes, with React state managing the attribute selection. The code imports `csv` from D3 v5, uses React hooks like `useState` and `useEffect`, and custom components like `AxisBottom`, `AxisLeft`, `Marks`, and `ColorLegend` structure the visualization. A tooltip reveals exact values on hover.

Polished Stylized Scatter Plot with Menus

This interactive scatter plot visualizes the classic Iris dataset, encoding sepal and petal measurements as point positions and species membership as color. Built with React and D3 v5, it uses dropdown menus to dynamically select which attribute appears on the x- and y-axes. Scales from `d3.scaleLinear` map the data domain to pixel coordinates, while `d3.scaleOrdinal` assigns categorical colors to the three species. SVG circles with hover tooltips display exact values, and custom axis components render ticks and labels using the `format` function.

Stylized Scatter Plot with Menus

This interactive scatter plot visualizes the classic Iris dataset, allowing users to explore relationships between four flower measurements by selecting which attributes appear on each axis via dropdown menus. Built with React and D3 v5, the chart uses SVG for rendering and dynamically updates scales and marks based on user selections. The visualization employs D3’s scaleLinear for positioning, CSV loading through d3.csv, and custom React components for axes and dropdown controls, while colors are randomly assigned per data point from a fixed palette.

Nov 19, 2021

Menus with React

This example demonstrates a simple interactive pet-selection menu built with React. It shows a dropdown list of six pet options, with a default value of "hamster" preselected, and displays the chosen pet’s label next to the menu. The interface uses React’s `useState` hook to manage the selected value and a reusable `DropDown` component that maps over the options array to render each `<option>` element. The code relies on React 16.9 and ReactDOM to render the component into the `#root` div, with styling from `styles.css`.

Nov 19, 2021

World Visualization

This example displays an empty SVG canvas with visible margin areas, rendered through a React component that abstracts the D3 margin convention. The `VizContainer` component uses React’s JSX to create `<svg>` and `<g>` elements, applying a transform based on the provided margin object. It includes optional rectangles for debugging layout, toggled by a `showMargins` prop. The code relies on React 16.13.1 and D3 v6, loaded via CDN, with dimensions set to 960 by 500 pixels. No data or visual marks are drawn yet.

Nov 18, 2021

Stylized Scatter Plot

This interactive scatter plot visualizes the classic iris dataset, displaying sepal length against sepal width. Each of the 150 data points is rendered as a semi-transparent circle using React and SVG, with D3’s `scaleLinear`, `extent`, and `csv` functions handling data loading and axis scaling. The visualization features custom-styled axes with Orbitron typography and uses a random color-selection algorithm that avoids repetition, though it may fall back to black. Tooltips reveal exact sepal length values on hover via SVG `<title>` elements, while axis labels clearly identify the measured variables.

Nov 18, 2021

Stylized Bar Chart

This stylized bar chart displays UN population data for the top 10 countries, using horizontal bars colored by a custom `selectColor` function that randomly assigns hues from a fixed palette. The React front-end leverages D3 v5’s `scaleBand` and `scaleLinear` for axes and layout, with `AxisBottom` and `AxisLeft` custom components rendering SVG ticks. Data is loaded asynchronously from a CSV via `useData`, and tooltips using D3’s `format` provide formatted population values on hover.

Nov 18, 2021

Adding Axes - Continuation of Making a Bar Chart with React & D3

This example shows a bar chart of UN population data for 2020, rendered as an SVG using React and D3. It uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with custom `AxisBottom` and `AxisLeft` components generating tick marks and labels via React's SVG elements. The chart highlights the use of `csv` to load data and `max` to compute the domain, with bars colored randomly from a predefined palette.

Nov 17, 2021

The Margin Convention - Continuation of Making a Bar Chart with React & D3

This example demonstrates the margin convention for a horizontal bar chart, displaying the top 10 most populous countries from a 2019 UN population dataset. The visualization uses React components to manage state and render SVG elements, while d3.scaleBand and d3.scaleLinear map country names to bar positions and population values to bar widths. The code leverages d3.csv for data loading, applies a consistent margin around the plotting area, and assigns random, non-repeating colors to each bar through a custom selectColor utility.

Fork of Making a Bar Chart with React & D3

This example uses React and D3 to render a horizontal bar chart of UN population data for 2019. It displays the top 10 countries with the highest populations, using colored rectangles to represent each nation. The code imports React hooks (useState, useEffect) for state management and data fetching, while D3 provides the csv loader and scales (scaleBand and scaleLinear) for positioning the bars on an SVG canvas. The chart loads CSV data from a GitHub gist URL and transforms the 2020 population column into integers.

Making a Bar Chart with React & D3

This example shows a horizontal bar chart of UN population data for the top 10 countries, rendered as SVG rectangles with randomly assigned colors. The React component uses the `useState` and `useEffect` hooks to load and store data fetched via `d3.csv`, while `d3.scaleBand` and `d3.scaleLinear` map countries and population values to screen coordinates. The chart displays loading text before the data arrives, then maps each row to a `<rect>` element with dimensions derived from the scales.

Rendering Data with React & D3

This example visualizes the full spectrum of CSS named colors as a circular pie chart, with each slice filled by its corresponding color. It loads color data from a CSV file using d3.csv and processes it with d3.pie, while d3.arc defines the path geometry. React manages the component state and renders the SVG paths. The visualization demonstrates how React and D3 can work together, with React handling data fetching and rendering while D3 provides the layout and shape-generating functions.

Fork of D3 Starter

This example demonstrates a minimal React and D3 integration, rendering a simple “Hiya” message at the center of the page. It fetches a CSV file containing named CSS colors using `d3.csv`, though the data is not visualized. The code combines `d3.v7`, React, and ReactDOM within a single HTML file, with the React component defined and mounted via `ReactDOM.render`. The page uses large, 13em text styling to emphasize the greeting, highlighting a basic setup for future data-driven visualizations.

Mouse Follower

This example loads CSS named colors from a CSV file using D3’s `csv` utility, then displays a plain-text summary of the dataset’s size, row count, and column count. The summary is rendered as an SVG-based `<pre>` element, with React state managing the asynchronous data loading via `useState` and `useEffect`. The code imports `message.js` to format the statistics, and the entire interface updates once the CSV data arrives.

Nov 15, 2021

Fork of Smiley Face Part IV

A grid of sixteen small, yellow smiley faces is rendered in SVG, with each face individually randomized so that eye size, mouth radius, and mouth width vary per face. The example shows how React components can encapsulate a D3-based face composition, using `d3.arc()` for the mouth and nose shapes. Faces are placed via a `d3.range(6 * 3)` array, with each `Face` component receiving randomized parameters for its features. The rendering uses React 16.9, D3 v5, and an SVG container, demonstrating a modular approach to combining D3 calculations with React’s component model.

Nov 11, 2021