W

Wolfgang

@wolmoe·70 public vizzes

Loading thumbnail…

D3 Selection Exploration - Exercise

This example demonstrates D3's data-join and selection methods through an animated scatterplot of circles and vertical lines. The visualization continuously updates as `d3.range` generates new data points, with circles and lines re-rendered every frame. The code uses `selection.data().join()` for enter, update, and exit handling, alongside `selection.call()` for reusable visualization logic. Randomly colored circles refresh twice per second, while the underlying sine-wave pattern animates smoothly via `setInterval`. The SVG canvas spans the full window, with black-stroked circles connected to green lines.

Loading thumbnail…

Fork of D3 Selection Exploration

This example demonstrates animated circle transitions driven by a continuous data stream. It shows how D3’s data join pattern updates SVG circle positions and radii in real time, with the number of circles and their attributes oscillating sinusoidally. The code uses `d3.select` and `selection.data` with `.join('circle')` to manage enter/update/exit, while `setInterval` triggers a refresh at 60 fps. Data is generated procedurally via `makeData`, which computes varying x, y, and r values based on a time parameter. The visualization highlights the simplicity of binding dynamic data to SVG elements using D3 v6.

Loading thumbnail…

D3 Selection Exploration

This example demonstrates data joins in D3 by animating a set of circles based on sine functions, with both the count and positions updating continuously. Drawn as SVG elements, it highlights the difference between the pre-v6 enter/merge/exit pattern and the modern `.join()` shorthand for binding data. The animation runs on a 60fps interval, using `select`, `range`, and chained attribute setters to update circle radius, x, and y coordinates in real time.

Loading thumbnail…

JavaScript Arrays

This example demonstrates how to manipulate JavaScript arrays using both vanilla methods and the D3 library. It shows common operations like range creation, filtering, sorting, mapping, and reducing, with results logged to the console. The code reconstructs D3’s `range` function, sorts objects by key using `d3.ascending`, and transforms an array of entries into a dictionary via `reduce`. The final output visualizes array mutation and data reshaping in a step-by-step console sequence.

Loading thumbnail…

Full Sol LeWitt Reproduction with D3 - Exercise

This piece reproduces a Sol LeWitt drawing by overlaying two sets of thin, parallel lines, one horizontal and one vertical, with each set clipped by a distinct SVG mask. The masks contain large geometric star-shaped paths, which reveal or conceal the lines in inverse regions across the canvas. Built with D3.js v6.7, the code uses `select`, `range`, `symbols`, and `symbol` to generate the paths, and `mask` elements to apply the clipping. The rendering is fully SVG-based, sized to the browser window, and demonstrates programmatic reproduction of a conceptual art piece.

Loading thumbnail…

Full Sol LeWitt Reproduction with D3 - Part III

A Sol LeWitt–style geometric composition uses layered horizontal and vertical stripes, with two SVG masks—one inverted—cutting circular symbol shapes through the grid. The code generates 100 stripes in each direction using D3’s `range` and `selectAll().join()`, then defines masks with `d3.symbol` and `symbols` to create the cutouts. Rendering is done entirely in SVG, with the page set to full-viewport dimensions. The masks alternate between black and white fills to reverse which areas remain visible, producing a subtle interplay between the striped background and the symbol-shaped voids.

Loading thumbnail…

Full Sol LeWitt Reproduction with D3 - Part II

This visualization reproduces a Sol LeWitt art piece as a grid of horizontal and vertical lines, with both sets of lines partially masked by a central diamond shape. The code uses D3 v6 to append SVG rectangles in a loop, creating the line structure across the full browser window. Two SVG masks, rendered via `d3.symbol` with the diamond symbol type, selectively reveal or hide portions of the lines, producing the characteristic overlapping geometric pattern. The rendering is entirely SVG-based, with dimensions set to the window size.

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example replicates a Sol LeWitt wall drawing using D3.js, rendering a grid of horizontal and vertical stripes across the full browser viewport. Two SVG masks, each containing a large circle, selectively reveal the stripes: one mask shows the lines inside the circle, while the other hides them, creating an inverted pattern. The code uses `d3.select`, `d3.range`, and `d3.symbol` to construct the overlapping line groups and circular mask shapes, with the SVG output generated dynamically from JavaScript.

