S

Subhendu Karmakar

@subh3ndu·140 public vizzes

Loading thumbnail…

d3 chord diagrams

This example shows a chord diagram generated from a 3x3 matrix of numeric values, using dark translucent ribbons to visualize connections between three groups. The code builds the visualization with D3 v7, using `d3.chord()` to compute the chord layout with sorted subgroups and angular padding, then renders each chord with `d3.ribbon()` at a fixed radius. The diagram is drawn as SVG paths inside a centered group element, with the input data provided as a static array in the script.

Loading thumbnail…

D3 sun-burst graph

This example shows a sunburst visualization built from a small hierarchical dataset, where each ring segment represents a node in the tree and its angular width is proportional to the node’s value. The code uses D3 v7’s `d3.hierarchy`, `d3.partition` layout, and `d3.arc` to generate the radial paths, with semi-transparent dark fills and white strokes separating segments. While labels are commented out, the structure (root A1 with children B1 and B2, and nested leaves C1–D1) is clearly visible. The SVG is sized to the container and translated to center the chart.

Loading thumbnail…

D3 Sunbrust graph

This example displays a hierarchical dataset as a static partition layout, using rectangles to represent nodes and their cumulative values. The visualization shows a root node 'A1' branching into 'B1' with children 'C1', 'C2', and 'C3', alongside a leaf 'B2'. It employs the d3.partition layout and d3.hierarchy API to compute rectangular coordinates, then renders the result as SVG rectangles and text labels. Each rectangle is filled with a dark, semi-transparent color and outlined in white, with node names positioned inside each cell.

Loading thumbnail…

D3 Partition Layouts

This example demonstrates a hierarchical partition layout, representing the tree data with nested rectangles that are sized according to the sum of their descendant values. The visualization uses the `d3.partition` layout on a `d3.hierarchy` computed from a static JavaScript object, drawing the resulting rectangles and text labels as SVG elements. The code relies on D3 v3’s `d3.select` and the `.join` operator to efficiently update the SVG canvas, with the root node’s sum calculated via `rootNode.sum`.

Loading thumbnail…

D3 Pack Layouts

This example demonstrates a D3 pack layout, which visualizes hierarchical data as nested circles. The dataset defines a tree with a root node, two levels of children, and leaf nodes that carry numeric values. Using `d3.hierarchy` and `d3.pack`, the code computes circle positions and radii so that parent circles encompass their children proportionally to summed values. The visualization renders each node as a semi-transparent circle with a white stroke, and labels only the leaf nodes. The SVG is dynamically sized to fit the container, and nodes are positioned via CSS transform translations.

Loading thumbnail…

Treemap rect placing

Six panels display the same hierarchical dataset tiled with five different treemap layout algorithms—binary, dice, slice, slice-dice, and squarify—using the `d3.treemap` API. Each panel renders translucent steel-blue rectangles with white labels for node names. The code computes node sizes via `rootNode.sum((d) => d.size)` and positions descendants by `d.x0`/`d.y0` coordinates from the layout pass.

Loading thumbnail…

D3 Hierarchies

This example uses the D3 library to render a hierarchical tree from a small dataset of movies, grouped by distributor and genre. It shows the distribution of films across these categories, with nodes connected by lines and labeled with category names. The visualization is built using `d3.rollup` to create a nested data structure, `d3.hierarchy` to process it, and `d3.tree` to compute the layout. Circles represent nodes, and leaf nodes display the count of movies.

Loading thumbnail…

Treemap in d3

This example demonstrates a treemap visualization of hierarchical data, with nested rectangles representing the A1, B1/B2, and C1/C2/C3 nodes. It uses d3.treemap to compute the layout based on summed values, with padding and a fixed size of 800 by 400 pixels. The d3.hierarchy API organizes the data structure, while descendants are rendered as SVG groups, rects, and text elements using d3.select and join. The visualization clearly shows proportional area encoding, with rectangles colored in semitransparent cadetblue and labeled for each node.

Loading thumbnail…

Fork of D3 Hierarchies - eg2

This example shows a hierarchical tree visualization of movie data, grouped by distributor and genre, with the worldwide gross revenue aggregated for each group. The root hierarchy is built using `d3.rollup` and `d3.hierarchy`, then laid out with the `d3.tree` layout. Nodes are drawn as circles, connected by lines, with labels above and leaf counts below. The code uses D3 v7 APIs including `d3.sum`, `d3.select`, and `.join` to render the SVG elements.

Loading thumbnail…

Responsive Viz Container

A responsive visualization container demonstrates how a D3 chart adapts to its parent element’s changing dimensions. The code uses a `ResizeObserver` to track the container’s width and height, then updates an SVG’s attributes accordingly. On each resize, the D3 selection re-draws an inner rectangle with specified margins and a gray fill, showcasing how layout calculations like `innerWidth` and `innerHeight` respond dynamically to viewport changes. This example highlights the interplay between browser APIs and D3’s data-join pattern for flexible, reactive visualization sizing.

Loading thumbnail…

Mouse Follower

This example demonstrates a single semi-transparent circle that follows the mouse cursor across a light green background, changing color randomly with each click. The visualization uses D3’s `mousemove` event and `d3.pointer` to update the circle’s position, while a `click` event triggers a random hex color assignment. The circle’s coordinates and fill are stored in a state object, and D3’s data join (`selectAll`/`join`) binds this state to the SVG circle element. The rendering approach relies on direct SVG manipulation via D3, with no external data source—purely interactive and state-driven.

Loading thumbnail…

Bar Plot with different colors

This bar plot displays three categories—Recommended, You, and Peers—with varying values, highlighting differences in a simple comparative view. It uses D3.js v7 with scaleBand for the x-axis, scaleLinear for the y-axis, and scaleOrdinal with schemeCategory10 to assign distinct colors to each bar. The chart is rendered as an SVG with explicit margins and background styling, while axes are generated via axisBottom and axisLeft. The code includes placeholder logic for bars but does not complete the rectangle drawing or axis labels, so the final visual remains incomplete.

Loading thumbnail…

Bar Plot with different colors

This bar plot example uses D3 to render a small set of circles on a light green background, each with a distinct neon color and varying size based on the provided data. The chart emphasizes simplicity, showing how categorical or positional data can be mapped to visual properties like x, y, radius, and fill using D3’s data join. The code leverages `select` and `join` to bind the array of objects to circle elements, setting attributes directly. The visualization demonstrates a straightforward, color-coded scatterplot-style layout without axes or interactivity, focusing on raw data encoding.

Loading thumbnail…

Fork of D3 spinner - 2

A circular loading spinner animation comprises ten evenly spaced blue dots arranged around a light blue SVG canvas. The dots rotate positions and vary their radius and opacity based on a rotating array of angles, creating a wave-like pulse effect. The code uses D3.js selection methods, including `data` joins with enter and update handling, alongside `d3.interval` to trigger periodic rotation of the dataset. All rendering is done via SVG, with parametric circle equations computing each dot’s coordinates.

Loading thumbnail…

D3 spinner

This example shows a minimalist loading spinner rendered as a single animated arc that rotates continuously around a circular track on a pale green background. The animation uses D3 transitions with a 20-second duration, where `transition.attrTween` interpolates the arc’s `endAngle` from 0 to 2π, and an `on("end")` callback restarts the spin indefinitely. The code builds the shape with `d3.arc()`, setting outer and inner radii relative to the container size, and positions it via an SVG `<g>` transform.

Loading thumbnail…

Learn D3 1

This example demonstrates how D3's data join pattern updates circle elements in an SVG as the dataset changes. It first binds an array of two numbers to render a row of circles, then reuses the same selection with a longer array of five numbers, causing the existing circles to update and new ones to enter. The visualization uses the `join()` method in D3 v7 with the `selectAll` and `data` APIs, setting each circle's position via the `cx` attribute based on its bound value. The code runs within a simple container using `select` and creates a fixed 980 by 500 SVG canvas.

Loading thumbnail…

Learn D3

A simple "Hello World" example demonstrates the VizHub V3 Runtime Environment, which enables continuous hot reloading and interactive widgets. The `main` function in `index.js` receives a `container` DIV and injects an HTML string with the text "Hello World!" styled with a large, center-aligned font. No external libraries are used, and the rendering relies on the browser's native HTML and CSS capabilities rather than SVG or canvas drawing.

Loading thumbnail…

Scatterplot with Legend Interaction

