d3noob

Favorite tooltip (complex version) v7

A line chart displays stock closing prices over time, with a crosshair and tooltip that follow the mouse cursor. The visualization uses D3 v7 to render an SVG chart, reading CSV data with `d3.csv` and parsing dates via `d3.timeParse`. A `d3.bisector` finds the nearest data point, while `d3.pointer` locates the cursor position. The tooltip shows the exact date and value, with dashed guide lines and a highlighted circle, using `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft`.

Favorite tooltip (simple version) v7

This example shows a simple line chart of stock closing prices over time, with a circular marker that tracks the mouse position along the x-axis to highlight the nearest data point. The tooltip itself is minimal—a blue circle that appears on mouseover and moves with the cursor, using a bisector to find the closest date. The visualization is built with D3 v7, using `d3.line`, `d3.scaleTime`, and `d3.scaleLinear` to render an SVG path and axes. Data comes from a CSV file parsed with `d3.csv`.

Full Difference Chart v7

This visualization compares daily download changes for two Leanpub books, Science and Style, highlighting when one outsells the other. It uses a difference chart where the area between the two lines is filled with distinct colors—orange when Science is above Style and green when Style leads. The data comes from a CSV file and is rendered as SVG using D3 v7. The code uses `d3.area`, `d3.scaleTime`, and `d3.axisBottom` to construct the chart, with clip paths separating the above and below regions.

Simple Difference Chart v7

This difference chart visualizes the daily change in cumulative downloads for two Leanpub books, "R Programming for Data Science" and "The Elements of Data Analytic Style," from April to June 2015. The SVG rendering uses D3 v7 APIs including `d3.csv`, `d3.group`, `d3.timeParse`, `d3.scaleTime`, and `d3.scaleLinear` to compute and display the difference between the two series. The area between the lines is shaded orange or green depending on which book has higher daily gains, with dark green and red lines for the individual series. Data originates from the `downloads.csv` file, showing daily download totals.

Multi-line graph 4 with v7: Toggle

This interactive multi-line chart displays monthly stock prices for three companies (MSFT, AMZN, IBM) from January 2000 to March 2010. Users can click legend labels to toggle individual lines on and off, with a smooth opacity transition revealing or hiding each series. The visualization uses d3.csv to load data, d3.group to organize by symbol, d3.scaleOrdinal with d3.schemeCategory10 for colors, d3.line for paths, and d3.axisBottom/axisLeft for axes. Clicking triggers d3.select and transition().duration(100) to animate opacity changes.

Multi-line graph 3 with v7: Legend

This multi-line graph shows monthly stock price changes for Microsoft, Amazon, and IBM from 2000 to 2010, with a categorical legend labeling each company’s colored line. Using d3.v7, the code parses dates with `d3.timeParse`, groups the CSV data by symbol via `d3.group`, and applies a `d3.scaleOrdinal` color scheme. Each path is drawn with `d3.line` and `d3.scaleTime` and `d3.scaleLinear` axes, while legend text is positioned evenly along the bottom using computed spacing.

Multi-line graph 2 with v7: Colours

This chart displays monthly stock prices for three companies (MSFT, AMZN, IBM) from 2000 to 2010, using multiple colored lines to represent each symbol. The visualization uses D3.js v7 to read a CSV file, parse dates with `d3.timeParse`, and group data by symbol using `d3.group`. Lines are drawn with `d3.line` and colored via `d3.scaleOrdinal` with the `schemeCategory10` palette. The graph includes time-series axes created with `d3.axisBottom` and `d3.axisLeft`, rendering everything as SVG elements.

Multi-line graph 1 with v7: Lines

This multi-line graph displays monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010, with each company represented by a separate line. The visualization uses D3 v7’s `d3.group` function to nest data by symbol, then draws each line using the `d3.line` path generator. Data is loaded from a CSV file via `d3.csv`, with dates parsed using `d3.timeParse` and scales set with `d3.scaleTime` and `d3.scaleLinear`. Axes are rendered as SVG elements using `d3.axisBottom` and `d3.axisLeft`.

Adding links to objects in v7

This example shows how to add a hyperlink to an SVG rectangle and make text clickable through it. The code uses d3.v7 to append an anchor element with an `xlink:href` attribute pointing to a Wikipedia page, then adds the rectangle inside the anchor. A separate text element displaying “gongoozler” is positioned over the rectangle and given `style("pointer-events", "none")` so clicks pass through to the linked shape beneath. The SVG is rendered directly in the browser with a lightgreen rounded rectangle.

Graph and table with tricks in v7

A line chart displays closing stock prices over time, paired with an HTML table of the same data that adds an open-price column and a computed price-difference column. The table rows are sorted by closing price in descending order using `d3.descending`, and headers are capitalized via text manipulation. The visualization uses the D3 v7 library, with `d3.csv` loading the dataset, `d3.timeParse` for dates, `d3.scaleTime` and `d3.scaleLinear` for axes, and SVG paths rendering the line.

Simple graph with table in v7

This example shows a date-based line graph of closing values from a CSV file, accompanied by a table displaying the same raw data. The SVG line chart uses d3.line with a time scale (d3.scaleTime) and linear scale (d3.scaleLinear), while axes are generated with d3.axisBottom and d3.axisLeft. A separate HTML table is constructed via d3.select and append, with rows and cells bound to the parsed data. The code relies on d3.csv for loading and d3.timeParse for date formatting.

Input test

An interactive range slider controls the rotation of two SVG text elements. Moving the slider changes the angle of the "d3.js" label in one direction while rotating the "d3noob.org" label in the opposite direction, with the current angle value displayed beside the slider. The example, built with D3.js v7, uses the `select` and `on` methods to attach an event listener for the `input` event, and `attr` to update the `transform` attributes of both text elements. The data is hardcoded, with the SVG canvas sized at 600 by 300 pixels.

Input (number) test

This example demonstrates how an HTML number input controls the rotation of an SVG text element. It shows a text label displaying the current angle value, with a numeric input field that adjusts the text’s rotation from 0 to 360 degrees in 5-degree increments. The visualization uses d3.v7 to select the input and update the text’s `transform` attribute dynamically through an `input` event listener. The SVG is rendered directly in the browser, with the text element positioned at a fixed coordinate and rotated based on the user’s input.

Input test

A slider input controls the rotation angle of a text element in an SVG graphic. The example demonstrates how an HTML range input can drive D3.js v7 updates, showing the text "d3noob.org" rotating from 0 to 360 degrees. The code uses d3.select to bind the input event, updating both the displayed angle value and the text's transform attribute. The SVG is rendered with D3's selection and append methods within a static 600x300 canvas.

Double Input Test

Two HTML range inputs control the height and width of a single blue-outlined rectangle drawn in an SVG. The example demonstrates bidirectional interaction, where moving a slider updates both the displayed numeric label and the rectangle’s corresponding dimension, while the rectangle stays centered. The code uses D3 v7 selections and the `input` event listener to read slider values, then updates the SVG `rect` attributes via the `updateHeight` and `updateWidth` functions. The rectangle is initially rendered with fixed x and y positions before being adjusted.

Input test (circle)

A circle's radius is controlled by an HTML range slider, with its current value displayed as text. The example shows a blue, unfilled circle on an SVG canvas that resizes interactively as the slider is dragged. It uses the D3.js v7 library to select the input element and attach a listener to the range's "input" event, updating the circle's `r` attribute and label. The code initializes the radius to 120 and re-renders the SVG circle element through a custom `update` function, demonstrating a simple dynamic data binding between a native form control and vector graphics.

Toggling element visibility in v7

This example shows a dual-line chart with interactive legend labels. Two overlaid time-series lines, one steelblue and one red, display close and open values from a small CSV dataset. Clicking a legend text toggles the corresponding line’s visibility by adjusting its opacity. The visualization uses D3 v7 with `d3.csv`, `d3.line`, `d3.scaleTime`, and `d3.scaleLinear`, rendering to SVG via path elements and axis components.

Looping a transition in v7

This example demonstrates a looping transition animation in d3.js v7. A single steel-blue circle moves horizontally across an SVG canvas, traveling from the left edge to the right and back again. The animation uses the `d3.transition` API, chaining two successive `.transition()` calls with a duration of 2000 milliseconds each. Upon completing the return trip, an `.on("end", repeat)` callback triggers the entire sequence to start over, creating an infinite loop. The circle’s position is set via the `cx` and `cy` attributes.

Transition Easing Comparison in v7

Ten circles, each labeled with an easing function name, animate horizontally across an SVG canvas using D3.js v7. The visualization compares the default behavior of ten easing functions—including `easeElastic`, `easeBounce`, and `easeLinear`—by repeatedly transitioning each circle back and forth over four-second durations. The code assigns each function to a separate `d3.transition` via the `.ease()` method, with circles starting at the same x-position and moving in sync to highlight differences in acceleration and deceleration. The SVG elements are rendered from a static array of function names, and the animation loops continuously using a transition’s `end` event.

Simple transition chaining in v7

This example uses chained `transition()` calls in d3.v7 to animate a single SVG circle through three sequential stages. The circle first slides horizontally from left to right, then expands its radius, and finally changes its fill color from blue to red, with each transition lasting 4000 milliseconds. The animation is built entirely with D3’s selection and transition API, applying attributes like `cx`, `r`, and `style` through `.attr()` and `.style()` methods. The code appends the circle directly to the body via an SVG element, with no external data source.

Simple transition in v7

A blue circle transitions horizontally across a wide SVG canvas in this minimal demonstration of d3-transition. The circle moves from the left edge to the right over four seconds, using a chained `transition()` with a `duration(4000)` call after initial attributes are set. The example uses d3.v7 to select the body, append an SVG element, and define the circle’s fill, radius, and starting coordinates before applying the animation. No data source is involved; the code directly specifies all visual properties and the animation target position.

Area graph with gradient in v7

This example shows an area graph with a custom gradient fill that transitions through red, black, and green zones, mapping stock closing prices over time from a CSV file. Using D3 v7, it parses dates and values, scales them with `d3.scaleTime` and `d3.scaleLinear`, and defines the area shape with `d3.area`. A `linearGradient` with multiple stops colors the area, while `d3.axisBottom` and `d3.axisLeft` render the axes. The SVG output is generated entirely with D3's data-join and path-generation methods.

Line graph with gradient in v7

This example shows a line graph of stock closing prices over time, with the line colored by a vertical gradient that shifts from red to black to green based on price thresholds. The gradient is defined using an SVG `linearGradient` with multiple `stop` elements applied to the line’s stroke via `url(#line-gradient)`. The chart is built with D3 v7, using `d3.timeParse` for date formatting, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` for the path geometry. Data is loaded from a CSV file with `d3.csv`, and the SVG output includes axis elements generated by `d3.axisBottom` and `d3.axisLeft`.

Using an 'if' statement in v7

This example shows a line graph of stock closing prices over time, with data points color-coded based on their value. The visualization uses SVG rendering and the d3.v7 library, specifically `d3.line`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft`. It reads CSV data from `data.csv` via `d3.csv` and parses dates with `d3.timeParse`. Each data point is drawn as a circle whose fill color is determined by an `if` statement: values at or below 400 appear red, while higher values are black.

Filtering in v7

This example shows a time-series line chart of stock closing prices, with red circles highlighting all data points below 400. It uses d3.csv to load date and close values from a local CSV file, then renders an SVG line via d3.line and an x-axis with d3.scaleTime. The scatterplot dots are added with d3.selectAll and enter, but d3’s selection.filter method restricts them to values under the threshold, demonstrating filter chaining before setting circle attributes.

Colours Page

This gallery page displays a catalog of named CSS colors in D3.js, with similar hues grouped together. Each color name is rendered as a labeled, rounded rectangle using SVG. The code loads color names from `colours2.csv` via `d3.csv`, then uses `container.append("svg")` and `.append("rect")` and `.append("text")` to build each swatch, applying a white text shadow for legibility. The example highlights the range of available web colors and offers a practical reference for selecting fill values.

Multi-links in tooltips using v7

A line chart displays stock closing prices over time, with a small tooltip appearing on mouseover for each data point. The tooltip is a persistent, styled `<div>` that shows the date and price, and includes a hyperlink to a related resource. The chart is rendered with SVG using D3 v7, drawing a path for the data series and circles for individual points. The code uses d3.csv, d3.scaleTime, d3.scaleLinear, d3.axisBottom, and d3.axisLeft, with data sourced from data-link.csv.

Tooltip with link in v7

A line chart displays stock closing prices over time, with circular markers for each data point. Hovering over a marker reveals a tooltip containing the formatted date and closing value, with the date rendered as a hyperlink to an external site. The visualization uses d3.csv to load the timestamped data, d3.scaleTime and d3.scaleLinear for axes, and d3.line to draw the path. Tooltips are implemented as HTML divs positioned via event.pageX and pageY, with opacity transitions on mouseover.

Simple tooltips in v7

