Anthony Ynami

Cali map json

This interactive visualization maps cumulative COVID-19 deaths across California counties, combining a bubble map with a brushable time-series histogram. The map projects county centroids using `d3.geoMercator`, while circle radii scale with total deaths via `d3.scaleSqrt`. The linked histogram aggregates daily deaths into monthly bins using `d3.histogram` and `d3.timeMonths`, with `d3.brushX` enabling temporal filtering that updates the map’s displayed bubbles. Data comes from a JHU CSSE time-series CSV and county boundaries from a TopoJSON file, rendered as SVG with React.

Apr 2, 2021

Cali map

This map of California counties uses a Mercator projection from d3-geo to render land area and interior borders. The visualization displays county boundaries derived from a TopoJSON dataset of California, with the d3.geoPath and d3.geoMercator APIs converting geographic coordinates into SVG paths. React manages the component structure while d3.json and topojson's feature and mesh functions process the raw data, filling land masses in teal and stroke interiors in a lighter contrasting color.

Apr 1, 2021

Multiple Views with Fast Brushing

A world map displays the global distribution of missing migrants, with circles sized by the total number of dead and missing. A linked time histogram below shows the same data aggregated by month, with a d3.brushX selection filtering the map’s circles in real time. Using React’s useState and useEffect, the example combines d3.geoNaturalEarth1, d3.geoPath, and d3.scaleSqrt with a TopoJSON world atlas, while the histogram uses d3.bin and d3.scaleTime. Data comes from the Missing Migrants Project.

Apr 1, 2021

2012 NBA Combine Scatter

This interactive scatter plot visualizes physical attributes and career performance metrics of NBA players from the 2012 combine. Users select any X and Y attribute from dropdown menus, while the circle color encodes player position. Hovering a data point reveals its exact value; hovering the color legend highlights only players of that position. The visualization uses D3’s `scaleLinear` and `scaleOrdinal` for axes and color, React for state and rendering, and SVG for marks, with data processed from a CSV via `d3.csv`.

Mar 20, 2021

Penguins Scatter

This interactive scatter plot visualizes the penguins dataset, allowing users to explore relationships between four physical measurements—bill depth, bill length, body mass, and flipper length—for three species. The visualization uses D3’s scale functions (`scaleLinear`, `scaleOrdinal`) to map data to SVG circles, with React managing state for axis selections and hover interactions. Users can switch the X and Y axes via dropdown menus, and hovering over a species name in the color legend highlights only that species’ points by fading others. The plot includes labeled axes and a legend, rendered with SVG elements and custom React components.

Mar 12, 2021

Cereal Scatter

This scatter plot visualizes the nutritional properties of various cereals, allowing users to compare any two attributes from the dataset via dropdown menus. Each cereal is represented as a colored dot, with the color mapping to the cereal's name. The visualization is implemented in React, using D3's `scaleLinear` and `scaleOrdinal` for scaling and color assignment. Hovering over a point fades all other points, highlighting the selected cereal. Data is loaded from a CSV file containing the cereal dataset.

Mar 12, 2021

California Coronavirus Deaths Over Time

This chart displays cumulative COVID-19 death totals for each California county over time, with a Voronoi overlay enabling interactive hover detection. The logarithmic y-scale accommodates wide variations in county population sizes. Built with React and D3 v6, it uses `scaleTime`, `scaleLog`, `d3.Delaunay`, and SVG rendering. Data comes from the Johns Hopkins Coronavirus dataset, loaded via `d3.csv` and filtered for California counties.

Mar 9, 2021

US Coronavirus Data

This visualization displays the total number of COVID-19 deaths in the United States as a single large numeric figure, formatted with commas and updated to the latest date present in the dataset. It loads the Johns Hopkins CSSE time-series data via `d3.csv`, extracts the most recent column, and sums all state-level death counts using a `reduce` operation. The result is rendered through D3’s `format` function into a large red text element, with a comment showing an unused filter for California data. The code relies on D3 v6 and standard JavaScript array methods.

Mar 3, 2021

Summarizing Coronavirus Data

This visualization displays a single, stark number: the global death toll from COVID-19. It fetches the Johns Hopkins time series dataset from GitHub, extracts the values from the most recent date column, and sums them. The result is formatted with commas using D3’s `format` function and displayed in large red text on a white background. The page body is hidden from overflow, creating a minimalist, text-only interface.