This scatterplot maps the Iris dataset by sepal length on the x-axis and petal length on the y-axis. Users can click a species in the legend to highlight only those data points while dimming the others; clicking again clears the filter. The visualization uses D3.js v7 within a React-like state management pattern, employing `csvParse` for data loading and `scaleLinear` for axes. The legend is built with categorical color scaling via `scaleOrdinal` and `schemeCategory10`.

Loading thumbnail…

D3 + React

This example shows a scatterplot of the classic Iris dataset, plotting sepal length against petal length. It uses React for component structure and state management, while D3 modules handle the data-driven visualization: `d3.csv` loads the data, `d3.scaleLinear` and `d3.extent` set the scales, and `d3.axisLeft`/`d3.axisBottom` draw the axes. The SVG circles are rendered via D3 selections within a React effect, bridging the two libraries.

Loading thumbnail…

Keeling Curve Practice

This example visualizes the Keeling Curve, showing atmospheric CO2 concentration over time as a scatterplot of individual measurements connected by a line. The chart displays each data point as a semi-transparent circle over a gray inner plot area, with time-based axes and labeled axes for year and CO2 concentration in parts per million. It uses D3's `scaleTime`, `scaleLinear`, `line`, and `axisLeft` to render the visualization, with the data imported from the `@subh3ndu/keeling-curve` package.

Loading thumbnail…

Keeling Curve Data

This example displays the Keeling Curve dataset, showing monthly atmospheric CO₂ measurements from Mauna Loa starting in 1958. It presents the first row of the CSV as formatted JSON, highlighting the data structure including raw CO₂ values, seasonally adjusted readings, and fitted trend lines. Missing values, encoded as -99.99, are converted to NaN during preprocessing. The visualization uses ES module imports to load the CSV directly and renders the parsed object in a styled `<pre>` element.

Loading thumbnail…

UN Population Bar Chart

This chart displays the total population of the ten most populous countries in 2024, using horizontal bars ordered from largest to smallest. The visualization is built with D3 v7, where `scaleBand` positions the country categories on the y-axis and `scaleLinear` maps population values to bar heights. Data comes from the UN population estimates dataset, filtered to countries only and sorted using `descending`. The chart includes axis labels, a gray background rectangle, and rounded bar dimensions defined through configurable margins and gaps.

Loading thumbnail…

UN Population Estimate 2024

This example displays a single row of UN population data for 2024, showing all quantitative attributes for the world as a JSON object. It parses a CSV file containing demographic indicators like population size, fertility rates, and life expectancy, converting the relevant fields to numbers. The code uses the built-in `JSON.stringify` method to render the first data object in a pre-formatted HTML block, with `import data from './data.csv'` handling the file loading. The visualization emphasizes raw data inspection over graphical representation.

Loading thumbnail…

Missing Data

This scatterplot shows the relationship between bill length and flipper length for penguins, using only rows with complete data for both measurements. The code filters missing values from the Palmer Penguins dataset via `isNaN` checks before passing the cleaned data to the visualization. Rendered with D3’s `scaleLinear`, `axisLeft`, and `selectAll().join()`, the chart includes labeled axes, a gray inner rectangle, and semi-transparent circles whose opacity and radius are controlled by the `circleOpacity` and `circleRadius` parameters.

Loading thumbnail…

Penguin Scatter Plot

This scatter plot uses the D3.js library to visualize the relationship between bill length and flipper length for penguins from the Palmer Archipelago dataset. The plot renders gray circles with reduced opacity, allowing overlapping points to remain visible. The axes are labeled “Bill Length (mm)” and “Flipper Length (mm),” and the plot includes a light gray background rectangle to delineate the inner plotting area. The code leverages D3’s `scaleLinear`, `extent`, `axisLeft`, and custom axis-label helpers to position the chart elements.

Loading thumbnail…

Fork of Idempotent Rendering Pattern (Part 2)

This example demonstrates a self-referential rendering pattern where a visualization draws itself. It combines the JavaScript `FileReader` API with the P5.js `loadPixels()` method to process image data, which is then re-rendered through a feedback loop using the `Hype` library’s `HPath` and `HDrawable` objects. The sketch iterates over pixel color values to drive the placement and styling of new vector shapes, producing an idempotent, generative output that evolves from its own previous state.

Loading thumbnail…

Fork of Idempotent Rendering Pattern (Part 2)

This example visualizes penguin bill dimensions using a scatter plot, with bill length on the x-axis and bill depth on the y-axis. The chart uses D3.js v7 APIs such as `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to render axes and circles for each data point from the `@curran/penguins` dataset. The visualization follows an idempotent rendering pattern, where the `viz` function calls `scatterPlot`, which in turn leverages the `axes` utility to manage chart structure and labels.

Loading thumbnail…

Idempotent Rendering Pattern

This example demonstrates the idempotent rendering pattern for D3 visualizations, showing a scatter plot of penguin bill length versus bill depth using a clean, green background. The chart renders circles for each data point and includes labeled axes via a reusable `axes` module. The code applies the join pattern with `selection.selectAll(...).data([null]).join(...)` for both SVG elements and axes, ensuring that updates are deterministic and render correctly on each call. It uses `scaleLinear` and `extent` to compute scales, with margins and dimensions passed through a shared state object.

Loading thumbnail…

Penguin Scatter Plot

A penguin scatter plot displays the relationship between bill length and bill depth for individual penguins, with each data point represented as a semi-transparent circle. The chart uses D3.js to create a linear scale for both axes, render the plot marks, and draw labeled axes with directional arrows indicating increasing values. The data comes from the @curran/penguins dataset, and the visualization is built using reusable modules that separate axis rendering, scatter plot logic, and the main visualization setup. The code relies on d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom.

Loading thumbnail…

Fork of Penguin Scatter Plot (Part 2)

This fork of a Penguin scatter plot compares bill length and bill depth for Palmer Archipelago penguins, with point radius encoding body mass and color encoding species. The visualization uses D3.js to build the scatterplot, drawing axes with `axisLeft`/`axisBottom` and a static gray plot area. Data comes from the `@subh3ndu/penguins` package, and circles are rendered with fixed radius instead of using the computed scale, showing a deliberate modification of the original example.

Loading thumbnail…

Fork of Penguin Scatter Plot (Part 2)

This fork of the Penguin Scatter Plot displays bill length against bill depth for individual penguins from the @subh3ndu/penguins dataset, with points rendered as semi-transparent circles on a gray plot background. Using D3.js v7, it builds linear scales with `scaleLinear` and `extent` to map data to pixel coordinates. The visualization imports `axisLeft` and `axisBottom` for axes, while the core scatterplot logic and separate axes-module handle mark placement and labeled gridlines, respectively. The example demonstrates a modular D3 structure where the chart, axes, and data are split into distinct files.

Loading thumbnail…

Axes Labels

This example demonstrates how to add clear, labeled axes to a scatter plot. A gray plotting area is set against a white background, with labeled X and Y axes positioned at the bottom and left edges, respectively. The labels include arrow symbols to indicate axis direction. The implementation uses d3.scaleLinear for scaling and d3.axisLeft and d3.axisBottom for rendering the axes, with custom text elements for the labels. The code is built with the D3.js library, using a data-driven approach with selection and join operations.

Loading thumbnail…

Scale & Axes

This example demonstrates the fundamental role of scales and axes in D3 data visualization. A gray plotting area is framed by a linear x-axis and y-axis, both spanning a domain from 0 to 100. The code uses `d3.scaleLinear` to map data values to screen coordinates, with `axisLeft` and `axisBottom` from D3 to render the ticks and labels. Margins are explicitly calculated to position the axes and the inner chart area, while the axes module manages the axis generation and text labels.

Loading thumbnail…

Viz Function concept

This example demonstrates how D3 margins define the inner plotting area within an SVG canvas. It renders a single gray rectangle positioned at the top-left margin boundary, with its width and height calculated by subtracting the margin values from the total container dimensions. The visualization uses D3’s selection join operator to create and update the SVG and rectangle elements, leveraging the `select`, `selectAll`, and `join` APIs. The container’s client width and height determine the overall canvas size.

Loading thumbnail…

Viz Function concept

This example demonstrates the fundamental concept of margins in data visualization by drawing a gray rectangle that sits inside a larger white canvas, with padding on all four sides. The code uses D3.js (version 7.8.5) and its `select` API to create an SVG element, then renders the rectangle with computed dimensions based on the container’s client width and height minus fixed top, left, bottom, and right margins. The inner rectangle’s size is calculated from those margin values, and a fill color of `#808080` distinguishes it from the surrounding space.