This example shows a line chart of stock closing prices over time, with circular markers at each data point. Hovering over a marker fades in a tooltip displaying the formatted date and closing value. The chart is rendered as an SVG using D3 v7, with `d3.line` for the path, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.axisBottom`/`d3.axisLeft` for ticks. Tooltip interactions use mouseover and mouseout events with `transition` to animate opacity. Data comes from a CSV file.

Map Pan / Zoom with Cities and Text v7

This example shows a world map centered on the Pacific with red city markers and text labels for each city, all of which can be panned and zoomed together. The map is rendered using D3 v7 with a Mercator projection and a topojson world dataset. City positions are projected from latitude and longitude coordinates loaded from a CSV file. D3’s zoom behavior applies a transform to the map paths, circles, and text, and each city label links to a Google search for its name.

Map Pan / Zoom with Cities v7

This example shows a pan-and-zoomable Mercator map of the world, centered on the Pacific Ocean, with city locations marked by red dots. The map uses an SVG rendering with countries styled as grey paths, and city coordinates are loaded from a CSV file containing airport codes, city names, and latitude/longitude values. Pan and zoom interactions are enabled through d3.zoom, which applies a transform to all map elements. The map itself is drawn using d3.geoPath with a d3.geoMercator projection, and world topology data is fetched as a JSON file, then converted via topojson’s feature function before being rendered.

Map Pan and Zoom v7

This example displays a world map centered on the Pacific Ocean, rendered as SVG paths filled in grey with white borders. Using the d3.geoMercator projection and d3.geoPath, it draws country boundaries from a TopoJSON file loaded via d3.json. The d3.zoom module provides interactive pan and zoom controls, applying the resulting transform directly to the map’s path elements within a scale extent of 1 to 8.

World Map Centered v7

This example displays a world map centered on the Pacific Ocean using a Mercator projection. The map is rendered as SVG paths, with country boundaries drawn in white against grey landmasses. Built with D3 v7, it loads TopoJSON data from a local file and converts it to GeoJSON features using `topojson.feature`, then projects those features with `d3.geoMercator` and `d3.geoPath`. The projection is rotated by -180 degrees and centered at longitude 0, shifting the Pacific into view.

Bullet Chart with automatic updating v7

This example shows two bullet charts for CPU Load and Memory Used that update automatically every three seconds. The charts use the D3.js v7 library with a custom `d3.bullet` function that defines ranges, measures, and markers as horizontal bars and lines. Data loads from an external JSON file, and a `setInterval` triggers a randomized update of the measure and marker values. Transitions with a one-second duration animate the changes using `transition.attr` for width and position.

Simple d3.js Bullet Chart example v7

This example displays bullet charts for CPU Load and Memory Used, with ranges, measures, and markers visualized as colored bars and lines. Built with d3.v7, the SVG renders two charts from bulletdata.json, updating with animated transitions when the button is clicked. The bullet chart implementation follows Stephen Few's design, using d3.scaleLinear, d3.json for data loading, and transition methods with configurable duration.

SANKEY Experiment

This example shows a sankey diagram built with D3 v7 and the d3-sankey module, using SVG rendering. It loads link data from an external CSV file, where each row defines a source, target, and value, then converts text labels into numeric node indices for the layout. The visualization displays named nodes and flowing links with widths proportional to values, using `d3.sankey()` and `d3.sankeyLinkHorizontal()` for positioning. Node colors come from a categorical scale, and hover effects adjust link opacity.

SANKEY Experiment

This Sankey diagram visualizes the flow of values between five named nodes (Barry, Frodo, Elvis, Sarah, and Alice) using the d3-sankey extension for D3 v7. The SVG rendering uses `d3.json` to load node and link data where links reference nodes by name rather than index. Each node appears as a colored rectangle with text labels, while curved link paths show the magnitude of flow with stroke widths and hover effects. The code builds the diagram by mapping link sources and targets to node objects before applying the Sankey layout algorithm.

SANKEY Experiment

This example uses a Sankey diagram to visualize the flow of values between five nodes, with links showing the quantity transferred from each source to its targets. The diagram is rendered as an SVG using d3.v7 and the d3-sankey plugin v0.12.3, with node rectangles colored using d3.scaleOrdinal and d3.schemeCategory10. Link thickness encodes the flow value, and hovering highlights the links. Data is loaded from a static JSON file (sankey.json) containing the node and link definitions.

Collapsible tree diagram in v7

This interactive tree diagram displays hierarchical data using D3 v7’s `d3.tree` layout, rendering parent-child relationships as linked circles and text labels. Clicking any parent node collapses its descendants, with smooth 750ms transitions animating the nodes and links to the clicked node’s position; clicking again expands the subtree. The SVG uses a simple dataset of labeled levels, and the code applies `d3.hierarchy` for data structuring and the `diagonal` path generator for curved links.

Collapsible tree diagram in v6

This interactive collapsible tree diagram displays hierarchical data with clickable parent nodes that expand and collapse their child branches. Built with D3 v6, it uses `d3.hierarchy` and `d3.tree` to compute node positions, with SVG circles and text labels rendering the structure. Clicking a node triggers a smooth 750ms transition that animates nodes and diagonal link paths to their new positions, while collapsed nodes are indicated by a lightsteelblue fill and pointer cursor. The example is derived from Mike Bostock’s original collapsible tree and demonstrates node enter, update, and exit patterns with animated transitions.

Tree diagram from csv using v7

This example shows a hierarchical tree diagram built from a CSV dataset, using D3.js v7. The diagram visualizes parent-child relationships, with nodes representing items like "Top Level" and "Level 2: A," connected by curved links. It uses the `d3.tree` layout, `d3.stratify` to convert flat CSV data into a hierarchy, and `d3.hierarchy` to map the structure. The SVG output positions nodes and draws the tree with circles and text labels, styled via CSS.

Tree diagram using flat data with v7

This example shows a tree diagram with five nodes arranged in a parent-child hierarchy, rendered as circles and labeled text connected by curved links in an SVG. The diagram is built from flat data—an array of objects with `name` and `parent` properties—which is converted into a nested hierarchy using `d3.stratify()`. The layout is computed with `d3.tree()` and `d3.hierarchy()`, while SVG paths and groups are appended manually. It uses D3.js version 7 and is adapted from the D3 Tips and Tricks book.

Tree diagram loading external json with v7

This example shows a hierarchical tree diagram that loads its structure from an external JSON file. The code uses d3.json to fetch `treeData.json`, then constructs a hierarchy with `d3.hierarchy` and lays out the nodes with `d3.tree`. It renders the tree as an SVG with circles for nodes, text labels, and curved path links, using CSS classes to differentiate internal nodes from leaf nodes. The layout is sized with fixed margins and dimensions, and the JSON data contains a top-level node with nested children.

Tree diagram using images for nodes in v7

This example shows a tree diagram where each node is represented by an image icon instead of a traditional circle or square, with text labels placed beside the icons. The diagram uses hierarchical data with parent-child relationships, and the connecting links are colored according to a `level` property in the data. Built with d3.js v7, it employs `d3.tree()` and `d3.hierarchy()` to compute the layout, then renders SVG paths for the curved links and SVG `<image>` elements for the node icons. Node text positioning automatically adjusts based on whether a node has children.

Tree diagram using symbols for nodes in v7

A tree diagram displays hierarchical data with nodes rendered as symbols, where each symbol’s shape and size depend on the node’s value. Links between nodes are drawn as curved paths. Built with D3 v7, the code uses `d3.hierarchy`, `d3.tree`, and `d3.symbol` to generate SVG paths, with node colors set from the embedded JSON data. The example is part of the author’s update to the book “D3 Tips and Tricks.”

Tree diagram with styling in v7

This tree diagram example, built with d3.js v7, displays hierarchical data in a classic node-and-link layout using SVG rendering. The visualization shows a root node with two children, where links use colored strokes based on each node's `level` property, and circles vary in size and fill according to the `value` and `type` data fields. The code applies custom CSS styling for node circles, text, and link paths, while using the `d3.tree()` layout and `d3.hierarchy()` API to compute positions and parent-child relationships.

Simple horizontal tree diagram using v7

This horizontal tree diagram shows a three-level hierarchy with a root node, two second-level nodes, and two leaf nodes, rendered as white circles with steel-blue outlines connected by curved gray links. Using d3.v7’s `d3.tree` layout and `d3.hierarchy` functions, the code positions nodes along the x-axis and assigns coordinates via the `treemap` call, then draws SVG paths for the links and SVG groups for the nodes, with labels placed to the left or right of each circle depending on whether the node has children. The data is hardcoded inline as a JSON object, and the diagram is built entirely with SVG elements appended to the page body using d3.select and `.append`.

Simple vertical tree diagram using v7

This is a simple vertical tree diagram built with d3.js v7, displaying a small hierarchical dataset with a top-level node, a branching level, and leaf nodes. It shows parent-child relationships using curved links, with internal and leaf nodes styled differently via circles and text labels. The code uses the `d3.tree()` layout and `d3.hierarchy()` to compute node positions, then renders the structure as SVG paths and groups. The data is embedded directly in the script, and the visualization is designed as a starting point for further development.

Simple histogram using v7

A monthly histogram of earthquake magnitudes from a CSV file displays the distribution of seismic events over time, with bars showing the number of occurrences per month. The visualization uses d3.bin and d3.scaleTime to group the parsed date values into monthly thresholds, while d3.scaleLinear maps the counts to bar heights. Rendered as SVG rectangles with axes generated by d3.axisBottom and d3.axisLeft, the chart handles data loading via d3.csv and time parsing with d3.timeParse.

Simple bar graph in v7

A simple bar graph displays sales totals for thirteen named salespeople, with steel-blue bars sorted alphabetically along a band scale. The chart loads sales data from an external CSV file using `d3.csv` and renders SVG rectangles scaled by `d3.scaleBand` and `d3.scaleLinear`. Axes are added with `d3.axisBottom` and `d3.axisLeft`, while margins position the plot within the fixed 960x500 viewport. The visualization serves as a basic example for the D3 Tips and Tricks book, demonstrating standard data binding and enter selections with d3.v7.

Dual axes in v7

This example displays two line charts sharing a common time axis, with each line assigned its own colored vertical scale: a steelblue line for the "close" values on the left axis and a red line for the "open" values on the right axis. It uses the d3.v7 library, specifically the `d3.line` generator, `d3.scaleTime`, and two `d3.scaleLinear` scales. Data is loaded from a local CSV file via `d3.csv`, with dates parsed using `d3.timeParse`. The SVG output renders the paths and axes with custom CSS classes for axis-label coloring.

Labels on multiple lines v7

This example shows two time series lines—one for “close” and one for “open” values—plotted against a date axis, with each line labeled directly at its right‑end point using SVG `<text>` elements. The data is loaded from a local CSV via `d3.csv` and parsed with `d3.timeParse`. The chart is built with D3 v7 primitives: `d3.line` generates the path geometry, `d3.scaleTime` and `d3.scaleLinear` map data to coordinates, and `d3.axisBottom` and `d3.axisLeft` render the axes. Red and steel‑blue strokes distinguish the two lines, and their labels are positioned using the scaled y‑values of the first data point.

Multiple line graph in v7

This example displays two line graphs on a shared time-based x-axis, comparing the open and close prices from a small CSV dataset over a three-month period. The close price is shown as a steelblue line, while the open price appears in red, with both axes scaled to fit the data. The visualization uses d3.line and d3.scaleTime to map data points, d3.axisBottom and d3.axisLeft to render the axes, and d3.csv to load the data. The SVG output includes two separate path elements styled with CSS classes.

Simple graph with grid lines in v7

A simple line chart displays closing-price data from a CSV file over time. The graph uses light grey grid lines on both the x and y axes, created with `d3.axisBottom` and `d3.axisLeft` together with `tickSize` and `tickFormat`. The line itself is drawn via `d3.line` within an SVG. The chart is built with d3.v7, parsing dates with `d3.timeParse` and loading data via `d3.csv`. Axes and the line are rendered with standard d3 scale and shape functions.

Drop shadow on text in v7

This example shows a time-series area chart of stock closing prices, with a prominent title that appears twice to create a drop shadow effect. The chart uses d3.csv to load the data, d3.timeParse for date formatting, and d3.scaleTime and d3.scaleLinear to set the scales. The area and line paths are built with d3.area and d3.line, while axes are generated via d3.axisBottom and d3.axisLeft. The shadow is achieved by rendering the title text twice: first with a white stroke and reduced opacity, then overlaid by the solid text.

Simple graph with filled area in v7

This example shows a time-series line graph of stock closing prices, with the area beneath the line filled in light blue to emphasize the trend. The chart uses an SVG rendered with D3 v7, and reads its data from a local CSV file. It defines an `d3.area` generator for the filled region and an `d3.line` generator for the stroke, both mapping dates to an `d3.scaleTime` x-axis and values to an `d3.scaleLinear` y-axis. The axes are drawn with `d3.axisBottom` and `d3.axisLeft`.

v7 curve interpolation comparison

The visualization compares eight D3 curve interpolation functions—linear, step, step-before, step-after, basis, cardinal, monotone-X, and Catmull-Rom—by plotting the same time-series dataset of stock closing prices with each curve as a separate colored line. Built with D3 v7, it uses `d3.line` with a `.curve()` method to generate the SVG paths and includes an interactive legend where clicking a label toggles the opacity of the corresponding line via `transition().duration(100)`. The data comes from the included CSV file, and the chart also renders the original data points as circles along with axes.

Scatterplot with v7

This example combines a line graph with an overlay of scatterplot points to show daily closing prices over time. The SVG visualization uses D3 v7 to load CSV data, parse dates with `d3.timeParse`, and scale values with `d3.scaleTime` and `d3.scaleLinear`. A `d3.line` path draws the trend, while circles are appended at each data point’s coordinates, with axes rendered via `d3.axisBottom` and `d3.axisLeft`.

Axis Labels in v7

This example shows a line chart of stock closing prices over time, with clearly labeled x and y axes. The chart uses d3.line to generate the path, d3.scaleTime and d3.scaleLinear for the scales, and d3.axisBottom and d3.axisLeft to render the ticks. Axis labels are added as SVG text elements, with the y-axis label rotated using an SVG transform. Data is loaded from a CSV file and parsed with d3.timeParse, with the visualization rendered as SVG inside a single group element.

Formatted time labels for an axis with v7

This example shows a line graph of stock closing prices over time. The x-axis displays formatted date labels (year-month-day) that are rotated 65 degrees to prevent overlap. The chart is built with D3 v7, using `d3.csv` to load date and close data from a CSV file, `d3.scaleTime` and `d3.scaleLinear` for the axes, and a line generator for the path. The `d3.axisBottom` tick format and rotation are applied to the SVG text elements.

Rotated axis labels in v7

A line chart shows stock closing prices over time, with the x-axis labels rotated to avoid overlap. The chart is built with d3.js v7, using `d3.line`, `d3.scaleTime`, and `d3.scaleLinear` for the axes. Data comes from a CSV file and is rendered as an SVG path. The axis text is styled via CSS and rotated using the `transform` attribute.

SANKEY Experiment

This is a Sankey diagram that visualizes the flow of values between named nodes, with the source and target data loaded from an external CSV file. The diagram uses the `d3-sankey` extension library on top of d3.v6, with nodes rendered as colored rectangles and links as semi-transparent black paths with widths proportional to their values. The code explicitly formats numbers and applies a categorical color scheme using `d3.scaleOrdinal`, while interactive hover states on links increase their opacity. Rendered as SVG, the visualization includes node labels and tooltips via `title` elements.

Dec 5, 2020

SANKEY Experiment

A small Sankey diagram visualizes energy-style flows between five named people, with links and node values drawn as proportional colored bars and connecting paths. The example demonstrates loading graph data from a JSON file where node and link references use names instead of numeric indices, requiring a lookup map to connect sources and targets. Built with D3 v6 and the d3-sankey module, it renders to SVG using `d3.sankey`, `d3.sankeyLinkHorizontal`, and `d3.scaleOrdinal` for node coloring, with hover tooltips via `title` elements.

Dec 5, 2020

SANKEY Experiment

A Sankey diagram shows the flow of values between five nodes (node0 through node4) across three stages, with links varying in thickness according to their assigned weights. The example uses d3.v6 with the d3-sankey plugin (v0.12.3) to compute the layout, generating SVG paths via `d3.sankeyLinkHorizontal()` for the links and rectangles for the nodes. A categorical color scale (`d3.scaleOrdinal` with `d3.schemeCategory10`) colors each node, and hover effects increase link opacity. Data comes from a static `sankey.json` file, demonstrating a basic multi-stage flow visualization.

Dec 5, 2020

Favorite tooltip (complex version) v6

This visualization displays a time series line chart of stock closing prices from late March to early May 2012, using SVG rendering with D3.js v6. It shows a sophisticated tooltip that tracks the mouse position along the x-axis, drawing dashed horizontal and vertical guide lines, a circle marker at the nearest data point, and displaying both the date and closing value. The tooltip uses the `d3.bisector` API to find the closest data point, `d3.pointer` for mouse coordinates, and the inverse x-scale to map the pixel position back to a date. The value and date labels are layered with white outlines to improve readability.

Favorite tooltip (simple version) v6

This example demonstrates a line chart of stock closing prices over time, with a tooltip that highlights the data point nearest the mouse cursor. The visualization uses D3 v6 APIs including `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to render the SVG path, while a bisector function (`d3.bisector`) selects the closest date. A transparent rectangle captures mouse events, and a circle is repositioned via `d3.pointer` and transformations to show the current value. Data comes from a CSV file parsed with `d3.timeParse`.

Full Difference Chart v6

A full difference chart compares the daily Leanpub download counts for two books, R Programming for Data Science and The Elements of Data Analytic Style, by computing the difference in their daily sales over a two-month period. The chart uses stacked area segments, colored orange and green, to highlight when one book outsells the other, along with two overlaid line curves for each book’s daily change. Built with D3 v6, it loads CSV data via `d3.csv`, groups entries by date, and creates areas using `d3.area` with clipping paths, while axes use `d3.axisBottom` and `d3.axisLeft`.

Simple Difference Chart v6

This visualization compares the daily change in downloads for two Leanpub books, "R Programming for Data Science" and "The Elements of Data Analytic Style," using a difference chart. It shows the difference between the two series over time, with areas above and below the baseline indicating which book had a higher daily increase. The chart uses D3 v6 with `d3.select`, `d3.group`, and the `d3.area` API for area and line rendering in SVG. Data is loaded from a CSV file, and the y-axis is fixed at 0–1400.

Multi-line graph 4 with v6: Toggle

A multi-line graph displays monthly stock prices for Microsoft, Amazon, and IBM. D3.js v6 is used to parse CSV data, scale the time and price domains, and render the SVG lines with distinct colors. Clicking a legend label toggles the corresponding line’s opacity via a transition, hiding or showing that company’s data. The example uses `d3.csv`, `d3.timeParse`, `d3.line`, and `d3.scaleOrdinal`.

Multi-line graph 3 with v6: Legend

A multi-line graph displays monthly stock prices for MSFT, AMZN, and IBM from 2000 to 2010, with each series colored distinctly via a categorical scale. The visualization uses D3 v6 APIs such as `d3.csv`, `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.line`, rendering to SVG. A legend is automatically generated beneath the chart, spacing labels evenly and matching each company's line color, with data sourced from Mike Bostock's small multiples example.

Multi-line graph 2 with v6: Colours

This chart displays monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010 using a multi-line graph, with each company's price trend distinguished by a unique color from the `d3.schemeCategory10` palette. The data is loaded from a CSV file using `d3.csv()`, then parsed and grouped by symbol with `d3.group()`. Lines are drawn as SVG paths via `d3.line()`, with colors assigned dynamically from a `d3.scaleOrdinal` color scale based on each group's index, while axes are rendered using `d3.axisBottom` and `d3.axisLeft`.

Multi-line graph 1 with v6: Lines

This visualization shows monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010 as a multi-line graph. Using D3 v6, it loads CSV data and groups the entries by company symbol with `d3.group` to draw each series as a separate SVG path. The chart employs `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` for axes and line generation, with `d3.extent` fixing the domain. Axis rendering uses `d3.axisBottom` and `d3.axisLeft`.

Multi-line graph 3 with v5: Legend

This example shows a multi-line chart tracking monthly stock prices for three companies (MSFT, AMZN, IBM) from 2000 to 2010, with a color-coded legend placed below the x-axis. Using D3 v5, it nests the CSV data by symbol, draws each series as an SVG path, and assigns colors via `d3.scaleOrdinal` with `d3.schemeCategory10`. The legend labels are dynamically positioned and colored to match each line, and axes are generated with `d3.axisBottom` and `d3.axisLeft`.

Adding links to objects in v6

This example demonstrates how to add a hyperlink to an SVG rectangle in D3 v6, with the text "gongoozler" placed on top of it. It shows that the text remains clickable through the rectangle’s link by setting its `pointer-events` style to `"none"`. The code appends an SVG `<a>` element with an `xlink:href` attribute to Wikipedia, then draws the rectangle inside it via `d3.select` and `.append`. The text is added separately using `holder.append("text")`. Rendering uses plain SVG elements created with D3’s selection API.

Graph and table with tricks in v6

A line chart plots stock closing prices over time for Apple (AAPL) in April-May 2012. A sorted HTML table appears below the chart with the date, close, open, and computed difference columns. The example uses D3 v6 with SVG, `d3.csv`, `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to render the graph, and builds the table with D3's selection and data-join methods. The table's rows are sorted by closing price using `d3.descending`, and headers are capitalized via text transformation.

Simple graph with table in v6

This example combines a simple line graph with an accompanying HTML table, both rendered from the same CSV dataset of date and closing price values. The line chart uses SVG with d3.scaleTime and d3.scaleLinear to map the data, while d3.line generates the path and d3.axisBottom and d3.axisLeft add the axes. A separate table is generated below the chart using d3.select to append elements, displaying the raw date and close values in a Courier font. The code relies on d3.csv for data loading and d3.timeParse for date formatting.

Input test

This example uses an HTML range input slider to interactively rotate two text labels in an SVG scene. Dragging the slider changes the angle value, which is applied to rotate the "d3.js" and "d3noob.org" texts in opposite directions using `d3.select` and the `.on("input")` event. The SVG elements are updated by setting their `transform` attributes with the rotation angle, while the input’s value and label are synchronized through `d3.select` and `.property()`. The visualization demonstrates basic event handling and attribute binding with d3.js v6.

Input (number) test

This example shows how an HTML number input can control the rotation of a text element in an SVG graphic. The page displays a text label reading "d3noob.org" centered at coordinates (300, 150) within a 600x300 SVG canvas. The code uses `d3.select` to bind an `input` event listener to the number field, and the linked `update` function reassigns the SVG `transform` attribute with the specified rotation angle. The value displayed in the label is updated via a `<span>` element, demonstrating dynamic interaction between form elements and D3-rendered visuals.

Input test

This example demonstrates how an HTML range input slider controls the rotation of an SVG text element in D3.js v6. The text "d3noob.org" is initially centered and rotated to 0 degrees, then updates its angle in real time as the user drags the slider from 0 to 360. The code selects the range input with `d3.select("#nAngle")` and listens for the `input` event to trigger an `update` function, which dynamically modifies the `transform` attribute of the text element. Rendering is done via SVG appended to the body with D3's selection and attribute methods.

Double Input Test

Two HTML range inputs control the height and width of a single blue-outlined SVG rectangle, centered within a static 600×300 viewport. Dragging either slider updates the corresponding dimension and repositions the rectangle so its center remains fixed. The example uses d3.v6 to bind input events via `d3.select(...).on("input", ...)` and updates the rectangle’s `x`, `y`, `width`, and `height` attributes through custom `updateHeight` and `updateWidth` functions. Slider values are mirrored in the displayed label spans.

Input test (circle)

This example demonstrates how to use an HTML range input to interactively adjust the radius of a circle rendered in an SVG element using D3.js v6. The page loads the D3 library from a CDN and creates a static circle with a blue stroke. When the user moves the slider, the `input` event handler calls an update function that modifies the circle’s `r` attribute and displays the current value in a label. The code uses `d3.select` to bind elements and the `property` method to sync the slider’s state.

Toggling element visibility in v6

This example shows a multi-line chart with two time-series lines representing stock close and open prices. Clicking the “Blue Line” or “Red Line” legend text toggles the visibility of the corresponding line by adjusting its CSS opacity. The chart uses two separate y-axes, with the left axis for close prices and the right axis for open prices. The visualization is built with D3 v6, using `d3.line`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisLeft`/`d3.axisRight`, with data loaded from a CSV file. Both lines share a single SVG path element each, and interactivity is handled via click event listeners on the legend text.

Looping a transition in v6

A single steelblue circle loops a transition chain across a 960-by-500 SVG canvas in D3 v6. A custom `circleTransition` function appends the circle, then chains `.transition()` calls with `.duration(2000)` to move it from x-coordinate 40 to 920 and back. The `.on("end", repeat)` callback restarts the same chained movement, creating an infinite back-and-forth animation. This example demonstrates transition chaining and callback-driven repetition using d3-transition.

Transition Easing Comparison in v6

Ten horizontal rows of steel-blue circles move back and forth across an SVG canvas, each demonstrating a different D3 v6 transition easing function. The animation compares `d3.easeElastic`, `d3.easeBounce`, `d3.easeLinear`, and others by applying each to a four-second `transition()` with a repeated `on("end")` loop. A text label identifies each easing type. The code uses D3 selections, `attr` modifications inside transitions, and SVG circles and text elements.

Simple transition chaining in v6

A circle demonstrates sequential transition chaining in d3.js v6, moving from left to right, then expanding its radius, and finally changing fill color from blue to red. Using the d3-transition API, the code applies three consecutive `.transition()` calls, each with a 4000-millisecond duration, to an SVG circle appended to the body. The example shows how transitions queue and execute in order, rendering the animation directly in SVG.

Simple transition in v6

A blue circle moves horizontally across an SVG canvas, demonstrating a simple transition in d3.js v6. The code appends a circle to the body, sets its initial position and fill, then uses the `transition()` method with a `duration` of 4000 milliseconds to animate the `cx` attribute from 40 to 920 pixels. This example illustrates the basic syntax for chaining a transition onto a selection to animate SVG attribute changes.

Area graph with gradient in v6

This example shows an area graph with a vertical gradient fill that transitions through red, black, and green bands, making the change in closing stock prices visually distinct. The gradient is defined using an SVG `linearGradient` element with `gradientUnits` set to userSpaceOnUse, and its stops are bound to explicit color and offset data. The area path is rendered with `d3.area()` using time-scaled x and linear-scaled y axes, while data from `data.csv` is parsed with `d3.timeParse`. Axes are drawn via `d3.axisBottom` and `d3.axisLeft`.

Line graph with gradient in v6

