K3zter

Smiley Face Part II

A grid of 18 smiley faces, each with randomized facial features, fills the screen. The React components `Face`, `BackgroundCircle`, `Eyes`, and `Mouth` compose SVG circles and paths, using D3's `arc()` generator for the mouth. The `index.js` file maps over a `range` to render faces, while `Math.random()` varies eye offset, radius, mouth width, and curvature, producing a playful, varied set of expressions against yellow circular backgrounds.

Dec 24, 2021

D3 Translate Example

This example demonstrates a panning interaction for a 28×28 grid of colored rectangles rendered as SVG, where the default d3.zoom wheel behavior is replaced with a custom wheel handler that calls `zoomer.translateBy` on a transition. The visualization shows how adding a transition to `translateBy` causes the grid to gradually zoom out instead of scrolling vertically as intended, contrasting with the default behavior without a transition. The code uses `d3.select`, `d3.range`, `d3.zoom`, `d3.interpolate`, and SVG rectangles with random fill colors, with the zoom transform applied directly to the rectangles.

Dec 24, 2021

HTML Starter

This example demonstrates a minimal HTML page that uses D3.js to render a single black line on an SVG canvas. The page creates an SVG element with a fixed width and height, then appends a line shape with specified start and end coordinates. The code uses the D3 v7 library through a direct script tag in the index.html file, while the identical logic also appears in the index.js module. The example serves as a bare-bones starter template for understanding how D3 interacts with SVG elements in a web page.

Dec 23, 2021

Coronavirus Chart with Multiple Lines

This chart visualizes cumulative global COVID-19 deaths over time, with each line representing one country or region’s death total. All time series are overlaid on a shared time scale and a logarithmic y-axis for death counts, which compresses the wide range of values. The visualization is built with React and D3 v7, using `scaleTime`, `scaleLog`, and the `line` generator to render the paths as SVG elements. Data comes from the CSSE COVID-19 time series CSV, loaded and parsed via `d3.csv` and `timeParse`.

Coronavirus Log Y Axis

This visualization shows global cumulative COVID-19 deaths over time, using a logarithmic y-axis to reveal exponential growth trends. The line chart, built with React and D3 v7, uses `scaleLog` for the y-axis and `scaleTime` for the x-axis, with the line generated by `d3.line`. Data comes from the CSSE COVID-19 time series CSV, aggregated globally. Grid lines and markers highlight specific dates and death totals, with axes rendered via `axisBottom` and `axisLeft`.

Coronavirus Linear Y Axis

A line chart displays cumulative COVID-19 deaths over time on a linear y-axis, using data from the COVID-19 Data Repository by the Center for Systems Science and Engineering (CSSE) at Johns Hopkins University. React components render an SVG with d3.scaleTime and d3.scaleLinear axes, while d3.line generates the path. Dashed marker lines annotate specific dates and death totals, and gridlines are styled via tick size and CSS.

React + Axes

A React-based line chart visualizes cumulative global COVID-19 deaths over time, with the date on the x-axis and death totals on the y-axis. It uses d3.scaleTime, d3.scaleLinear, and d3.line to generate an SVG path, plus custom axes via d3.axisBottom and d3.axisLeft. Reference lines mark the 5,000,000 death milestone and the most recent date, with d3.timeFormat and d3.format for labels. Data comes from a CSV fetched via d3.csv.

Coronavirus Basic Line Chart With Margins

This example displays global COVID-19 death totals over time with a line chart, using a time-scaled x-axis and linear y-axis with margins. D3 v7’s `scaleTime`, `scaleLinear`, and `line` generators construct the SVG path, while `YMarkerLine` and `XMarkerLine` components overlay reference lines at 5 million deaths and the most recent date, respectively. Data loads from the Johns Hopkins CSSE CSV via `d3.csv` and `timeParse`. The React app computes daily global sums and renders the chart full-screen.

Coronavirus Basic Line Chart With 5,000,000 Marker Line

This chart shows the global cumulative COVID-19 death toll over time, rendered as a black line that climbs steadily across the full window. A horizontal marker line at 5,000,000 deaths highlights when the total crossed that threshold. Built with React and D3 v7, it uses `scaleTime` and `scaleLinear` to map dates and death totals, while `line()` generates the SVG path from data fetched from the CSSE COVID-19 time series. The marker line is a simple SVG `<line>` positioned via the y-scale.

Summarizing Coronavirus Data

This example displays a single, large-text summary of the total global COVID-19 deaths from the Johns Hopkins Coronavirus Dataset, along with the most recent date column in the time-series data. It loads the CSV via `d3.csv` and uses `d3.format` to insert comma separators into the summed death count. The code iterates through each country row, converts the latest date’s value to a number, and reduces them with a simple accumulator function before updating the DOM’s text content.