Loading thumbnail…

Margins

This example demonstrates how margins frame a visualization’s drawing area. A single gray rectangle sits inside an SVG canvas, inset by a uniform 22-pixel margin on all sides. The code uses D3’s `select` to create the SVG and computes the inner dimensions by subtracting the margin from the container’s size. The rectangle is rendered with `attr` for positioning and fill, showing the reserved space around the plot region.

Loading thumbnail…

Iris Dataset

This example displays the first row of the classic Iris dataset as a formatted JSON object in a large monospace font. The code imports the CSV data, converts the numerical fields from strings to numbers, and then renders the entire first data point using a template literal. It relies on the browser's `JSON.stringify` method to produce the readable output, showcasing the data structure without any graphical chart.

Loading thumbnail…

Penguins Dataset

This example displays the first row of the Palmer Penguins dataset as formatted JSON in a large monospace font. The code imports the data from a CSV file using a custom `import data from './data.csv'` statement, then converts each measurement column to a number with unary plus operators. The `main` function renders the JSON stringified object into an HTML `<pre>` element. The primary API used is `JSON.stringify` to serialize the data object, while the export `{ data }` makes the full dataset available externally.

Loading thumbnail…

Solar System

The animation displays the solar system with the Sun and planets to scale, mapping orbital distances and radii onto spatial positions for circles and labels. Built with D3.js, it uses selections and transitions with easeLinear to animate planet appearance and label opacity over staged delays. The code defines celestial body data (including Pluto) and renders it via SVG circles and text, with the Sun and each planet uniquely colored.

Loading thumbnail…

D3 Transitions

This example demonstrates how D3 transitions animate circles across a light green canvas, with circles entering at zero radius and expanding to their final size, while updates move and resize smoothly. The code uses `select`, `transition`, and `easeLinear` from D3 v7, applying a slow 2000ms enter transition with staggered delays and a faster 500ms update transition. A key function on `d.id` drives the enter, update, and exit selections, with exits shrinking back to zero before removal. The six circles have predefined positions, radii, and hex color fills.

Loading thumbnail…

Circles with D3

Five translucent circles in a flat pastel palette sit on a pale blue background, each with a fixed position and radius. The D3 code uses a data join with `selectAll` and `join` to bind an array of circle objects to SVG `circle` elements, setting `cx`, `cy`, `r`, and `fill` attributes directly. The visualization demonstrates static, hard-coded data rendering with D3 v7, applying a uniform opacity of 0.8 to soften the shapes.

Loading thumbnail…

Blank Slate

This blank-slate example renders an empty visualization with no data or graphical output, serving as a minimal starting point for a gallery entry. The code imports `select` from D3 and defines a `main` function that accepts a container but performs no operations on it. It relies on the D3 library version 7.8.5 from the bundled dependencies, with the visualization remaining completely blank until further code is added. This demonstrates the basic scaffold required for building interactive charts, where the container is passed but left untouched.

Loading thumbnail…

Menu Options in D3

This example shows a dropdown menu for selecting a pet, with options ranging from Dog to Duck. The visualization uses D3 v7 to render the menu, managing state through a custom `setState` function that tracks the currently selected value. When a user changes the selection, the `menu` function updates the option elements using D3’s data join, and the selected value is logged to the console. The menu’s appearance is styled with CSS, centering it on the page.

Loading thumbnail…

Scatterplot with shape

This example plots the classic Iris flower dataset on a scatterplot, using sepal length and petal length as the x- and y-axes. Species are distinguished by different symbol shapes, with a legend that supports interactive filtering by clicking on a species. The visualization is built with D3 v7, using `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.symbol` for shape encoding. Data loads from a CSV file, and hover interactions update the legend’s opacity to highlight the selected species.

Loading thumbnail…

Scatterplot with color legend

This example displays the classic Iris dataset as a scatterplot, mapping sepal length on the x-axis and petal length on the y-axis. Each point is colored by the species of the flower, with a custom color legend on the right side identifying the three categories. The visualization is built using the D3 v7 API, including `d3.select`, `d3.scaleLinear`, and `d3.scaleOrdinal` for data mapping. A custom legend component and axis components are assembled using D3’s join operation, organizing the visual elements into distinct groups.

Loading thumbnail…

Keeling Curve

This visualization displays the Keeling Curve, showing monthly average atmospheric CO₂ concentration from Mauna Loa from 1958 onward. The line chart reveals both the seasonal oscillations and the steady upward trend in carbon dioxide levels over time. It uses D3 v7’s `scaleTime`, `scaleLinear`, and `line` generators for the chart, with custom axis and label functions. Data is loaded from a CSV file, parsed with `csvParse`, and dates are converted using `timeParse` before being rendered as an SVG path.

Loading thumbnail…

Scatterplot practice

This scatterplot displays the relationship between sepal length and petal length for the Iris dataset, with points rendered as SVG circles. Using D3 version 7, the visualization loads data from a CSV file, parses it with `csvParse`, and maps the measurements onto linear scales via `scaleLinear` and the `extent` function. Axes are generated through reusable `axisLeft` and `axisBottom` methods, while the circles are positioned using the `attr` method to set `cx` and `cy` values. The species information is present in the data but not encoded in the visualization.

Loading thumbnail…

Circles with D3

Six translucent circles in contrasting colors—gold, pink, cyan, purple, green, and magenta—overlap on a pale green background. Each circle’s position, radius, and fill are hard-coded in an array of objects. The example uses D3 v7’s `select`, `selectAll`, and `join` to bind this data to SVG `circle` elements, setting `cx`, `cy`, `r`, `fill`, and a fixed opacity of 0.708. The visualization demonstrates basic data-join and SVG rendering with d3.

Loading thumbnail…

Marks and Channels

A small multiples grid of five D3.js plots demonstrates how the same dataset—the numbers zero through four—can be encoded through different visual channels. Each panel isolates a single mark or channel: x-position, y-position, size, length, shape, and hue, using circles, rectangles, and paths. The code uses D3’s selection and join API within a custom viz.js orchestrator, rendering SVG directly. Shape encoding leverages d3.symbol() with symbolsFill, while hue applies schemeCategory10.

Loading thumbnail…

D3 Marks & Channels

This example demonstrates five fundamental D3 marks and encoding channels using a small array of numbers. It shows circles positioned along the x-axis and y-axis, circles scaled by area, rectangles representing length, and symbols displaying different shapes. The visualization uses D3 v7 with the `select`, `symbol`, and `symbolsFill` APIs to bind data and generate SVG elements. The data is a simple fixed set of integers, rendered as multiple separate SVG canvases, each focusing on a distinct mark and channel combination.

Loading thumbnail…

D3 data transformation

This example demonstrates several D3.js data transformation techniques on the classic Iris flower dataset. The visualization displays the raw data from a CSV file in a styled preformatted block, while the console logs the results of operations including `d3.min`, `d3.max`, `d3.extent`, `d3.group`, `d3.rollup`, and `d3.bin`. Using D3 v7 APIs like `flatGroup` and `flatRollup`, it shows how to aggregate observations by species and compute averages, culminating in a histogram of sepal lengths generated with `d3.bin`. The code loads data asynchronously via `d3.csvParse` after a fetch request.

Loading thumbnail…

D3 data transformation

This example demonstrates a simple data-loading and transformation workflow using D3. It fetches a CSV file containing the classic Iris dataset and uses `d3.csvParse` to convert the raw text into an array of objects, subsequently coercing the numeric measurement columns to numbers. The resulting parsed data is displayed as formatted JSON inside a `<pre>` element. The visualization uses a minimal state management pattern, with a `setState` callback triggering re-renders, and leverages D3’s `select` and `join` for DOM updates.

Loading thumbnail…

D3 data loading

This example demonstrates asynchronous data loading in D3 by fetching a CSV file of iris flower measurements (`data.csv`) and displaying the parsed content as a JSON string inside a `<pre>` element. While the request is pending, the text shows “LOADING” before replacing it with the data. Using `d3.csvParse` alongside the `fetch` API, the code converts text into an array of objects, then coerces numeric fields such as `sepal_length` and `petal_width` into numbers with the unary plus operator. The visualization relies on D3 v7 selections with `.join()` to update the DOM, while `index.js` manages a simple state pattern.

Loading thumbnail…

D3 Data Loading...