Loading thumbnail…

Sol LeWitt Reproduction with D3 - Part II

This interactive SVG reproduction of a Sol LeWitt artwork displays a grid of thin horizontal and vertical lines, visible only within two circular masks that create a layered, crosshatched effect. The piece uses D3.js to generate 100 rectangles in each direction, positioning them with `range(n)` and the `.join()` API before applying masks defined with SVG `mask` elements. A white circle in the first mask reveals the underlying pattern, while a black circle in the second mask blocks the second layer. The code runs in a React environment, rendering directly to the browser window.

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js to generate a grid of horizontal and vertical lines. Ninety-nine horizontal rectangles and ninety-nine vertical rectangles are drawn across the full browser window, with two circular masks applied to reveal the lines only within intersecting circular regions, creating an overlapping geometric pattern. The code uses D3’s `select`, `range`, and `join` methods with the SVG renderer, and relies on the `mask` attribute to define the circular cutouts.

Loading thumbnail…

Sol LeWitt Reproduction Vertical

A web-based reproduction of Sol LeWitt’s wall drawing uses overlapping horizontal and vertical striped bands. The piece shows alternating white and black bars, with a central circular area where the vertical stripes appear, while the horizontal stripes remain visible around it. Built with raw SVG elements and the CSS mask API, the code creates two circle-shaped masks to toggle stripe visibility. The design fills the entire browser window, using a fixed stripe thickness of 10 pixels and no external data source.

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt art piece by rendering a series of vertical black bars. Fifty rectangles, each 10 pixels wide, are spaced 20 pixels apart across the full screen height. The visualization is built entirely with the SVG API, creating elements via `document.createElementNS` and appending them to the root `<svg>`. The code runs automatically on page load, filling the browser window with the geometric pattern.

Loading thumbnail…

SVG Pseudo Bullet Chart

Four horizontal bars form a pseudo bullet chart, each using stacked gray segments to represent qualitative ranges. A thin white animated rectangle slides across each bar to indicate the current value, while a thick black tick marks a target or threshold. Built entirely with SVG shapes, the chart uses plain `rect` and `line` elements, styled with CSS. The animation leverages CSS `@keyframes` and the `width` property changes, with each bar cycling at a different duration.

Loading thumbnail…

Fork of SVG Fundamentals

This SVG visualization demonstrates a traffic light sequence using three stacked circles, with the middle yellow light flashing through an animation. The graphic is rendered via raw SVG markup in an HTML file, using `<rect>`, `<circle>`, and `<path>` elements to define the housing, lights, and supporting pole. The yellow light animates its fill attribute using SVG’s `<animate>` element, which changes the fill from none to yellow over a one-second duration with an indefinite repeat. The other circles use static fill colors (red and green) with opacity set to 0.2, while the gray base circles and dark gray rectangle provide contrast.

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes rendered directly in the browser, including a circle, rectangle, line, and path. It shows how to set basic attributes such as position, dimensions, fill colors, strokes, and stroke widths on each element. The code uses the native SVG API with no additional libraries, embedding shapes inside an `<svg>` element with a fixed 960 by 500 viewing area. The static visualization highlights how shapes are layered, as seen in the overlapping circles at the top left.

Loading thumbnail…

Organziation Graph Diagram with Colors

This example uses a force-directed graph to visualize an organization’s network of interconnected groups and programs. Nodes are color-coded by their parent organization, with larger main nodes, medium child nodes, and small leaf nodes representing a hierarchical structure. Links connect parent to child and also main nodes to each other. The layout is computed using `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter`, while `drag` interactions let users adjust node positions. Node positions are rendered as SVG circles and text, with lines for links.

Loading thumbnail…

Organziation Graph Diagram

An organization graph diagram visualizes the structure of an arts network, with main organizations, child groups, and leaf nodes connected by lines from the data.js dataset. Using d3.forceSimulation with d3.forceManyBody and d3.forceLink, node positions update on each tick, rendering gray circles and labels as SVG elements. The simulation's center force keeps the network centered on a 960x960 canvas, and link distances vary based on collected data.