Loading and Parsing Coronavirus Data

This visualization demonstrates how to load and parse the Johns Hopkins Coronavirus Dataset, displaying basic file statistics in a large preformatted text element. It fetches the global deaths time series CSV via `d3.csv`, then computes the data size in kilobytes using `d3.csvFormat`, and counts the rows and columns from the parsed array and its `data.columns` property. The final message shows the latest date column, total file size, row count, and column count, all rendered into the DOM via `textContent`. The example highlights D3’s Promise-based data loading and inspection of CSV metadata.

HIV/AIDS Choropleth Map

A choropleth map shows the global prevalence of HIV/AIDS among adults aged 15-49 for the year 2017, using a yellow-to-red sequential color scale where darker shades indicate higher infection rates. Countries with missing data appear in light gray. The visualization is built with React and D3 v7, using `geoNaturalEarth1` and `geoPath` for map projection, `geoGraticule` for grid lines, and TopoJSON world atlas data. The choropleth applies a `scaleSequential` with `interpolateYlOrRd` to color each country polygon.

Scatterplot with Menus

A scatterplot of the Iris dataset uses two dropdown menus to interactively select the X and Y axes from four numeric attributes. The visualization renders circles in SVG with React, using D3’s `scaleLinear` for axes and data mapping. Dropdown selections trigger state updates via React’s `useState`, re-rendering the chart with new scales and axis labels. Axes are drawn with D3’s `ticks()`, and tooltips show formatted values via the `title` element.

Missing Migrant Data Scatter Plot - Log Scale

This scatter plot visualizes reported dates of missing migrant incidents against total dead and missing counts, using a logarithmic y-axis to handle the wide range of values. The visualization loads CSV data from a GitHub gist and renders as an SVG using React and D3 v7. It employs `scaleTime` for the date axis, `scaleLog` for the count axis, and custom React components (`AxisBottom`, `AxisLeft`, `Marks`) to draw tick marks and circles. Native SVG `<title>` elements provide tooltips showing formatted counts.

Missing Migrant Data Scatter Plot

This scatter plot visualizes the relationship between reported dates and the total number of dead and missing migrants, with each circle representing an incident. The data comes from a CSV file of Missing Migrants Global records loaded via `d3.csv`. The visualization uses React with D3 v7's `scaleTime`, `scaleLinear`, `extent`, and `max` to map the temporal and numerical axes, while custom axis components render SVG ticks. Circles are positioned using the x and y scales, with native SVG `<title>` elements providing tooltips on hover.

Missing Migrants Dataset - Brushing

This visualization combines a world map with a histogram of missing migrant deaths over time. Users brush a date range on the histogram to filter circles on the map, which show incident locations scaled by death count. It uses React with D3 v7 for rendering, including d3.geoNaturalEarth1 and d3.geoPath for the map, d3.bin for histogram aggregation, and d3.brushX for interaction. Data comes from the Missing Migrants Project CSV, with map geometry from the world-atlas TopoJSON.

Dec 19, 2021

Missing Migrants Dataset - Map and Histogram

This visualization combines a bubble map and histogram to explore the Missing Migrants Dataset, showing the geographic distribution and monthly totals of deaths and missing persons. The map uses `geoNaturalEarth1` and `geoPath` to render world landmasses, with circle radii scaled by `scaleSqrt` according to the "Total Dead and Missing" count. The histogram bins reported dates into monthly intervals using `bin` and `timeMonths`, summing counts per month with `sum`. Both views render as SVG within a React app, pulling data from CSV and TopoJSON sources.

Dec 18, 2021

Missing Migrants Dataset - Map

A world map uses semi-transparent circles to show the geographic distribution of missing migrant incidents, with circle size scaled by the total dead and missing count via a square-root scale. The visualization is rendered in React with SVG, using d3.geoNaturalEarth1 for projection, d3.geoPath for map features, and d3.geoGraticule for grid lines. Data comes from a CSV of missing migrant records, while country boundaries come from the world-atlas TopoJSON dataset.

Dec 18, 2021

Migrant Deaths Over Time

This histogram displays the monthly total of dead and missing migrants, using data from a subset of the Missing Migrants Global dataset. Rectangles represent monthly sums, with the x-axis showing time and the y-axis indicating the count. The visualization is built with React and D3 v7, using `d3.bin`, `d3.scaleTime`, and `d3.scaleLinear` to bin data and map scales. Inline SVG rectangles render the marks, and native SVG `<title>` elements provide tooltips. Axes are custom components, styled with a Poppins font and muted colors.

Dec 18, 2021

Points on a Map