Mar 3, 2021

Organization Network Graph

A network graph displays the relationships between arts and social-impact organizations, using colored nodes and links to distinguish four main groups and their subordinate child and leaf nodes. Built with D3 v6, it applies `d3.forceSimulation`, `forceManyBody`, `forceLink`, and `forceCenter` to position elements, while `d3.drag` enables interactive repositioning. The SVG rendering sizes nodes by hierarchy level, and the palette comes from generated color data.

Mar 2, 2021

Force Directed Graph Starter

A force-directed graph displays three nodes—Alice, Bob, and Carol—connected by two unidirectional links. Built with D3 v6, it uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to compute node positions. The SVG renders circles and lines, updating their `cx`, `cy`, `x1`, `y1`, `x2`, and `y2` attributes on each simulation tick. The example demonstrates a minimal setup for interactive network layouts using static data defined in JavaScript.

Mar 2, 2021

Voronoi Overlay w/ Labels

This interactive line chart tracks global coronavirus deaths over time, using a log-scaled y-axis and color-coded country lines. Hovering over any line reveals a tooltip labeled with the country name, exact death count, and date. The visualization uses D3’s `scaleLog` and `scaleTime` for axes, and a Voronoi overlay generated from `d3.Delaunay` to capture mouse position and trigger the active line highlight. Data comes from the Johns Hopkins CSSE COVID-19 dataset.

Coronavirus By Country w/ Voronoi Overlay

This chart displays cumulative COVID-19 death totals over time for multiple countries, drawn as individual lines on a logarithmic scale. A Voronoi overlay, built with d3-delaunay, partitions the plotting area into cells around each data point, so hovering any region highlights the corresponding country’s line in black. The visualization uses React with D3 v6 for scales and axes, and pulls data from the Johns Hopkins COVID-19 time series dataset, rendered as SVG.

Coronavirus By Country

This example displays global coronavirus deaths over time as a multi-line chart, with each line representing a country’s cumulative death toll on a logarithmic scale. The visualization uses D3 v6 for scales, axes, and line generation, and renders the paths as SVG via React components. Data comes from the Johns Hopkins COVID-19 dataset, and the axis components are built with D3’s `axisBottom` and `axisLeft`, including rotated tick labels and grid lines.

Coronavirus Log Scale w/ Labels

A line chart tracks global cumulative COVID-19 deaths over time using a logarithmic scale for the y-axis, with rotated date labels on the x-axis. The visualization uses React and d3.v6, with `scaleTime` and `scaleLog` for axes and a `line` generator for the path. Data comes from the Johns Hopkins Coronavirus Dataset, loaded via `csv` into a React hook, and rendered as SVG with custom axes using `axisBottom` and `axisLeft`.

Coronavirus Log Scale

This line chart tracks global cumulative deaths from the Johns Hopkins COVID-19 dataset, using a logarithmic y-axis to reveal the exponential growth trend. The d3.scaleLog and d3.line APIs construct the path, while custom React components render the axes with d3.axisBottom and d3.axisLeft. The chart spans the full viewport and includes gridlines, with date labels rotated for readability.

Coronavirus Linear Scale

This line chart displays the global total deaths from COVID-19 over time, sourced from the Johns Hopkins Coronavirus Dataset. The chart uses a linear scale on the y-axis and a time scale on the x-axis, with axes rendered via d3.axisBottom and d3.axisLeft. Built with React and d3.v6, it renders an SVG path generated by d3.line, with tick marks extended across the plot area and date labels rotated for readability.

react + d3 axes

This example shows global coronavirus deaths over time as a single bold line, with horizontal reference lines at one million and two million deaths, plus a vertical marker at the most recent date. The visualization uses React components to render an SVG chart, while D3 v6 handles scales, the line generator, and bottom axis via `scaleTime`, `scaleLinear`, `line`, and `axisBottom`. Data comes from the Johns Hopkins COVID-19 global deaths time series, loaded with `csv` and parsed with `timeParse`. Custom React components manage the axis, marker lines, and rotated tick labels.

Margin Convention Coronavirus Line Chart w/ 1M Marker