Loading thumbnail…

Force Directed Graph Starter

This example shows a small, three-node force-directed graph as a dynamic network layout. Nodes (circles) and links (lines) start in a default position and are continuously re-positioned by a simulated physical system. It uses the D3.js library, specifically the `d3.forceSimulation` API with `forceManyBody` and `forceLink` forces, plus a `forceCenter` to keep the layout centered. The graph is rendered to SVG, with positions updated on each simulation tick.

Loading thumbnail…

Voronoi Overlay with Labels

This line chart displays global COVID-19 death tolls over time by country using the Johns Hopkins dataset, with a logarithmic y-axis for cumulative deaths. The visualization includes hover interactivity via a Voronoi overlay: when hovering over a region, a tooltip displays the country, death count, and date, while highlighting the corresponding line. The chart is built with React and D3 v6, rendering as SVG and using `d3.Delaunay` from `d3-delaunay` for the overlay and `scaleTime`/`scaleLog` for the axes.

Loading thumbnail…

Coronavirus Deaths Over Time by Country With Voronoi Overlay

This chart displays cumulative global COVID-19 deaths by country over time on a logarithmic scale. Each country’s time series is drawn as a gray line, and hovering over a Voronoi cell highlights that country’s trajectory in black. Built with React and D3 v6, it uses `scaleTime` and `scaleLog` for axes and `d3.Delaunay` for the Voronoi overlay. The data comes from the Johns Hopkins Coronavirus dataset via a CSV file.

Loading thumbnail…

Coronavirus Deaths Over Time by Country

This chart uses React and D3 v6 to show cumulative global coronavirus deaths over time, with each country as a randomly colored line on a log scale. The visualization reads from the Johns Hopkins CSSE time-series dataset and renders to SVG, with axes generated via D3's `scaleTime` and `scaleLog`, and lines drawn using `d3.line`. The log scale compresses the wide range of death totals across countries, and marker-line components are available for annotating specific dates or thresholds, though none are active in this example.

Loading thumbnail…

Visualization Labels

This chart displays cumulative global COVID-19 deaths over time from the Johns Hopkins dataset, using a logarithmic y-axis to accommodate the wide range of values. Lines and text labels mark significant milestones like the 1M death threshold. Built with React and D3 v6, it uses `scaleTime`, `scaleLog`, and `line` generators to render an SVG path, with custom `XAxis` and `YAxis` components that call `axisBottom` and `axisLeft` to draw grid lines and tick labels.

Loading thumbnail…

Coronavirus Log Y Axis

This chart visualizes the global cumulative death toll from the Johns Hopkins Coronavirus Dataset. Using a logarithmic y-axis, the line chart reveals the exponential growth pattern of COVID-19 deaths over time, making early and late outbreak phases comparable. The visualization is built with React and D3 (v6), using `scaleTime` and `scaleLog` for the axes and `line` for the data path. It includes horizontal and vertical marker lines via `XMarkerLine` and `YMarkerLine`, with axes rendered through `axisBottom` and `axisLeft`.

Loading thumbnail…

Coronavirus Linear Y Axis

This chart visualizes global COVID-19 death totals over time using a linear Y axis, with a black line path showing the cumulative deaths and gridlines from D3 axes. The example uses React and D3 v6, with `scaleTime`, `scaleLinear`, and `line` from d3 to generate the SVG path, while `axisBottom` and `axisLeft` render the tick marks. Data comes from the Johns Hopkins Coronavirus Dataset, loaded via `csv` and transformed with `timeParse`. Marker line components display a vertical reference at a specific date and a horizontal “1M” threshold.

Loading thumbnail…

Coronavirus Line Chart with D3 Axis

This chart visualizes global COVID-19 death totals over time using a line path, with a horizontal marker at the 1 million death threshold and a vertical marker at the most recent date. The React component uses D3 scales (scaleTime, scaleLinear) and a line generator to map the Johns Hopkins dataset, while custom XAxis and marker components render grid lines and labels. SVG output displays the path with a bold black stroke, styled tick marks, and formatted date labels.