This example creates a single red circle within an SVG canvas that dynamically tracks the mouse position, using mousemove events to update its center coordinates. Clicking anywhere on the canvas triggers a random RGB color change, altering the circle’s fill. The visualization utilizes d3.select and the join method to efficiently create and update the SVG and circle elements, while managing a state object that stores the current x, y coordinates and color. The viewport dimensions are set to match the browser window size.

Loading thumbnail…

Moving Mouse

A single red circle follows the mouse cursor across a full-screen SVG canvas, updating its position in real time with each mousemove event. Clicking anywhere randomly changes the circle's fill color by generating new RGB values. The visualization uses D3 v7's `select`, `join`, and event handling to bind the circle to the pointer coordinates, with state managed through a custom `setState` function that triggers re-renders. The SVG dimensions are set to match `window.innerWidth` and `window.innerHeight`, and the cursor is hidden via CSS.

Loading thumbnail…

Moving circle

A moving circle follows the mouse cursor across an SVG canvas, changing to a random RGB color with each click. The visualization uses D3's data join pattern, binding arrays of null values to create and update a single circle and svg element on every state change. Mouse and click event listeners call a setState function that updates the circle's x and y coordinates to the cursor position or assigns a new randomly generated color.

Loading thumbnail…

SVG Fundamentals

This example demonstrates SVG fundamentals by layering horizontal and vertical striped rectangles that intersect to create a grid, with two masks applied to each set of stripes. D3’s `select`, `range`, `symbol`, and `symbols` APIs generate the stripes and position symbol paths within the masks. The `mask1` and `mask2` masks, filled with black and white respectively, reveal or hide portions of the grid based on the symbol shapes, producing a dynamic interplay of light and dark geometric patterns across the full canvas.

Loading thumbnail…

D3 Selection Exploration

This example presents an animated scatter plot and line chart driven by a sinusoidal wave. A set of circles and a connecting path update 60 times per second, with the number of points oscillating between five and fifteen and their vertical positions shifting over time. Built with React and D3.js, the code uses `d3.select`, `selectAll`, and `join` to bind data to SVG elements, while `d3.range` generates the sequence and `d3.lineGenerator` computes the path’s geometry. All rendering occurs in SVG with smooth, real-time animation.

Loading thumbnail…

SVG Fundamentals

This example demonstrates SVG fundamentals by layering horizontal and vertical striped rectangles that intersect to create a grid, with two masks applied to each set of stripes. D3’s `select`, `range`, `symbol`, and `symbols` APIs generate the stripes and position symbol paths within the masks. The `mask1` and `mask2` masks, filled with black and white respectively, reveal or hide portions of the grid based on the symbol shapes, producing a dynamic interplay of light and dark geometric patterns across the full canvas.

Loading thumbnail…

Fork of HTML Starter

This example shows a minimal HTML page displaying the message “Hello HTML!” in large, centered text. The page uses plain CSS for styling and relies on JavaScript only implicitly through its HTML structure, with no external libraries or frameworks. It demonstrates a basic static rendering approach, using standard `index.html` markup and inline `<style>` rules to achieve the visual effect. The code serves as a bare-bones starting point, similar to the linked React Starter but without any component logic or interactive behavior.

Loading thumbnail…

Back to the Basics

This example shows a bar plot that appears empty at first, with axes and margins defined but no data loaded into the visualization. The code sets up an SVG canvas sized 960 by 500 pixels using d3-selection, and defines a reusable barplot module with getter and setter functions for data and options. The plot specifies three y-keys—Nitrogen, Oxygen, and Helium—and a margin object, though the main function initializes an empty data array. The rendering approach uses the SVG element directly in the HTML, with styling applied through an external CSS file that hides page overflow.

Loading thumbnail…

D3 - Maps

A rotating orthographic globe displays world landmasses as stroked vector outlines on a Canvas element. D3’s `d3.geoOrthographic` projection and `d3.geoPath` render both the geographic features and a graticule, with the rotation updated by `projection.rotate` inside a `setInterval` loop. The geographic data comes from a remote TopoJSON-like GeoJSON file, while the animation runs on a 960×800 canvas.

Loading thumbnail…

D3 - Chord Diagram

This chord diagram uses d3.chord and d3.ribbon to visualize a 3x3 matrix of numeric relationships as interconnected arcs. The chord generator sorts subgroups in ascending order and applies a 0.04 radian pad angle, while the ribbon generator sets a fixed radius of 200. Data is embedded directly in the JavaScript as a three-row array. The resulting SVG paths are rendered with d3.select and the join operation, which binds the chord data to path elements and assigns the ribbon path data. The styling in styles.css fills the paths with a light gray and adds a subtle stroke and opacity, creating a clean, static representation of the matrix.

Loading thumbnail…

D3 Transitions - Custom Tweens

The example showcases circular transitions of data-driven points using D3.js, contrasting a default linear interpolation with a custom tween that animates along the shortest angular path. Two SVG canvases display circles that jump between random angles on a fixed radius. The left pane uses standard `transition().attr` calls, while the right pane employs a custom `transition().tween()` with D3's `interpolate` to handle angle wrapping and ensure smooth, direct movement across the circumference. The code updates the data on button click, demonstrating the API's flexibility for controlling animation behavior.

Loading thumbnail…

D3 Transitions - Chained Transition

Five circles animate across an SVG canvas, moving horizontally to new random positions before bouncing to new random sizes. The example demonstrates chained transitions in D3 v7, where the `d3.select` API chains multiple `.transition()` calls to sequence the position change over the first transition, followed by a second 750-millisecond transition with a `d3.easeBounce` easing function for the radius change. The update button triggers `updateAll()`, which regenerates random data for the `cx` and `r` attributes and re-applies the chained animation sequence.

Loading thumbnail…

D3 - Transitions -> easeBounceOut

Five bouncing circles demonstrate the d3.easeBounceOut easing function on an SVG. A button click triggers updateAll, which regenerates random x-coordinates and animates each circle’s cx attribute via a one-second transition. The code uses D3 v7’s selection.join and transition.ease APIs, rendering with SVG circles at a fixed vertical position and radius.

Loading thumbnail…

D3 Transitions - Easing Function

A single circle animates horizontally across an 800-by-100 SVG canvas, moving between x-coordinates of 100 and 700 each time the "Update data" button is clicked. A dropdown menu lists all available D3 easing functions (e.g., `d3.easeCubicOut`), and the selected function dictates the circle’s motion profile during the 750-millisecond transition. The example uses D3 v7.8.5’s selection API, `.transition().duration().ease()`, to tween the circle’s `cx` attribute, with a semi-transparent purple fill and no additional data source.

Loading thumbnail…

Fork of Fork of D3 - Staggered Transitions

This example demonstrates staggered transitions for a set of ten circles, which move horizontally between two alternating column configurations when the “Update data” button is clicked. Each circle transitions its `cx` attribute with a sequential delay of 100 milliseconds, creating a cascading wave effect. The visualization uses D3 v7’s data join (`join('circle')`) and the `transition().delay()` API, with SVG rendering and opacity styling defined in CSS. The underlying data array is regenerated on each click to flip the target x-coordinates between left and right sides.

Loading thumbnail…

Fork of D3 - Transitions

Five circles in an SVG display random positions, sizes, and colors that update when the "Update data" button is clicked. Each update generates new random data and smoothly animates the circles to their new properties using D3's selection.join and transition methods. The code uses d3.select, d3.rgb, and chained .transition() calls to animate the cx, r, and fill attributes. All rendering is SVG-based with HTML buttons triggering the updates.

Loading thumbnail…

D3 - Transitions

This example demonstrates three ways D3.js handles data updates with transitions. The top SVG updates circles without animation, the middle uses a simple transition to move circles smoothly, and the bottom shows an enter-update-exit pattern where new circles fade in, existing circles move, and removed circles fall downward and disappear. A button click regenerates random data values. The code uses D3 v7 selections, the `.join()` method, and `.transition()` with a duration of 1000ms, all rendered as SVG circles with fill opacity.

Loading thumbnail…

Fork of Fork of Arbre_Axe_Accuracy

This example displays a forest of six decision trees, each with an associated accuracy score that determines the color of its nodes (red, blue, or gray). The trees are positioned side-by-side and can be scrolled horizontally within a container. Using the D3 v5 `d3.tree()` layout, the code recursively processes the nested data to generate hierarchical SVG node-link diagrams, applying custom color classes based on accuracy thresholds. The visualization includes animation capabilities and tooltip interactions through the SVG rendering, with the `d3.hierarchy()` API used to structure the raw data before layout computation.

Loading thumbnail…