This line chart tracks global cumulative COVID-19 deaths over time using the Johns Hopkins dataset. It highlights the one-million-death milestone with a horizontal marker line and labels the most recent date with a vertical “now” marker. Built with React and D3 v6, the chart uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the path, and custom SVG marker components. The viewport fills the browser window, and margins are explicitly set to position the visualization within the SVG.

SVG face w/ React

A grid of eighteen randomly generated cartoon faces fills the screen, each with a yellow head, two eyes, and an arc-shaped mouth. The example demonstrates reusable React functional components, including `Face`, `Eyes`, and `Mouth`, which render SVG elements. It uses the `d3.arc` API to define mouth paths, `d3.range` to generate the grid, and random values for each face's dimensions. The `FaceContainer` component structures the SVG scaling, while `ReactDOM.render` mounts the application without animation or interaction.

Coronavirus Line Chart w/ 1M Marker

This chart depicts the cumulative global death toll from COVID-19 over time, using data from the Johns Hopkins Coronavirus Dataset. A thin horizontal line marks the point where deaths reach one million, while a thick black path traces the rising trend. The visualization is built with React and D3 v6, using `scaleTime`, `scaleLinear`, and `line` to generate an SVG path. Data is loaded via `d3.csv` and processed by summing daily country-level death counts.

Curran's Coronavirus Linear Y Axis