Loading thumbnail…

Coronavirus Line Chart with Marker Lines Part II

This chart displays cumulative global COVID-19 deaths over time as a line path, with marker lines highlighting the one million death threshold and the current date (“Now”). The code uses d3.scaleTime, d3.scaleLinear, and d3.line to generate the SVG path from the Johns Hopkins Coronavirus Dataset, which is loaded via d3.csv. React manages the component state, while custom XMarkerLine and YMarkerLine components draw the annotated reference lines.

Loading thumbnail…

Coronavirus Line Chart with Marker Lines Part I

This line chart displays global cumulative COVID-19 deaths over time from the Johns Hopkins dataset, with a horizontal marker line at the one-million-death threshold. The React component uses D3 v6 functions `scaleTime`, `scaleLinear`, `extent`, `max`, and `line` to construct an SVG path. Data loading relies on `csv` and `timeParse` to transform daily country-level death counts into aggregated totals. The marker line is drawn as an SVG `<line>` element, while the path is unstyled except for a black stroke defined in the page’s CSS.

Loading thumbnail…

Coronavirus Line Chart

This line chart visualizes the cumulative global death toll from the Johns Hopkins Coronavirus Dataset over time. The chart uses D3 v6 with React to load CSV data, transform it into daily sums, and render an SVG path via `scaleTime`, `scaleLinear`, and the `line` generator. The resulting graphic shows a single bold black curve tracing the death count across the entire dataset from its start to the present.

Loading thumbnail…

React & D3 Barebone

A minimal web application renders the text “Hello React!” to the browser. The example combines React 17, ReactDOM, and D3 6.6 to demonstrate a basic setup. The `index.html` file loads these libraries from a content delivery network, while `index.js` imports React and ReactDOM, defines a simple arrow function component, and uses `ReactDOM.render` to mount it to the `#root` element. The page includes custom CSS to remove body margins and hide overflow.

Loading thumbnail…

Summarizing Coronavirus Data

This example displays the total number of global COVID-19 deaths as a large numeric counter, updated to the latest date in the Johns Hopkins time-series dataset. It loads the CSV data using d3.csv, extracts the final column, sums its values with JavaScript’s reduce method, and formats the result with d3.format. The comma-separated total and date are rendered as plain text in a pre element, with no charts or interactive elements.

Loading thumbnail…

Loading and Parsing Coronavirus Data

This example demonstrates how to load and parse the Johns Hopkins Coronavirus Dataset using D3 v6. The visualization displays three key statistics about the CSV file: its size in kilobytes, the number of rows, and the number of columns. The code uses `d3.csv` to asynchronously fetch the data from a GitHub URL, then leverages `d3.csvFormat` to calculate file size and accesses `data.columns` and `data.length` for column and row counts. Results are rendered as text in an HTML `<pre>` element using standard DOM methods.

Loading thumbnail…

HIV/AIDS Choropleth Map

This choropleth map visualizes the global prevalence of HIV/AIDS among adults aged 15-49 in 2017, using a yellow-orange-red sequential color scale. Countries with missing data appear in grey. The map uses d3.geoNaturalEarth1 and d3.geoPath to render SVG country shapes from the Topojson World Atlas, with data sourced from IHME’s Global Burden of Disease Study via Our World in Data. React manages state through custom hooks that fetch CSV datasets.

Loading thumbnail…

Missing Migrants Scatter Plot Log Scale

The visualization shows reported deaths and missing persons from the Missing Migrants Project over time, with the number of casualties plotted on a logarithmic scale to reveal patterns across a wide range of values. The scatter plot encodes time on the x-axis and the total dead or missing count on the y-axis, with each circle representing an incident and a tooltip displaying the exact date. Built with React and rendered as SVG, it uses d3.scaleLog for the y-axis, d3.scaleTime for the x-axis, and d3.csv to load the dataset. Axis components and marks are generated programmatically from the data.

Loading thumbnail…

Analyzing Missing Migrants Part VII - Performance Optimization