This line graph displays stock closing prices over time, with the line’s color gradient shifting from red to black to green based on the y-axis value. The gradient is defined using an SVG `linearGradient` with userSpaceOnUse coordinates and multiple stop points. The chart is built with d3.v6, using `d3.csv`, `d3.line`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft`. Data comes from an external CSV file containing dates and closing prices.

Using an 'if' statement in v6

This example combines a line chart and scatterplot to show stock closing prices over time, with circles colored red when the price is 400 or below and black otherwise. It uses d3.line to generate the line path, d3.scaleTime and d3.scaleLinear for the axes, and d3.axisBottom and d3.axisLeft to render them. Data is loaded from a CSV file via d3.csv and parsed with d3.timeParse. The coloring logic relies on an if statement inside the fill function.

Filtering in v6

A line chart plots daily closing stock prices from a CSV file on SVG axes using d3.scaleTime and d3.scaleLinear. Red circles, added via appended SVG circle elements, highlight only the data points whose close value falls below 400, using the filter method on a data join with d3.csv. The full line path remains visible, while the filtered scatterplot overlays show the selected subset.

Colours Page

A gallery of CSS color names rendered as a grid of rounded rectangles, each labeled with its own name. The page reads a CSV file listing color names and displays them grouped by hue families. Using D3 v6 and SVG, the code appends a small `<svg>` per color, fills a rectangle with the named color via the `style` property, and adds a text label with a white shadow for legibility. The layout is a simple vertical list rather than a compact mosaic, and a few colors are omitted from the source data.

Multi-links in tooltips using v6

This example shows a time-series line graph of stock closing prices, with each data point rendered as a circle that displays a persistent tooltip on mouseover. Each tooltip contains the date, the closing value, and a hyperlink to a related D3 block, making the linked resources directly accessible from the visualization. The implementation uses D3 v6 with SVG rendering and animation. It parses dates with `d3.timeParse`, scales the data with `d3.scaleTime` and `d3.scaleLinear`, and draws the line with `d3.line`. Circles trigger tooltip transitions that open the embedded URLs in new tabs.

Tooltip with link in v6

This example shows a time-series line chart of stock close prices, with persistent tooltips that appear on mouseover and include a hyperlink to Google. The tooltip displays the formatted date and closing value, anchored to the cursor position. It uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for axes, d3.line for the path, and d3.axisBottom/axisLeft for rendering. Circles are appended per data point, with tooltip behavior triggered by mouseover events.

Tooltip with link in v6

A line chart displays stock close prices over time, with each data point marked by a circle. Hovering over a circle reveals a tooltip showing the formatted date and value, where the date is a hyperlink to Google. The visualization is built with D3 v6, using `d3.csv` to load the data, `d3.timeParse` and `d3.timeFormat` for date handling, and `d3.line` to generate the SVG path. Tooltips are HTML divs positioned via mouse events and animated with opacity transitions.

Simple tooltips in v6

This example shows a line chart of stock closing prices over time, with circular data points that reveal a tooltip on mouseover. The tooltip displays the formatted date and closing value. Built with d3.v6, the visualization uses `d3.timeParse` to parse dates, a `d3.line` for the path, and a floating `div` for the tooltip, animated via `transition().duration()`. Data comes from a CSV file, rendered as SVG with axes generated by `d3.axisBottom` and `d3.axisLeft`.

Bullet Chart with automatic updating v6

This example presents a bullet chart with two horizontal bars, one for CPU Load and one for Memory Used, using the design recommendations of Stephen Few. The chart displays multiple range bands, a measure bar, and a marker line for each metric, with values updating every three seconds. Built with D3.js v6, the visualization uses a custom `d3.bullet` function to render the SVG chart, which animates changes to the scales and rect widths via smooth transitions. The data appears to be periodically randomized, as the measures and markers shift slightly with each refresh, demonstrating how the chart handles dynamic updates.

Simple d3.js Bullet Chart example v6

This example displays bullet charts for two metrics—CPU Load and Memory Used—with qualitative ranges, a measure bar, and a marker line. Built with d3.bullet, it uses d3.scaleLinear, selectAll, and transition methods to animate updates. Data loads from JSON, and clicking the Update button randomizes values with d3.random, smoothly transitioning the SVG elements over one second.

Map Pan / Zoom with Cities and Text v6

This D3.js (version 6) example displays a world map centered on the Pacific Ocean using a Mercator projection, with red circles marking cities from a CSV data file and city names as text labels. Each city is hyperlinked to a Google search for its name. The visualization supports pan and zoom interactions through the `d3.zoom` API, applying the zoom transform to the map paths, city circles, and text elements. The map geometry comes from a TopoJSON file processed with the `topojson` library, and all rendering uses SVG.

Map Pan / Zoom with Cities v6

This example shows a Mercator map of the world centered on the Pacific Ocean, with red circles marking eleven cities from a CSV file. Users can pan and zoom the entire map and city markers using the d3.zoom behavior, with a scale extent of 1 to 8. The map is rendered as SVG paths from a TopoJSON file via d3.geoPath, while city positions are projected using d3.geoMercator. Each city circle is wrapped in a link that opens a Google search for that city.

Map Pan and Zoom v6

This example demonstrates an interactive world map that supports panning and zooming, centered on the Pacific Ocean. The map renders country boundaries as SVG paths filled with grey, using the `d3.geoMercator` projection and `d3.geoPath` to generate the geometry. A `topojson` data file supplies the world topology. The `d3.zoom` API applies a transform to the SVG group containing the paths, with a scale range between 1x and 8x, enabling the user to explore the map.

World Map Centered v6

A world map centered on the Pacific Ocean is rendered as grey SVG paths with white borders, using a Mercator projection configured with `d3.geoMercator`, a `center` of [0, 5], and a `rotate` of [-180, 0]. The map displays country boundaries from the TopoJSON file `world-110m2.json`, which is loaded via `d3.json` and converted to GeoJSON features using `topojson.feature`. The code relies on `d3.geoPath` to project and draw each country onto the SVG canvas.

Tree diagram from csv using v6

This tree diagram visualizes hierarchical data loaded from a CSV file, with nodes representing names and links showing parent-child relationships. The example uses d3.csv to load the flat data, d3.stratify to convert it into a hierarchy, and d3.tree to compute the layout. Nodes are rendered as circles with labels, while curved paths drawn via SVG path elements connect parents to children. The code also assigns CSS classes based on whether a node is internal or a leaf, adjusting text placement and styling accordingly.

Tree diagram using flat data with v6

This example shows a hierarchical tree diagram built from flat, parent-child data. It converts the flat array into a hierarchy using `d3.stratify()`, then lays out the nodes with `d3.tree()` and renders them as SVG circles and curved links. The code assigns node names via `treeData.each()` and uses `d3.hierarchy()` to supply child relationships. Data is hardcoded in the script, and styling is set through CSS classes for internal and leaf nodes. The diagram is drawn with SVG paths and text elements.

Tree diagram loading external json with v6

This example shows a hierarchical tree diagram rendered as an SVG, with nodes and curved links connecting parent and child elements. It loads data from an external JSON file using `d3.json` and assigns it to a hierarchy with `d3.hierarchy`. The layout is computed using `d3.tree`, and the diagram maps each node to a circle with a text label. The data source is a simple three-level JSON structure, and the visualization uses D3 v6’s promise-based loading and the `d3.tree` layout for positioning.

Tree diagram using images for nodes in v6

This tree diagram visualizes a hierarchical dataset, using images as the nodes to represent each entity. The diagram is constructed with D3.js v6, leveraging the `d3.tree` layout algorithm and the `d3.hierarchy` function to structure the parent-child relationships. The SVG rendering includes curved links and styled text labels for internal and leaf nodes, with each node’s image sourced from a URL, while link strokes reflect the `level` data attribute.

Tree diagram using symbols for nodes in v6

A tree diagram displays hierarchical data with nodes as D3 symbols, where each symbol’s shape and fill color encode a numeric value and a level attribute from a fixed inline JavaScript object. Links between nodes are colored via a separate level property, and internal nodes use cross symbols while leaves use diamonds. Built with D3 v6, it employs `d3.tree`, `d3.hierarchy`, and `d3.symbol` to render an SVG layout, with node sizes scaled by the `value` field and text labels positioned based on whether a node has children.

Tree diagram with styling in v6

This example demonstrates a hierarchical tree diagram rendered with D3.js v6, using SVG to display nodes and curved links. The tree layout is generated via `d3.tree()` and `d3.hierarchy()`, with circle size varying according to each node’s `value` property. Node stroke and fill colors are dynamically mapped from the data’s `type` and `level` fields, while links are styled as cubic Bézier paths with per-node stroke colors. The code also applies CSS classes for internal versus leaf nodes and includes text labels with shadows for readability. The dataset is a static, nested JavaScript object representing a simple parent-child hierarchy.

Simple horizontal tree diagram using v6

A simple horizontal tree diagram displays a small hierarchy of named nodes connected by curved links, with internal and leaf nodes distinguished by text alignment. Built with d3.js v6, it uses the `d3.tree()` layout and `d3.hierarchy()` to compute node positions from static, inline JSON data. SVG rendering places each node as a group containing a circle and label, while the links are drawn as cubic Bézier paths via the `d` attribute. The styling includes white node circles with steelblue strokes and gray links.

Simple vertical tree diagram using v6

This simple vertical tree diagram displays hierarchical data with a root node branching into two levels, using circles for nodes and curved paths for links. The visualization is rendered as SVG with D3.js v6, using the `d3.tree()` layout and `d3.hierarchy()` to structure the hard-coded data, then appending groups and paths via `selectAll().enter()`. Node labels are offset above or below circles depending on whether they have children, and internal text includes a white shadow for readability. The code sets explicit margins and dimensions to position the tree within the viewport.

Simple histogram using v6

This histogram displays the distribution of earthquake magnitudes over two years, with the frequency of recorded values binned by month. The chart uses a time-scaled x-axis and a linear y-axis representing bin counts. Built with D3 v6, the code loads earthquake data from a CSV, parses dates with `d3.timeParse`, and applies `d3.bin` with monthly thresholds to group the values. Bars are rendered as SVG rectangles, with axes generated by `d3.axisBottom` and `d3.axisLeft`. The data is sourced from a local `earthquakes.csv` file.

Simple bar graph in v6

This example shows a simple bar graph of sales figures per salesperson, rendered as an SVG using d3.js v6. It loads data from a CSV file with `d3.csv`, maps the data to a `d3.scaleBand` for the x-axis and a `d3.scaleLinear` for the y-axis, and draws rectangles for each bar. Axes are added with `d3.axisBottom` and `d3.axisLeft`. The chart uses a fixed margin layout and steel-blue bars.

Dual axes in v6

This example shows two time-series lines from a CSV file with date, close, and open values, each with its own colored y-axis: steelblue for the close values on the left and red for the open values on the right. The chart uses D3 v6’s `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` to generate the SVG path data, and `d3.axisLeft` and `d3.axisRight` to render the separate scales. The data is loaded via `d3.csv` and parsed with `d3.timeParse` before being drawn as SVG paths within a single group element.

Labels on multiple lines v6

This example shows two time-series lines of stock data, one for "Close" and one for "Open," plotted over dates in April and May 2012. Each line is labeled directly at its right endpoint, with the "Open" label in red and the "Close" label in steelblue, matching the line colors. The visualization uses d3.version 6, along with d3.timeParse, d3.scaleTime, d3.scaleLinear, d3.line, and d3.axisBottom/axisLeft, to render an SVG chart. Data is loaded from a CSV file with d3.csv, and the paths are drawn using the d3.line generator with separate `valueline` and `valueline2` functions.

Multiple line graph in v6

This example displays two time-series lines on a single chart, comparing the daily close and open values from a CSV file. The visualization uses a time-scaled x-axis and a linear y-axis, with the close line rendered in steel blue and the open line in red. Built with D3 v6, the code employs `d3.csv`, `d3.timeParse`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` to load, parse, draw, and label the data within an SVG. The graph comes from the D3 Tips and Tricks book repository.

Simple graph with grid lines in v6

This example displays a line chart of stock closing prices over time, with light gray grid lines spanning both axes to aid readability. It uses D3 v6 to load a CSV file, parse dates, and scale the data with `d3.scaleTime` and `d3.scaleLinear`. The grid lines are generated by calling `d3.axisBottom` and `d3.axisLeft` with custom tick sizes, while the line path is drawn using `d3.line`. The SVG rendering includes margins and styled grid elements for a clean visual layout.

Drop shadow on text in v6

This chart displays a time series of stock closing prices over a month, rendered as both a light blue area graph and a steel-blue line. A title with a white drop-shadow effect is created by duplicating the text element, with the underlying copy styled using a thick white stroke. The visualization uses d3.js v6, leveraging `d3.csv`, `d3.scaleTime`, `d3.area`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` to build the SVG output from the CSV data.

Simple graph with filled area in v6

This example shows a time-series line graph of stock closing prices, with the area beneath the line filled in light blue to emphasize the trend. It uses d3.csv to load date and close values from a local CSV file, then renders the data as an SVG path using d3.area() and d3.line(). The x-axis uses d3.scaleTime with date parsing via d3.timeParse, while the y-axis uses d3.scaleLinear, and axes are drawn with d3.axisBottom and d3.axisLeft.

v6 curve interpolation comparison

This example compares eight D3 v6 curve interpolation methods—including `curveLinear`, `curveStep`, `curveBasis`, and `curveCatmullRom`—by rendering them as SVG lines over the same time-series dataset of stock closing prices. A scatterplot of the raw data points provides a visual reference for each curve’s fitting behavior. The color-coded legend labels are clickable, toggling line visibility via opacity transitions. The code builds the chart with `d3.line`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisBottom`/`axisLeft`, reading the data from a CSV file.

Scatterplot with v6

This scatterplot overlays a line chart to show the trend of stock closing prices over time. A steelblue line connects the chronological data points, while small circles highlight the individual daily values from the CSV file. The visualization uses D3 v6 with `d3.scaleTime`, `d3.line`, and `d3.axisBottom` to construct the axes and paths. The SVG rendering is driven by `d3.select` and attaches circles through `enter().append("circle")` to mark each data point. The x-axis maps dates while the y-axis scales the closing prices from the data.csv source.

Axis Labels in v6

This example shows a line chart of stock closing prices over time, with clear axis labels for both the x- and y-axes. The visualization uses d3.csv to load date and close values from a CSV file, then d3.scaleTime and d3.scaleLinear to map the data to SVG coordinates. The line is drawn with d3.line, and the axes are rendered using d3.axisBottom and d3.axisLeft. The code adds rotated text for the y-axis label and horizontally centered text for the x-axis label, demonstrating how to annotate axes in d3 v6.

Formatted time labels for an axis with v6

This line chart displays stock closing prices over time, formatted with precise date labels on the x-axis using the `%Y-%m-%d` pattern. The chart uses d3.line to plot the data series, d3.scaleTime for the temporal domain, and d3.axisBottom with tickFormat to generate the labels. The axis text is rotated -65 degrees and anchored to the end to prevent overlap, while d3.csv loads the sample data, which includes dates like 1-May-12 and corresponding closing values. The SVG rendering includes a steelblue path and margins configured for the rotated labels.

Rotated axis labels in v6

This example shows a line graph of stock closing prices over time, with the x-axis labels rotated at a steep angle to prevent overlap. The chart is rendered as an SVG, built with d3.v6’s scaleTime, scaleLinear, and d3.line for the path, while d3.axisBottom and d3.axisLeft generate the axes. After drawing the bottom axis, the code selects its text elements and applies a rotate(-65) transform along with adjusted text anchoring. The data comes from the included data.csv file, parsed using d3.timeParse.

Simple Line Graph v6

A simple line graph plots daily closing values over time, with the y-axis scaled from zero to the data maximum and dates parsed using `d3.timeParse`. Rendered as an SVG, the chart uses `d3.scaleTime` and `d3.scaleLinear` for axes, while `d3.line` generates the steelblue path. The code loads a CSV file via `d3.csv` and displays the result with `d3.axisBottom` and `d3.axisLeft`, serving as a minimal D3 v6 template.

Sep 11, 2020

Leaflet.draw Plugin

This example shows an interactive map of a New Zealand location using OpenStreetMap tiles, rendered with Leaflet.js and the Leaflet.draw plugin. Users can draw polygon, polyline, rectangle, circle, and marker shapes on the map, each with custom colors and style options. The drawn items are collected in a Leaflet FeatureGroup, and the code configures features like intersection detection for polygons, area display, and repeat drawing mode. A custom green leaf icon is created via `L.Icon.extend` with a shadow URL, and popup bindings are added to drawn markers.

May 8, 2020

Line chart with gradient range

This line chart displays the daily average temperature in Atlanta, Georgia, over the first month of 2010, with the area around the line shaded to represent a range of ±2 standard deviations. Because the standard deviation varies per data point, the visualization builds the shaded region from individual area slices, one for each date. The chart is rendered in SVG using D3 version 3.5, with `d3.time.scale` for the time axis, `d3.svg.area` for the slices, and a vertical linear gradient that transitions from yellow to black. The data comes from a local JavaScript file containing weather station records.

Jan 2, 2020

Leaflet.draw Plugin

This example shows an interactive map with the Leaflet.draw plugin, demonstrating drawing and editing tools for polylines, polygons, rectangles, circles, and markers. The map renders OpenStreetMap tiles, with drawn shapes styled in distinct colors and a custom green icon for markers. The code uses Leaflet’s `L.Control.Draw` with options like intersection prevention and area display, and stores created layers in a `L.FeatureGroup` for editing and removal. A custom `L.Icon` class defines the marker appearance, while the `draw:created` event adds new geometries to the group.

Dec 7, 2019

Simple Leaflet Map

This map displays Wellington, New Zealand, with a set of geolocated markers for landmarks like Te Papa and the Embassy Theatre, connected by a polyline route. It uses Leaflet.js with a swappable base layer (OpenStreetMap or OpenTopoMap tile servers) and a user-controlled overlay group. The code constructs a layer group for the markers and line, then adds a leaflet control to toggle between the two tile layers and the overlay.

Simple Leaflet Map

This example shows an interactive Leaflet map centered on Wellington, New Zealand, with a layer control that lets the user switch between two base tile layers: OpenStreetMap and OpenTopoMap. Using the Leaflet 1.6.0 JavaScript API, it defines two `L.tileLayer` instances—one pulling raster tiles from `tile.openstreetmap.org` and the other from `tile.opentopomap.org`—and adds them as selectable base layers via `L.control.layers`. The map itself is initialized with `L.map`, set to a zoom level of 14, and displays only the OSM layer initially.

Simple Leaflet Map

This simple Leaflet map displays a geographic area centered on coordinates [-41.2858, 174.78682] at zoom level 14. It uses Leaflet 1.6.0 to create a map object via `L.map` and renders OpenStreetMap tile imagery from `http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`. The map includes an attribution link to OpenStreetMap contributors, with a maximum zoom of 18. The example demonstrates basic map initialization and tile layer addition using Leaflet’s `tileLayer` API.

Simple Leaflet Map

A simple interactive map of central Wellington, New Zealand, rendered with Leaflet 1.6.0 and OpenStreetMap tiles. The view centers on a set of coordinates, over which a red polyline with custom styling—including weight, opacity, and a dash pattern—is drawn using `L.polyline`. The map supports panning and zooming through Leaflet's built-in interactions.

Simple Leaflet Map

A simple Leaflet.js map displays nine aircraft markers over New Zealand’s South Island, each with a popup showing its identifier. The map uses OpenStreetMap tile layers for the base imagery and centers on a view at latitude -41.3058 and longitude 174.82082 with zoom level 8. The code defines an array of plane coordinates and loops through them to create and bind popups to `L.marker` objects, which are then added to the map. The example demonstrates basic marker placement and popup interaction using Leaflet’s core API.

Simple Leaflet Map

A simple Leaflet map shows a draggable, semi-transparent marker with hover text and a popup overlaid on an OpenStreetMap tile layer. The map is centered on Wellington, New Zealand, using the Leaflet `L.map` API, with the marker pinning Te Papa museum. The example demonstrates core Leaflet features including `L.tileLayer` for basemap tiles, `L.marker` with options for dragging, title, and opacity, and `bindPopup` to attach interactive popup content.

Map Pan / Zoom with Cities v5

This map example displays world country boundaries and major global cities, with interactive pan and zoom functionality centered on the Pacific Ocean. The visualization uses d3.geoMercator for projection and d3.geoPath to render geographic features from a TopoJSON world file. City locations from a CSV dataset are plotted as red circles, each hyperlinked to a Google search. Users can apply d3.zoom with a scale extent of 1 to 8, transforming both paths and circles accordingly. The map is rendered as SVG elements within a d3 selection.

Map Pan / Zoom with Cities and Text v5

This example displays an interactive map of the world centered on the Pacific, overlaid with red circular markers for eleven cities and their labels. Pan and zoom controls are implemented using the `d3.zoom` API, which applies SVG `transform` attributes to all map paths, circles, and text. The map geometry and city positions are projected using `d3.geoMercator` and `d3.geoPath`, with country outlines loaded from a TopoJSON file. City coordinates come from a CSV loaded via `d3.csv`, and text labels are placed above each marker, each linking to a web search.

Map Pan and Zoom v5

This map of the world centers on the Pacific Ocean and lets users pan and zoom. It uses a Mercator projection via `d3.geoMercator` and renders country boundaries as SVG paths from TopoJSON data. The `d3.zoom` behavior applies a transform to the path group, enabling interactive navigation with a scale extent of 1 to 8.

World Map Centered v5

This example displays a world map centered on the Pacific Ocean using a Mercator projection. It renders country boundaries as grey SVG paths with white strokes via `d3.geoPath`, projecting geographic data from a TopoJSON file. The map is rotated with `rotate([-180,0])` to shift focus away from the Atlantic, while `d3.json` loads the topology and `topojson.feature` extracts country geometries for display.