This visualization displays world cities as semi-transparent circles overlaid on a natural Earth projection map, with circle size encoding population via a square root scale. The map includes land masses, country borders, graticules, and a sphere outline. React manages the component structure, while D3 v7 handles geo projection and path generation through `d3.geoNaturalEarth1` and `d3.geoPath`. City data comes from a CSV loaded with `d3.csv`, and world geography uses TopoJSON from the world-atlas package, rendered as SVG.

Interactive Color Legend

A scatterplot of the Iris dataset shows petal length versus sepal width, colored by species. Hovering over a legend item highlights that species and fades the rest. Built with React and D3 v7, it uses `d3.scaleOrdinal` for colors and `d3.extent` for axes, updating SVG circles via state changes.

Scatterplot with Color Legend

This interactive scatterplot visualizes the Iris dataset, showing petal length against sepal width with points colored by species. A categorical color legend identifies the three species. Built with React and D3 v7, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and SVG rendering. Axis components generate ticks, while hover tooltips display formatted values via the `title` element.

Scatterplot with Color

This interactive scatterplot visualizes the Iris dataset, plotting petal length against sepal width. Each flower specimen appears as a circle colored by species using d3.scaleOrdinal with a categorical color palette. The visualization is built with React and D3 v7, using SVG rendering for precise control. Axes are generated with d3.scaleLinear, and circles include native SVG `<title>` elements providing tooltips on hover. Data is loaded asynchronously from a CSV file using d3.csv, with numeric parsing applied to measurement columns.

Polished Scatterplot with Menus

This interactive scatterplot lets users explore the Iris dataset by changing which attributes are plotted on the X and Y axes via dropdown menus. The visualization initially shows petal length against sepal width, with each of the 150 flowers represented as a circle. Built with React, the chart uses D3 v7’s `scaleLinear`, `extent`, and `format` functions to compute scales and axis ticks. The SVG rendering is assembled from custom components for axes and marks, styled with the Poppins font and a teal color scheme. Data is loaded asynchronously from a remote CSV using D3’s `csv` function.

Menus With React

This example shows a React-controlled dropdown menu for selecting a pet, with the chosen value displayed in a large label. It demonstrates how React state manages the selected option and passes it to a reusable Dropdown component. The code uses React’s `useState` hook and `ReactDOM.render` to mount the app, while D3 v7 is loaded but not directly used in the rendering logic. The dropdown options are hardcoded in `index.js`, and the interface is styled with plain CSS in `index.html`.

React Starter

This example demonstrates a minimal React application rendered in a browser. The code creates a simple component that outputs the text “Hello React” into a root div. It imports React and ReactDOM directly, and uses `ReactDOM.render` to mount the app. The setup includes D3 v7 and React 17 as external scripts from a CDN, though the displayed code does not yet utilize any D3 functionality.

World Map

A world map displays Earth’s landmasses in teal and grey, with country borders drawn as interior lines. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and renders geometric paths with `d3.geoPath`, including graticules and a sphere outline. Geographic data comes from the World Atlas TopoJSON file, processed with `feature` and `mesh` from the topojson library. React manages the component structure, while D3 handles the SVG path generation within a fixed 960×500 viewport.

Line Chart

This line chart visualizes temperature changes over time in San Francisco over a week. The visualization uses React to render SVG elements, with D3 v7 scales for positioning data points along time and linear axes. The chart displays a smooth curve connecting temperature readings using the D3 line generator with a natural curve interpolation. The data is loaded from a CSV file using D3's csv function, with custom axis components drawing tick marks and labels for both the date and temperature dimensions.

Working With Time

A scatterplot tracks daily temperature readings over a week in San Francisco, with each point representing a timestamp and its corresponding temperature. The visualization uses React components to render SVG circles and axes, leveraging D3's `scaleTime` and `scaleLinear` to map data to coordinates. Data is loaded via `d3.csv` from a remote gist, with axis labels and tick formatting handled through custom React components like `AxisBottom` and `AxisLeft`. Hovering reveals the exact date via a native SVG `<title>` tooltip.

Stylized Scatterplot

This stylized scatterplot visualizes the Iris dataset, plotting petal length against sepal width for individual flowers. The SVG rendering uses React components with D3 scales (d3.scaleLinear) and axes (AxisBottom and AxisLeft) built from D3 tick marks. The d3.csv function loads the data, while circle marks include native SVG tooltips via the title element. The chart uses a Poppins font, teal circles, and italic axis labels with abbreviated tick formatting via d3.format.

Stylized Bar Chart