This interactive visualization displays missing migrant incidents on a global map, with a histogram below showing the total dead and missing over time. Users can brush the histogram to filter the map's circles. The map uses a natural Earth projection with graticules, rendered using `d3.geoPath`. The dashboard is built with React and leverages `d3.bin` and `d3.scaleSqrt`. Data comes from the Missing Migrants Project, filtered via `d3.brushX`.

Loading thumbnail…

Analyzing Missing Migrants Part VI - Multiple Views with Brushing

This interactive visualization combines a bubble map and a time-series histogram to explore the Missing Migrants Project dataset. A brush on the histogram filters the map circles by date range, updating the displayed migrant deaths and disappearances across global coordinates. The map uses `geoNaturalEarth1` and `geoPath` with TopoJSON world atlas data, while the histogram uses `d3.bin`, `timeMonths`, and `brushX`. Both views render as SVG with React, using `scaleSqrt` for bubble radii and `scaleTime`/`scaleLinear` for axes.

Loading thumbnail…

Analyzing Missing Migrants Part V - Multiple Views Cleanup

This interactive visualization combines a geographic bubble map with a time-series histogram to analyze missing migrant incidents. The map projects data points using d3.geoNaturalEarth1 and d3.geoPath, with circle sizes scaled by total dead and missing via d3.scaleSqrt. The histogram bins reported dates into monthly intervals using d3.bin and d3.timeMonths, summing fatalities per bin. Both views share the same dataset from the Missing Migrants Project, rendered as SVG within a React framework using d3.v6 and TopoJSON world atlas boundaries.

Loading thumbnail…

Analyzing Missing Migrants Part IV - Multiple Views (Getting it to Work)

This interactive visualization presents two coordinated views of missing migrant incidents: a world map with proportional circles showing total dead and missing, and a chronological histogram of monthly totals. The map uses d3.geoPath for the Natural Earth projection with graticules, while the histogram applies d3.bin with timeMonths thresholds. React components manage both views within a single SVG. Data comes from the Missing Migrants Project CSV, loaded via d3.csv, with the world atlas from TopoJSON.

Loading thumbnail…

Analyzing Missing Migrants Part III - Data on a Map

This map shows the global distribution of missing migrants, with semi-transparent circles scaled by the total number of dead and missing individuals. Using a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, it renders land masses, graticules, and country borders from the TopoJSON World Atlas. Migrant data from the Missing Migrants Project is plotted as SVG circles, with radii determined by a `d3.scaleSqrt` mapping fatalities to a maximum radius of 15 pixels. The visualization is built with React, D3 v6, and `d3.csv` for asynchronous data loading.

Loading thumbnail…

Analyzing Missing Migrants - Part II

This histogram shows the monthly count of dead and missing migrants from the Missing Migrants Project dataset, with time on the x-axis and total dead and missing on the y-axis. The code uses d3.bin with timeMonths thresholds to aggregate the data by month, d3.scaleTime and d3.scaleLinear for the scales, and d3.sum to calculate each bin’s total. React renders the SVG, with custom AxesBottom, AxesLeft, and Marks components using d3’s tick formatting and shapes.

Loading thumbnail…

Analyzing Missing Migrants - Part I

This visualization shows the Missing Migrants Project data as a scatter plot, with reported dates on the x-axis and total dead and missing counts on the y-axis. Each circle represents an incident, with a tooltip revealing the precise date on hover. Built with React and D3 v6, the code uses `scaleTime` and `scaleLinear` to map the data, while custom components `AxisBottom`, `AxisLeft`, and `Marks` render the SVG axes and circles. The CSV data is loaded asynchronously via D3’s `csv` function and parsed with a custom date formatter.

Loading thumbnail…

Sized Points on a Map

This example displays a world map with sized points representing cities, where the circle radius encodes each city's population using a square root scale with a maximum radius of 15 pixels. It renders the Natural Earth projection via d3.geoPath, including graticules and land boundaries from Topojson World Atlas data. City coordinates and population values come from a CSV dataset, and the visualization uses React for component structure alongside D3 v6 for geographic projections and scales, with all marks drawn as SVG elements.

Loading thumbnail…

Points on a Map