Bullet Chart with automatic updating v5

This example shows two bullet charts comparing CPU load and memory usage, with ranges, measures, and markers that update automatically. Using a custom `d3.bullet` function built on D3 v5, the charts pull data from a JSON file and render as SVG. Every three seconds, a `setInterval` triggers a randomized data update, which is animated over one second using D3’s `transition` and `duration` methods, smoothly transitioning the measure and marker positions along the linear scale.

Dec 1, 2019

Simple d3.js Bullet Chart example v5

Two bullet charts display CPU load and memory use as horizontal bars with shaded ranges, dark measure bars, and thin marker lines, all rendered as SVG. Built with d3.v5, the visualization uses a custom `d3.bullet` chart component that relies on `d3.scaleLinear` and `d3.json` to load data, with transitions animating updates when the "Update" button triggers `randomize` to regenerate marker and measure values.

Leanpub Book Download Scatterplot

This visualization plots every download of the book D3 Tips and Tricks from January 2013 to March 2015, with the date on the x-axis and time of day on the y-axis. Points are aggregated into 10-minute blocks, with larger circles indicating multiple downloads at the same time. The main scatterplot is complemented by line graphs showing daily download totals and time-of-day distribution. The code uses D3.js (version 3.5) with `d3.nest`, `d3.time.scale`, `d3.svg.axis`, and `d3.bisector` for data aggregation, interactivity, and the secondary charts.

Collapsible Tree Example

A collapsible tree diagram displays hierarchical data as a set of linked nodes, where each node’s children can be expanded or hidden by clicking, though the example code does not yet implement click interactions. The flat CSV data, containing parent-child relationships, is converted into a tree structure using a name-to-node map. The visualization is rendered as an SVG using D3.js version 3.5, with `d3.layout.tree` computing the layout, `d3.svg.diagonal` drawing curved links, and nodes represented by circles and text labels.

Adding names to places

This example shows a world map with red dots marking cities and their names placed just above each point. It uses D3.js version 3.5.17 with a Mercator projection and TopoJSON to render country outlines from a world-110m2.json file. City coordinates are loaded from a CSV file and plotted using `d3.geo.path`. The city labels are SVG text elements anchored above each circle, and each dot links to a Google search for that city. The map supports zoom and pan through `d3.behavior.zoom`.

Multi-series Associative

This example shows a multi-series line chart where three cities' temperature measurements are plotted over time, with each city distinguished by a different colored line. The visualization uses an associative array structure to map city names to their temperature values from the CSV data. The code constructs the chart using D3.js version 3.5.17, employing `d3.time.scale` for the x-axis dates and `d3.scale.linear` for the y-axis, while `d3.scale.ordinal` assigns distinct colors to each series. Lines are drawn with `d3.svg.line`, and the grid lines are created through a custom y-axis with negative tick sizes. The rendering is SVG-based, with the data sourced from the included `data.csv` file.

Simple d3.js graph with internal data

This example shows a line chart of stock closing prices over a three-week period in April and May 2012. The data is declared internally as a JavaScript array of date-value pairs. The visualization uses D3.js version 3.5.17, with `d3.time.scale`, `d3.scale.linear`, `d3.svg.axis`, and `d3.svg.line` to render the axes and the line path in SVG. The chart includes styled axes and a steelblue line, with the date parsed via `d3.time.format`.

Tree Example

This example shows a hierarchical network tree visualization, displaying IP address ranges and their associated hosts in a collapsible layout. The data originates from a JSON structure containing network addresses, subnet masks, and device descriptions. Using the D3.js library (version 3.5.17), the code applies `d3.layout.tree` to compute node positions and renders the structure as SVG elements with animated transitions for expanding and collapsing branches. Nodes and links are styled via CSS classes, and the tree includes interactive features where clicking a node toggles its children’s visibility.

Collapsible Tree Example

This example shows a collapsible tree diagram that displays a network hierarchy of IP subnets and hosts, with nodes labeled by their net addresses and links drawn as curved paths. The visualization is rendered as an SVG using D3.js (version 3.5.17) and its `d3.layout.tree` and `d3.svg.diagonal` APIs. It loads hierarchical data from an external JSON file, lays out nodes by depth, and positions them with fixed vertical spacing. The code includes node and link styling but does not implement interactive collapse or expand behavior.

Super Leanpub Extrapolation

A multi-line chart tracks the daily sales ranks of nine Leanpub books over several months, plotting cumulative book counts on the y-axis against time on the x-axis. Distinct stroke colors differentiate each book, revealing relative popularity trends, including one book’s rapid rise. The visualization uses D3.js (v3) with `d3.svg.line` and basis interpolation to smooth paths, paired with `d3.time.scale` for the date axis. Data comes from a CSV file of daily snapshots, rendered as SVG with axis and gridline styling via CSS.

Leanpub book download extrapolation

This visualization tracks the cumulative download counts of nine Leanpub books over time, using a multi-line chart to compare their popularity. The graph displays the extrapolated data, allowing viewers to hover and observe when one book’s download total surpasses another. The visualization is built with the D3.js library, using its `d3.time.scale`, `d3.scale.linear`, and `d3.svg.line` APIs to render the axes and lines. The CSV data is parsed and plotted, with each book represented by a distinct colored line, and the chart includes interactive tooltips for precise values.

Multi-line graph 4: Toggle

This multi-line chart displays monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010, sourced from a CSV file. The graph automatically generates a color-coded legend, and clicking a legend label toggles the corresponding line’s opacity via a smooth CSS transition. Built with the D3.js library, it uses `d3.time.scale` for the time axis, `d3.svg.line` for plotting, and `d3.nest()` to group data by company symbol, with linear scaling for the price axis.

Multi-line graph 3: Legend

Three stock price time series are plotted as separate colored lines, with a legend beneath the x-axis identifying each series by its symbol (MSFT, AMZN, IBM). The SVG chart is built with D3.js, using `d3.nest` to group monthly CSV data by symbol and a categorical color scale to assign line and legend colors. Axes are generated with `d3.svg.axis`, and data spans January 2000 through March 2010.

Multi-line graph 2: Colours

This multi-line graph displays stock price changes over time for Microsoft, Amazon, and IBM, with each line distinguished by a unique color. The visualization uses the D3.js library (version 3.5) to parse CSV data, scale time and price ranges, and render SVG paths. It applies a categorical color scale via `d3.scale.category10` and assigns colors dynamically to each symbol group from the nested data. The example focuses solely on demonstrating color differentiation among multiple lines, without legends or interactive toggling.

Multi-line graph 1: Lines

This example shows a multi-line graph comparing the monthly stock prices of Microsoft, Amazon, and IBM from 2000 to 2010. The code uses D3.js v3, specifically the `d3.nest` function to group the CSV data by company symbol, then draws a separate SVG `path` for each group via `d3.svg.line`. Time and linear scales define the axes, with dates parsed using `d3.time.format`. The graph is rendered as SVG with steelblue lines, and the stock data originates from Mike Bostock's small multiples example.

Two graphs arranged using bootstrap

Two line charts display fictional company data—projected profits and production costs—side by side with a text column between them, laid out with Twitter Bootstrap’s grid system. Each chart plots date against a numeric value using D3’s time scale, linear scale, and `d3.svg.line`, with axes created via `d3.svg.axis`. The SVG charts are appended to Bootstrap column divs, and the data comes from two CSV files loaded with `d3.csv`. The example demonstrates how Bootstrap columns arrange multiple D3 visualizations and text in a responsive row.

SANKEY Experiment

This example shows a sankey diagram built with D3.js, using external CSV data that specifies named source and target links with numeric values. The chart visualizes the flow of "Widgets" between named nodes, with the width of each link proportional to its value, and supports interactive node dragging. The code uses d3.sankey for layout, d3.csv for data loading, d3.behavior.drag for node movement, and renders the diagram as SVG with semi-transparent black link paths and colored node rectangles.

SANKEY Experiment

A compact SANKEY diagram built with D3.js visualizes the flow of widgets between five named people (nodes) through seven links, each path’s thickness proportional to its value. The SVG renders node rectangles, draggable via `d3.behavior.drag`, with semi-transparent black links. Data loads from an external JSON file, which the code maps from named source/target strings to node references before applying the `d3.sankey` layout. Interactive relayout on drag updates link paths, while hover tooltips show source, target, and value.

Colour gradient for an area fill