Fork of D3 Data Requests

This example shows a table of company data, displaying fields for company name, industry sector, revenue, and worker count. The page loads a CSV file from an external URL and uses D3’s `d3.csv` method to fetch and parse the data, then binds it to table rows with `d3.select` and `data().join()`. The `update` function inserts each record into the table body using `.html()` to populate four columns per row. The visualization relies on D3 v7 and renders static tabular data with no additional interactivity or charting.

Loading thumbnail…

D3 Data Requests

This example displays a table of data entries, each with a name and two indicators, fetched from a remote JSON endpoint. It uses D3 modules to asynchronously load the data and update the table body. The `d3.json` function retrieves the data, and `d3.select` with the `.join` method rebuilds table rows, binding each data object to a new row. The row content is generated with an inline HTML template, while CSS styles the table with a clean, minimal design.

Loading thumbnail…

Fork of D3 Shapes - Stacked Area - streamGraph

Four fruit-crop time series stack into a flowing, stream-like area chart with the D3 shape library. The graph displays daily counts for apricots, bananas, cherries, and damsons over ten days, using a wiggle offset and inside-out ordering to create layered ribbons. Distinct fill colors distinguish each fruit, while a Catmull-Rom curve smooths the paths. The SVG visualization is built with `d3.stack`, `d3.area`, and `d3.curveCatmullRom`, rendered through joined `path` elements.

Loading thumbnail…

D3 Shapes - Stacked Area - .offset(d3.stackOffsetExpand)

A stacked area chart displays five days of fruit quantities, with each day normalized to a full vertical stack using `d3.stackOffsetExpand`, so the y-axis represents proportional shares. Three colored areas—apricots, blueberries, and cherries—are generated with `d3.area()` and rendered as SVG paths inside an SVG element. The data comes from a hardcoded array, and the chart uses `d3.stack()` with keys for each fruit type, mapping each series to a color from a predefined palette.

Loading thumbnail…

D3 Shapes - Stacked Area

This stacked area chart displays fruit quantities (apricots, blueberries, cherries) across the days of a work week, with each series normalized to a proportional share using the `d3.stackOffsetExpand` offset. The visualization uses `d3.stack()` to generate the stacked series and `d3.area()` with a linear y-scale to draw the paths into an SVG via D3’s `join` pattern. Three distinct colors represent each fruit, and the code includes comments on alternative `d3.stackOrder` and offset configurations, though only the expand offset is active.

Loading thumbnail…

D3 Shapes - Stacked Bar

This stacked bar chart visualizes five days of fruit quantities, with three series (apricots, blueberries, cherries) shown as horizontal segments per day. The chart uses D3 v7’s `d3.stack()` to compute the cumulative y-values for each series, then binds the stacked data to SVG `rect` elements. Series colors are applied via a static array, and day labels are rendered as SVG text. The visualization demonstrates stacking without axes, focusing on the proportional differences between fruit categories across the week.

Loading thumbnail…

Fork of Fork of D3 Axes - Axes Path

A minimal D3.js example demonstrates a custom axis rendered as a long, dashed line. The visualization shows a linear scale with a domain of 0 to 100 mapped to a pixel range, using `d3.axisLeft` to generate ticks that extend across the SVG canvas. The code hides the axis path and applies a `stroke-dasharray` style to tick lines via CSS, while the axis is attached to an SVG group using `selection.call`. The rendering relies on SVG elements and D3 v7.8.5, with all tick lines extending 500 pixels from the axis.

Loading thumbnail…

Fork of D3 Axes - Tick Label Formatting

This example demonstrates how to format tick labels on a D3.js axis using custom tick formatting. A linear scale maps a domain of 0 to 100 to a pixel range, and an axis bottom is configured with increased tick padding and size. The axis is customized by limiting the number of ticks to four and applying a custom `tickFormat` function that appends a percent sign to each value. The resulting SVG renders the axis with labeled ticks showing the original data values with a “%” suffix.

Loading thumbnail…

D3 Axes - Configuration

This example demonstrates how to configure a D3 axis by explicitly setting tick values. A linear scale maps a domain of 0 to 100 to a range of 0 to 500 pixels, and an axis is generated using `d3.axisBottom(scale)`. The code calls `.tickValues([0, 25, 50, 75, 100])` to control which values appear as ticks, overriding the default tick generation. The axis is rendered into an SVG `<g>` element using `d3.select('svg g').call(axis)`, producing a clean, labeled horizontal axis.

Loading thumbnail…

Tippy.js - Tooltip customization

This example demonstrates a minimal tooltip implementation using Tippy.js, showing a hover-triggered popup with the text “My tooltip!” styled with the “translusent” theme. The page loads Tippy.js and Popper.js from a CDN, and the tooltip is initialized with the `tippy()` function. A custom Poppins font is imported, and the button element with the id `tippy` serves as the trigger target. The underlying data visualization context appears limited, as the example focuses on tooltip customization rather than chart rendering.

Loading thumbnail…

D3 Line - handling null values with .defined()