This interactive map displays over 7,000 cities as semi-transparent teal points, overlaid on a neutral world map with graticules and landmasses drawn using D3’s `geoNaturalEarth1` projection and `geoPath`. City locations come from the simplemaps World Cities Database, filtered to populations above 50,000, and are projected using `d3.geoPath` from a TopoJSON world atlas. The React app loads data asynchronously via custom hooks, rendering the SVG scene with D3’s `geoGraticule` for the coordinate grid and a sphere outline for context.

Loading thumbnail…

Scatter Plot with Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width for three flower species. Hovering over the color legend highlights points of that species while dimming others, using React state to manage the hovered value and opacity transitions. Built with D3 v6 scales for positioning and color encoding, it renders as SVG through React components, with axis ticks generated by xScale.ticks() and yScale.ticks(), and tooltips provided by native SVG title elements.

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, mapping petal length and sepal width to the x and y axes. Each point is colored by species using a categorical scale with a legend positioned to the right. The visualization is built with React and rendered as SVG, using D3 scales such as `scaleLinear` and `scaleOrdinal` for positioning and coloring. Axes are drawn with custom React components, and a `title` element provides native tooltips for each circle.

Loading thumbnail…

Scatter Plot with Color

This scatter plot visualizes the Iris Dataset, mapping petal length and sepal width for individual flowers. Using D3.js scaleLinear and scaleOrdinal, the chart positions each point and colors it by species with a categorical palette. React components render SVG axes, tick marks, and circles, with tooltips providing precise values. The data is loaded asynchronously from a CSV URL using D3's csv method.

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot explores the classic Iris dataset, displaying measurements like sepal width and petal length as circles colored by species. Users select which attributes to plot on the X and Y axes via ReactDropdown menus, with d3.scaleLinear and d3.extent defining the scales. The visualization uses React hooks and components like AxisBottom, AxisLeft, and Marks to render SVG elements, with tooltips and formatted tick labels from d3.format.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to select which flower attributes appear on the x and y axes via dropdown menus. The visualization updates dynamically using React state management, with scales from D3 v6 (scaleLinear, extent) mapping petal and sepal measurements to SVG coordinates. Axes are rendered as reusable React components, and data loading uses D3’s csv function with type coercion. The plot displays all species together as teal circles, with axis labels reflecting the selected attributes.

Loading thumbnail…

Menus with React

This example demonstrates a simple interactive form for selecting a pet from a dropdown menu, with the chosen value logged to the console. It shows how React manages controlled form state: the `Dropdown` component receives options, a selected value, and a change handler, and it renders a native `<select>` element whose `onChange` event triggers the state updater. The app uses React’s `useState` hook to track the selection, initializing it to “hamster.” The code relies on React 17 and ReactDOM for rendering, with plain CSS styling for large label and select text.

Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders the text “Hello React!” inside a full-screen viewport. The code uses React 17 and ReactDOM to mount a functional component into a root div, while a bundled JavaScript file (bundle.js) is loaded via index.html. The page applies zero margin and hidden overflow to create a clean, edge-to-edge display, showcasing React’s core rendering workflow without additional data or interactivity.

Loading thumbnail…

World Map

A world map rendered with D3’s geoNaturalEarth1 projection, drawn in SVG using d3.geoPath. The map displays landmasses filled with teal, country interiors as thin light-blue lines, and graticules in gray. Data comes from the TopoJSON World Atlas (countries-50m.json), processed via TopoJSON’s feature and mesh APIs. The React-based visualization shows a static globe with a subtle color scheme, prioritizing clean spatial form over interactivity.

Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes weekly temperature measurements in San Francisco, using a smooth natural curve to connect temperature readings over time. The chart renders temperature on the y-axis against timestamps on the x-axis, with circular data points providing tooltips that display the day of the week. Built with React and D3 v6, the visualization uses `scaleTime` and `scaleLinear` for axes, `d3.line` with `curveNatural` for the path, and custom `AxisBottom` and `AxisLeft` components for tick rendering. The SVGs are styled with the Poppins font and a teal color scheme.

Loading thumbnail…

Working with Time