This stylized bar chart displays the populations of the top 10 countries for 2020, using horizontal bars with a teal color scheme and the Poppins font. The chart loads data from a CSV file containing UN population estimates, then uses React state to manage the fetched data. Built with D3 v7 and React, it employs `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and custom SVG components for axes and marks. Native SVG `<title>` elements provide tooltips on hover.

Refactored Bar Chart

This visualization presents a horizontal bar chart displaying the populations of ten countries from a UN dataset loaded via `d3.csv`. React state management with `useState` and `useEffect` handles asynchronous data loading, while D3 scales (`scaleBand` and `scaleLinear`) map country names and population values to SVG coordinates. The chart is rendered as SVG elements through reusable React components for axes and marks, with axis ticks generated directly from D3 scale methods.

Axes with React & D3

This example shows a horizontal bar chart of the top 10 countries by 2020 population, rendered as SVG through React components. React state tracks the data, initially loaded via `d3.csv`, while `scaleBand` and `scaleLinear` position bars and axes. The chart includes manually drawn tick marks and labels for both axes. The code uses React `useState` and `useEffect` hooks, along with D3’s `max` for scaling.

The Margin Convention

This example shows a horizontal bar chart of the top 10 countries by population in 2020, loaded from a CSV file. The chart demonstrates the margin convention by offsetting a group of rectangles using an SVG transform. React state manages the asynchronous data loading with `d3.csv`, while the scales `scaleBand` and `scaleLinear` map country names and population counts to the inner chart dimensions. The bars are rendered as SVG `rect` elements within React’s declarative JSX structure.

Simple Bar Chart

This bar chart displays the populations of ten countries for the year 2020, using horizontal bars sorted by the data's original order. The visualization loads its data from a CSV file via `d3.csv`, stores it in React state, and renders SVG rectangles positioned with `scaleBand` and scaled with `scaleLinear`. The chart is built with React 17, D3 7, and targets an SVG canvas.

Rendering Data with React

A circular pie chart displays the proportional distribution of named colors from a CSV file, with each slice filled by its corresponding RGB hex value. The example demonstrates integrating D3.js version 7 with React, using React's `useState` and `useEffect` hooks to asynchronously load and store the dataset. The `d3.csv` function fetches the data, while `d3.pie` and `d3.arc` compute the slice geometries for SVG rendering. The code also comments an alternative manual angle calculation approach, showing how D3's pie layout simplifies the process.

Fork of Loading Data with React & D3

This example shows a React component that loads a CSV file of named colors using D3 and renders each color as a horizontal stripe, creating a full-width stacked bar visualization. The `useState` and `useEffect` hooks manage the asynchronous data loading, displaying a “Loading…” message until the data arrives. The code uses `d3.csv` to fetch the dataset from a GitHub gist, then maps over the parsed rows to generate div elements with inline styles for background color, width, and height. React 17 and D3 v7 are loaded from CDNs, with rendering handled by `ReactDOM.render`.

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API with D3 to render a bubble chart showing the top five religions by country. It plots countries on the x-axis and religions on the y-axis, with circle size encoding population on a logarithmic scale. The chart is built with `vl.markCircle` and encodes fields via `vl.x().fieldN()`, `vl.y().fieldN()`, and `vl.size().fieldQ()`. Data is loaded asynchronously from a CSV using D3’s `csv` function, and the visualization is configured with custom axis and label styling from a config object.

Loading Data with React & D3

This example demonstrates how to load external CSV data in a React component using D3, displaying the dataset’s size, row count, and column count as formatted text. The code uses React hooks (`useState`, `useEffect`) to fetch the data via `d3.csv` from a GitHub gist URL, storing the parsed result in state. Once loaded, the `message` function formats the summary using `csvFormat`, showing the file size in kilobytes, the number of rows (entries), and the number of columns from the parsed data’s `.columns` property. Before data arrives, the UI shows a “Loading...” placeholder, set against a full-screen preformatted text layout.

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL, displaying a summary of the dataset’s size, row count, and column count as large text. It uses `d3.csv` to fetch and parse the CSS Named Colors dataset, then computes the formatted CSV length in kilobytes and counts the rows and columns. The code also includes commented-out alternatives using `fetch`, `async/await`, and `d3.csvParse` to highlight different parsing approaches. The interface renders results in a `<pre>` element via plain DOM manipulation.

Mouse Follower

A circle with a radius of 30 pixels follows the mouse cursor across an SVG canvas. The React application tracks pointer coordinates via the `onMouseMove` event handler, updating the circle's `cx` and `cy` attributes through `useState`. The visualization demonstrates reactive rendering with React 17 and SVG, using the `useCallback` hook to manage the event listener. The initial mouse position is centered at (480, 250) on a 960-by-500 canvas.

Smiley Face Part I

A static SVG scene depicts a large yellow circle with a black outline, centered on a 960×500 canvas, flanked by two smaller unfilled circles positioned as eyes. The figure resembles the first stage of a smiley face, though no mouth is drawn. The rendering uses plain SVG elements—`circle` tags with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes—embedded directly in the HTML document. No JavaScript libraries or data sources are involved; the visualization relies entirely on static markup and CSS for layout, with the page body set to hide overflow.