This example demonstrates how to handle null values in a line chart using D3’s `d3.line()` generator with a `.defined()` filter. The chart renders a single polyline across an SVG canvas, where a missing data point (null) breaks the continuous path into two segments, leaving a gap in the visualization. The code constructs the path data by passing an array of coordinate pairs—including a null entry—to the line generator, then appends the resulting path to the SVG via `d3.select()` and `.attr('d', pathData)`. The stroke is set to a light gray (#ccc) with no fill, and the feature is powered by D3 v7.8.5.

Loading thumbnail…

D3 Line - Curve

Two SVG panels compare a standard D3 line path with a curved variant using D3 version 7. The code draws a linear path through six explicit coordinate points (x, y), then applies `d3.curveCardinal` to the same data via `d3.line().curve()` to produce a smoother interpolation. Each panel renders the resulting path as an SVG `<path>` element using the `lineGenerator` and `curveGenerator` functions, overlaid with reference circles marking the original data points. The example demonstrates how the curve generator modifies the path data without changing the underlying dataset.

Loading thumbnail…

D3 Line - Rendering Line in a canvas context

This example demonstrates how to render a line chart directly onto a canvas element using D3’s `d3.line` generator with a custom rendering context. A simple dataset of five coordinate pairs is drawn as a single path, with the line generator’s `context` method set to the canvas’s 2D drawing context. The code explicitly manages the canvas stroke styling and path initialization, bypassing SVG entirely. It relies on D3 v7 and the native Canvas API’s `getContext('2d')` and `stroke()` methods to produce the final output.

Loading thumbnail…

D3 Lines - Radial Lines

This example shows how D3’s radial line generator maps polar coordinates to Cartesian paths, tracing a series of points around a circle. An SVG group is translated to the center, and a path is drawn with a stroke, connecting points with varying radii—most at 80 units and one at 30—to create a spiked, star-like shape. The code uses `d3.radialLine()` to generate the path data from an array of angle–radius pairs, then appends it to the SVG via `d3.select`. The rendering is static, relying on D3 v7 and SVG output.

Loading thumbnail…

D3 Lines - Radial Line another variant

This example demonstrates how D3’s radial line generator can create a decorative, repeating angular pattern. Two petals are drawn from a dataset of eight points, each specifying an angle and radius, producing a symmetrical loop around a central point. The generator, `d3.radialLine()`, maps these angle and radius values to a path rendered as an SVG stroke. The code directly sets the generator’s `.angle()` and `.radius()` accessors, then appends the resulting path to a `<g>` element inside a static SVG canvas.

Loading thumbnail…

D3 Area - Multiarea

This example shows a multi-area chart built with D3 v7, displaying a gray band between upper and lower y-values across six x-axis points. The chart uses a linear scale to map input values (0–100) to pixel coordinates, while a d3.area() generator computes the path for the filled region. The data is provided as an inline array of objects with x, y0, and y1 fields, and the result is rendered as a single SVG path element inside a 700×400 viewport.

Loading thumbnail…

D3 Area - Radical Area

This example demonstrates a radial area chart generated with D3.js, where a circular path alternates between outer radii of 80 and 40 pixels while maintaining an inner radius of 20. The visualization encodes nine angular data points from 0 to 2π, filling the resulting petal-like shape with a light gray color. The code uses `d3.radialArea()` with `.angle()`, `.innerRadius()`, and `.outerRadius()` accessors to compute the SVG path data, which is then appended to a `<g>` element. The chart renders in an SVG container sized 700 by 200 pixels, with data provided as an array of angle-radius pairs.

Loading thumbnail…

D3 Piechart

This example shows a simple pie chart built from a static array of six numeric values, rendered as filled orange arcs with white strokes on an SVG canvas. The chart is generated using the d3 pie generator to compute arc segments, while the d3 arc generator defines the inner and outer radii for the donut-style shape. The visualization uses d3’s select and join methods to bind the computed arc data to SVG path elements, with styling applied through CSS and inline attributes.

Loading thumbnail…

D3 Piechart - Semi Circular

This example displays a semi-circular pie chart, also known as a donut chart, rendered as SVG. Six data values are visualized as orange arcs with white strokes, arranged from left to right across a half-circle. The visualization uses the d3 pie generator, configured with start and end angles to create the semi-circular shape, and the d3 arc generator to define the inner and outer radii. The arcs are drawn as SVG path elements using the `d3.select` API.

Loading thumbnail…

D3 Arcs - Configurations

This example demonstrates how to configure D3 arcs with varying angular segments. The visualization displays five distinct arc pieces, each with a different start and end angle, arranged in a single circular configuration. The arcs are rendered using the D3 arc generator, which applies an inner radius of 20, an outer radius of 100, a padding angle of 0.02 radians, and a corner radius of 4 pixels. The SVG output is styled with orange fills, and the data is hardcoded as an array of angle pairs within the JavaScript code.

Loading thumbnail…

D3 Piechart - with labels

This example shows a pie chart of fruit quantities, with each slice labeled by its fruit name. The chart uses the `d3.pie()` generator to compute arc data, and `d3.arc()` with inner and outer radii to create a donut-like shape. Slice paths are rendered in orange with white strokes, and labels are positioned at each arc’s centroid using `arcGenerator.centroid(d)`. Data is hard-coded in the JavaScript, and the visualization is drawn as SVG within an HTML page, styled by CSS.

Loading thumbnail…

D3 Axes - Transition

A linear D3 axis transitions smoothly when its scale domain changes. The example uses a button click to generate new random minimum and maximum domain values, then calls `d3.axisBottom` within a `transition()` to animate the tick positions and labels. The SVG renders a single horizontal axis with 500 pixels of range, and the transition updates as the scale’s domain shifts.

Loading thumbnail…

D3 Axes - Scale Types

This example demonstrates six D3 axis types rendered side-by-side in a single SVG, each labeled with its scale type. It shows how different scales—linear, sqrt, log, time, band, and point—map input domains to output ranges of 0 to 500, with axes generated using `d3.axisBottom()`. The code explicitly defines each scale, then reassigns the axis’s scale before calling it on separate `<g>` elements, all built with D3 v7.

Loading thumbnail…

D3 - Axes

This example demonstrates how D3’s axis components render tick marks and labels for a linear scale. Four separate axes—left, right, top, and bottom—are drawn inside an SVG container, all sharing the same `d3.scaleLinear` domain of 0 to 100 mapped to a 400-pixel range. The code uses `d3.axisLeft`, `d3.axisRight`, `d3.axisTop`, and `d3.axisBottom` to generate the axes, then attaches each to a corresponding `<g>` group using `selection.call`. The visualization highlights the standard D3 approach for orienting axes around a plot area.

Loading thumbnail…

D3 Arcs - Accessor Functions

This example shows how accessor functions can be used with the d3.arc() generator to draw a series of annular segments from an array of data objects, each with its own start and end angles. Using d3.arc() and the centroid method, the code creates SVG paths filled in orange and places white labels at the center of each arc. The data is supplied directly as JavaScript objects, and the d3.select() and join() pattern binds it to the DOM, with innerRadius and outerRadius fixed while angles vary per item.

Loading thumbnail…

D3 Arcs

A single orange arc is drawn inside an SVG canvas, spanning a quarter circle with defined inner and outer radii. The example demonstrates the `d3.arc()` API from D3 v7, which generates path data for annulus sectors. The code creates an arc generator, passes angle and radius parameters to compute the `d` attribute, and appends the resulting path to an SVG `<g>` element using D3's selection and append methods. The arc is filled solid orange against a blank background.

Loading thumbnail…

D3 Shapes

This example displays the seven built-in D3 symbol types (circle, cross, diamond, square, star, triangle, and wye) rendered as stroked SVG paths along a horizontal scale. It uses `d3.symbol()` with a `d3.scaleLinear()` to position each shape, and applies each symbol generator via `d3[d]` lookups. Labels below each path show the corresponding API name. The data is a static array of symbol type strings, with the visualization rendered entirely in SVG.

Loading thumbnail…

D3 Shapes - Star shaped scatter plot

Six points, plotted along the x-axis from 0 to 500, each render as a hollow, gray star symbol. The visualization demonstrates D3’s `d3.symbol()` generator with the `d3.symbolStar` type and a fixed `size(80)`, applied as the `d` attribute for every SVG `<path>`. All stars share the same path data, and their positions come from a hardcoded `points` array, translated via each datum’s coordinates. The example uses a static SVG container with a `g` element, showing how a single generated symbol can be reused through D3’s data join.

Loading thumbnail…

D3 Area Genrators

This example demonstrates two area charts generated from the same set of six data points. The D3 `d3.area()` generator creates a path with a closed shape; the first is drawn with a red fill and a default baseline of zero, while the second uses a `y0(150)` offset to position its blue shape higher on the SVG canvas. The paths are rendered as SVG elements using the `d` attribute set directly from the generator’s output, with data provided as an array of `[x, y]` coordinates.

Loading thumbnail…

D3 Reusable Part

This example demonstrates a reusable bar chart component built with D3 v7, showing grouped bars for fruit data with animated updates. The chart visualizes multiple chemical element values (Nitrogen, Oxygen, Helium) across fruit categories using a grouped bar layout. The component uses D3 scales including `scaleBand`, `scaleLinear`, and `scaleOrdinal`, with transitions animating bar heights on enter and update. The code highlights a modular pattern where the chart is configured via a `config` object and bound to data using the `selection.call()` mechanism, with SVG rendering and staggered transition delays for a polished effect.

Loading thumbnail…

Fork of Reusable Barplot

This fork of a reusable barplot shows grouped bars comparing element quantities—like Nitrogen, Oxygen, and Helium—across fruit categories (Banana, Apple, Mango, Orange). Built with D3 v7, it uses `scaleBand` for x-axis grouping, `scaleLinear` for the y-axis, and `scaleOrdinal` for color mapping. Animated transitions via `transition()` and `axisBottom`/`axisLeft` render the SVG. Interactive legend labels toggle bar visibility by filtering data and re-rendering the chart through the custom `toggleBars` handler.

Loading thumbnail…

D3 - Shapes Practice

This example demonstrates a simple D3.js line chart that plots a set of six coordinate points on an SVG canvas. The visualization shows how the `d3.line()` function generates a smooth path connecting the specified data points, which are hardcoded as an array of x and y coordinates. The code renders the path using an SVG `<path>` element with a gray stroke and no fill, following the D3 v3 approach documented in the provided reference. The visualization serves as a basic practice exercise for understanding shape generation and path creation in D3.

Loading thumbnail…

lineGenerator with .x & .y Methodhs

This example demonstrates how to generate a simple line chart from an array of numeric values using D3’s line generator. The chart displays seven data points connected by a gray polyline, illustrating how the `.x` and `.y` accessor methods map each datum’s index and value to coordinates via `d3.scaleLinear` for both axes. The code uses `d3.line()` to produce the path data and appends it as an SVG `path` element. The data is a hardcoded array of objects with a `value` property, and the visualization is rendered as SVG.

Loading thumbnail…

D3 Shapes - Pi Charts

This example shows how to create a simple donut chart using D3’s arc generator. Five arc segments with varying start and end angles are rendered as SVG paths inside a single group, all filled with solid orange. The code configures the arcs with inner and outer radii, padding, and rounded corners via `d3.arc()`, then binds the data array to path elements using `.join()`. The visualization relies on D3 v7 and static SVG output, with no interaction or animation.

Loading thumbnail…

D3 Shapes - Curves

This example demonstrates how varying the beta parameter of d3.curveBundle alters the shape of a line connecting four fixed points. Seven paths are rendered as SVG elements, each using a different beta value from 0.4 to 1.0, with opacity increasing proportionally to the beta index. The d3.line generator applies the selected curve function to the same point array, producing a family of curves that gradually transition from a tight, angled path to a smoother, more rounded one. The visualization highlights the sensitivity of bundle curves to their tension parameter.

Loading thumbnail…

D3 Shapes In action

This example demonstrates how to generate a line chart from random data points using D3's line generator. The code creates 200 points with x-coordinates increasing by 3 and y-coordinates randomly assigned between 0 and 100, then passes this array to `d3.line()` to produce a smooth path. The resulting SVG path element is styled with a gray stroke and no fill, and the file uses D3 version 7.8.5 with SVG rendering, as specified in the HTML and package configuration.

Loading thumbnail…

scalePoint() in action

Five orange dots mark Monday through Friday along a horizontal line using a point scale, with each dot positioned by its day value. The `d3.scalePoint()` API maps the categorical domain to a continuous pixel range, and the console logs the scale's `step()` method to reveal the uniform spacing between points. The example renders in SVG within a 700-by-240 pixel canvas, using D3 v7 and data from a hardcoded array of weekday objects.

Loading thumbnail…

scaleBand() in action

This example demonstrates a horizontal bar chart where each bar’s vertical position and height are determined by `d3.scaleBand`. Five data items, each with a day label and a numeric value, are mapped to a band scale with a range of 0 to 200 pixels and inner padding. The SVG renders orange rectangles whose `y` attribute comes from the scale, `height` equals the band’s `bandwidth()`, and `width` reflects the data value. The code uses D3 v7’s selection `.join()` to bind data to `rect` elements.

Loading thumbnail…

scaleOrdinal() other variations

This example demonstrates the use of `d3.scaleOrdinal()` to map categorical month names to colors from the `d3.schemePaired` palette, with each month rendered as an `SVG` text element. The x-positions are determined by a `d3.scaleLinear()` scale mapping indices 0–11 to a 600-pixel range. The visualization shows how ordinal scales assign discrete colors to categories, while the linear scale controls spatial layout. The code uses D3's selection and `.join()` operation to create the text elements within the SVG wrapper. The data is a hardcoded array of month abbreviations.

Loading thumbnail…

D3 scales() scaleOrdinal() in action

This example displays the twelve month abbreviations in a horizontal row across an SVG canvas, demonstrating how D3 scales map data values to visual properties. Using the D3 v7 library, it applies a linear scale (`d3.scaleLinear`) to position each text label along the x-axis, while an ordinal scale (`d3.scaleOrdinal`) assigns a fill color of black to the first month and grey to the remaining ones. The labels are rendered as SVG text elements using D3's selection and join methods.

Loading thumbnail…

D3 scales() scaleThreshold() in action

This example demonstrates how d3.scaleThreshold() maps continuous numeric values to discrete color bins. A d3.scaleLinear() positions 60 rectangles along the x-axis, while the threshold scale assigns one of four fill colors—#ccc, lightblue, orange, and #ccc—based on domain cutoffs at 0, 50, and 100. The SVG rendering uses d3-selection’s join() method to bind data generated by d3.range(-10, 110, 2). The result visually highlights the color transitions at the specified threshold boundaries.

Loading thumbnail…

D3 scales() scaleQuantile() in action

This example demonstrates how D3’s `scaleQuantile()` maps a numeric dataset to a categorical color scale, while `scaleLinear()` positions the data points horizontally. Fifteen circles are rendered in an SVG, each colored lightblue, orange, or lightgreen based on its quantile bucket. The visualization uses `d3.scaleLinear()` and `d3.scaleQuantile()` to transform the data array, and `d3.select("#wrapper").join()` to bind values to circle attributes. The source data is a hardcoded array of numbers, and the rendering is SVG-based.

Loading thumbnail…

D3 scales() scaleQuantize() in action

This example demonstrates how `d3.scaleQuantize()` maps a continuous numeric input domain to discrete output ranges, using it to assign fill colors to a series of rectangles. The visualization renders 100 SVG rectangles, positioned with a `d3.scaleLinear()` scale and colored with a quantize scale that divides the domain [0, 100] into four color bands: lightblue, orange, lightgreen, and pink. The code uses D3 v7’s `join()` method to bind data from `d3.range()` and style each rectangle’s fill based on its value.

Loading thumbnail…

Fork of D3 Scale Invert() in action practice

This example demonstrates the inverse of a D3 scale, translating pixel coordinates back into data values. A grey SVG rectangle acts as a clickable area; clicking it uses `d3.pointer` to capture the mouse position and `scaleLinear.invert()` to compute corresponding X and Y values on two linear scales ranged from 0 to 100. The result updates a text display with both coordinates. The scales also employ `.nice()` to round the domain, with axes rendered via `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

D3 Scale Invert() in action

A linear scale with a domain of -50 to 50 and a range of 0 to 600 pixels is drawn as an SVG axis. A grey clickable band beneath the axis uses d3.pointer to capture the mouse position, and linearScale.invert() converts that pixel coordinate back into a data value, displaying the precise number in a text label. The example demonstrates the inverse mapping capability of d3.scaleLinear in an interactive way.

Loading thumbnail…

D3 Scale

This example demonstrates how D3 scales map input data to visual output, using a linear scale to position circles along the x-axis and a multi-domain color scale to assign fill colors. The circles represent values from -10 to 10, with colors transitioning from red through gray to blue. It renders as an SVG using d3.scaleLinear for both positioning and color interpolation, with data bound through d3.select and .join(). The code references D3 v7 scale types in utils.js, including scaleTime, scaleBand, and scaleOrdinal, though only linear scales are actively applied.

Loading thumbnail…

D3 Scale - ScaleSequential - Different Interpolators

This example demonstrates eight different D3 color interpolators applied to sequential scales, each rendered as a horizontal band of colored rectangles. The visualization shows how the viridis, inferno, magma, plasma, warm, cool, rainbow, and cubehelixDefault colormaps transition across a 0–100 domain, with each interpolator labeled above its corresponding row. The code uses `d3.scaleSequential()` with each interpolator to map data values to fill colors, while `d3.scaleLinear()` positions the rectangles along the x-axis. The SVG output is generated from range data via `d3.range()` and rendered with D3's data join pattern.

Loading thumbnail…

Fork of Fork of D3 Scale - scaleSequential

Eleven circles arranged along a horizontal line demonstrate the `d3.scaleSequential` API with a rainbow interpolator. Each circle’s horizontal position is mapped by a linear scale from data values 0 to 100 to pixel coordinates, while its fill color uses the sequential scale’s domain to sample `d3.interpolateRainbow`. The circles render as SVG elements via a data join, with D3 v7 handling the DOM updates. The example contrasts continuous positioning with continuous color mapping, showing how two scales can drive different visual channels from the same dataset.

Loading thumbnail…

Fork of D3 Scale - ScaleTime

This example demonstrates how D3’s `scaleTime()` maps dates to x-coordinates along a linear time axis. It plots four circles at quarterly intervals between January 2016 and January 2017, positioning them at y=200 while labeling each with its full date string. The visualization uses an SVG canvas, with data bound via D3’s selection join (`selectAll().data().join()`). The scale’s domain spans one year, and its range runs from x=60 to x=900, making temporal spacing explicit. The code imports `scaleTime` from D3’s scales module.

Loading thumbnail…

D3 Scale - ScaleLog

This example demonstrates how a logarithmic scale maps data values across an SVG canvas. It places six text labels at positions calculated by a `d3.scaleLog()` function, with a domain spanning from 10 to 100,000 and a range of 0 to 700 pixels. The visualization highlights how log scales compress large numerical ranges, showing labels for 0, 10, 100, 1,000, 10,000, and 100,000 at increasing intervals. The code uses D3 v7’s `scaleLog`, `scaleLinear`, and `scaleSqrt` definitions, rendering the output as SVG text elements.

Loading thumbnail…

D3 Scale - Sqrt

This example compares linear and square-root scales for encoding data as circle radii. Two rows of circles, one red and one green, map the same dataset from 0 to 100 using D3's `d3.scaleLinear` and `d3.scaleSqrt`. The linear scale positions circles along the x-axis, while its radius is scaled for visual clarity. The square-root scale directly maps the data to the radius, ensuring that the circle's area, rather than its diameter, is proportional to the value. The SVG output includes an annotation recommending square-root scaling for area-based encodings.

Loading thumbnail…

D3 Scale Function PRactice

This example demonstrates D3 scale functions by mapping a small array of numeric values to positions along an SVG axis. It renders circles and labels on a horizontal line using a linear scale, then displays the corresponding axis with `d3.axisBottom`. The code imports a custom `getScale` utility from `utils.js` that switches between D3’s scale types—including `scaleLinear`, `scaleSqrt`, `scaleLog`, and others—although only the linear scale is actively applied. The visualization uses SVG rendering with a fixed 960×500 canvas and D3 v7 via `bundle.js`.

Loading thumbnail…

D3 Scale Functions

This example demonstrates how D3 scale functions map input data values to visual output positions. It plots a set of numeric data points as circles along a horizontal axis, with each value labeled above its corresponding circle. The code uses `d3.scaleLinear()` to map the domain (0–10) to a pixel range, and renders the result as SVG elements. An axis is added using `d3.axisBottom()`, and the utility function `getScale` supports multiple scale types, including `scaleSqrt`, `scaleLog`, and `scaleBand`, though only linear is actively applied here.

Loading thumbnail…

Untitled

This example demonstrates D3's enter, update, and exit selections in a data join, showing how circles are added, recolored, or removed as the dataset changes with each button click. Clicking the Update button generates a random number of items (each with value 40) and renders them as blue circles on entry, red on update, and green on exit. The code uses d3.select and selectAll with the .join() method, including explicit enter, update, and exit functions, and applies attributes for positioning and radius via .attr(). The SVG rendering is handled in a 960×100 viewport.

Loading thumbnail…

Reusable Barplot

This reusable barplot example demonstrates a flexible, animated bar chart that handles both simple and grouped datasets. The visualization scales from a basic categorical bar chart to a multi-series comparison, with bars animating upward from a zero baseline using smooth transitions. Built with D3.js version 7.8.5, the code showcases an API pattern where chart options, axis labels, and datasets are chained as setter methods. The implementation leverages D3's `scaleBand`, `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft` utilities, with the `transition` function providing the animated entrance effect for the bars in SVG format.

Loading thumbnail…

D3 Practice

Two parallel D3.js panels demonstrate the effect of a key function during data joins. As a button inserts letters one at a time from the alphabet, both panels update their displayed sequence, but only the lower panel uses a key function in its `.data()` call, allowing D3 to track each letter’s identity across transitions. The upper panel, lacking the key, reuses DOM elements by index, causing letters to shift incorrectly. The example uses `d3.select`, `.join()`, and `.transition()` to animate the horizontal positions of styled `div` elements.

Loading thumbnail…

D3 Letter Inserting

Two animations run side by side to demonstrate the key function in D3 data joins. Each click of the “Insert Element” button prepends a new letter from the alphabet, shifting the existing letters rightward. The left panel uses a plain `.data(data)` join, causing elements to be matched by index and thus reordered incorrectly. The right panel uses `.data(data, d => d)` with a key function, ensuring each letter stays bound to its original DOM element. Both panels use `.join('div')`, `transition()`, and inline styles to animate the horizontal position.

Loading thumbnail…

Learn D3

Clicking the update button regenerates a random dataset and redraws a row of circles across an SVG chart. Each circle’s radius and fill color encode its numeric value, with values above 30 turning orange and others light gray. The example uses D3 v7’s data join pattern (`selectAll`, `data`, `join`) to create and update circle elements, driven by a simple JavaScript function that generates random data counts and sizes.

Loading thumbnail…

D3 in depth

This example shows horizontal bar charts for the populations of five cities, with city names positioned to the right of each bar. A hover effect changes the bar color from steelblue to orange. The visualization is built with D3 v7, using selections, data binding, and the `join` method to create SVG `rect` and `text` elements. The data is hard-coded in an array of city objects, and bar widths are scaled by multiplying population values by a constant factor.

Loading thumbnail…

Fork of Animated Reusable D3 Scatter Plot

This example uses the Iris Dataset to demonstrate a reusable D3.js scatter plot with interactive axis selection. Users can dynamically change the x and y variables from quantitative measurements or the categorical species column via dropdown menus. The plot leverages `d3.scaleLinear` and `d3.scalePoint` for axes, with animations driven by `selection.join` and `transition` to smoothly move circles between positions. Menus are built with a custom `d3.dispatch`-based component, rendered as SVG in a full-viewport layout.

Loading thumbnail…

Fork of D3 Grouped Barplot

This grouped barplot visualization compares three conditions—Nitrogen, normal, and stress—across four crop groups in a CSV dataset. The D3.js chart renders each group as a cluster of colored bars using `d3.scaleBand` and `d3.scaleOrdinal`, with SVG rectangles for the bars. A tooltip built with D3's `select` and `dispatch` shows values on hover, while smooth transitions animate bars into place on load. The reusable component pattern exposes setters for data, dimensions, and colors, as seen in the `multiBarplot` and `barplot` modules.

Loading thumbnail…

D3 Barplot

This barplot displays population values for multiple countries, with bars animating upward from a shared baseline when the chart initializes. The visualization relies on D3’s `scaleBand` and `scaleLinear` for axes, `transition` for smooth growth, and custom tooltip handlers (`mouseover`, `mousemove`, `mouseleave`) that update a styled HTML div. Data comes from a CSV file fetched via `d3.csv`, and the SVG output includes custom Roboto Condensed fonts, axis titles, and a chart title.

Loading thumbnail…

Reusable D3 Scatter Plot Practice

This example shows a reusable D3 scatter plot that cycles through different Iris flower measurements, animating the x-axis variable every two seconds. The visualization uses D3 scales (scaleLinear) and SVG circles to plot petal length against sepal length, with transitions smoothly moving points between positions. The code demonstrates a reusable chart pattern, where the scatterPlot function exposes setters for width, height, data, and accessor functions, and is called with d3.select and svg.call. Data comes from a CSV file of the classic Iris dataset, parsed with d3.csv.

Loading thumbnail…

Reusable D3 Scatter Plot

This example demonstrates a reusable scatter plot using D3 v6, rendering the classic Iris dataset with petal length on the x-axis and sepal length on the y-axis. It uses `d3.scaleLinear` for positioning, `d3.scaleOrdinal` with `d3.symbols` to encode species as distinct symbol shapes, and `d3.axisLeft`/`d3.axisBottom` for axes. The plot is built as a modular factory function that accepts configurable accessors for dimensions, margins, and symbol size, then renders SVG paths via `d3.select` and `join`. Data is loaded asynchronously from a GitHub gist CSV.

Loading thumbnail…

Practice Reusable D3 Scatter Plot

This example visualizes the average rural education index per year across India using a reusable D3 scatter plot. The chart displays circular marks positioned by year on the x-axis and mean education value on the y-axis, with axes generated via `d3.axisBottom` and `d3.axisLeft`. Data is loaded asynchronously from a GitHub-hosted CSV using `d3.csv`, filtered for rural sectors, and aggregated by calculating the mean education score per year with `d3.scaleLinear` for both scales. The SVG rendering approach uses `d3.selectAll` with a data join to draw circles.

Loading thumbnail…

Fork of Practice D3 Scatter Plot

This scatter plot visualizes the average rural education index across Indian states from 2016, using data from the India Gov Open Data repository hosted on GitHub. D3 v7 loads the CSV, filters for rural sectors, and aggregates education values by year through a reduce operation. The visualization uses `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and SVG circles with a fixed radius of 10 pixels to represent each data point, rendered across a full-window canvas.

Loading thumbnail…

Practice D3 Scatter Plot

This scatter plot visualizes average rural education index values across different years, using data from the All India Index February 2016 dataset. The code loads CSV data via `d3.csv`, aggregates it by year using a reduce operation, and renders circles with SVG. It employs `d3.scaleLinear` for positioning, `d3.extent` for the x-domain, and `d3.axisBottom` and `d3.axisLeft` for chart axes. The visualization is built with D3 v7 and renders at full viewport size.

Loading thumbnail…

D3 Scatter Plot

This example renders the classic Iris dataset as a scatter plot, mapping petal length on the x-axis and sepal length on the y-axis. It uses D3 v7 to load the CSV data via `d3.csv`, and then builds scales with `d3.scaleLinear` and `extent` to compute domains. Circles are drawn as SVG elements, with axes generated through `d3.axisLeft` and `d3.axisBottom`. The visualization adapts to the full browser window and includes a large font size for tick labels via CSS.

Loading thumbnail…

Fork of D3 Scatter Plot

This example shows a scatter plot of the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. It uses D3 v7’s `csv` loader and `scaleLinear` for both axes, with `axisLeft` and `axisBottom` to render tick marks. The SVG circles are bound to data via `selectAll('circle').data().join('circle')`. The code loads data from a GitHub gist and sizes the chart to the full window, with margins and a fixed point radius of 5 pixels.