This scatter plot uses D3 v6 and React to visualize temperature readings from the Data Canvas Sense Your City dataset over one week. The x-axis uses a time scale with day-based tick formatting, while the y-axis shows temperature values with a linear scale. SVG circles represent individual data points, each with a tooltip showing the timestamp. The code demonstrates how to combine React components with D3 scales, including `scaleTime`, `scaleLinear`, `extent`, and custom axis components for rendering the visualization.

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, plotting sepal length against sepal width. Each flower is represented as a circle, with its position determined by the sepal measurements and a tooltip displaying the exact length upon hover. The visualization uses React with D3 v6, employing `scaleLinear` for axes, `extent` for domain calculation, and `csv` for data loading. The SVG rendering includes custom tick marks and axis labels, styled with the Poppins font and a clean color palette.

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart shows the top 10 most populous countries using United Nations World Population Prospects 2019 data, with population values on the x-axis and country names on the y-axis. The visualization is built with React and D3 v6, using `scaleBand` for the categorical y-axis, `scaleLinear` for the population scale, and SVG rectangles for the bars. Custom `AxisBottom` and `AxisLeft` components render tick marks, while a native SVG `<title>` element provides tooltips. The chart uses a Poppins font and a minimal color palette for a clean, stylized appearance.

Loading thumbnail…

Refactored Bar Chart

This visualization displays the top 10 most populous countries as horizontal bars, with each rectangle’s length proportional to its 2020 population estimate from the United Nations World Population Prospects 2019. The React app loads the CSV data via `d3.csv`, scales the values with `scaleLinear` and `scaleBand`, and renders axes and marks as SVG elements using custom components. The bottom axis uses `xScale.ticks()` for tick generation, while the left axis maps country names to band positions.

Loading thumbnail…

Axes with React & D3

This example shows the top 10 most populous countries from the United Nations World Population Prospects 2019 as a bar chart with axes. It uses React state to load CSV data via d3.csv, then renders SVG rectangles and axis ticks manually with d3.scaleBand, d3.scaleLinear, and d3.max. The x-axis ticks are generated from xScale.ticks(), with grid lines and labels, while the y-axis displays country names.

Loading thumbnail…

The Margin Convention

A pathetic bar chart displays the top 10 most populous countries from United Nations World Population Prospects 2019 data. The visualization implements the margin convention by using a single group translation via `d3.scaleBand` and `d3.scaleLinear` for axes, with fixed margin values. React controls state and rendering, converting CSV data with `d3.csv`, while SVG rectangles are positioned within the transformed coordinate system. The chart emphasizes the visual impact of incorrect margins, showing bars tightly packed with minimal spacing.

Loading thumbnail…

Pathetic Bar Chart

This example displays the top 10 most populous countries as a simple bar chart with no axes, where each bar’s width is proportional to its 2020 population estimate. The visualization uses React hooks to load and process data from the United Nations World Population Prospects 2019 via `d3.csv`, then renders SVG rectangles with `d3.scaleBand` for vertical positioning and `d3.scaleLinear` for horizontal scaling. The bars are drawn directly without any labels or tick marks, emphasizing the raw comparative sizes.

Loading thumbnail…

Rendering data with React & D3

A radial burst of CSS named colors, rendered as a pie chart where each slice represents a distinct color. The visualization loads color data from a CSV file via D3's `csv` utility, then uses React's `useState` and `useEffect` hooks to fetch and manage the data. D3's `pie` and `arc` functions compute the slice geometry, while React maps each data point to an SVG `<path>` element with the color's hex value as its fill. The view is centered with a `transform` translation, and a loading message appears before data arrives.

Loading thumbnail…

Rendering data with React