A line chart displays cumulative COVID-19 deaths over time, using a linear y-axis scale to show absolute totals. The visualization draws data from the Johns Hopkins Coronavirus dataset, parsing daily death counts from CSV. React components manage the SVG rendering, while D3 v5 handles scaling, axis generation, and path generation via `d3.line`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisBottom`. Grid lines and tick marks are styled with SVG, and the chart updates reactively as new data loads.

Loading and Parsing Coronavirus Data

This example demonstrates how to load and parse the Johns Hopkins Coronavirus dataset by displaying basic statistics about the fetched CSV file, including its size in kilobytes, row count, and column count. It uses D3 v6’s `d3.csv` method to fetch the remote dataset from a GitHub raw URL, then accesses `data.columns` and the `d3.csvFormat` function to calculate and present the summary information. The interface is a minimal HTML page with a large-text `pre` element that updates dynamically once the data has been successfully parsed.

HIV/AIDS Choropleth Map

This interactive choropleth map visualizes the global share of the population infected with HIV/AIDS in 2017, using data from OurWorldInData. Countries are colored on a yellow-to-red sequential scale based on prevalence, with gray indicating missing data. The visualization is built with React, rendering SVG shapes through d3.geoPath and a geoNaturalEarth1 projection, while d3-geo graticules and topojson mesh outlines delineate geographic boundaries. Country codes from the ISO-3166 dataset link the CSV data to world-atlas map features.

Missing Migrants Scatter

A scatter plot of the Missing Migrants Dataset shows each migrant death or disappearance event as a circle on a logarithmic scale, with time on the x-axis and total dead and missing on the y-axis. The visualization uses React and D3 v6, employing `scaleTime` and `scaleLog` for its axes, with SVG rendering for the marks. Data is loaded via `d3.csv`, and each point includes a tooltip displaying its formatted date.

Missing Migrants Histo

This histogram visualizes monthly counts of dead and missing migrants over time, revealing trends in reported incidents. The visualization displays the data as vertical bars, with the x-axis representing chronological months and the y-axis showing the aggregate count per period. Built with React and D3 v6, it uses `scaleTime`, `scaleLinear`, and `histogram` (bin) APIs to bin records by month and sum the mortality metric. The SVG rendering includes custom axis components and hover tooltips via native `<title>` elements. Data comes from the Missing Migrants CSV dataset.

Multiple View Missing Migrant

This visualization combines a bubble map and a date histogram to explore missing migrant incidents. The map uses a d3-geo naturalEarth1 projection with graticules and country borders, sizing circles by total dead and missing via d3.scaleSqrt. The histogram bins reported dates by month using d3.histogram and sums fatalities per bin. Both views render as SVG in React, with data from the Missing Migrants CSV and world atlas TopoJSON.

Feb 24, 2021

Missing Migrants on a Map

This visualization maps missing migrant incidents worldwide using a natural Earth projection. Circles sized by the square root of the total dead and missing count are overlaid on geographic landmasses and graticules, with opacity highlighting incident density. It uses React for component structure, d3.geoNaturalEarth1 and d3.geoPath for projection and rendering, d3.scaleSqrt for radius encoding, and topojson to convert world atlas data. The dataset comes from the Missing Migrants CSV, with coordinates parsed and reversed for plotting.

Points on a Map (cities)

A world map displays cities as semi-transparent circles sized by population, with landmasses, graticules, and interior borders rendered via d3.geoPath and geoNaturalEarth1. The projection maps latitude and longitude to SVG coordinates, while a d3.scaleSqrt converts population values to circle radii. Data comes from a CSV of world cities, and the map uses React hooks to load TopoJSON world-atlas geometry.

Interactive Polished Scatter w/ Menu, Colors, and Legend

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four flower measurements via dropdown menus for the X and Y axes. The SVG rendering uses D3 scales and React state management to update axes and marks dynamically. A color legend groups the three species, and hovering over either the legend or data points highlights the corresponding species while fading others. The code builds custom React components for axes, marks, and the legend, using d3.scaleLinear, d3.scaleOrdinal, and d3.extent to drive the visualization.

Interactive Color Legend

This interactive scatter plot of the Iris dataset uses React and D3 v6 to visualize sepal length and width, colored by species. Hovering over a color legend entry highlights matching data points while fading others to 20% opacity, using React state to track the hovered value. The visualization employs d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.csv for loading data from a gist. SVG rendering creates the plot, axes, and an interactive color legend that filters marks dynamically.

Polished Scatter w/ Menu, Colors, and Legend

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements for three flower species. The interface employs dropdown menus to dynamically choose which attribute maps to the x and y axes, with each species represented by a distinct color. Built with React and D3 v6, the visualization renders as an SVG, using `scaleLinear` for axes, `scaleOrdinal` for color encoding, and a custom legend to identify species.

React Scatter Plot w/ Color Legend

This example presents a scatter plot of the Iris dataset, mapping sepal length and width and coloring each point by species, with a color legend displayed to the right. The plot is rendered as an SVG using React components that leverage d3-scale for linear and ordinal scales, while axes are generated with d3’s tick methods and formatting via d3-format, with data loaded using d3.csv.

Polished Scatter Plot w/ Menus AND Color

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four numeric measurements (sepal and petal length/width) while color-coding points by species. Two dropdown menus, built with `react-dropdown`, let viewers dynamically select which attributes appear on the x- and y-axes, with axis labels updating accordingly. The visualization uses `d3.scaleLinear` for positional encoding, `d3.scaleOrdinal` to assign categorical colors to the three Iris species, and React hooks (`useState`, `useEffect`) to manage data loading and UI state. SVG circles are rendered via custom React components, with tooltips showing formatted values.

React Scatter Plot w/ Colors

A React scatter plot visualizes the Iris dataset, showing sepal length against sepal width. Each of the three species receives a distinct color via D3's `scaleOrdinal`. The visualization uses D3's `scaleLinear` and `extent` for axes, with custom React components generating SVG ticks and circles. Hovering reveals formatted values via native SVG `<title>` tooltips. Data loads asynchronously from a CSV URL using a custom `useData` hook.

Scatter Plot w/ Menus

Two dropdown menus let a viewer select which measurements of the Iris dataset appear on the x and y axes of an interactive scatter plot. The React app uses D3 v6 scales (`scaleLinear`, `extent`) to map values to an SVG canvas, while `AxisBottom` and `AxisLeft` render tick marks. Changing a menu updates the corresponding axis label and point positions via `useState`. The data is loaded from a CSV with `d3.csv`, and hovering over a circle reveals its exact value through a native SVG `<title>` tooltip.

Polished Scatter Plot w/ Menus

This interactive scatter plot visualizes the Iris dataset using a polished SVG rendering in React. Users explore relationships between four numeric flower measurements through dropdown menus that dynamically update the x- and y-axes. The visualization employs React hooks and the d3-scale library to manage state and scale functions, while custom React components render the axes and data marks. Tooltips provide precise values on hover, and the plot uses the Poppins typography with a clean, minimalist aesthetic.

React Scatter Plot

This React-based scatter plot visualizes the Iris dataset, mapping sepal length and width for each flower specimen as circles. The chart uses D3 v6 scales and axes to position marks within an SVG, with tick marks generated via `xScale.ticks()` and rendered as SVG lines and text. React components manage the visualization’s structure, while D3’s `csv` and `scaleLinear` handle data loading and coordinate mapping. The marks include native SVG tooltips via `<title>` elements, and axis labels rotate for the y-axis.

Feb 21, 2021

React Menus

This example shows a React application that uses a dropdown menu to select a pet from a list of six options, displaying the chosen value in the browser’s console. It demonstrates a reusable `Dropdown` component that receives `options`, `id`, `selectedValue`, and `onSelectedValueChange` props, using React’s `useState` hook to manage the selection state. The code builds the dropdown from an array of value-label pairs and uses React’s `onChange` event to update the state. It relies on React 16.14 and ReactDOM 17.0.1 to render the UI.

React Starter Code

This example demonstrates a minimal React application that renders the text "Hello React!" to the browser. It does not contain any data visualization, charts, or interactive graphics. Instead, it serves as a starter template for building React-based projects. The code uses React 16 and ReactDOM 17, with an App component defined in JavaScript and mounted to a root div element. The index.html file loads the React libraries via CDN, while the included styles.css sets the body margin to zero and hides overflow.

World Map w/ land (more efficient)

This visualization displays a world map with natural landmasses highlighted in teal against a light gray sphere, with interior borders shown in a contrasting blue and graticule lines providing spatial reference. It loads TopoJSON from the world-atlas package, converts it to GeoJSON using the topojson `feature` and `mesh` functions, and renders the map with React. The code uses D3 v6’s `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` to draw the sphere, land features, graticule, and interior boundaries as SVG paths.

World Map

This world map visualizes country boundaries and interior borders using a light gray sphere with teal country polygons and silver interior lines. The example relies on d3-geo’s `geoEqualEarth` projection and `geoPath` to render SVG paths, while the topojson library’s `feature` and `mesh` functions transform the World Atlas TopoJSON dataset into GeoJSON and isolate interior borders. React manages the data-loading state, and the visualization is drawn entirely as SVG within a React component.

Stylized Line Chart

This stylized line chart visualizes weekly temperature trends in San Francisco using a smooth, natural curve. React components render SVG axes and marks, while d3-scale functions (scaleTime and scaleLinear) map timestamp and temperature data from a CSV file onto the chart. The d3.line generator with curveNatural creates the flowing path, with axis ticks styled via CSS.

Time based scatter plot

This visualization is a time-based scatter plot that displays temperature readings from San Francisco over a week. The x-axis represents time, formatted to show day abbreviations, while the y-axis shows temperature values. The plot updates dynamically, rendering each data point as a circle. The code uses React for the user interface and D3 v6 APIs such as `scaleTime`, `scaleLinear`, and `extent` to map data to coordinates. The data is loaded from a CSV file via D3's `csv` function, and the chart is rendered as an SVG using custom Components like `AxisBottom`, `AxisLeft`, and `Marks`.

Stylized React Bar Chart

This stylized bar chart displays the populations of the top 10 most populous countries, using 2020 estimates from the United Nations. The React-based visualization pairs d3.scaleBand for the categorical country axis with d3.scaleLinear for population values, rendering bars as SVG rectangles. Custom tick components generate the axes, while a title element inside each rectangle provides formatted population tooltips. The design includes a Poppins font and a steelblue fill, with D3’s format function converting large numbers into abbreviated labels.

Refactored React Bar Chart

This example shows the population of the ten most populous countries in 2020, using data from the United Nations World Population Prospects. A React component renders an SVG bar chart where each country’s bar length is proportional to its population. The code uses `d3.csv` to load the data, `d3.scaleLinear` and `d3.scaleBand` to position bars, and separate React components for the axes and marks. The bottom axis uses `xScale.ticks()`, while the left axis displays country names, with bars styled in steel blue.

Axes w/ React

This bar chart displays the populations of the top 10 most populous countries, using data from the United Nations World Population Prospects 2020. Built with React and D3 v6, it renders as an SVG, using `scaleLinear` and `scaleBand` for axes, with custom tick generation via `xScale.ticks()` and manual axis labels. The interactive loading state shows a processing message while fetching the CSV data.

Bar Chart w/ React

This bar chart displays the populations of the world's ten most populous countries, using 2020 estimates from the United Nations World Population Prospects. It shows each country's population as a horizontal bar with lengths scaled by population. Built with React, the chart uses D3 v6 modules including `scaleLinear`, `scaleBand`, and `csv` to load and scale the data, rendering bars as SVG `rect` elements. The chart begins in a "Loading..." state while the CSV data is fetched.

bar chart test

This bar chart displays the populations of the top 13 most populous countries using 2020 estimates from the United Nations World Population Prospects. The visualization uses D3 v6 with an SVG rendering, employing `d3.scaleLinear` for the horizontal population axis and `d3.scaleBand` for the vertical country categories. Data is loaded from a CSV file via `d3.csv`, and axes are generated with `d3.axisBottom` and `d3.axisLeft`, with bars styled in steel blue.

Named Colors

A radial burst of CSS named colors visualizes the entire color palette as a full-circle pie chart. Each slice represents one named color, filled with its corresponding hex value. The visualization uses React state to manage asynchronous data loading via `d3.csv`, while `d3.pie()` and `d3.arc()` compute the slice geometry. Rendered as SVG paths, the chart spans from the center to the edge of the 960×500 pixel canvas, with data sourced from a GitHub-hosted CSV file.

Loading Data with React and D3

This example demonstrates how to load and display CSS named color data using React and D3. It uses the D3 `csv` utility to fetch a remote CSV file and React’s `useState` and `useEffect` hooks to manage the asynchronous data loading. Once the data arrives, a custom `message` function formats summary statistics—file size, row count, and column count—using `d3.csvFormat` and `Math.round`. While loading, the app shows a simple "loading . . ." text message in a large `<pre>` element.

Vega-Lite API Template

This example shows a bar chart of religious demographics by country, with each bar colored by religion and tooltips revealing population counts. The visualization is built using the Vega-Lite API, which wraps the higher-level vl.encode patterns for declarative chart specification. The code uses `vl.markBar()` with `vl.x()`, `vl.y()`, `vl.color()`, and `vl.tooltip()` to define the visual channels, while data is loaded via `d3.csv` from a remote URL. The chart renders as SVG, with custom axis and label styling configured through the `config` object and displayed in a full-window view.

Cars Vega-Lite

This example displays a 2D scatter plot of car data, mapping engine displacement on the x-axis and horsepower on the y-axis, with each point labeled by car name via tooltips. The visualization is built using the Vega-Lite API in JavaScript, with `vl.markPoint` and `vl.encode` to define the marks. It uses `d3.csv` to fetch the data from an `auto-mpg.csv` file, and the `config` object customizes axis and label styling for readability. The plot dynamically resizes to fill the window.

Loading and Parsing CSV Data (less verbose)

This example shows the size and structure of a CSV file by displaying the number of kilobytes, rows, and columns in a large text element. It loads CSS named colors data from a remote GitHub gist using d3.csv, which returns a promise. The code then formats the parsed data back into a CSV string with d3.csvFormat to measure its byte length, and accesses the parsed array’s length and columns property for row and column counts. It highlights the less verbose promise-based approach over the commented-out fetch and async/await alternative with d3.csvParse.

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file using the Fetch API and D3.js. It fetches a remote CSV containing CSS named colors, parses the text into an array of objects with `d3.csvParse`, and then displays summary statistics about the dataset. The output shows the raw text size in kilobytes, the number of rows, and the number of columns in a large `<pre>` element. The code uses an `async/await` fetch helper to avoid nested promise callbacks.

Mouse Follower

An interactive SVG circle follows the mouse cursor across a 960x500 canvas. The React application tracks pointer movement via the `onMouseMove` event handler, updating the circle's center coordinates with each `clientX` and `clientY` value. Using `useState` for position state and `useCallback` to optimize the event handler, the code renders a single red circle (radius 30) whose position updates in real time. The example demonstrates a basic React-D3 integration, with the visualization rendered entirely through React's declarative SVG output.

eyebrows

A grid of 18 cartoon faces, each generated with randomized facial features, displays a collective eyebrow-raising animation. Built with React components composing D3-powered SVG shapes, the visualization renders each face from reusable parts including head circles, arcs for mouths, and rectangular eyebrows. The eyebrows of every face simultaneously lift and lower through a two-stage D3 transition, while other features like eye offset, radius, and stroke width vary randomly per face. The example demonstrates component-based SVG construction and sequential animation using d3-transition within a React framework.

SVG face

A cheerful SVG face is rendered using React, with a yellow circular head, two eyes, and a smile outline drawn via D3’s `arc()` generator. The eyebrows are separate rectangles that animate vertically using D3 transitions, moving up and down over two-second intervals. The visualization uses React and ReactDOM for the component structure, while D3 v6 handles the arc path, selection, and transition logic within an SVG canvas.

Customized axes

This bar chart displays the populations of the top 10 most populous countries using 2020 estimates from the United Nations World Population Prospects. The visualization uses D3 v6 with SVG rendering, employing scaleLinear and scaleBand for axes. The chart customizes axes through the axisBottom and axisLeft APIs, formatting population values with d3.format and replacing 'G' with 'B' for billions. Gridlines are created via tickSize, and both axis domains and tick lines are selectively removed for a cleaner presentation.

General Update Pattern (Bowl of Fruit)

Five red circles represent apples in a bowl, rendered as SVG elements inside a 960×500 viewport. The example demonstrates D3’s general update pattern using `selectAll`, `data`, `enter`, and `exit` to manage circle creation and removal. A `fruits` array initializes five apple objects, then `pop()` removes one, triggering a re-render that deletes the corresponding circle via `exit().remove()`. Using D3 v6 and React-like render logic, it shows how data joins keep visuals synchronized with changing data.

World Population Area Chart

This area chart visualizes world population growth over time, using a smooth, curved path filled in maroon to represent the data. The visualization employs D3 v6 APIs including `scaleTime`, `scaleLinear`, and `area` with `curveBasis` to render the SVG. The y-axis labels are formatted using `format` to abbreviate billions, and the chart includes labeled axes and a title. Data comes from a CSV file of world population by year, loaded via D3's `csv` method.

Temperature in San Francisco Area Chart

This area chart displays one week of temperature data in San Francisco, sourced from the Data Canvas – Sense Your City project. The chart uses a smoothed curve (`curveBasis`) to fill the area between the temperature line and the baseline, with time on the x-axis and degrees Celsius on the y-axis. The visualization is rendered as an SVG using D3 v6, with axes and gridlines generated via `axisBottom` and `axisLeft`, and the data is loaded from a CSV file using `csv`. The chart is styled with a maroon fill and includes labeled axes and a title.

Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, sourced from the Data Canvas - Sense Your City project. It uses D3 v6 with SVG rendering, employing `scaleTime` for the time axis and `scaleLinear` for temperature. The chart features a smoothed line using `curveBasis`, a grid via custom tick marks, and labeled axes. Data is loaded from a CSV file and mapped to the line path.

Temperature in San Francisco Scatter Plot

This scatter plot displays a week of temperature readings in San Francisco, with time on the x-axis and temperature in degrees Celsius on the y-axis. The visualization uses D3 v6 to render SVG circles scaled by time and linear axes, with axis labels and a title. The data comes from Data Canvas - Sense Your City, and the plot is generated using D3's `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` APIs.

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries, based on 2020 estimates from the United Nations World Population Prospects. Each circle represents a country, positioned along the y-axis by name and the x-axis by population count. The visualization utilizes D3 v6 APIs including `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft`, rendering as SVG. Population data from a CSV file is loaded and scaled, with grid lines and axis labels formatted using D3’s `format` function.

Cars Scatter Plot

This scatter plot visualizes the relationship between car weight and horsepower using data from the UCI Machine Learning Repository’s Auto MPG dataset. Red, semi-transparent circles represent individual cars, with weight on the x-axis and horsepower on the y-axis. The visualization uses D3 v6 with d3.csv, d3.scaleLinear, d3.extent, axisBottom, and axisLeft to render axes and grid lines in SVG. The chart includes labeled axes, a title, and uses a margin-based layout with tick marks extending across the plotting area.