This example shows a line chart with a gradient-filled area beneath it, where the fill color shifts from red through black to lawngreen based on the y-axis position. Data from a CSV file is plotted with d3.time.scale and d3.scale.linear axes. The code uses d3.svg.area to generate the area path and defines a linearGradient with multiple stop elements, referenced via a CSS url(#area-gradient) fill. The SVG rendering includes time-formatted x-axis ticks and a y-axis scaled to the maximum close value.

Colour gradient on a graph line

This example shows a line graph of stock closing prices over time, with the line colored by a red-to-black-to-green gradient that maps to the y-axis value. The graph uses D3.js (version 3.5.17) with SVG rendering, and applies the gradient via a `linearGradient` definition referenced by the line’s `stroke` attribute. Data is loaded from a CSV file using `d3.csv`, and axes are generated with `d3.svg.axis`. The gradient stops are explicitly defined in code to create color bands at 40% and 62% of the vertical range.

if selection in d3.js

This example demonstrates how to use an `if` statement within a D3.js data visualization to conditionally style elements. A scatterplot line graph displays stock closing prices over time from a CSV file, with each data point colored either red or black based on whether its value is below or above 400. The code uses the D3.js library to parse dates, create a time-scaled x-axis, apply a linear y-axis, and render both a line path and circular points via SVG.

Filtering in d3.js

This example shows a time-series line chart of stock closing prices, with a scatterplot overlay. A filter selects only data points with a closing value below 400, rendering those specific circles in red. The chart is rendered as an SVG using d3.js, employing the d3.time.scale and d3.scale.linear for axes, and the .filter() method on the circle’s enter selection to conditionally style points. The data comes from a CSV file with date and close columns.

Simple d3.js tooltips

A line chart plots stock closing prices over time, with a tooltip that reveals the exact date and price when hovering over a data point. The visualization uses d3.js to render SVG circles for each data point and a path for the line, reading time-series data from a CSV file. The tooltip is implemented using an HTML div that appears via d3 transitions on mouseover and mouseout events, positioning itself near the cursor using `d3.event.pageX` and `d3.event.pageY`. The chart axes employ `d3.svg.axis` with time and linear scales.

Simple scatterplot with d3.js

This visualization combines a line graph and scatterplot to show Apple’s stock closing price over time, with data from a CSV file. The blue line connects daily price points, while small circles mark each individual observation along the series. Built with D3.js (version 3.5), it uses `d3.svg.line`, `d3.time.scale`, and `d3.svg.axis` to render the SVG path, axes, and date-based x-scale. The scatterplot circles are appended via `selectAll("dot")` with explicit radius and coordinate attributes. Data parsing relies on `d3.time.format` for date conversion and linear scaling for y-values.

Graph and table with tricks

A line chart of stock closing prices over time is displayed alongside an HTML table listing each date’s close, open, and computed difference. The SVG chart uses d3.time.scale and d3.svg.line to render the path, while d3.csv loads the data. The table is built with d3.select and append, then sorted by closing price in descending order, with column headers capitalized.

Simple graph and table using d3.js

This example pairs a simple line graph with an HTML table generated from the same CSV dataset, showing date and closing value pairs. The SVG chart uses D3.js scales, axes, and a line generator to plot the data, while a separate table function renders the raw values beneath it. The code relies primarily on `d3.csv` for data loading, `d3.time.scale` and `d3.scale.linear` for scaling, and `d3.svg.axis` for axis creation, all within D3 version 3.5.17. The table is styled inline with font and margin attributes.

Update graph data automatically

A line chart of stock closing prices automatically refreshes with a new dataset every five seconds. Built with D3.js version 3, the visualization uses `d3.csv` to load two CSV files, `d3.time.scale` for the date axis, and `d3.svg.line` for the path. A `setInterval` triggers the update, which transitions the line and axes over 750 milliseconds using D3’s `.transition()` and `.duration()` methods. The SVG rendering relies on standard D3 SVG elements and selectors to swap the data seamlessly.

Update and revert graph data

Two line charts share a common set of axes, displaying date-based stock closing values. Clicking the "Update" button loads alternate data (`data-alt.csv`) and animates the line and axis ranges over 750 ms using D3 transitions, while "Revert" returns to the original `data.csv` dataset. The visualization uses D3's `d3.time.scale`, `d3.scale.linear`, `d3.svg.line`, and `d3.svg.axis` to render the SVG line and axes, with `.transition()` on the `d3.select("body")` selection to smoothly interpolate the path and axis scales.

Update d3.js data with button press

This example demonstrates how to update a line graph by pressing an "Update" button. It uses D3.js version 3.5.17 to render an SVG line chart of date and closing value pairs. The interaction is handled by an HTML `onclick` event that triggers the `updateData()` function, which re-fetches a different CSV file (`data-alt.csv`). The axes and line path are then updated with a smooth 750-millisecond transition, showing how to dynamically replace the dataset and rescale the visualization.

d3.js graph with rotated axis text

This example shows a time-series line chart of stock closing prices, with the x-axis labels rotated to prevent overlap. The SVG visualization uses D3 v3 to parse dates from a CSV file and map them to a time scale, while a linear scale maps the price values. Axis text is formatted with a custom tick format and rotated using D3’s `selection.attr` with a transform string. The line path is generated via `d3.svg.line`, and both axes are built with `d3.svg.axis`.

d3.js line graph with dual Y axes

This example shows two time-series lines—one for closing values and one for opening values—plotted against a shared time axis but with separate y scales on the left and right sides. The SVG graphic uses D3.js version 3.5.17 with `d3.time.scale`, `d3.scale.linear`, and `d3.svg.axis` to render the axes and lines, while `d3.csv` loads the date-stamped data from a local CSV file. The left axis and blue line correspond to the close column, and the right axis and red line correspond to the open column, making it easy to compare trends across different value ranges.

d3.js Graph with many features

This graph displays stock closing prices against dates, with a steel-blue value line and a lightsteelblue filled area beneath it. The chart includes labeled x and y axes, a title, and light grey grid lines for both axes. The d3.js code uses `d3.time.scale` and `d3.scale.linear` for the coordinate systems, along with d3.js APIs such as `d3.svg.axis`, `d3.svg.line`, and `d3.svg.area` for rendering. The data is loaded from a local CSV file, and the visualization is rendered as an SVG.

Degree Days

A degree-day chart for Bundaberg, Australia, shows heating and cooling energy demand relative to an 18°C reference temperature. The code uses D3.js to render an SVG area chart, dividing the data into coral-colored heating degree days below the reference line and deep-sky-blue cooling degree days above it. Mean daily temperatures from the Australian Bureau of Meteorology are plotted across the calendar year. The visualization uses `d3.svg.area` with a basis interpolation, a time-scaled x-axis, and clipped areas to distinguish the two zones.

Show / hide elements on mouse click with d3.js

A small multiple-line chart displays two time series of stock data, each with its own Y axis, in an SVG rendered by d3.js. Clicking the colored text labels toggles the visibility of each line and its corresponding axis by adjusting their opacity. The code uses d3.svg.line for the paths and d3.svg.axis with a time scale and linear scales, binding click handlers via d3.select to update element styles. The data is embedded inline as JSON, and the example builds on a Stack Overflow solution for showing and hiding elements.

Collapsible Tree Example

This example shows a collapsible tree diagram where each node displays an image and a text label. The visualization uses a static, hard-coded dataset embedded in the code, with nodes positioned by depth and connected by curved links. Built with D3.js version 3, it employs `d3.layout.tree` for the layout, `d3.svg.diagonal` for the paths, and SVG elements for rendering. Node images are loaded from local files, while link strokes are colored dynamically based on the target node’s “level” property.

Colours Page

This example displays a grid of named CSS colors, each rendered as a rounded rectangle with its name printed in bold text. The visualization uses a static CSV file (`colours2.csv`) containing color names, and the D3.js library to create an SVG element for each entry. The code places each color swatch and label sequentially, using D3’s `select`, `append`, and `attr` methods to build the layout. It also applies a text-shadow class to improve label legibility, and the resulting page is a reference guide for color names usable in web contexts.

Colours Page

A gallery of SVG color swatches displays every named CSS/SVG color from a local CSV file. Each color is shown as a rounded rectangle with its name overlaid in bold, shadowed text. The d3.csv method loads the data, and d3 selections append one SVG per color with appended rect and text elements, using white strokes for label legibility. All colors render as individual static tiles in the browser.

Collapsible Tree Example

This example shows a collapsible tree diagram where each node is represented by a symbol whose shape depends on the node’s value: values greater than or equal to nine appear as crosses, while smaller values appear as diamonds. The tree layout is generated with `d3.layout.tree`, and node paths are drawn using `d3.svg.symbol` with a custom type function. Links are rendered as diagonal paths via `d3.svg.diagonal`, with stroke colors derived from each target node’s “level” property. The visualization uses SVG and is based on a static JSON dataset, with a white fill and black stroke for all symbols.

Input test

This example demonstrates how an HTML range input can control multiple SVG elements simultaneously. Dragging the slider rotates two text labels, "d3.js" and "d3noob.org", in opposite directions. The code uses D3.js version 3.5.17 to append SVG text elements and listens to the input event on the range control, updating each text’s transform attribute with a new rotation angle. The slider value is displayed live in a label.

Input (number) test

This example demonstrates how an HTML numeric input controls the rotation of an SVG text element. A `<input type="number">` tag, initialized at 0 with a range of 0–360 and step increments of 5, triggers the D3.js `on("input")` event to update the text’s `rotate` transformation. The rotation angle is displayed in a span beside the input. Rendered as inline SVG using D3 v3.5.17, the text "d3noob.org" is positioned via `translate(300,150)` and dynamically rotated based on user input. The update function recalculates the `attr("transform")` value on each change.

Input test

A simple HTML range input controls the rotation of a text label in an SVG element, with the current angle displayed live beside the slider. The example uses D3.js version 3.5.17 to select the input element and bind its `input` event, updating both the text label and the `transform` attribute of the SVG `<text>` node via `attr`. The SVG is appended to the body with a fixed width and height, and the text is centered at coordinates (300,150). The code demonstrates event-driven interaction between native HTML form controls and D3-managed SVG rendering.

Double Input Test

Two HTML range sliders control the height and width of a single blue-outlined rectangle rendered as an SVG element. Dragging either input triggers a D3 update function that resizes the rectangle symmetrically around its center. The example uses D3 version 3.5.17 to bind the `input` events and select/update the SVG `rect` attributes, while the slider labels display the current numeric values. The code demonstrates interactive coordination between standard form controls and D3-driven SVG manipulation.

Input test (circle)

This example demonstrates how an HTML range input slider can control the radius of an SVG circle drawn with D3.js. Moving the slider updates the displayed radius value and resizes the circle's `r` attribute in real time. The code uses a `<input type="range">` element with an `input` event listener, and D3's selection methods (`d3.select`, `.on`, `.property`, `.attr`) to synchronize the slider, text label, and circle. The visualization is rendered as an SVG element in the browser without any external data source.

Linux Process Tree

A hierarchical tree visualizes Linux processes as collapsible nodes, with each circle representing a process and links showing parent-child relationships based on PID/PPID data. The tree uses d3.layout.tree and d3.svg.diagonal for layout and connection paths, while d3.csv loads the process data from a CSV file. Interactive features include click-to-collapse and mouseover tooltips displaying PID, command, user, CPU, and memory values. Nodes animate positions over 750 milliseconds via d3 transitions, with styling defined through SVG circles, text labels, and path links.

Dynamic historical stock data with d3.js and YQL

This interactive line chart displays daily stock prices for a user-selected ticker symbol over a specified date range. HTML input fields and an Update button control the query, which fetches historical data from Yahoo Finance’s YQL API. The visualization, built with d3.js (version 3.5.17), renders an SVG area with axes, a steelblue line for daily high prices, and a dynamically updated title. The code uses `d3.json` for the AJAX call, `d3.time.scale` and `d3.scale.linear` for plotting, and `d3.svg.line` for the path, with no input sanitization.

d3.js with leaflet.js

This example demonstrates how to combine Leaflet.js and d3.js so that SVG circle markers stay fixed to geographic coordinates while maintaining a constant screen size. It loads five point locations from a local circles.json file and displays them as red, semi-transparent circles over an OpenStreetMap tile layer. The code uses Leaflet’s map.latLngToLayerPoint() method to convert geographic positions into pixel coordinates within the viewreset event handler, applying the result as SVG transform translations. The implementation relies on d3.json for data loading and d3 selections to append and update the circles.

Leaflet and D3 Map

This example combines Leaflet and D3 to render a blue GeoJSON rectangle polygon that pans and zooms with an OpenStreetMap tile layer. It uses D3’s `d3.geo.path` with a custom `projectPoint` function that calls Leaflet’s `latLngToLayerPoint`, while a `viewreset` handler recalculates the SVG overlay’s bounds and transform. The map is centered on Wellington, New Zealand, and the rectangle’s path is drawn as SVG elements within Leaflet’s overlay pane.

Testing d3.js in Leaflet.js

This example embeds D3.js-generated SVG graphics into a Leaflet.js interactive map, displaying aircraft positions as yellow arrow-shaped paths. The map centers on New Zealand's Cook Strait region, with each plane’s location derived from GeoJSON point coordinates and rotated according to its track property. Using Leaflet's `_initPathRoot` method, D3 selects the map’s underlying SVG and appends a group for the features. The `update` function repositions each path on map pan or zoom via `map.latLngToLayerPoint` and the `viewreset` event, synchronizing D3 transforms with Leaflet’s projection.

Simple d3.js bar chart

This bar chart displays monthly values from January 2013 through February 2014, with each bar’s height representing a numeric amount. It uses d3.csv to load data from the bar-data.csv file, d3.time.format to parse dates, and d3.scale.ordinal with rangeRoundBands to position bars along the x-axis. The chart renders as SVG, using d3.svg.axis for the rotated x-axis labels and a linear y-axis, with steelblue rectangles drawn via d3.selectAll and .enter().append. The y-axis is labeled “Value ($).”

Multiple line graphs with labels

Two line graphs show the daily open and close prices of a stock over time, with each line labeled at its right endpoint. The blue line represents closing prices and the red line represents opening prices, plotted against a time-based x-axis and linear y-axis. The visualization uses D3.js version 3.5.17 with `d3.svg.line` to generate the paths, `d3.time.scale` for the x-axis, and `d3.scale.linear` for the y-axis, reading data from a CSV file. Labels are positioned using the final data point’s y-coordinate, as the CSV data is ordered newest-first.

Tree Example

This interactive tree diagram displays a hierarchical dataset with a single root node and two levels of children. Clicking any parent node collapses its subtree, and clicking again expands it. The visualization is built with D3.js version 3.5.17, using `d3.layout.tree` and `d3.svg.diagonal` to compute and draw the layout as SVG elements. Animated transitions, controlled by `node.transition` and a 750-millisecond duration, smoothly move nodes and links between states. The example is adapted from Mike Bostock’s collapsible tree and uses hardcoded JavaScript data.

Collapsible Tree Example

This collapsible tree example shows a static, two-level hierarchy loaded from an external JSON file, with nodes rendered as white circles connected by gray curved links. The view is fixed and does not update or collapse. Built with the D3.js library (version 3.5.17), it uses `d3.layout.tree()` for layout, `d3.svg.diagonal()` for link paths, and `d3.json()` to fetch the data. The SVG output is generated by appending node circles and text labels, with styling defined in the embedded CSS.

Collapsible Tree Example

This example shows a static tree diagram generated from flat, parent-child data, with nodes and links rendered as SVG circles and paths. The code converts the flat data into a hierarchical tree structure using `d3.layout.tree` and draws it with `d3.svg.diagonal` for the curved links. It relies on the D3.js library (version 3.5.17) and uses standard SVG elements like `circle`, `text`, and `path` for visualization. The diagram is fixed-depth, with no interactive collapse or update behavior.

Collapsible Tree Example

This example shows a vertical d3.js tree diagram with a fixed set of hierarchical data, including a top-level node with two second-level branches and further descendants. While titled "collapsible," the provided code is a simplified version that renders the tree without any interactive update or collapse functionality. The visualization uses the D3 v3 `d3.layout.tree` for layout and `d3.svg.diagonal` for link paths, with nodes drawn as white circles and labels positioned above or below each node. All elements are rendered in SVG, and the data is hardcoded in the script.

Collapsible Tree Example

This example shows a static tree diagram visualizing hierarchical data, with nodes and links styled using dynamic colors based on the data attributes. The visualization encodes numeric values as the radius of each node’s circle and uses distinct colors for node fill, stroke, and links. The code uses the D3.js layout in `d3.layout.tree` and the `d3.svg.diagonal` API to draw curved links. It loads data from an embedded JavaScript array and renders the graphic as an SVG, with the tree laid out horizontally from left to right.

Tree Example

This example demonstrates a collapsible tree diagram built with D3.js, visualizing hierarchical data loaded from an internal JSON array. It shows a root node ("DEF") with branches extending to children, including nested nodes and collapsed subtrees that users can expand by clicking. The code converts flat JSON records into a tree structure using array reduction and parent-child mapping, then renders it with the `d3.layout.tree` layout and `d3.svg.diagonal` paths for connecting links. Node transitions animate smoothly when toggling collapsed states.

Adding links to objects

This example shows a light green rectangle with rounded corners as a hyperlink to a Wikipedia article about the word "gongoozler." The text label overlays the rectangle but is set with `pointer-events: none`, allowing clicks to pass through to the link beneath. Using the D3.js library (version 3.5.17), the code appends an anchor element with an `xlink:href` attribute to an SVG, then draws the rectangle and text. The text uses `text-anchor: middle` for centering, and the SVG is rendered inline in the HTML page.

Directional Force Layout Diagram with node colouring

This interactive graph displays a directional force layout diagram, visualizing the relationships between characters as node connections. The example builds on the basic and highlighting versions by coloring each circular node distinctly using a categorical color scale, while links have varying opacity based on their weight values from the `force.csv` data source. The D3.js code uses the `d3.layout.force` API to simulate the physics, animating the SVG paths and nodes. Users can click to enlarge nodes and text, or double-click to restore them.

Multiple Simple graphs on one page

Two line charts display daily closing values from two separate CSV files, each plotted on its own SVG canvas stacked vertically. The example demonstrates how to reuse a shared set of D3 3.5.17 API components—including `d3.time.scale`, `d3.scale.linear`, `d3.svg.axis`, and `d3.svg.line`—to build multiple independent graphs on one page. Data is loaded with `d3.csv`, parsed with `d3.time.format`, and rendered as steel-blue paths with annotated axes. Both charts use identical margins, dimensions, and axis configurations, showing a simple way to generate small multiples.

Bullet Charts with automatic updating

This example shows bullet charts—a compact alternative to gauges—for CPU load and memory usage. The charts automatically update their values every second by fetching the `bulletdata2.json` file. Using D3.js version 3.5, the code implements a custom `d3.bullet` function that renders range, measure, and marker elements as SVG rects and lines. Transitions with a 1000-millisecond duration animate the scale and element positions smoothly when new data arrives.

World map with zoom / pan and cities

This example presents a world map rendered with SVG, featuring zoom and pan controls. It overlays red circular markers on select global cities, which are loaded from a CSV file and positioned using the Mercator projection via `d3.geo.mercator()`. Each city marker is hyperlinked to a Google search for its name. The map’s geography is drawn from a TopoJSON file, with paths generated through `d3.geo.path()`, while zooming and panning are handled by `d3.behavior.zoom()`.

World Map with zoom and pan

This example displays a world map rendered as gray SVG paths with white borders, centered on a Mercator projection. Users can pan and zoom the map via mouse interactions, with the view transform updating dynamically. The map data comes from the `world-110m2.json` TopoJSON file, processed using `topojson.object`, while D3’s `d3.geo.path` and `d3.behavior.zoom` handle the projection and interactive behavior.

World Map Centered on the Pacific

This example displays a world map centered on the Pacific Ocean using a Mercator projection. The map renders country boundaries as grey polygons with thin white strokes. It uses D3.js version 3.5.17 and TopoJSON to load and draw geographic data from a local `world-110m2.json` file. The projection is configured with a center of [0, 5], a scale of 150, and a rotation of -180 degrees, which shifts the map’s focus away from the traditional Atlantic-centered view.

Directional Force Layout Diagram with varying link opacity

This example shows a force-directed network graph of 28 nodes and 29 directed links, where each link’s opacity encodes the numeric value from `force.csv`. Thicker, more opaque edges (e.g., value 2.0 between Eveie and Harry) indicate stronger connections, while fainter edges (e.g., 0.1 between Harry and Eveie) represent weaker ties. The graph uses `d3.layout.force` for the physics simulation and animates node positions in an SVG via a `tick` handler that draws curved paths with arrowheads. Interactivity is limited to click and double-click events, which enlarge and highlight individual nodes and their labels. The code derives opacity classes from a linear scale mapping link values to 25%, 50%, 75%, or 100% opacity.

Directional Force Layout Diagram with Node Highlighting

This interactive force-directed network diagram displays the relationships between named characters, with arrows indicating direction and thickness conveying connection strength. Clicking a node highlights it by enlarging its circle and changing its label’s color, size, and position; double-clicking resets the node to its default styling. Built with D3.js 3.5.17, it uses `d3.layout.force` for physics-based simulation, SVG elements for rendering, and transitions on `attr` and `style` properties to animate the highlight and reset effects. The input data is loaded from a CSV file containing source, target, and value columns for each edge.

Basic Directional Force Layout Diagram

This basic directional force layout diagram visualizes a directed graph of named relationships with weighted edges. It uses D3.js with the `d3.layout.force` API to simulate a physics-based layout where nodes repel and links pull toward each other. Arrowheads are added via SVG markers, and each link is drawn as a curved path that connects source and target nodes. The graph reads data from a local CSV file containing source, target, and value triples.

Constrained Zoom Map. Centered on the Pacific

This example shows a world map centered on the Pacific Ocean, where users can pan and zoom with constrained translation bounds. It uses a Mercator projection with `.rotate([-180,0])` to place the anti-meridian at the center, and renders geographic features from a TopoJSON world dataset using `d3.geo.path`. The zoom behavior relies on `d3.behavior.zoom` and custom logic in the `move` function to limit panning within the viewport. Landmasses are filled black with white boundary strokes, and the SVG overlay captures pointer events for interaction.

SANKEY Experiment

This Sankey diagram visualizes world greenhouse gas emissions from 2005, using data from the World Resources Institute. It displays energy sources, end-use sectors, and resulting gases as nodes, with link widths representing emission quantities. Unlike typical Sankey diagrams, users can drag nodes both horizontally and vertically, with `d3.behavior.drag` triggering `sankey.relayout()` to recompute link paths in real time. The visualization is rendered as SVG using D3.js 3.5.17 and a custom `d3.sankey` plugin, with node colors assigned via `d3.scale.category20()`.

SANKEY Experiment

This interactive Sankey diagram visualizes global greenhouse gas emissions for 2005, sourced from the World Resources Institute, by showing the flow of emissions from energy, industrial processes, agriculture, and land-use change to specific gases like carbon dioxide, methane, and nitrous oxide. Built with the `d3.sankey()` plugin, it uses draggable, colored nodes and curved, semi-transparent links with hover titles to display quantities. The code customizes node width, padding, and layout iterations, and implements custom drag behavior via `d3.behavior.drag()` to reposition nodes and trigger `relayout()` for dynamic link updates.

Test Zooming and panning of a Mercator map using d3.js.

This example demonstrates panning and zooming of a Mercator-projected world map built with D3.js. The map auto-rotates via a timer, while a d3.behavior.zoom event handler updates the transform of an inner "g" element to support mouse-driven pan and zoom. The map is rendered as SVG paths, using d3.geo.path and a d3.geo.mercator projection, with topology data loaded from a GeoJSON file. The implementation highlights the challenge of centering the map on the international date line due to projection rotation limitations.

Area Gradient fill

This chart shows daily temperature variations over a year with a line and a gradient-filled area beneath it. The area uses a vertical gradient that shifts from steel blue to gray to red, tied to specific temperature thresholds. Built with the D3.js library, it parses dates from a CSV file and uses `d3.svg.area` to generate the path representing the temperature data between the line and the chart’s baseline.

New Zealand Earthquakes

This interactive scatterplot visualizes the pattern of earthquakes in New Zealand from July 2010 to August 2012, plotting each event by its week and time of day, with point size reflecting magnitude. The visualization uses D3.js version 3.5.17 to render SVG circles with tooltips, axes, and grid lines. Data is loaded from a CSV file containing dates, times, and magnitudes, and the code employs `d3.time.format` for parsing and formatting temporal values, alongside `d3.svg.axis` for the coordinate scales.

Collapsible Tree Example

This example shows a collapsible tree diagram with a horizontal orientation, displaying hierarchical data with parent and child nodes connected by curved links. The tree layout is computed using `d3.layout.tree`, and links are drawn as SVG paths using `d3.svg.diagonal` with a custom projection that swaps x and y coordinates to achieve the horizontal layout. Nodes are rendered as circles with text labels, and the code uses D3 version 3.5.17, loading the library from a CDN. The data is hardcoded as a JavaScript array with nested objects representing the tree structure.

Simple d3.js Bullet Chart example

This simple d3.js example demonstrates bullet charts, a compact alternative to gauges for displaying performance metrics against qualitative ranges and target markers. It renders two datasets—CPU Load and Memory Used—from a JSON file using SVG elements. The code implements the chart as a reusable custom component, `d3.bullet`, and includes a button that triggers a transition, animating random updates to the measures and markers over one second with `chart.duration(1000)`.

Simple d3.js Graph

This simple d3.js graph displays a time series of closing stock prices from a CSV file, with dates on the x-axis and values on the y-axis. Rendered as an SVG line chart, it uses d3.svg.line, d3.time.scale, and d3.scale.linear to map the data, while d3.svg.axis generates the axes. The data.csv file contains 26 daily entries from March to May 2012, positioned within a 600×270 pixel canvas with margins. The code also applies a steelblue stroke to the line and grey axis lines via CSS.

SANKEY Experiment

A Sankey diagram displays the flow of "Widgets" between five nodes, with links showing the directed transfer values. Built with D3.js version 3.5 and the sankey.js plugin, the SVG visualization renders nodes as draggable rectangles and links as curved paths whose thickness encodes flow magnitude. Data loads from an external JSON file, and the chart supports interactive node repositioning, which triggers recalculation of link paths through the sankey.relayout() method. Node and link hover tooltips reveal names and formatted values.

Collapsible Tree Example

This example shows a static tree diagram with a root node branching into two levels of child nodes, using text labels and circular markers connected by curved links. The visualization renders in SVG via D3.js version 3.5, using the `d3.layout.tree` for hierarchical positioning and `d3.svg.diagonal` for link paths. The code defines a fixed dataset inline and normalizes node depth for horizontal spacing, though it lacks the interactive collapse-and-expand behavior of the original Bostock example it derives from.

Simple line graph in d3.js

This example shows a simple line graph plotting stock closing prices over time, with date values on the x-axis and price on the y-axis. The visualization uses D3.js version 3.5.17, employing `d3.time.scale` for the date range, `d3.scale.linear` for the value axis, and `d3.svg.line` to generate the path. Data is loaded from a local CSV file via `d3.csv`, with the axes created through `d3.svg.axis`. The SVG rendering includes styled axis lines and a steelblue line, providing a minimal teaching example for D3 chart construction.

Favorite tooltip (complex version) v5

This example shows a line chart of stock closing prices over time, with an interactive tooltip that follows the mouse cursor. As the user moves over the chart, a dashed crosshair and a highlighted data point appear, along with text displaying the exact date and closing value. Built with D3.js v5, the visualization uses SVG rendering and relies on `d3.line`, `d3.scaleTime`, `d3.bisector`, and `d3.mouse` to compute and display the nearest data point from the provided CSV data.

Favorite tooltip (simple version) v5

This line chart displays a time series of daily closing values from a CSV file, with a tooltip that follows the mouse to reveal the nearest data point. Built with D3 v5 as an SVG visualization, it uses `d3.line`, `d3.scaleTime`, and `d3.scaleLinear` to render axes and the path. A transparent overlay rectangle captures mouse movements, and a `d3.bisector` finds the closest date to position a highlighted circle, which appears on mouseover and hides on mouseout.

Simple Line Graph v5

A simple line graph displays daily closing prices over roughly six weeks, extracted from a CSV file with date and value columns. The visualization uses an SVG path rendered through D3 v5's `d3.line()` generator, with a time scale for the x-axis and a linear scale for the y-axis. Margins are set explicitly, and both axes are drawn using `d3.axisBottom()` and `d3.axisLeft()`. The date strings are parsed with `d3.timeParse()`, and the line is styled with a steelblue stroke.

Favorite tooltip (complex version)

This interactive line chart displays a time series of stock closing prices, with a crosshair and tooltip that track the mouse to reveal the exact date and value at the nearest data point. The visualization, built with D3.js (version 3.5.17), renders the data from a CSV file as an SVG line chart. It uses D3’s time scale, linear scale, and axes, while the tooltip logic relies on a bisector to find the closest point and updates the position and text of SVG elements on mousemove events.

Favorite tooltip (simple version)

This example shows a time-series line chart of stock closing prices, with a tooltip that highlights the nearest data point as the mouse moves across the chart. The chart uses D3.js version 3.5 to parse dates, scale the axes, and draw the line and axes as SVG elements. A hidden circle is repositioned using the `bisectDate` function and the `d3.mouse` coordinates, appearing only during mouseover. The data comes from a CSV file with date and close price columns, rendered with a steel-blue line and grey axes.

Full Difference Chart v5

This example visualizes the daily difference in Leanpub book downloads between "R Programming for Data Science" and "The Elements of Data Analytic Style" from April to June 2015. The chart uses filled areas above and below a baseline to show which book has more daily sales, overlaid with two distinct line series for each book. Built with d3.v5 and rendered as SVG, the code uses `d3.area`, `d3.curveBasis`, `d3.nest`, and `d3.scaleTime`/`d3.scaleLinear`. Data is loaded from a CSV file via `d3.csv`.

Full Difference Chart Example

This chart visualizes the difference in daily Leanpub book sales between two titles, “Science vs Style,” using an area graph with color-coded regions (orange for above, green for below) to highlight performance gaps. It renders via D3.js (version 3.5.6) with SVG, employing time and linear scales, area and line interpolations, and clip paths to delineate the positive and negative differences. Data from `downloads.csv` is parsed, grouped by date, and transformed to compute daily deltas, with axes and a legend providing context. The visualization is an example from the book *D3 Tips and Tricks* by d3noob.

Simple Difference Chart v5

This difference chart shows the daily change in Leanpub book sales for two titles, “R Programming for Data Science” and “The Elements of Data Analytic Style,” over time. The difference between the two series is filled in with orange above zero and green below zero, using clipped areas. The code uses D3 v5’s APIs including `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.area`, and `d3.nest` to structure the CSV data. The chart renders as an SVG, with lines for each series drawn via `d3.area` and `d3.curveBasis`.

Simple Difference Chart v4

This example shows the daily difference in downloads between two Leanpub books, “R Programming for Data Science” and “The Elements of Data Analytic Style,” over several weeks. The chart uses a filled area with two clips to highlight when one book’s sales exceed the other, with green and orange regions above and below a baseline. It is built with D3 v4, using `d3.area` with `d3.curveBasis`, `d3.scaleTime`, `d3.scaleLinear`, and SVG rendering. Data comes from a CSV file and is transformed with `d3.nest` and `d3.timeParse`.

Simple Difference Chart

A simple difference chart visualizes the daily change in Leanpub book downloads for two titles, "Science" versus "Style," from April to June 2015. The chart uses D3.js version 3.5.5 with SVG rendering, employing `d3.svg.area` and `d3.svg.line` to show two time-series lines and a filled region indicating the difference between them. The data is loaded from a CSV file using `d3.csv`, then restructured with `d3.nest` to compute daily differences. The area is colored differently above and below zero using clip paths.

Multi-line graph 4 with v5: Toggle

This multi-line chart displays monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010, with each series distinguished by a color-coded legend. Clicking a legend label toggles the visibility of its corresponding line, which fades in or out via a transition. Built with D3 v5, the visualization uses `d3.nest()` to group data by symbol, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line()` for paths. The underlying data comes from a local CSV file.

Multi-line graph 3 with v5: Legend

This interactive multi-line chart displays monthly stock prices for Microsoft, Amazon, and IBM from January 2000 to March 2010, with each series distinguished by a color from the Category 10 palette. Built with d3.v5, it renders lines as SVG paths and includes a legend beneath the plot, where each company name is color-coded to match its line. The dataset, sourced from Mike Bostock’s small multiples example, is grouped by symbol using d3.nest(), with scales defined by d3.scaleTime and d3.scaleLinear for the axes.

Multi-line graph 1 with v5: Lines

This example shows monthly stock prices for Microsoft, Amazon, and IBM as separate lines on a shared time axis. It demonstrates how to group data by symbol using `d3.nest` and render each group as a distinct path with the `d3.line` generator. The SVG output includes axes created with `d3.axisBottom` and `d3.axisLeft`, while scales are defined via `d3.scaleTime` and `d3.scaleLinear`. The stock data originates from Mike Bostock’s small multiples example, and the chart uses d3.v5.

Multi-line graph 2 with v5: Colours

This example displays monthly stock prices for Microsoft, Amazon, and IBM as a multi-line graph, with each line assigned a distinct color from the d3.schemeCategory10 scale. The code uses d3.csv to load the data, d3.nest to group entries by symbol, and d3.line with d3.scaleTime and d3.scaleLinear to render the paths. The SVG canvas is built with D3 v5, and axes are added via d3.axisBottom and d3.axisLeft. It is the second in a series demonstrating multi-line graph techniques.

Graph and table with tricks in v5

This example combines a line chart with an interactive HTML table on a single page. The SVG graph plots the `close` values from a CSV file over time, using d3 v5's `d3.line`, `d3.scaleTime`, and `d3.scaleLinear` for the axes. The accompanying table, generated with `d3.select("body").append("table")`, displays the raw `date`, `close`, `open`, and a calculated `diff` column. The table’s rows are sorted in descending order by the `close` value via `d3.descending`, demonstrating table manipulation alongside the chart.

Adding links to objects in v5

This example shows how to make an SVG rectangle clickable as a hyperlink in D3 v5, with text displayed on top that remains transparent to pointer events. It uses d3.select and .append to create the SVG container, an anchor element with xlink:href, and a styled rect element. The text element uses pointer-events set to "none" so clicks pass through to the linked rectangle beneath. The code draws a light-green, rounded rectangle with the word "gongoozler" centered inside, linking to the corresponding Wikipedia page.

Simple graph with table in v5

A simple line graph displays closing stock prices over time, with a data table shown below it that lists the same date and close values. Built with d3.v5, the example uses `d3.csv` to load the data, `d3.timeParse` to format dates, and `d3.line` with `d3.scaleTime` and `d3.scaleLinear` to render the SVG path. Axis labels are generated via `d3.axisBottom` and `d3.axisLeft`. The table is constructed dynamically using a custom `tabulate` function that appends HTML rows and cells.

Input test

A single-page D3.js v5 visualization demonstrates how an HTML range input controls the rotation of two text elements. The page displays "d3.js" and "d3noob.org" as SVG text, and a slider labeled "angle" adjusts the transform attribute of both labels. Moving the slider rotates the first label clockwise from 0 to 360 degrees while the second rotates counterclockwise in the opposite direction, with the current angle displayed live. The code uses D3's selection API, including `d3.select` and `.attr("transform", ...)`, to update the SVG elements in response to the input's `on` event handler.

Input (number) test

This example demonstrates how an HTML number input controls the rotation of a text element in an SVG. A label displays the current angle value, while a d3-selected input fires an update function on each change. The code uses d3.v5 to select the input, append an SVG, and apply dynamic transform attributes with `rotate()`. The text element, initialized at zero degrees, rotates from 0 to 360 degrees in 5-degree steps as the user adjusts the input.

Input test

This example demonstrates how to rotate an SVG text element using an HTML range input slider. The text “d3noob.org” initially sits at a 0-degree angle, and moving the slider from 0 to 360 changes the rotation transform. The code uses d3.v5 to select the slider and text, listen for the “input” event, and update the text’s `transform` attribute with the current angle. The angle value is also displayed in a label and reflected in the slider’s property. Rendering is done through inline SVG appended to the body.

Double Input Test

This example demonstrates a blue outlined rectangle centered on an SVG canvas, with its height and width controlled by two HTML range input sliders. The visualization uses D3.js v5 to bind `input` events on the sliders, updating the rectangle’s `height`, `width`, `x`, and `y` attributes dynamically. The initial dimensions are set to 150 pixels high and 100 wide, while the slider text labels reflect the current values. The code uses `d3.select` to attach event listeners and `holder.selectAll` to modify the rectangle’s rendered attributes.

Input test (circle)

This example demonstrates interactive control of a circle’s radius using an HTML range slider. A blue-outlined circle is drawn in an SVG canvas at a fixed position, and its radius updates live as the user drags the slider. The code uses D3 v5’s `d3.select` and `on("input")` event listener to call an `update` function, which adjusts the circle’s `r` attribute and displays the current value in a label. The initial radius is set to 120, and the slider ranges from 1 to 150.

Multiple line graph in v5

This example shows two time-series lines, one for closing prices and one for opening prices, plotted against dates from a CSV file. The visualization uses d3.scaleTime and d3.scaleLinear to map data to x and y axes, with d3.line generating the two path elements. A steelblue line represents the close values, while a red line, styled via a second `.line` class, represents the open values. The axes are rendered with d3.axisBottom and d3.axisLeft in an SVG container sized at 960 by 500 pixels.

Toggling element visibility in v5

This interactive line chart displays two time series from a CSV file, showing closing and opening values over dates. The visualization allows users to toggle the visibility of each line by clicking on its corresponding legend label. Built with D3.js v5, it uses `d3.line`, `d3.scaleTime`, and `d3.scaleLinear` to construct the SVG paths, while legend clicks dynamically adjust the `opacity` of each line group.

Looping a transition in v5

This example demonstrates a looping transition in which a steelblue circle travels from the left side of an SVG canvas to the right and back again, repeating indefinitely. It shows how to chain two sequential transitions on the same element by using the `transition` API from d3-transition, with the `.duration()` method controlling the 2000-millisecond timing for each leg. The circle’s position is set with `.attr('cx', ...)` and `.attr('cy', ...)`, and the `on("end", repeat)` callback restarts the entire sequence, creating seamless motion across the 960×500 viewport.

Transition Easing Comparison in v5

This example compares ten D3 v5 easing functions—including easeElastic, easeBounce, easeLinear, and easeBack—by animating steel-blue circles moving horizontally back and forth across an SVG canvas. Each circle loops its transition indefinitely using `.transition()`, `.ease()`, and `.duration()`, with its easing type labeled to its right. The code uses default easing parameters and renders vector graphics via SVG, with repeated transitions chained through the `"end"` event listener.

Simple transition in v5

A simple transition moves a blue circle horizontally across an SVG canvas in d3.v5. The example demonstrates the d3-transition API by animating the circle’s `cx` attribute from 40 to 920 pixels over 4000 milliseconds. The code builds the scene by appending a circle to the SVG, setting its initial position and fill, then chaining the transition with a duration. It uses `d3.select` to target the body and `transition()` to interpolate the positional change.

Simple transition chaining in v5

A blue circle moves across an SVG canvas in three sequential transitions, each lasting four seconds. First, its horizontal position animates from the left side to the right side; then its radius grows from 20 to 40 pixels; finally, its fill color changes from blue to red. This example demonstrates transition chaining in D3 v5, where calling `.transition()` after a previous transition schedules the next animation to begin automatically. It uses D3’s `transition` API with `.duration()` and `.attr()`/`.style()` methods.

Simple transition in v5

Area graph with gradient in v5

This example shows a time-series area chart of stock closing prices with a multi-color gradient that shifts from red through black to green based on the y-axis value. The area fills beneath the line, while the x-axis uses time scaling and the y-axis uses linear scaling. Built with D3 v5, it loads data from a CSV file and renders as SVG. The gradient is defined using an SVG `linearGradient` with `userSpaceOnUse` units, created via D3’s selection and data-join methods, and applied to a path generated with `d3.area`. Axis helpers `d3.axisBottom` and `d3.axisLeft` add the scales.

Line graph with gradient in v5

A line graph displays stock close prices over time, with the line colored by a vertical gradient that shifts from red to black to green based on the y-axis value. The example uses d3.csv to load date and close data, d3.timeParse for date formatting, and d3.scaleTime/scaleLinear for axes. A linearGradient element with multiple stop offsets is applied via the stroke URL reference, while d3.line generates the path and d3.axisBottom/axisLeft render the scales. The SVG output is built entirely with D3 v5.

Using an 'if' statement in v5

This example shows a time-series line chart of stock closing prices over a month, with an overlaid scatterplot of individual data points. The points are colored conditionally: red when the closing price is less than or equal to 400, and black otherwise. Built with d3.js v5 and rendered as SVG, it uses `d3.line`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft`. Data is loaded from a CSV file and parsed with `d3.timeParse`. A simple inline `if` statement within the fill function demonstrates filtering logic for visual encoding.

Filtering in v5

A scatterplot displays date-versus-value data from a CSV file, drawing a steelblue line for the full series and red dots only for points with values below 400. The example, built with d3.js v5, uses `d3.csv` to load data, `d3.scaleTime` and `d3.scaleLinear` to map coordinates, and applies a `.filter()` operation during circle creation to highlight only the low-value entries. SVG rendering shows the filtered points alongside the complete line and axes.

Colours Page

This example displays a grid of color swatches, each labeled with its corresponding named color value. It uses the d3.csv function to load color names from a CSV file and then creates an SVG for each entry. Each SVG contains a rounded rectangle filled with the color, a text label with a white shadow for readability, and a bold black text overlay showing the color's name.

Northern hemisphere sea ice extent

This spiral heatmap visualizes Northern hemisphere sea ice extent from 1978 onward, with each coil representing one year and each arc a single day, colored from blue to red via a sequential spectral scale. The chart uses D3 v4 to render SVG paths, with a custom `spiralHeatmap()` function that computes quadratic Bezier curves for each arc segment. Month labels and tick lines are drawn around the circumference, while the data is loaded from a CSV file containing daily extent measurements.

Simple tooltips in v5

A simple line chart plots stock closing prices over time using a dataset from a CSV file. The visualization adds interactive tooltips that appear on mouseover for each data point, displaying the formatted date and closing value. Built with d3.js v5, the chart uses `d3.csv`, `d3.timeParse`, `d3.scaleTime`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft`. SVG circles are overlaid on the line, and a tooltip div animates opacity on hover using the `d3.event` coordinates for positioning.

Multi-links in tooltips using v5

This example shows a line chart of stock closing prices over time, where each data point is a circle with a tooltip. Hovering over a circle reveals a hyperlink to a related d3.js example, along with the formatted date and price. The visualization uses d3.v5’s `d3.csv`, `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft`. Circles are drawn with SVG, and tooltips are HTML divs that appear on `mouseover`, linking out to external URLs stored in the CSV data.

Tooltip with link in v5

A line chart shows stock closing prices over time, with each data point rendered as a circle. Hovering over a circle triggers a tooltip containing the formatted date and price, where the date is wrapped in a hyperlink. The visualization uses D3 v5 with `d3.csv` for data loading, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` for the path. The tooltip is a div updated via mouseover events and animated with a CSS transition.

SANKEY Experiment

A dynamic Sankey diagram visualizes the flow of values between five nodes using D3.js v5 and the Sankey plugin layout methods (`d3.sankey`, `sankey.layout`, and `sankey.link`). The SVG-based chart renders colored nodes and curved links with widths proportional to link values, supporting interactive node dragging via `d3.drag` to reposition elements and trigger `sankey.relayout()`. Data from a static JSON file defines node connections and quantitative weights, with hover tooltips showing source–target pairs and formatted widget counts. The example demonstrates custom link-path generation for a compact, explorable flow network.

SANKEY Experiment

This Sankey diagram visualizes global greenhouse gas emissions from 2005 using data sourced from the World Resources Institute, showing the flow of emissions from energy, industrial processes, and land use change through intermediate sectors to specific gases. The diagram uses d3.v5 with a custom `d3.sankey` layout, rendering nodes as draggable SVG rectangles and links as curved paths with stroke widths proportional to flow values. Node positions update interactively through `d3.drag` and `sankey.relayout()`.

SANKEY Experiment

This example shows a small data flow between named entities (Barry, Frodo, Elvis, Sarah, Alice) as a sankey diagram, with colored, draggable nodes and curved links whose widths scale with link values. It loads external CSV data, processes it into nodes and links, then uses the custom `d3.sankey` layout and `sankey.link()` path generator to render the SVG. Colors come from `d3.scaleOrdinal` with `d3.schemeCategory10`, and interactive dragging triggers `sankey.relayout()` to update paths.

SANKEY Experiment

This example shows a small Sankey diagram with seven links connecting five nodes, visualizing the flow of "Widgets" between named sources and targets. The code builds the diagram using the d3.js v4 library, loading link data from an external CSV file and parsing it into node and link objects. The diagram renders as an SVG with draggable node rectangles and curved link paths, using d3.sankey for layout, d3.csv for data loading, and d3.drag for interactive node movement.

SANKEY Experiment

This is a Sankey diagram built with D3 v4, showing the flow of widgets between named sources and targets such as Barry, Frodo, and Alice. The visualization loads its link data from an external CSV file, then constructs nodes and edges dynamically. It uses the `d3.sankey` layout with a custom `sankey.js` implementation to compute node positions and link thicknesses. Nodes are draggable via `d3.drag`, and the diagram is rendered as SVG with semi-transparent links and color-coded node rectangles.

SANKEY Experiment

This Sankey diagram shows the flow of "Widgets" between five named nodes, with link thickness indicating the quantity transferred. Built with D3.js v5 and a custom `d3.sankey` plugin, it loads JSON data with node names, maps links accordingly, and lays out the graph automatically. The diagram supports interactive dragging of node rectangles, which triggers a `relayout()` to update link paths. Rendering uses SVG elements with semi-transparent curved paths and categorical color fills per node.

SANKEY Experiment

This example shows a small Sankey diagram with five nodes and seven links, visualizing the flow of “Widgets” between process stages. The diagram updates live as the user drags nodes, re-layouting the links to match new positions. The code uses D3 v5 with a custom `d3.sankey` layout function, drawing the diagram as SVG paths and rectangles. It sets node width, padding, and link stroke opacity, and colors nodes with `d3.scaleOrdinal` and `d3.schemeCategory10`. The layout is computed with `sankey.layout(32)` iterations, and drag behavior uses `d3.drag`. Data loads from `sankey.json` via `d3.json`.

SANKEY Experiment

This example demonstrates an interactive Sankey diagram with draggable nodes using d3.js v5. The visualization shows flow relationships between five nodes with seven weighted links, rendered as SVG paths and rectangles. The code loads data from a JSON file via d3.json, applies the d3.sankey plugin for layout computation, and uses d3.drag to enable node repositioning. A relayout function recalculates link paths dynamically when nodes are dragged. The diagram uses color from d3.scaleOrdinal and formats values as "Widgets" units.

SANKEY Experiment

A Sankey diagram visualizes the flow of widgets between five nodes, with link widths proportional to the volume of each connection. The code loads data from a JSON file and uses d3.sankey(), d3.drag(), and standard SVG elements to render the network. Nodes are draggable, triggering a relayout that recalculates link paths in real time.

Collapsible tree diagram in v5

This interactive collapsible tree diagram displays a hierarchical dataset with parent nodes that can be clicked to collapse or expand their child branches. The visualization uses d3.tree() to compute node positions, d3.hierarchy() to structure the data, and SVG paths drawn with a custom diagonal function for the linking curves. Nodes are rendered as circles with text labels, and transitions animate with 750-millisecond duration when the tree structure changes. The example derives from Mike Bostock's collapsible tree and uses d3.v5's selection, transition, and merge APIs for smooth interactive updates.

Tree diagram from csv using v5

A horizontal tree diagram visualizes a parent-child hierarchy loaded from a CSV file, showing five nodes across three levels from a single root. The D3.js v5 code uses `d3.csv` for data ingestion, `d3.stratify()` to convert the flat table into a hierarchy, and `d3.tree()` for layout. Nodes are rendered as SVG circles with text labels, while curved paths connect parent and child nodes using the `d3.hierarchy` API. The example demonstrates an update to D3 v5 with a simple, readable structure.

Tree diagram from csv using v4

This tree diagram visualizes hierarchical data loaded from a CSV file, displaying nodes as white circles with steel-blue outlines connected by curved gray links. The visualization uses d3.v4's `d3.tree` layout, `d3.stratify` to convert flat parent-child records into a hierarchy, and `d3.hierarchy` to map the structure. Text labels appear beside each node, positioned differently for internal versus leaf nodes. The SVG rendering includes CSS styling for node circles, text shadows, and link strokes, following the D3 Tips and Tricks book example.

Tree diagram using flat data with v5

This example shows a horizontal tree diagram built with D3 v5, displaying hierarchical data from a flat array of name and parent fields. It converts the flat data into a hierarchy using `d3.stratify`, then applies the `d3.tree` layout to position nodes. The SVG rendering includes curved `path` links between nodes, with circles for nodes and labels positioned to the right for leaves and left for internal nodes. The code uses `d3.hierarchy` and D3 selections to append elements, styled with CSS for node fills and link strokes.

Tree diagram using flat data with v4

This tree diagram visualizes hierarchical relationships from flat, parent-child data, rendering nodes and curved links in an SVG. It uses d3.stratify() to convert the flat data into a hierarchy, then applies the d3.tree() layout to position nodes. The code assigns node names via treeData.each(), draws paths for links with cubic Bézier curves, and styles circles and text for internal and leaf nodes. The example demonstrates d3 v4’s approach to handling non-nested data, with margins and dimensions set explicitly for the SVG output.

Tree diagram loading external json with v5

This example shows a tree diagram that visualizes hierarchical data loaded from an external JSON file. The diagram uses a horizontal layout where parent nodes appear on the left and child nodes extend to the right, with circular markers and text labels for each node. The visualization is rendered as an SVG, built with d3.js v5, using the `d3.tree()` layout algorithm, `d3.hierarchy()` for structuring parent-child relationships, and `d3.json()` for asynchronous data loading. The data itself is a simple family tree with a top-level node, two second-level nodes, and two leaf nodes.

Tree diagram loading external json with v4

This tree diagram visualizes hierarchical data loaded from an external JSON file, using d3.v4’s `d3.tree` layout and `d3.hierarchy` to define parent-child relationships. It renders an SVG with curved link paths and circular node markers, with text labels positioned based on whether a node has children. The code demonstrates the v4 syntax for loading external data via `d3.json` and appending nodes and links to a group element, based on a horizontal tree layout example.

Tree diagram using images for nodes in v5

This tree diagram displays hierarchical data using images for each node, with links color-coded by the `level` property from the data. Built with D3 v5, it uses `d3.tree()` and `d3.hierarchy()` to compute the layout, then renders nodes as SVG `<image>` elements with `xlink:href` pointing to `d.data.icon`, while small labels appear beside each icon. The connector paths are drawn as cubic Bézier curves with the `.link` class, and all elements are styled via inline CSS. The data is embedded as a JSON object in the script.

Tree diagram using images for nodes in v4

This example shows a hierarchical tree diagram in which each node is represented by an image icon instead of the conventional circle or rectangle, with text labels placed to the left of internal nodes and to the right of leaf nodes. The code uses d3.tree, d3.hierarchy, and SVG path elements to draw the curved links between parent and child nodes, with link stroke colors derived from a "level" property in the data. Node images are added via the SVG image element, using an "icon" URL from each data object, while labels are positioned with d3’s enter selection and text anchors. The layout is sized to 660 by 500 pixels with margins, and the data is a static JavaScript object embedded in the page.

Tree diagram with styling in v5

This tree diagram shows hierarchical data with styled nodes and links. Node circles vary in radius based on a `value` field, while stroke and fill colors come from `type` and `level` properties. Links are curved paths with colors derived from the child’s `level`. The example uses d3.v5’s `d3.tree()` layout and `d3.hierarchy()` to structure the data, with SVG rendering for all elements. CSS classes style nodes and links, and text labels include leaf and internal node distinctions.

Tree diagram using symbols for nodes in v5

A tree diagram in d3.js v5 uses symbols for nodes instead of circles, with each symbol’s shape and size reflecting a numeric value from the hierarchical JSON data. The example applies `d3.tree()` layout, `d3.hierarchy()`, and `d3.symbol()` with conditional types (`d3.symbolCross` for values ≥9, `d3.symbolDiamond` otherwise). Links are drawn as cubic Bézier paths, with stroke colors set from each child’s `level` field, while node fills use the `type` field. Rendering is SVG, styled via CSS.

Tree diagram using symbols for nodes in v4

This tree diagram uses D3.js v4 to visualize hierarchical data with nodes represented by geometric symbols instead of traditional circles or text markers. The example loads a static JSON dataset and applies D3’s `d3.tree()` layout, with `d3.hierarchy` structuring the parent-child relationships. Link paths between nodes are styled with strokes based on each node's nested `level` property, while each node’s symbol shape and fill are determined by `d3.symbol()`—using `symbolCross` for values above nine and `symbolDiamond` below—and sized by the node's `value` attribute. The SVG rendering includes internal and leaf nodes with text labels positioned relative to each symbol.

Tree diagram with styling in v4

This example shows a hierarchical tree diagram with styled nodes and links, where circles represent data objects using radius, stroke, and fill colors mapped from the source data. The layout is generated with d3.tree, while d3.hierarchy assigns the parent-child relationships from the inline JSON tree structure. The SVG rendering includes curved link paths between nodes, and node circles use values for radius plus type and level fields for stroke and fill styling. Text labels are positioned by horizontal anchor direction, which changes for internal versus leaf nodes.

Simple vertical tree diagram using v5

This example presents a vertical tree diagram built with d3.js v5, displaying a small parent-child dataset with nodes labeled "Top Level," "Level 2: A," and their descendants. It shows the hierarchical structure through SVG rendering, with circular nodes connected by curved paths. The code uses `d3.hierarchy` to process the nested data and `d3.tree()` to compute layout positions. Links are drawn as cubic Bézier curves via path string generation, while each node is a group containing a circle and centered text label, with internal nodes styled slightly differently from leaves.

Simple horizontal tree diagram using v5

A simple horizontal tree diagram visualizes hierarchical data with three levels: a top-level root node, two second-level branches, and two leaf nodes. The code uses D3.js v5’s `d3.tree()`, `d3.hierarchy()`, and `d3.select()` APIs to compute the layout and render SVG paths for curved links and circles for nodes, with text labels positioned left or right based on whether a node has children. The diagram is defined by a static JavaScript object `treeData` and styled via CSS classes.

Simple horizontal tree diagram using v4

A horizontal tree diagram shows hierarchical data with a top-level node branching into child nodes, with internal nodes labeled on the left and leaf nodes on the right. Built with d3.js v4, it uses the `d3.tree` layout and `d3.hierarchy` to compute node positions from a hard-coded JavaScript object. The SVG output renders circles for nodes, Bézier curve paths for links, and text labels styled via CSS. The code demonstrates standard d3 v4 tree-diagram APIs including `nodes.descendants()` and `node.append()`.

Simple bar graph in v5

This example shows a simple bar chart of sales figures by salesperson, with steel-blue bars and labeled axes on both sides. The data comes from a CSV file containing names and numeric sales values. The code creates a band scale for the x-axis and a linear scale for the y-axis, then uses `d3.csv` to load the data and `d3.axisBottom` and `d3.axisLeft` to render the axes. Bars are appended as SVG `rect` elements, with widths and heights computed from the scales. The chart uses D3 v5 and is rendered entirely in SVG.

Simple vertical tree diagram using v4

A simple vertical tree diagram visualizes a small hierarchical dataset with three levels, showing parent-child relationships through curved links and labeled circular nodes. It uses d3.v4’s `d3.hierarchy` and `d3.tree` APIs to compute the layout from an inline JavaScript object. The SVG rendering is styled with CSS, with internal nodes distinguished by text shadows, and the code is intended as a starting point for upgrading examples in the book *D3 Tips and Tricks* to version 4.

Simple histogram using v5

This histogram displays the frequency of earthquake magnitudes recorded in the `earthquakes.csv` dataset, binned by month. Using d3.v5, it parses dates with `d3.timeParse`, applies the `d3.histogram` API with monthly thresholds set via `x.ticks(d3.timeMonth)`, and renders the bins as SVG rectangles. The x-axis uses `d3.scaleTime`, while the y-axis is scaled with `d3.scaleLinear`. Axes are added with `d3.axisBottom` and `d3.axisLeft`.

Simple histogram using v4

This histogram visualizes the frequency of earthquake magnitudes recorded in a CSV file, binning dates into monthly intervals. The chart uses D3 v4’s `d3.histogram()` and `d3.scaleTime()` to group data, with bars styled in steel blue via SVG. Axes are generated using `d3.axisBottom()` and `d3.axisLeft()`. The example demonstrates D3’s data-binding methods like `selectAll().data().enter().append()`, and the dataset is parsed with `d3.timeParse()`.

Simple bar graph in v4

This example shows a simple bar chart of sales figures per salesperson, rendered as SVG rectangles. It uses D3 v4 with a `d3.scaleBand` for the x-axis and a `d3.scaleLinear` for the y-axis, pulling data from an external CSV file. The chart includes bottom and left axes via `d3.axisBottom` and `d3.axisLeft`. Data is loaded asynchronously with `d3.csv`, and bar heights are calculated relative to the maximum sales value.

Dual axes in v5

This chart displays two time-series lines from a CSV file, each with its own color-coded y-axis. The steel blue line represents closing values on the left axis, while the red line shows opening values on the right axis, allowing comparison of differently scaled data. Built with D3 v5, the code uses `d3.line`, `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.axisRight` to render the SVG paths and axes. The axes and line colors are coordinated through CSS classes.

Dual axes in v5

A dual-axis line chart plots two time series from a CSV file, with one line in steel blue and another in red, each paired to its own y-axis. The example uses D3 v4 with `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`, `d3.axisLeft`, and `d3.axisRight` to render an SVG. The steel-blue axis appears on the left, the red axis on the right, and both lines share a common time-based x-axis. The styling is driven by CSS classes for axis text colors, as shown in the index.html file.

Labels on multiple lines v5

Two time series lines show daily open and close stock prices from a CSV file, with each line labeled at its final value on the right edge of the chart. The graph uses d3.line to generate the paths, d3.scaleTime and d3.scaleLinear for the axes, and d3.axisBottom and d3.axisLeft to render them. Text labels for “Open” and “Close” are placed manually via SVG text elements, positioned using the y-scale at the last data point. The example is built with D3 v5 and renders to SVG.

Simple graph with grid lines in v5

This example shows a line graph of stock closing prices over time, enhanced with light gray grid lines for both the x- and y-axes. The chart loads CSV data with dates and values, parses the dates, and scales the data using `d3.scaleTime` and `d3.scaleLinear`. Grid lines are generated via `d3.axisBottom` and `d3.axisLeft` functions, with tick marks extended across the plot area. The line path is drawn with `d3.line`, and axes are rendered using D3 v5’s SVG-based axis components.

Simple graph with filled area in v5

This example shows a time series line graph with a filled area beneath it, displaying stock close prices over a month. The chart uses D3 v5 with SVG rendering, where the area is generated by the `d3.area` API and the line by `d3.line`. Data is loaded from a CSV file and parsed with `d3.timeParse`. Axes are added using `d3.axisBottom` and `d3.axisLeft`, with scales defined via `d3.scaleTime` and `d3.scaleLinear`.

Drop shadow on text in v5

This example displays an area chart of stock closing prices over time, with a titled axis and a line overlay. The visualization uses D3 v5 to render SVG shapes, including a shaded area path and a stroked line, while the main title is drawn twice to create a drop-shadow effect. The first text element uses a white stroke and opacity to simulate the shadow, and a second text element is placed on top. Data is loaded from a CSV file and parsed with `d3.timeParse`, with scales and axes created using `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft`.

v5 curve interpolation comparison

This visualization compares eight D3 v5 curve interpolation methods by rendering the same time-series dataset (Apple stock prices from April and May 2012) as distinct colored lines. Each curve—including curveLinear, curveStep, curveBasis, and curveCardinal—is drawn as an SVG path with a shared date-time x-axis and linear y-axis, plus an overlaid scatterplot of the original data points. Clicking a legend label toggles the corresponding line’s opacity with a 100-millisecond transition. The code uses d3.line(), d3.scaleTime(), d3.scaleOrdinal(), color legend, and d3.axisBottom/Left.

Scatterplot with v5

This example shows a time-series line graph of stock closing prices, with circular scatterplot points overlaid on each data value. The visualization uses a steelblue line and dark circles to highlight individual daily observations across the date range. Built with d3 v5 and rendered as SVG, the code employs `d3.csv` to load the data, `d3.timeParse` for date formatting, and `d3.line` for the path, while `d3.scaleTime` and `d3.scaleLinear` handle the axes. The scatterplot points are appended as SVG circles positioned via the same x and y scales.

Axis Labels in v5

This example displays a line graph of stock closing prices over time, annotated with "Date" and "Value" axis labels. Built with D3 v5, it uses `d3.timeParse`, `d3.scaleTime`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` to render an SVG path and axes from a CSV dataset. The labels are added as SVG text elements positioned using margin and dimension calculations, demonstrating custom axis labeling in D3 v5.

Formatted time labels for an axis with v5

A line graph plots stock closing prices over time using a date-value CSV. The x-axis uses formatted time labels rotated at a steep angle to prevent overlap, displaying dates in a year-month-day format. Built with d3.v5, it employs `d3.timeParse` to parse dates, `d3.scaleTime` for the axis, and `d3.axisBottom` with a `d3.timeFormat` tick formatter. The SVG rendering includes a styled line path and both axes.

Rotated axis labels in v5

A line chart displays stock closing prices over time, with the x-axis labels rotated at a steep angle to prevent overlap. The visualization uses d3.csv to load date and price data, then maps dates with d3.scaleTime and values with d3.scaleLinear. The line path is drawn via d3.line, while d3.axisBottom and d3.axisLeft generate the axes. Rotated labels are styled by selecting axis text elements and applying a transform of rotate(-65) with adjusted text-anchor and offsets. The SVG rendering approach follows d3 v5 patterns.

Nov 24, 2019

Simple line graph with v4

A simple line graph shows the closing price of a dataset over time, with dates on the x-axis and values on the y-axis. Using d3.v4, the code loads a CSV file via `d3.csv`, parses dates with `d3.timeParse`, and constructs the line with `d3.line`. SVG scales and axes are built with `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`. The rendered SVG path displays a steelblue line, with margins and dimensions set explicitly.

Nov 24, 2019

Interactive tree v4 external json

This interactive tree diagram, built with d3.js v4 and rendered as SVG, displays hierarchical data loaded from an external JSON file. The visualization uses a collapsible tree layout, where clicking any parent node collapses the portion of the tree below it, and clicking again expands it. The code employs d3.tree, d3.hierarchy, and the d3.json API to parse the data, with animations handled by d3.transition to smoothly reposition nodes and links. The nodes are drawn with circles and text labels, while curved diagonal paths represent the connections between parent and child elements.

Aug 29, 2018

Independent scale multi-line graph

This interactive chart displays monthly stock prices for Microsoft, Amazon, and IBM from January 2000 to March 2010, with each line normalized to its own independent y-axis scale. This allows viewers to compare the shapes and relative trends of each company’s price movements without being distorted by differing absolute price ranges. Built with D3 v4 in SVG, the visualization uses `d3.nest()` to group data by symbol and `d3.scaleLinear()` to assign each line its own vertical domain. Clicking a legend label toggles the corresponding line’s opacity via a `transition()`, while `d3.axisBottom()` renders the shared time axis. Data originates from a CSV file.

Jul 21, 2018

Collapsible tree diagram in v4

A collapsible tree diagram presents a hierarchical dataset as an interactive node-link visualization. Users can click any parent node to collapse the subtree beneath it, hiding its descendants, and click again to expand it. The diagram uses smooth CSS transitions for animation as nodes and links move to their new positions. Built with the d3.v4 library, it uses `d3.hierarchy` and `d3.tree()` to compute the layout, and SVG elements for rendering. Node circles and connecting paths are styled with CSS, and the dataset is a simple JavaScript object with nested `children` arrays.

Oct 12, 2017

Sonagraph

This example shows a real-time waterfall spectrogram that maps audio frequency data from the user’s microphone into a scrolling visual of colored pixels. It uses the Web Audio API’s `AnalyserNode` to capture frequency amplitudes, then renders each frame onto an HTML5 Canvas. The code copies the canvas with `drawImage`, shifts it downward via `translate`, and colors each frequency bin using the chroma.js color scale, producing a continuously updating graph of sound over time.

Apr 10, 2017

Looping a transition in v4

A steelblue circle loops horizontally across a 960-pixel-wide SVG canvas, moving right for two seconds and then left for two seconds in a continuous cycle. The example demonstrates d3-transition chaining in d3.v4 using `.transition()` and `.duration()` to animate the `cx` attribute, with the `on("end")` event triggering the repeat function. This serves as a starting template for building more complex looping animations in D3 version 4.

Dec 30, 2016

Simple transition chaining in v4

A circle begins on the left side of an SVG canvas and performs three sequential transitions: it moves horizontally to the right over four seconds, then doubles its radius over another four seconds, and finally changes its fill color from blue to red. The example demonstrates the chaining of transitions in d3.js v4, where each call to `transition()` queues the next animation stage after the previous one completes. The scene renders as animated SVG, using the `d3.select`, `append`, and `attr`/`style` methods to construct and modify the circle element, with transition durations set in milliseconds.

Dec 28, 2016

Transition Easing Comparison in v4

Ten animated steel-blue circles demonstrate ten D3 v4 easing functions, with each circle labeled by its easing type (easeElastic, easeBounce, easeLinear, and so on). Every circle repeatedly transitions horizontally 210 to 720 pixels and back over four seconds using `transition().ease()` with the corresponding default function. The example uses SVG elements rendered in an HTML page loading d3.v4.min.js, and each animation loops indefinitely via the transition’s `"end"` event. The static labels and moving circles highlight the distinct acceleration, deceleration, and overshoot patterns of each easing curve.

Dec 28, 2016

Simple transition in v4

A blue circle moves horizontally across an SVG canvas over four seconds, demonstrating a basic d3.js v4 transition. Using d3.select to append a circle with a blue fill, the example applies a transition with a duration of 4000 milliseconds and updates the cx attribute from 40 to 920 pixels. This illustrates the core transition API for animating SVG attribute changes in d3.js v4.

Dec 27, 2016

Multi-line graph 1 with v4: Lines

This example shows a multi-line graph comparing the monthly stock prices of Microsoft, Amazon, and IBM from 2000 to 2010. It uses D3 v4 with SVG rendering, parsing dates with `d3.timeParse` and nesting the CSV data by symbol via `d3.nest` to draw a separate line for each company. The lines are styled with a steel blue stroke, and both axes are generated using `d3.axisBottom` and `d3.axisLeft`. The data originates from a CSV file, and the code demonstrates grouping data to create multiple line series.

Multi-line graph 3 with v4: Legend

This example displays multiple stock price time series in a single SVG line chart, using D3 v4 to plot data for Microsoft, Amazon, and IBM from January 2000 through March 2010. The visualization distinguishes each company’s line with a categorical color from `d3.schemeCategory10` and adds an automatically generated legend, positioning text labels evenly across the chart’s width. The data, loaded from a CSV file, is parsed with `d3.timeParse` and nested by symbol using `d3.nest` to create separate lines. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, while scales are defined via `d3.scaleTime` and `d3.scaleLinear`.

Multi-line graph 2 with v4: Colours

A multi-line graph displays stock prices over time for Microsoft, Amazon, and IBM, with each company’s series drawn in a distinct color from a categorical palette. The visualization uses the D3 v4 library, parsing dates with `d3.timeParse` and rendering lines as SVG paths via `d3.line`. Data is loaded from a CSV file, grouped by symbol with `d3.nest`, and colored using `d3.scaleOrdinal` with the `d3.schemeCategory10` palette. The chart includes a time-based x-axis and linear y-axis, with the line colors assigned dynamically to distinguish each stock series.

Multi-line graph 4 with v4: Toggle

This interactive multi-line chart displays monthly stock prices for three companies (MSFT, AMZN, IBM) from 2000 onward, with a clickable legend that toggles each line’s visibility. Using D3 v4, the code parses CSV data with `d3.csv`, nests records by symbol, and renders SVG paths via `d3.line` and `d3.scaleTime`/`d3.scaleLinear`. Clicking a legend text triggers a 100ms `transition` on the corresponding line’s opacity, dynamically showing or hiding it. The legend colors are assigned with `d3.scaleOrdinal` and `d3.schemeCategory10`.

dc.js Experiment

This dc.js experiment visualizes earthquake data from New Zealand’s Geonet service, displaying events by magnitude and depth as bar charts, a line chart of events per hour, and a sortable data table. Built with crossfilter for multidimensional filtering, dc.js coordinates the charts, while D3.js handles SVG rendering and animated transitions. The dashboard loads a CSV file containing earthquake records and supports interactive filtering across all visualizations simultaneously.

Oct 29, 2016

SANKEY Experiment

A Sankey diagram visualizes the flow of "Widgets" between five named people, with link thickness proportional to transfer values. Built with D3 v4, it uses the `d3.sankey` plugin to compute node positions and link paths, rendering nodes as draggable SVG rectangles and links as cubic Bézier curves via `sankey.link()`. Data loads from a JSON file with named source and target references, which the code maps to node objects before layout. The scene updates interactively on drag, recalculating link depths through `sankey.relayout()`.

Sep 5, 2016

SANKEY Experiment

This example shows a Sankey diagram with five nodes and seven links, where the width of each link is proportional to its value, and nodes can be dragged to rearrange the flow. The visualization is built using D3 v4 and the `d3.sankey()` plugin, which handles node layout and link computation, while the SVG rendering uses `d3.select()` to append paths and rectangles. The code uses `d3.drag()` for interactive node movement, and the data is loaded from a JSON file with `d3.json()`.

Sep 5, 2016

SANKEY Experiment

A Sankey diagram visualizes the flow of quantities between five nodes, with node colors distinguishing categories and link thickness representing value. The diagram supports interactive dragging of nodes in both axes, recalculating link paths during movement. Built with D3 v4, it uses the d3.sankey plugin for layout and d3.drag for interaction. Data comes from a static JSON file, and the SVG rendering includes hover tooltips showing source, target, and formatted values in "Widgets" units.

Sep 5, 2016

Adding links to objects in v4

A hyperlink encloses a rounded rectangle, while the text label "gongoozler" sits on top. The example shows how to make a non-rectangular object clickable by adding an anchor element with `xlink:href` to the SVG, and how to let mouse clicks pass through the text to the link below it. The text uses `pointer-events: none`, so hovering or clicking the label triggers the rectangle's link. The code relies on D3 v4's selection and SVG creation methods to build the static graphic and set the necessary attributes.

Aug 18, 2016

Graph and table with tricks in v4

This example combines a line chart with an interactive HTML table, both generated from the same CSV dataset. The line chart plots the closing values over time using D3’s time-scaled x-axis and linear y-axis, while the table displays the raw date, close, open, and computed difference columns. The table’s rows are sorted by descending close value, and the column headers are capitalized automatically. The chart is drawn as an SVG path using `d3.line`, with axes created via `d3.axisBottom` and `d3.axisLeft`. The table is built with the D3 selection API, appending `table`, `thead`, and `tbody` elements to the page body.

Aug 17, 2016

Simple graph with table in v4

This example shows a line chart of stock closing prices over time, paired with an HTML table displaying the same underlying data. The visualization uses D3 v4’s `d3.line`, `d3.scaleTime`, and `d3.scaleLinear` to render the SVG path and axes, while the table is generated dynamically with D3’s data-join methods (`selectAll`, `enter`, `append`). The data is loaded from a CSV file and parsed with `d3.timeParse`. The table appears to the right of the chart when viewed in full screen.

Aug 17, 2016

Input (number) test

A number input field controls the rotation angle of a text element in an SVG scene. The example demonstrates a simple interactive data-binding pattern: a labeled HTML `<input type="number">` with min, max, and step constraints updates the `rotate` transform of a `<text>` element via d3.js v4's `d3.select(...).on("input")` event listener. The text "d3noob.org" is positioned at the center of a fixed 600×300 SVG canvas, and every input change recalculates its angle from 0 to 360 degrees. The source is a gist by d3noob, rendered entirely with SVG.

Input test

This interactive example demonstrates how an HTML range slider controls the rotation of two text labels. Dragging the slider changes the angle of "d3.js" text while simultaneously rotating "d3noob.org" in the opposite direction. The visualization uses D3 v4 to select the SVG elements and bind the input event to the update function, which modifies the rotate transform property of each text element. The page relies on D3's selection API (`d3.select`) and property accessor methods to synchronize the slider value with the displayed angle.

Input test

This example demonstrates how an HTML range slider can control the rotation of a text element rendered as SVG. The display shows the text “d3noob.org” centered on a 600 by 300 canvas, with its angle dynamically updated as the slider moves. Built with d3.js v4, the code uses d3.select to bind input events, update the displayed angle value, and apply rotation via the transform attribute’s rotate() function. The initial state is set to zero degrees, and the slider’s range spans from 0 to 360 degrees.

Double Input Test

This visualization demonstrates how two HTML range sliders independently control the height and width of a blue-outlined rectangle. The rectangle is centered within an SVG canvas, and its size adjusts in real-time as the user moves either slider. The example uses D3.js v4 to handle both the rendering and the input events. The code binds the sliders' `input` events to functions that update the rectangle's `y` and `height` attributes for the vertical control, and `x` and `width` for the horizontal control, while also updating the displayed value spans.

Input test (circle)

This example demonstrates a circle whose radius is controlled by an HTML range slider, with the current value displayed as text. It shows how user input can directly update a visual element in real time. A blue, non-filled SVG circle is drawn on a 600x300 canvas, and the slider’s "input" event triggers a D3 v4 update function that modifies the circle’s `r` attribute. The code uses D3 selections, `.on` for event handling, and `.attr` to bind the slider value to the circle’s radius.

Toggling element visibility in v4

A dual-line chart displays close and open prices from a CSV file over time, with each line assigned a distinct color (steel blue and red) and its own y-axis scale. Users can toggle the visibility of either line by clicking on its corresponding legend text. The code uses d3.csv to load data, d3.timeParse to parse dates, and d3.line, d3.scaleTime, and d3.scaleLinear to construct the paths and axes. Clicking a legend label toggles the line’s opacity via d3.select and style updates, with an active flag tracking visibility state.

Area graph with gradient in v4

This example shows an area graph of stock closing prices over time, with a custom gradient applied to the fill to create a color-coded visualization of price levels. The graph uses d3.area() to generate the area path and d3.scaleTime() and d3.scaleLinear() for the axes. A linearGradient element is appended to the SVG, with stop colors set to red, black, and lawngreen at various offsets, creating distinct bands. Data is loaded from a CSV file using d3.csv() and parsed with d3.timeParse().

Aug 15, 2016

Line graph with gradient in v4

This example shows a line graph of stock closing prices over time, with the line colored by a vertical gradient that shifts from red to black to green based on price levels. The visualization uses d3.v4 to load CSV data, parse dates with `d3.timeParse`, and render an SVG path via `d3.line`. A `linearGradient` with multiple stop points is applied to the line’s stroke, and axes are added using `d3.axisBottom` and `d3.axisLeft`. The data is drawn from `data.csv` containing date and close values.

Aug 15, 2016

Using an 'if' statement in v4

This example shows a line chart of stock closing prices over time, with points colored conditionally based on their value. The visualization combines a steelblue line path with circles that are red when the closing price is 400 or below and black otherwise. It uses d3.csv to load the data, d3.timeParse for date parsing, and d3.scaleTime and d3.scaleLinear for axes. The if statement inside the circle fill function demonstrates how to apply category-based styling within a d3.v4 data join.

Aug 15, 2016

Filtering in v4

This example demonstrates filtering in d3.js v4 by showing a line chart of stock closing prices over time, with red dots highlighting only the data points where the closing price falls below 400. The visualization pairs a steelblue line with scatterplot circles, using the `filter` method on the circle selection to exclude points above the threshold. It loads data from a CSV file, parses dates with `d3.timeParse`, and renders both an SVG line and axis through `d3.axisBottom` and `d3.axisLeft`. The code relies on d3.v4’s scale functions (`d3.scaleTime`, `d3.scaleLinear`) and the `d3.line` generator.

Multi-links in tooltips using v4

This example shows a line chart of stock closing prices over time, where each data point is a circle that reveals a tooltip on mouseover. The tooltip displays the formatted date and price, and the date itself is wrapped in a hyperlink that points to a different URL from the CSV data. The visualization is built with D3 v4, using SVG for rendering and transitions for tooltip opacity. Data is loaded from a CSV file with `d3.csv`, dates are parsed with `d3.timeParse`, and the axes are generated with `d3.axisBottom` and `d3.axisLeft`.

Tooltip with link in v4

This example shows a line chart of stock closing prices over time, with interactive data points that reveal a tooltip containing a hyperlink on hover. Built with d3.js v4, the visualization uses `d3.csv` to load the data, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` for the path. The tooltip, styled with CSS, is rendered via `div.html` and includes an anchor tag linking to an external site, with its position set using `d3.event.pageX` and `d3.event.pageY`. SVG circles mark each data point.

Simple tooltips in v4

This example shows a simple line chart of stock closing prices over time, with interactive tooltips that appear when the user hovers over each data point. The tooltip displays the formatted date and closing value near the cursor. Built with d3.js v4, it uses `d3.timeParse` and `d3.scaleTime` for the date axis, `d3.line` to draw the path, and mouseover/mouseout events to animate the tooltip's opacity via `transition`. Data comes from a CSV file and is rendered as SVG circles and axes.

Simple scatter plot in v4

This example shows a simple line graph with circular data points overlaid to create a scatter plot, displaying stock closing prices over time. The visualization uses d3.csv to load the data, d3.timeParse to convert date strings, and d3.scaleTime and d3.scaleLinear to map the date and price values to pixel coordinates. A d3.line generator draws the line path, while appended circle elements mark each data point. The chart includes axes generated with d3.axisBottom and d3.axisLeft, all rendered as SVG within the page.

d3.drag with grouped elements in v4

This example demonstrates how to use d3.drag in D3 v4 to drag grouped SVG elements together. Ten rectangles with accompanying text labels are generated randomly and placed on a 960×500 SVG canvas. The drag behavior is attached to each `<g>` group, and during the drag event both the rectangle and text are updated simultaneously using `d3.event.x` and `d3.event.y`. The code uses D3 v4’s selection, scaleOrdinal with `schemeCategory20`, and the d3-drag module.

Aug 13, 2016

Drag Group Test v4

Randomly positioned rectangles with "Close" labels demonstrate how D3 v4's drag behavior applies to SVG group elements. Each group contains one rectangle and its text label, which move together during dragging. The example uses `d3.drag()` with `start`, `drag`, and `end` event handlers to update both child elements' `x` and `y` attributes. Data is generated with `d3.range()` and `Math.random()`, while `d3.scaleOrdinal` with `schemeCategory20` assigns colors. The code highlights the challenge of selecting parent `g` elements for unified drag interactions.

Aug 13, 2016

Changing the colour of an axis in v4

This example shows a simple line graph with time-based x-axis and linear y-axis, where the y-axis is rendered in red through a custom CSS class. The code uses d3.csv to load date and stock price data from a local CSV file, d3.timeParse to convert date strings, and d3.axisBottom and d3.axisLeft to generate the axes. The y-axis group receives the class `axisRed`, whose CSS rules set the stroke of its lines and paths, and the fill of its text, to red. The approach demonstrates a straightforward way to style individual axis components in d3 v4.

Jul 20, 2016

Labels on multiple lines v4

This example shows a multi-line chart with two time-series lines for stock open and close prices, with labels placed directly at the end of each line. The labels “Open” and “Close” are positioned manually using SVG text elements, colored to match their respective lines (red and steelblue), and anchored to the final data points. The visualization uses d3.csv to load the data, d3.timeParse to parse dates, and d3.line with d3.scaleTime and d3.scaleLinear to render the paths in an SVG canvas.

Jul 16, 2016

Multiple line graph in v4

This example displays two time-series lines—one for closing prices and one for opening prices—in a single SVG chart using D3 v4. The chart uses `d3.csv` to load data from a CSV file, `d3.timeParse` to convert dates, and `d3.scaleTime` and `d3.scaleLinear` for the axes. Two `d3.line` generators create the paths, with the second line styled red via `.style("stroke", "red")`. Axis rendering uses `d3.axisBottom` and `d3.axisLeft`.

Jul 12, 2016

Drop shadow on text in v4

This example shows a line and area chart of stock closing prices over time, with a title that includes a drop shadow effect. The chart uses a semi-transparent white stroke behind the main text to create the shadow, with the title duplicated in two text elements. The data is loaded from a CSV file and parsed with `d3.timeParse`, while the chart elements are built using `d3.area`, `d3.line`, and the axis functions `d3.axisBottom` and `d3.axisLeft`, all rendered as SVG.

Jul 12, 2016

Simple graph with grid lines in v4

A line chart displays stock closing prices over time from a CSV file, with light gray grid lines added behind the data. The chart uses D3 v4 with an SVG rendering approach, employing `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the path, and `d3.axisBottom` and `d3.axisLeft` with custom tick sizes to generate the grid. The visualization is based on a gist by d3noob, serving as a follow-up to a simpler line graph example.

Jul 12, 2016

Simple graph with filled area in v4

This example shows a line graph of daily closing values with a filled area beneath the line, using a simple time-series dataset parsed from CSV. The visualization is rendered as SVG using D3 v4, with `d3.scaleTime` and `d3.scaleLinear` mapping dates and values to pixel coordinates. The area is generated via `d3.area`, while the line uses `d3.line`, and both axes are drawn with `d3.axisBottom` and `d3.axisLeft`. The data comes from a local `data.csv` file containing date and close columns.

Jul 11, 2016

v4 curve interpolation comparison

This example compares eight D3 v4 curve interpolation functions—including linear, step, basis, cardinal, monotone, and Catmull-Rom variants—by rendering each as a separate line over the same time-series dataset of stock closing prices. The SVG chart includes a clickable legend that toggles the visibility of each curve with a 100-millisecond transition, while the underlying data points remain visible as scatterplot circles. The code builds paths using `d3.line()`, scales time and value axes with `d3.scaleTime()` and `d3.scaleLinear()`, and loads data from a CSV file via `d3.csv()`.

Jul 10, 2016

Scatterplot with v4

This example shows a line graph of stock closing prices over time, with scatterplot points overlaid on the line to mark individual data values. The code loads a CSV file with dates and closing prices, parses the dates with `d3.timeParse`, and defines scales using `d3.scaleTime` and `d3.scaleLinear`. It renders the line with a `d3.line` path and adds circles for each data point using SVG. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`. The visualization uses d3.v4 and is rendered as SVG in the browser.

Jul 7, 2016

Axis Labels in v4

This example shows a line chart of stock closing prices over time, with clear labels for both the x-axis (“Date”) and y-axis (“Value”). It uses d3.csv to load time-series data, d3.timeParse to convert date strings, and d3.scaleTime and d3.scaleLinear to map data to screen coordinates. The line is drawn as an SVG path with d3.line, and the axes are rendered via d3.axisBottom and d3.axisLeft. Custom text elements are appended to label the axes, demonstrating how to add axis titles in d3 v4.

Jul 5, 2016

Formatted time labels for an axis with v4

This example shows a simple line chart of stock closing prices over time, using formatted and rotated date labels on the x-axis. The visualization is built with d3.v4 and rendered as an SVG. It parses dates from a CSV file using `d3.timeParse` and `d3.timeFormat`, applies the axis with `d3.axisBottom` and rotated tick text, and draws the line with a `d3.line` generator. The code follows the structure of a basic d3 line graph, with margins, scales, and data mapping defined explicitly.

Jul 4, 2016

Rotated axis labels in v4

This example shows a simple line chart of stock closing prices over time, with the x-axis labels rotated at a steep angle to prevent overlap. The graph uses d3.csv to load the date and close value pairs from data.csv, then renders the line with d3.line and scales using d3.scaleTime and d3.scaleLinear. After drawing the axes with d3.axisBottom and d3.axisLeft, it applies a rotation transform of -65 degrees to the tick text, along with adjusted text anchoring, to make the dates readable.

Jul 3, 2016

Simple line graph with v4

This simple line graph displays the daily closing value of a stock over a month, using data from a CSV file. The SVG chart is built with D3.js v4, employing `d3.scaleTime` and `d3.scaleLinear` to map dates and prices, while `d3.line` generates the path. The axes are drawn with `d3.axisBottom` and `d3.axisLeft`, and the line is styled with a steel-blue stroke.

Jul 3, 2016

Solar water flow

This interactive chart displays temperature variations for water flowing through a solar pool heating system over the past day, with three lines representing the return-to-pool, from-pool, and from-solar sensor readings. The visualization uses d3.svg.axis, d3.svg.line, d3.time.scale, and d3.scale.linear to render time-series data, while a d3.nest groups entries by sensor ID to draw each path with dynamically assigned colors from d3.scale.category10. Clicking legend labels toggles line visibility via d3.transition, and a crosshair with dashed lines appears on hover to inspect values. Data is fetched live from SparkFun’s data service.

Nov 7, 2015

d3.js tool tips with links in data

This example shows a line chart of stock closing prices that, when hovering over a point, displays a tooltip containing the date, the price, and a hyperlink to a related resource stored in the CSV data. The tooltip appears with a fade-in effect and includes an HTML anchor tag that opens the link in a new tab. Built with D3 v3, the code uses `d3.csv` to load the data, `d3.time.scale` and `d3.svg.line` for the chart, and SVG circles with mouseover events to trigger the tooltip, which is a styled `div` positioned at the cursor.

May 1, 2014

d3.js tool tip with HTML link

This example shows a line graph of date-stock price pairs from a CSV file, where each data point is marked by a circle. Hovering over a circle triggers an HTML tooltip containing a hyperlink to Google, a formatted date, and the closing price. It uses d3.v3 APIs like `d3.time.scale`, `d3.svg.line`, and `d3.select` to build the SVG chart and manage the tooltip’s position and opacity transitions. The tooltip remains active because the `pointer-events` CSS property is not disabled.

Apr 30, 2014

Simple Leaflet Map

This example displays the positions of seventeen aircraft as markers on an interactive map of the Wellington, New Zealand area. It uses the Leaflet JavaScript library, specifically the `L.map`, `L.tileLayer`, and `L.marker` APIs, to render OpenStreetMap tiles as the base layer. Aircraft identifiers and coordinates are stored in a hardcoded array, and each marker pops up its associated ID when clicked. The map is initialized with a set view and zoom level.

Simple Leaflet Map

A simple Leaflet map displays nine airplane markers over a base layer of OpenStreetMap tiles, each marker showing a plane identifier in a popup. The visualization uses Leaflet 0.7 to create the map, set the initial view to New Zealand, and add a tile layer with attribution. The code defines an array of plane data with coordinates and IDs, then loops through the array to create and bind popups to each marker.

Simple Leaflet Map

This example shows an aircraft flight path over a map of Wellington, New Zealand, rendered as a blue polyline on an OpenStreetMap tile layer. It uses the Leaflet JavaScript library to create the map, center it on the coordinates, and add the tile layer from OpenStreetMap. The flight path data consists of repeated latitude and longitude coordinates stored in the `planelatlong.js` file, which is loaded and passed to `L.polyline` to draw the route on the map.

Simple Leaflet Map with Heatmap

A simple Leaflet map displays earthquake activity across New Zealand, with magnitude visualized as a heatmap overlay. The map uses Leaflet.js with the Leaflet.heat plugin, plotting quake points from New Zealand’s Geonet data on an OpenStreetMap tile layer. The heatmap is rendered with a radius of 20, blur of 15, and maximum zoom of 17, showing density and intensity of seismic events around the North Island.

Simple Leaflet Map

This example displays a satellite view of Wellington, New Zealand, centered at coordinates -41.2858, 174.78682 with zoom level 14. It uses the Leaflet.js library to initialize a map object and display the Esri World Imagery tile layer from ArcGIS Online. The code sets the map’s dimensions via an HTML div and configures tile loading with attribution text and a maximum zoom of 18. This demonstrates a minimal Leaflet setup for embedding interactive map tiles in a web page.

Simple Leaflet Map

This example shows a Leaflet map centered on Wellington, New Zealand, with selectable base layers and an overlay of local landmarks. It uses Leaflet’s `L.map`, `L.tileLayer`, and `L.control.layers` to switch between OpenStreetMap and Thunderforest landscape tiles. An `L.LayerGroup` contains four markers with popups and a polyline connecting the points, which can be toggled as an overlay. The code also uses `L.marker` and `L.polyline` to add geographic features to the map.

Simple Leaflet Map

A simple interactive map centered on London demonstrates core Leaflet capabilities. The map displays OpenStreetMap tiles and includes a marker with a popup, a red circle, and a polygon, each bound to popups. Clicking anywhere on the map generates a popup showing the clicked latitude and longitude. The example uses the Leaflet JavaScript library and its `L.map`, `L.tileLayer`, `L.marker`, `L.circle`, `L.polygon`, and `L.popup` APIs to build the visualization.

Simple Leaflet Map

This example shows an interactive map centered on Wellington, New Zealand, with a choice between two base tile layers. It uses Leaflet.js to render map tiles and handles layer switching via a control widget. The map includes an OpenStreetMap tile layer and a Thunderforest landscape layer, with proper attribution for both data sources. The code initializes a map element and uses `L.tileLayer` and `L.control.layers` to manage the selectable background layers.

Leaflet.FileLayer Plugin

This example shows an interactive map centered on Wellington, New Zealand, with a Leaflet.js tile layer from OpenStreetMap. The Leaflet.FileLayer plugin adds a folder-open control button, enabling users to load local GPS trace files in GPX, KML, or GeoJSON formats. The map renders loaded point data as red circle markers, with lines and polygons styled in red using the plugin’s `layerOptions` and `pointToLayer` callbacks. It also calls `fitBounds` to automatically zoom to the loaded data’s extent. The code uses Leaflet’s `L.map`, `L.tileLayer`, and the `L.Control.fileLayerLoad` API from the plugin.

osmGeocoder Search Plugin for Leaflet Map

A Leaflet map centered on Wellington, New Zealand, demonstrates the osmGeocoder Search Plugin. The example shows an interactive OpenStreetMap tile layer with a geocoder control positioned at the bottom right, featuring a "Find!" button and a non-collapsed search input. Built using Leaflet 0.7 and the Control.OSMGeocoder plugin, the map lets users search for locations via OpenStreetMap’s geocoding service. The baseline map uses standard OSM tiles, with the geocoder offering a range of configurable options such as position and collapsed state.

Simple Leaflet Map

A simple interactive map displays a geographic area centered on a set of coordinates, with a single red polyline overlaid on base tiles from OpenStreetMap. The map is created with Leaflet, using its `L.map` and `tileLayer` APIs to render the tile background. The polyline, defined as an array of latitude and longitude pairs, is added with the `L.polyline` API and styled with options for color, weight, opacity, dash pattern, and line join. The example demonstrates basic Leaflet map creation and vector overlay customization.

Marker Leaflet Map

This example shows an interactive map of the Wellington waterfront, centered near Te Papa, the Museum of New Zealand. The map uses the Leaflet.js library with OpenStreetMap tiles as its base layer. A single marker placed at the museum’s coordinates is draggable, has reduced opacity, and displays a hover title. It also binds a popup with the location’s name and description, which opens automatically on load. The code sets the view to latitude -41.2858 and longitude 174.78682 with a zoom level of 14, and configures the marker with explicit properties for interactivity and styling.

Full Screen Leaflet Map

This example displays an interactive map centered on Wellington, New Zealand, using Leaflet.js and OpenStreetMap tile layers. The map fills the entire browser viewport through CSS rules that set the html, body, and map container to 100% height and width. It initializes the map with a specific latitude, longitude, and zoom level, then attaches an OpenStreetMap tile layer with attribution and a maximum zoom of 18. The code relies on Leaflet’s `L.map`, `L.tileLayer`, and the `setView` method to render the full-screen interactive visualization.

Simple Leaflet Map

This example displays an interactive map of New Zealand’s Wellington region, centered on coordinates -41.2858, 174.78682 at zoom level 14. The visualization uses the Leaflet.js library to render map tiles from OpenStreetMap, with the `L.map` function creating the map and `L.tileLayer` adding the base tile layer. The map is presented with attribution to OpenStreetMap contributors and is set within a 600 by 400 pixel HTML container.

dc.js Experiment

This dc.js experiment uses a crossfilter to coordinate multiple linked charts—bar charts, a line chart, a row chart, and a pie chart—to explore a dataset of 2013 earthquakes from New Zealand's GeoNet service. The visualization includes a data table and a filter count, with all charts updating dynamically to reflect selections. The dimensions (magnitude, depth, time of day, day of week, and island location) are defined via `crossfilter` and used by `dc.barChart`, `dc.lineChart`, `dc.rowChart`, and `dc.pieChart`. Data loading and parsing rely on `d3.csv` and `d3.time.format`, while charts render as SVG elements.

Sep 16, 2013