This visualization renders CSS named color data as a sequence of horizontal color swatches, each displaying its hex value as a background color. The code loads the dataset using D3’s `csv` utility, then uses React’s `useState` and `useEffect` hooks to fetch and store the data. The React component maps each row to a styled `div`, with dimensions fixed at 960 pixels wide and 4 pixels tall. Rendering relies on ReactDOM’s `render` method, while D3 handles only the data loading, not the visual output.

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load and summarize a CSV dataset within a React application using D3 utilities. It displays the file size in kilobytes, number of rows, and number of columns from the CSS named colors dataset hosted on GitHub. The code uses the `useState`, `useEffect`, and `useCallback` hooks to manage asynchronous data loading, with the `csv` function from D3 fetching the remote data and storing it in React state. The resulting summary is rendered as text within a `<pre>` element.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates three ways to access and parse remote CSV data with D3 v6. It loads a CSV file of CSS named colors from a GitHub gist and displays its size, row count, and column count in a large text block. The primary path uses `d3.csv` with a promise, while commented alternatives show manual `fetch` with `async`/`await` and `d3.csvParse`. The rendering is plain text in a `pre` element, updated via `textContent` after the data arrives.

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas, centering itself on the pointer’s coordinates. The example demonstrates React state management to track mouse movement, updating the circle’s position on every move event. It uses React’s `useState` and `useCallback` hooks alongside D3 v6 for the SVG rendering, with an initial circle centered at 480, 250. The visualization responds interactively in real time, showcasing a minimal integration of React and D3 for dynamic graphics.

Loading thumbnail…

Smiley Face Part VI

This example renders a static smiley face entirely through React components and SVG. The face consists of a yellow background circle, two black eyes, and a mouth created using the d3 `arc` generator with a specified inner radius, outer radius, and start/end angles. The code modularly separates the face into reusable components like `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`, which wraps children in an SVG group translated to the center coordinates. The illustration demonstrates compartmentalizing React modules to manage complexity, using d3.v6 for the mouth path and React 17 for rendering.

Loading thumbnail…

Smiley Face Part V

This example shows a stylized smiley face built entirely from React components and rendered as SVG. The face consists of a yellow background circle, two black eyes, and a smiling mouth drawn using D3’s `arc` generator with specified inner and outer radii and start/end angles. All dimensions—such as eye offset, eye radius, and mouth width—are defined as constants in the main `App` component and passed as props to modular child components. The visualization uses React 17 and D3 v6, with a fixed 960×500 SVG canvas centered on the page.

Loading thumbnail…

Smiley Face Part IV

A yellow smiley face rendered with React components and D3's `arc` generator. The face consists of a background circle, two eyes positioned with SVG `circle` elements, and a mouth drawn using a D3 arc path. All shapes are hardcoded with fixed dimensions and coordinates, rendered as SVG inside a React component tree. The example demonstrates how D3 shape generators can be integrated with React's declarative rendering model.

Loading thumbnail…

Tweaked Smiley Face Part III

A tweaked smiley face is rendered as an SVG using React and D3. The face includes a yellow circle head, two white eyes with pupils, and black-outlined glasses built from a D3 `arc` generator. A second `arc` creates the mouth, while additional circles define the pupils and glasses rims. React's `ReactDOM.render` mounts the component, and D3's `arc` computes the path strings for the curved shapes. The code uses fixed numeric constants for dimensions and positions rather than external data.

Loading thumbnail…

Smiley Face Part III

This example draws a classic yellow smiley face centered in an SVG canvas using React. It shows the face’s head, two eyes, and a curved mouth, all positioned relative to the canvas center. The code uses React to render SVG elements and D3’s `arc` generator to create the mouth path. The head is a yellow circle with a black stroke, while the eyes are plain black circles offset horizontally and vertically from the center. The mouth is formed by an arc with inner and outer radii and half-circle start and end angles.

Loading thumbnail…

Smiley Face Part II

A yellow smiley face rendered as SVG appears centered on a white background, with two black eyes positioned symmetrically around the vertical center. Built with React and ReactDOM, the face is constructed from three circle elements: a large yellow outer circle with a black stroke for the head, and two smaller black circles for the eyes. The SVG viewport measures 960 by 500 pixels, with all positions and radii calculated from fixed constants. The code uses JSX within a functional component to declaratively define the visualization.

Loading thumbnail…

Smiley Face Part I

A static SVG drawing depicts the first stage of a smiley face: a large yellow circle with a black outline, centered on a 960 by 500 canvas, and two solid black circles representing eyes. The SVG elements are created directly in HTML markup, with the circle radii and positions computed from the canvas height and center coordinates. The page also includes a small JavaScript console message, but no interactive behavior is implemented.