Skip to main content
Log in
J

JimMaltby

@JimMaltby·185 public vizzes

Loading thumbnail…

d3Edge_V5-dataLoading-v0.4

This example demonstrates a modular data-loading system for D3.js v5, built around a custom dispatch event manager. It loads a CSV file of Zurich transit delay data and a separate TopoJSON geographic file, applying a cleaning function to parse timestamps and coordinates. The code uses asynchronous `d3.csv` and `d3.json` loading with custom `dataLoading`, `dataReady`, and `geoReady` events, and exposes methods like `getCleanedData()` for console inspection. The visualization itself remains a placeholder, showing a loading message and instructions while the data pipeline runs.

Jul 8, 2022
Loading thumbnail…

d3Edge_V5-drawRoutes-v0.1

This example builds an interactive map of Zurich and draws transit routes from a GeoJSON file using D3 v5. It demonstrates a modular map component that initializes a Mercator projection and sets up SVG rendering for geographic paths. The code explores loading GeoJSON data asynchronously via `d3.json` and a promise-based `.then()` callback, while a commented data manager module shows an alternative approach using `d3.dispatch` for custom events. Route data comes from the D3Edge GitHub repository, and the visualization uses `d3.geo.mercator` and `d3.geo.path` for projection and path generation.

Jun 29, 2022
Loading thumbnail…

d3Edge_V5-dataLoading-v1.1

A circular progress meter displays the loading status of a remote JSON file from the GitHub API, using a black foreground arc over a gray background ring. As the data streams in, the arc's angle and percentage text update smoothly via `d3.transition()` and an interpolated `tween` function, driven by the progress event from `d3.json`. The code relies on the deprecated `d3.svg.arc()` and `d3.event.loaded` pattern, and upon completion, the entire meter scales down and disappears with a delayed `transition.attr`.

Jun 18, 2022
Loading thumbnail…

LoadCsv

This example demonstrates how D3 loads and processes CSV data, specifically highlighting the behavior of `d3.csv` with a custom row-accessor function. The code defines an inline array that mimics CSV content, then uses `d3.csv` to parse it while trimming, lowercasing, and computing a derived `duration` field. Rows where the end value is not greater than the start value are filtered out. The processed result is logged to the console along with the column keys, showing which columns remain after transformation. It uses D3 v5’s promise-based `d3.csv` API and the `data.columns` property to inspect parsed fields.

Jun 18, 2022
Loading thumbnail…

d3Edge_V5-dataLoading-v0.3

This example demonstrates a custom data-loading module for D3 v5 that manages asynchronous CSV and GeoJSON requests through a dispatch system. It shows how to load Zurich transit delay data from a remote CSV file, clean the rows by parsing timestamps and coordinates, and expose the processed dataset via a public API. The code uses `d3.csv`, `d3.json`, and a `d3.dispatch` event bus to signal loading progress and readiness, with a placeholder page indicating when data is available for console inspection.

Jun 18, 2022
Loading thumbnail…

LoadCsv-v2

This example demonstrates how to dynamically update displayed text content using D3’s selection API. It presents a dropdown menu and a paragraph; selecting a new option triggers the paragraph’s text to change. The code uses `d3.select` to bind the dropdown and paragraph, `property('value')` to read the current selection, and `text` to render the corresponding string. It also showcases D3’s event handling via `on('change', ...)` and a reusable update function pattern, drawing from the “Towards Reusable Charts” concept.

Jun 5, 2022
Loading thumbnail…

LoadCsv-v1

This example loads CSV data using `d3.csv`, processes each row to calculate a `duration` field, and filters out invalid entries where the end time precedes the start time. The processed data is then passed to a chart via `d3.select("#chart")` with a `.join()` operation that appends text elements. The code references the Iris Dataset as its source, though the actual CSV strings shown are placeholder example data. It demonstrates a reusable scatter plot pattern inspired by Mike Bostock’s "Towards Reusable Charts" and Observable’s selection-join technique.

Jun 5, 2022
Loading thumbnail…

General Update Pattern - D3v5+ drop-down

This example demonstrates the general update pattern for data joins in D3 v5, using a drop-down menu to switch between datasets of single-letter values rendered as animated text elements. It shows how the `join()` method replaces the older `merge()` pattern to handle enter, update, and exit selections efficiently. The code builds a reusable line chart module using the Pro D3 pattern, with SVG rendering and transitions that animate new elements entering from above, existing elements repositioning, and removed elements exiting downward. It derives from Mike Bostock’s original alphabet example and Rob Moore’s updatable chart approach.

Jun 5, 2022
Loading thumbnail…

Reusable (ProD3.js) Animated Scatter Plot with Menus v3

This animated scatter plot visualizes the Iris dataset with interactive menus for selecting different measurement variables. Built with D3.js v6, it uses a reusable chart pattern with `d3.scaleLinear` for scales, `d3.axisBottom` and `d3.axisLeft` for axes, and `d3.transition` to animate updates when menu selections change. The SVG rendering includes dynamic circle positioning and axis transitions, demonstrating the selection.join pattern for smooth data-driven updates.

May 25, 2022
Loading thumbnail…

Reusable Barley (Block) PunchCard Chart v5 - dynamic

A dynamic punch card chart displays barley yield data across multiple growing sites and years. The visualization uses a reusable D3 module following the ProD3 pattern, with circle size scaled by yield value using `d3.scaleSqrt` and color encoded by a `d3.scaleOrdinal` scheme. Users can interact with the chart, which redraws circles and axes dynamically. The implementation relies on D3 v5 APIs including `d3.axisBottom`, `d3.axisLeft`, and `d3.scalePoint`, rendering to SVG within a container group structure.

May 15, 2022
Loading thumbnail…

D3 Update Pattern – (block)Punchcard Example V5

This interactive punchcard chart visualizes barley yield data across multiple sites and years, with each circle’s size mapped to the yield value. A dropdown menu filters the dataset by site, and when a new site is selected, the chart transitions smoothly. The visualization uses D3 v5’s `dispatch` event system, `d3.nest()`, and `d3.map()`, along with `d3.scaleSqrt()` for circle scaling and `transition().duration(750)` for animated updates. The data is loaded from a CSV file, and the chart is rendered as SVG with ordinal axes.

May 14, 2022
Loading thumbnail…

D3 Update Pattern –Punchcard Example V5

This interactive punchcard chart displays barley yield data across multiple sites and years, with a dropdown menu to switch between six different locations. The visualization uses the D3.js v5 general update pattern, employing `d3.nest()` to group data by site and genotype, `d3.scalePoint()` for axes, and `d3.scaleOrdinal` with the `schemeAccent` color palette for categorical differentiation. Animated transitions via `svg.transition()` update the y-axis and circle positions, sizes, and colors when the selected site changes, with circle radius scaled by `d3.scaleSqrt()` based on yield values. The chart renders as SVG with axes and interactive elements, animated over 750-millisecond intervals.

May 14, 2022
Loading thumbnail…

Reusable Barley (Block) PunchCard Chart v5 - static

This static punchcard chart visualizes barley yields across multiple sites and years using a reusable D3.js v5 module. It displays data points as circles positioned by year on the x-axis and site on the y-axis, with circle radius encoding yield values. The chart implements the general update pattern derived from Mike Bostock’s reusable charts approach, adapted with the ProD3 pattern. It uses d3.scalePoint, d3.scaleLinear, d3.scaleSqrt, and d3.schemeAccent to render the SVG elements.

May 14, 2022
Loading thumbnail…

Fork of Barley PunchCard Square Chart v5 - static

This visualization presents yield data from the classic barley dataset as a static punch-card chart. It displays a single site, Crookston, with barley varieties along the vertical axis and years on the horizontal axis, using square rectangles sized by yield value. The code uses D3 v5’s `d3.nest()` to group data hierarchically, `d3.scalePoint()`, `d3.scaleLinear()`, and `d3.scaleSqrt()` for positioning and sizing, and `d3.axisLeft()`/`d3.axisBottom()` for axes. SVG rectangles are colored via `d3.scaleOrdinal(d3.schemeAccent)`.

May 14, 2022
Loading thumbnail…

Reusable (ProD3.js) Animated Scatter Plot with Menus v2

An animated scatter plot of the Iris dataset lets users switch between measurement combinations via two dropdown menus. Built as a reusable D3 v6 chart, it displays points as SVG circles with coordinated transitions for position updates and axis rescaling. The code uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, `d3.axisBottom`, and `selection.join` to handle enter, update, and exit states, with `d3.transition` powering the 1-second animations.

Apr 19, 2022
Loading thumbnail…

Reusable (ProD3.js) Animated Scatter Plot with Menus

This animated scatter plot visualizes the Iris dataset, displaying measurements of petal and sepal dimensions. The visualization is a reusable D3 component that allows users to dynamically switch which features appear on the x and y axes through dropdown menus. Using D3's transition system, data points smoothly animate between positions when axis selections change, with circles initially appearing with a growth effect. The chart renders as SVG and uses d3.scaleLinear, d3.extent, and d3.axis functions to construct scales and axes dynamically.

Apr 18, 2022
Loading thumbnail…

Reusable (ProD3js pattern) D3 Scatter Plot

This reusable D3 scatter plot displays the Iris dataset, plotting petal length against sepal length as circles in an SVG chart. Built with the Pro D3.js reusable chart module pattern, the code uses d3.csv to load data, d3.scaleLinear for axis scales, and d3.axisBottom and d3.axisLeft for the axes. The chart applies a standard margin convention and container groups for organization. The implementation demonstrates how to encapsulate chart components—scales, axes, and SVG construction—into a modular function, allowing the same scatter plot to be easily applied to different data selections.

Apr 18, 2022
Loading thumbnail…

V5 Reusable Examples - Nested data, Chart (line) series DDM - Example 5.4

This example uses a nested data structure to power a multi-line chart with two drop-down menus, allowing users to filter the displayed sales trends by fruit type and year. The D3.js v5 code visualizes monthly sales figures loaded from a CSV file, rendering the data as separate lines for each year within a selected fruit category. The chart applies a reusable charting pattern based on the ProD3 methodology, using SVG for drawing the axes and line paths, and includes animated transitions when the user changes the filter selections.

Apr 16, 2022
Loading thumbnail…

D3 Scatter Plot

This D3 scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis against sepal length on the y-axis using `d3.scaleLinear` for both scales. The reusable chart module builds an SVG with axes via `d3.axisBottom` and `d3.axisLeft`, then renders data points as circles with a fixed radius of 5. The implementation follows the D3 reusable pattern, with configurable margins, dimensions, and accessor functions for the data fields.

Apr 15, 2022
Loading thumbnail…

D3 Update Pattern –Punchcard Example

A punchcard chart displays barley yield data across six sites, with each row representing a barley genotype and each column a year. Users select a site from a dropdown menu to trigger a smooth, 750-millisecond transition that updates the chart via the D3.js **v4** general update pattern. The visualization uses **d3.scalePoint** for axes, **d3.scaleSqrt** for circle radii, **d3.scaleOrdinal** with **d3.schemeCategory20b** for colors, and **d3.axisLeft**/ **d3.axisBottom** for rendering. Data from `barleyfull.csv` is loaded using **d3.csv** and processed with **d3.nest** and **d3.map**, with events handled via **d3.dispatch**.

Apr 14, 2022
Loading thumbnail…

Barley PunchCard Chart v4 - static

A static punchcard chart visualizes barley yield data across six sites and multiple genetic varieties, with a selected site displayed as a grid of circles representing each variety's yield per year. The D3.js v4 code uses `d3.nest()` to group the `barleyfull.csv` dataset, `d3.scalePoint()` for the categorical y-axis, `d3.scaleLinear()` for the year axis, and `d3.scaleSqrt()` for circle radius. The visualization is rendered as an SVG, employing the general update pattern with `selectAll`, `enter`, and `append` to draw circles, while axes are generated via `d3.axisLeft()` and `d3.axisBottom()`.

Apr 14, 2022
Loading thumbnail…

Barley PunchCard Chart v5 - static

This example shows barley yield data for a single site, with each variety as a horizontal row of circles positioned by year, where circle radius encodes yield and color distinguishes barley genotypes. The chart is built with D3 v5 using nested data from a CSV file, rendered as SVG. It employs `d3.nest()` for grouping, `d3.scalePoint` for the y-axis, `d3.scaleLinear` for years, and `d3.scaleOrdinal` with the `schemeAccent` color palette, alongside `d3.axisLeft` and `d3.axisBottom` for axes.

Apr 14, 2022
Loading thumbnail…

Reusable Barley PunchCard Chart v5 - static

This punch card chart visualizes barley yield data from 1927-1929 across multiple sites and barley genotypes. The chart uses a static SVG rendering with a reusable D3.js v5 module pattern, featuring circular marks whose radius encodes yield magnitude and color distinguishes barley genotypes. The visualization incorporates D3's `scalePoint` for the categorical y-axis, `scaleLinear` for the year-based x-axis, and `scaleSqrt` for radius scaling, alongside ordinal color mapping. The data is sourced from a CSV file containing yield measurements for different barley varieties across experimental stations in Minnesota.

Apr 14, 2022
Loading thumbnail…

Reusable Barley PunchCard Chart v5 - static

This example presents a static punchcard-style chart visualizing barley yield data across multiple years and experimental sites. The visualization displays data points as circles arranged in a grid, with each cell representing a specific variety and location combination. Built with D3.js v5, the implementation demonstrates a reusable chart module pattern based on principles from Mike Bostock’s reusable charts and the Pro D3.js book. The code uses d3.scaleOrdinal for color encoding, d3.axisBottom and d3.axisLeft for axes, and SVG rendering with the data loaded from a CSV file containing 160 yield measurements with attributes for genotype, year, and site.

Apr 14, 2022
Loading thumbnail…

Animated ProD3 Reusable D3 Scatter Plot

This example presents an animated scatter plot of the classic Iris dataset, using a reusable D3 chart module built with d3.v6. It visualizes sepal length against petal width, with circles that grow into place on load. The code demonstrates the reusable chart pattern and the selection.join method for data binding, drawing axes with axisBottom and axisLeft. SVG rendering handles the vector output, while transitions animate the circles’ radius growth from zero to their final size.

Apr 13, 2022
Loading thumbnail…

d3 Dispatch V5 - reusable

This reusable D3 v5 example displays U.S. state population data by age group, initially showing a bar chart for a single state that can be updated dynamically. It uses an event dispatcher (`d3.dispatch`) to handle state changes, triggering transitions between bar and pie chart visualizations. The code builds SVG output with scales (`d3.scaleLinear`, `d3.scaleOrdinal`) and axes (`d3.axisLeft`), while loading data from a CSV file. Although the bar and pie drawing functions are present, the visible interaction logic is incomplete.

Apr 12, 2022
Loading thumbnail…

General Update Pattern-reusable: alphabet example D3v3

This example demonstrates the General Update Pattern for reusable D3 charts, animating transitions between three states—enter, update, and exit—for alphabet characters. It renders SVG text elements that slide vertically and fade in or out based on changes to the dataset, with each state styled distinctly (green, dark gray, brown). Built on D3 v3.5, the chart uses `d3.transition()` with `attr()` tweening to coordinate movement, and implements a modular chart factory with configurable width, height, and margins, following principles from Mike Bostock’s reusable charts pattern. The data is an array of letters, joined by their character value for updates.

Apr 9, 2022
Loading thumbnail…

General Update Pattern - reusable: alphabet example D3v5+

This example demonstrates the General Update Pattern for reusable D3 charts, using a sequence of alphabet letters to show how data joins, updates, and exits are handled with `d3.join()` transitions. The visualization renders SVG text elements that animate vertically (entering from above, exiting below) while shifting horizontally as the dataset changes. Built as a reusable module pattern following ProD3 conventions, the chart uses `d3.transition` for smooth animations, with CSS classes for enter, update, and exit states. The code implements the updateable chart pattern from Rob Moore’s and Mike Bostock’s foundational work, using `d3.select` and SVG text manipulation.

Apr 9, 2022
Loading thumbnail…

d3 Dispatch V5

A dropdown menu selects a state, and d3.dispatch coordinates updates to a bar chart of total population and a pie chart of age-group composition. The code loads U.S. Census data from a CSV and uses d3.csv, d3.map, d3.scaleLinear, d3.axisLeft, d3.scaleOrdinal, d3.arc, d3.pie, and transition.attrTween for animated transitions. The pie chart interpolates arc angles, while the bar chart animates height, with SVG rendering throughout.

Mar 28, 2022
Loading thumbnail…

d3 Dispatch V4

This example demonstrates linked selections across a bar chart and a pie chart, using a drop-down menu to choose a state. It shows how the D3 `dispatch` module (V4) coordinates custom events like `statechange` across separate visual components. The bar chart uses `d3.scaleLinear` and `d3.axisLeft` to display total state population, while the pie chart uses `d3.pie`, `d3.arc`, and `transition.attrTween` for animated arcing by age group. Data comes from a CSV of US census age demographics, loaded with `d3.csv` and processed via `d3.map`.

Mar 28, 2022
Loading thumbnail…

Fork of d3Edge_V5-dataLoading-v0.1

This example demonstrates a custom data-loading module for D3.js v5, using a dispatch-based event system to manage asynchronous CSV and GeoJSON data. The module, defined as `d3Edge.dataManager`, loads Zurich transit delay data via `d3.csv`, applies a cleaning function to parse timestamps with `d3.time.format` and convert coordinates, and then dispatches a readiness event. The accompanying HTML page shows a "loading" message until the data is prepared, after which users can inspect the cleaned data in the console.

Mar 13, 2022
Loading thumbnail…

d3Edge_V5-dataLoading

This example demonstrates a modular data-loading pattern for D3.js v5, showing how to decouple CSV and GeoJSON fetching from chart rendering. It defines a `dataManager` module that uses `d3.csv` with async/await and `d3.json` to load external files, applying custom cleaning functions to the CSV data. The module dispatches custom events (`dataLoading`, `dataReady`) via `d3.dispatch`, and uses a custom replacement for the removed `d3.rebind` to expose event handling. The page displays a loading message until data arrives, then instructs users to inspect the cleaned data via `getCleanedData()`.

Mar 13, 2022
Loading thumbnail…

General Update Pattern-reusable: alphabet example D3v5 merge

This reusable D3v5 chart demonstrates the general update pattern for alphabet data, showing how enter, update, and exit selections transition smoothly with color-coded SVG text elements. The chart uses d3.transition and selection.data with key functions to animate letters entering from the top in green, updating in dark gray, and exiting downward in brown. Built as a reusable module with configurable width, height, and margins, it derives from Mike Bostock’s update pattern example and is structured using d3.select and classed container groups for clean SVG organization.

Mar 6, 2022
Loading thumbnail…

General Update Pattern-reusable: alphabet example D3v5 join

This example demonstrates the general update pattern for data joins in D3 v5, showing how SVG text elements transition between enter, update, and exit states as the dataset changes. The alphabet letters animate vertically, with entering elements appearing green from above, updating elements shifting horizontally in dark gray, and exiting elements dropping below in brown. Built as a reusable chart module with configurable width, height, and margins, it uses d3.transition with 750ms duration and 1000ms delays to sequence the state changes, with data bound by string identity.

Mar 6, 2022
Loading thumbnail…

GiRiBnW_Ep10-resuable_animated-scatterplot

This example shows an animated scatterplot that reproduces a Sol LeWitt art piece. It uses D3 v6 to render SVG circles whose positions are derived from data, with a transition that animates the radius of newly entering points from zero to a set size. The code builds reusable plotting components—scales, axes, and container groups—and uses the `d3.transition()` API, which is visible as `t = d3.transition().duration(1000)` and applied to enter/update/exit joins. The x and y axes are linear scales from the data’s extent, and the chart updates in place, though no external data source is specified.

Jan 12, 2022
Loading thumbnail…

GiRiBnW_Ep10-resuable_chart

This example reproduces a Sol LeWitt art piece using a reusable D3.js scatter plot module built with d3.v6. It renders an SVG chart with animated circles positioned by linear scales based on x and y value extractors, with axes drawn via d3.axisBottom and d3.axisLeft. The code defines a custom `d3.reusable.scatterPlot` function that manages chart building, updating, and drawing, applying a join pattern for circles and axes to support dynamic updates. The visualization updates the graph by recomputing data mappings and re-rendering circles and the x-axis.

Jan 12, 2022
Loading thumbnail…

Towards_Updateable-Resusable-ProD3js_d3jsCharts-Update with Join(j

This example demonstrates a reusable, updateable bar chart built with D3.js v5, following Rob Moore's update pattern and the ProD3.js architecture. It renders sales data as horizontal bars in SVG, with each bar’s width proportional to its value, and includes a title and axis placeholders. The chart uses `d3.select` and `.join('rect')` to handle enter and update states, while scales and axes are defined via `d3.scaleBand` and `d3.axisBottom`/`d3.axisLeft`. The code is structured as a module with configurable attributes like `fillColour` and `barPadding`, and it displays data from an array of objects containing `salesperson` and `sales` values.

Jan 4, 2022
Loading thumbnail…

General Update Pattern - reusable: alphabet example v2

This reusable D3 v5 alphabet example demonstrates the general update pattern for smoothly transitioning SVG text elements as the underlying data changes. The chart renders 26 letters in monospace font, with distinct fill colors for entering, updating, and exiting elements, animating position and opacity via `d3.transition`. The code builds a modular chart factory function with configurable width, height, and margins, using `selectAll().data()` keyed joins to handle data updates. It derives from Mike Bostock’s reusable charts and general update pattern examples, extending them with a structured module pattern for maintainability.

Jan 2, 2022
Loading thumbnail…

General Update Pattern - reusable: alphabet example

This example demonstrates the General Update Pattern with a reusable D3.js chart module. It renders individual letters as SVG text elements, using green, gray, and brown to visually distinguish entering, updating, and exiting items as the dataset changes. The code uses D3 v5’s selection methods and a `transition` to animate element movement and opacity. The chart is built with a modular structure, including builder functions for the SVG body and container groups, and exposes setters for width, height, margins, and colors.

Dec 31, 2021
Loading thumbnail…

General Update Pattern - reusable: alphabet example v4

This example demonstrates D3.js’s general update pattern for animating text elements as the alphabet dataset changes. It shows enter, update, and exit selections, colored green, steelblue, and brown respectively, with letters transitioning vertically and horizontally. The code uses d3.transition, selection.data with a key function, and reusable chart module patterns derived from Mike Bostock’s and Rob Moore’s work. The SVG’s chart-group handles all text rendering, including fill-opacity fades for new and removed letters.

Dec 30, 2021
Loading thumbnail…

General Update Pattern - reusable: alphabet example v3

This example demonstrates the general update pattern for data joins in D3 v5, showing how text elements enter, update, and exit as the underlying array changes. It renders animated SVG text using a reusable chart module with configurable width, height, and margins. The code uses `d3.selectAll().data()` with a key function, `transition()` for 750ms animations, and `merge()` to combine enter and update selections. Each state is color-coded: green for entering, steelblue for entering-and-updating, black for updating, and brown for exiting elements.

Dec 30, 2021
Loading thumbnail…

V5 Reusable Examples - Nested data, Chart (line) series DDM - Example 5.2.1

This example shows a multi-line chart of monthly fruit sales, with a drop-down menu to filter the data by fruit type. It uses nested data structures from a CSV file listing sales figures for strawberries, grapes, and blueberries across 2015 and 2016. The visualization is built with D3 v5, employing reusable chart patterns based on Mike Bostock’s principles and the ProD3 methodology. It renders as an SVG with animated transitions, using D3 scales, axes, and ordinal color mapping.

Dec 23, 2021
Loading thumbnail…

V5 Reusable Examples - Nested data, Chart (line) series DDM - Example 5.4

This example demonstrates a nested multi-line chart with two drop-down menus to filter fruit type and year. It uses D3.js v5 in a vanilla HTML implementation, following the ProD3 reusable chart pattern. The chart displays monthly sales data for strawberries, grapes, and blueberries across multiple years, with lines colored by fruit type using d3.scaleOrdinal. Animation and SVG rendering show smooth transitions when filtering the nested dataset.

Dec 22, 2021
Loading thumbnail…

MasteringD3-Resusable-ProD3js-2.4.2

This example shows a reusable bar code chart exploring radial layout with hourly data groupings, displayed as five separate chart instances arranged horizontally. The implementation builds on Mike Bostock's reusable chart principles and the ProD3.js pattern, using d3.v5’s SVG rendering with `d3.arc`-based drawing and an interval-driven update mechanism. Each chart animates through four datasets sequentially, then calls `closeInterval()` to stop changes. The code loads data with timestamps, groups items by hour via `getHours()`, and visualizes counts using angle-based segments within a circular layout, demonstrating modular chart construction and dynamic data updates.

Dec 22, 2021
Loading thumbnail…

MasteringD3-Resusable-ProD3js-2.4.3

This example demonstrates reusable, modular bar charts built with D3.js v5, following the Pro D3.js pattern and principles from Mike Bostock’s “Towards Reusable Charts.” It displays multiple charts horizontally across the page, each representing a different dataset with radial bar layouts. The code uses D3’s `d3.map`, `d3.range`, and layout functions to process hourly time-series data, while SVG groups and arc drawing handle the visual output. The visualization expands on iterative updates by cycling through datasets on an interval, showing how chart components can be dynamically refreshed.

Dec 22, 2021
Loading thumbnail…

MasteringD3-Resusable-ProD3js-2.3E

This example demonstrates a reusable bar code chart, a temporal visualization of daily stock-mention data for companies like AAPL and MSFT, alongside a table showing name, today’s mentions, and mentions-per-hour. It applies the ProD3.js pattern and Mike Bostock’s reusable chart principles, using d3.scaleTime for the date axis and d3.scaleOrdinal with d3.schemeCategory10 for coloring. The SVG renders animated bar lines per data row within an HTML table via a foreignObject, with D3 v5 managing scales, axes, and dispatcher events.

Dec 9, 2021
Loading thumbnail…

MasteringD3-Resusable-ProD3js-2.3D

This example demonstrates a reusable bar-code chart that visualizes hourly mention data for named items over a single day. It combines an HTML table listing names and mention counts with an SVG timeline of vertical bars, using d3.scaleTime for the x-axis and d3.timeDay for date intervals. The chart follows the ProD3 pattern for modular, testable code and is built with d3.v5, rendering both SVG and animated elements within a single container.

Dec 8, 2021
Loading thumbnail…

MasteringD3-Resusable-ProD3js-2.3B

This example demonstrates a reusable bar code chart pattern for visualizing time-series data, showing daily mention counts for multiple items alongside a corresponding data table. The visualization combines an SVG-based bar code representation with an HTML table rendered through foreignObject, using D3.js v5. The code implements the ProD3.js modular chart pattern, building on Mike Bostock's "Towards Reusable Charts" principles. It uses d3.timeDay for date intervals, d3.scaleTime for temporal scaling, and d3.select with foreignObject to embed the tabular HTML content within the SVG container.

Dec 6, 2021
Loading thumbnail…

MasteringD3-Resusable-ProD3js-3.1

This example demonstrates a reusable radial bar chart that visualizes browser market share usage data from a JSON dataset. The visualization applies a force simulation using `d3.forceSimulation` with charge and position forces to arrange data points, while `d3.arc` generates the radial segments. Built with D3 v5 and SVG, the chart uses `d3.scaleSqrt` for sizing circles based on usage values and `d3.scaleOrdinal` with `d3.schemeCategory10` for color encoding by browser name. The implementation follows the Pro D3.js pattern for modular, testable charts, with animated transitions on segment updates.

Dec 4, 2021
Loading thumbnail…

MasteringD3-Resusable-ProD3js-2.4.1

This example demonstrates a reusable, modular bar code chart built with D3.js v5, following the Pro D3.js pattern for maintainable and testable charts. It renders multiple SVG charts, each displaying hourly data distributions as radial arcs with a circular layout, using `d3.range`, `d3.map`, and angle calculations to group data by hour. The code initializes layout properties, scales, and container groups, and includes animation-ready structures, though no explicit transitions are triggered. The visualization is derived from Mike Bostock’s "Towards Reusable Charts" principles and applies a radial bar code style to show temporal patterns.

Dec 4, 2021
Loading thumbnail…

MasteringD3-Resusable-ProD3js-2.3B1

This example presents a reusable bar code chart built from the principles in Mike Bostock’s “Towards Reusable Charts” and the Pro D3.js pattern. It visualizes time-series data by rendering vertical line marks for each daily mention value, using d3.scaleTime to map dates to x-coordinates. The code demonstrates a modular chart factory pattern with separate functions for building scales, SVG containers, and drawing the bars, and it relies on d3.select and data joins to append the lines. Animated transitions are also included in the chart’s rendering process.

Dec 3, 2021
Loading thumbnail…

MasteringD3-Resusable-ProD3js-2.4

This example demonstrates a reusable bar code chart that visualizes the distribution of data events across the 24 hours of a day. The radial layout, configured through a custom `radialLayout` function, groups data items into hourly segments, displaying the count for each hour as an arc. Built on the principles from Mike Bostock's "Towards Reusable Charts" and the ProD3.js pattern, the code uses D3 v5's SVG rendering, a dispatcher for custom events, and the `d3` API to construct the chart within a container group, offering a modular and maintainable approach.

Dec 3, 2021
Loading thumbnail…

d3NoobV5 Reusable Examples - Add an HTML table to your graph v3

A reusable line chart shows stock closing prices over time, with an HTML table appended below the SVG rendering. The chart uses D3 v5 scales, axes, and a line generator to map dates to values from a CSV dataset. A table-XX class selector, though misspelled, defines table styling, while the d3.reusable pattern structures the modular chart. The example demonstrates combining SVG data visualization with HTML table output within a single reusable component, following the ProD3 pattern.

Nov 29, 2021
Loading thumbnail…

d3NoobV5 Reusable Examples - Add an HTML table to your graph v2

This example demonstrates a reusable D3.js v5 line chart that renders Apple stock closing prices from a CSV file, with a companion HTML table displaying the same data below the visualization. The chart uses d3.scaleTime and d3.scaleLinear for the axes, d3.line for the path, and d3.axisBottom/axisLeft for tick marks. The code follows the ProD3 reusable chart pattern, organizing the visualization into modular functions for scales, axes, SVG container, and labels. The table is appended as an SVG group, showing how to integrate tabular data alongside a chart.

Nov 29, 2021
Loading thumbnail…

d3NoobV5 Reusable Examples - Add an HTML table to your graph

This example demonstrates a reusable D3.js line chart that visualizes stock price data over time, with a closing price table displayed alongside the graph. The chart uses `d3.scaleTime` and `d3.scaleLinear` to map the date and close values from a CSV file, rendered as an SVG path via `d3.line`. The implementation follows a modular pattern, using D3 v5 APIs like `d3.axisBottom`, `d3.axisLeft`, and `d3.extent` to build axes, while a separate HTML table is generated to accompany the visualization.

Nov 28, 2021
Loading thumbnail…

MasteringD3-Resusable-ProD3js-2.3

This example demonstrates a reusable bar code chart pattern built with D3.js v5, showing a table of name, mentions, and mentions per hour alongside a time-based bar code strip. The chart updates with new data when the user clicks the "Add data" button, using the ProD3.js modular chart pattern and Rob Moore's updatable chart approach. The code defines scale functions like `d3.scaleTime()` and extracts date values with `d3.timeDay`, while rendering the table with `selectAll` and `.append` operations on SVG groups.

Nov 28, 2021
Loading thumbnail…

Fork of MasteringD3-Resusable-ProD3js-2.2.6

This example demonstrates a reusable barcode chart that visualizes time-series data as vertical lines, with an “Add data” button that appends new data points and animates the chart’s scale and positions using d3.transition. Built with D3 v5 and SVG, it follows the Pro D3.js pattern for modular, testable charts, deriving from Mike Bostock’s reusable chart principles. The chart renders a white background rectangle and steel-blue bars, using d3.scaleTime for the x-axis domain. The update function adds 30 days of data at three-minute intervals, triggering smooth transitions of the line positions.

Nov 28, 2021
Loading thumbnail…

MasteringD3-Resusable-ProD3js-2.2.5

This example demonstrates a reusable bar code chart that maps time-series data to vertical lines, with a button to add new data points. It builds on Mike Bostock’s reusable chart pattern and the ProD3.js module structure, using d3.scaleTime for the x-axis and d3.timeDay for date intervals. The SVG renders a white background rect and steelblue lines with stroke-opacity, while updateData triggers transitions to redraw the chart. The code uses D3 v5 with a vanilla HTML implementation, separate from any existing state management.

Nov 28, 2021
Loading thumbnail…

MasteringD3-Resusable-ProD3js-2.2.4

This example demonstrates a reusable bar-code chart built with D3 v5, following the ProD3.js pattern for modular, maintainable visualizations. It renders a time-based dataset as vertical black lines over a white background, with each line’s x-position determined by a date value via `d3.scaleTime`. The chart initializes with a back bar drawn as a white rectangle, then appends and transitions line elements using SVG and `transition().duration(300)`. The code includes update functions for data and fill color, reflecting the reusable chart architecture derived from Mike Bostock’s and Rob Moore’s patterns.

Nov 26, 2021
Loading thumbnail…

MasteringD3js_Ch2 pt2

A D3.js v5 barcode chart built from a step-by-step refactoring of a v3 example. The visualization uses an SVG-based, closure-encapsulated charting function that renders a horizontal strip of vertical bars representing time-based data, with accessor methods (`chart.width`, `chart.height`, `chart.margin`) and a date accessor to set the temporal interval. The code demonstrates progressive enhancements across six chart versions, transitioning from raw selections (`d3.select`) to data joins and SVG initialization, with the dataset bound through `.data()` and rendered via `.enter().append()`.

Nov 25, 2021
Loading thumbnail…

MasteringD3js_ReuseProD3_Ch2 pt2.2dii

This example demonstrates a reusable barcode chart pattern using D3.js version 5, showing how to add and remove data through button interactions. The visualization generates random date intervals using an exponential distribution function, then displays the temporal data as vertical bars within an SVG container. The code implements a modular chart structure with separated concerns for building scales, SVG elements, and rendering the barcode, using d3.scaleTime for time-based positioning and d3.max/d3.min for domain calculations. The example highlights the transition from D3 v3 to v5 while following the ProD3.js reusable chart pattern.

Nov 25, 2021
Loading thumbnail…

V5 Reusable Examples - Nested data, Chart (line) series - Example 1

This example demonstrates a simple line chart visualizing monthly sales data from a CSV file, mapping months to the x-axis and sales values to the y-axis. The chart is built using a reusable D3 v5 module pattern, following the ProD3 structure with separate functions for scales, axes, SVG construction, and drawing. It uses `d3.scaleTime` and `d3.scaleLinear` for scaling, `d3.axisBottom` and `d3.axisLeft` for axes, and `d3.line` to generate the red path. The implementation is a vanilla HTML page with SVG rendering.

Nov 25, 2021
Loading thumbnail…

V5 Reusable Examples - Nested data, Chart (line) series DDM - Example 5.3

A nested multi-line chart presents monthly sales data for three fruits across four years, with a drop-down menu filtering the display by fruit type. The visualization uses D3.js v5’s `d3.nest()` to organize the CSV data hierarchically, then renders separate lines per year via `d3.line` and `d3.area` generators. Axis scales are built with `d3.scaleTime()` and `d3.scaleLinear()`, while `d3.axisBottom` and `d3.axisLeft` draw the ticks. Animated transitions update the chart when the menu selection changes, applying color mapping through `d3.scaleOrdinal()` for fruit categories. The reusable chart structure follows the ProD3 pattern within a vanilla HTML implementation.

Nov 24, 2021
Loading thumbnail…

V5 Reusable Examples - Nested data, Chart (line) series DDM - Example 5.2

This example demonstrates a reusable multi-line chart with a Drop Down Menu to filter fruit sales data by year. It uses D3.js v5 to render an SVG chart with axes and animated line series, nested data structures, and a menu that updates the visualization. The code follows a modular, reusable chart pattern inspired by Mike Bostock's guidelines and the ProD3.js approach, employing D3's `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `scaleOrdinal` APIs to manage scales, axes, and color encoding.

Nov 24, 2021
Loading thumbnail…

Towards_Updateable-Resusable-ProD3js_d3jsCharts-UpdateDataOnly

This example demonstrates an updatable bar chart pattern in D3.js v5, derived from Mike Bostock's reusable chart principles and Rob Moore's updateable pattern. The chart renders with SVG, showing horizontal bars whose lengths are proportional to data values, with spacing, height, and scale computed from the data array. The code uses `d3.select`, `d3.max` for domain scaling, and the `.data()`, `.enter()`, and `.append('rect')` methods to build bar elements dynamically. A separate container structure is prepared for axes and title, though current axes remain commented out.

Nov 24, 2021
Loading thumbnail…

Towards_Updateable-Resusable-ProD3js_d3jsCharts

This example demonstrates a reusable and updateable bar chart built with D3.js v5, following the patterns from Mike Bostock’s "Towards Reusable Charts" and Rob Moore’s "Towards Updatable" approach. It renders SVG rectangles scaled from an array of numerical data, with smooth transitions for updating bar dimensions, colors, and datasets. The chart exposes getter-setter methods for `width`, `height`, `fillColor`, and `data` that trigger animated updates via `transition().duration()`. New bars fade in while exiting bars shrink and fade out, all rendered in a vanilla HTML page with multiple chart containers.

Nov 23, 2021
Loading thumbnail…

Towards_Updateable-Resusable_d3jsCharts

A reusable bar chart demonstrates the updateable pattern, showing how dynamically changing data, dimensions, and fill colors animate smoothly with D3 transitions. Three chart instances render on the page, each driven by the same `barChart()` factory function loosely based on Mike Bostock's reusable chart pattern. The chart uses `selection.each`, `data`, `enter`, `exit`, and chained `transition` calls to handle updates, including staggered opacity and width changes for new bars, while removed bars shrink and fade out. The standalone HTML file is built with D3 v5 and SVG for rendering.

Nov 23, 2021
Loading thumbnail…

d3Edge_v5ProReusable_BarChart-Ch4.3

A reusable bar chart built with D3.js v5 demonstrates the Pro D3 pattern for modular, testable chart construction. The example shows two bars charting datasets with axes and hover interactions that print data values and indices to the console while changing bar color. It uses d3.scaleBand and d3.scaleLinear for scales, d3.axisBottom and d3.axisLeft for axes, and a d3.dispatch 'customHover' event to handle mouseover behavior, following Mike Bostock's reusable chart principles.

Nov 22, 2021
Loading thumbnail…

d3EdgeReusable_BarChartWithTransitions-Simple2.3_v5

This example demonstrates a reusable bar chart module built with D3 v5, following the reusable chart pattern from *Developing a D3.js Edge*. Four separate bar charts render random datasets, each transitioning smoothly between data states using `d3.transition` with a bounce easing. The chart uses `d3.scaleBand` and `d3.scaleLinear` for axes, with `d3.axisBottom` and `d3.axisLeft` for rendering. An SVG container manages enter, update, and exit selections for the bars, and a custom event dispatcher supports hover interactions.

Nov 21, 2021
Loading thumbnail…

MasteringD3js_ReuseProD3_Ch2 pt2.2d

This example demonstrates adding and removing data in D3.js v5 bar code charts using a reusable module pattern adapted from the ProD3.js approach. The visualization generates random time-based data using an exponential distribution and renders it as horizontal bar codes within SVG containers. It includes interactive buttons that trigger data updates, showing how D3 selections and data joins handle dynamic changes. The code uses d3.scaleTime for time scaling, d3.max/d3.min for domain calculations, and d3.timeDay for time intervals, while the barcode elements are drawn as SVG rects.

Nov 21, 2021
Loading thumbnail…

MasteringD3js_ReuseProD3_Ch2 pt2.2c

This example demonstrates a barcode-style timeline visualization for multiple data series, where each series contains random date intervals generated using an exponential distribution. The code shows how to structure reusable D3.js chart modules following a ProD3.js pattern, with separate functions for building scales, SVG containers, and drawing elements. Using d3.scaleTime, it computes minimum and maximum date values for each series to set the time domain. The example also highlights migration issues from D3 v3 to v5, particularly around selection and data handling APIs.

Nov 20, 2021
Loading thumbnail…

MasteringD3js_ReuseProD3_Ch2 pt2.2b

This example demonstrates a reusable bar-code chart pattern built with D3.js v5, displaying multiple rows of temporal data as horizontal barcode-like visualizations. Each row represents a distinct data series with randomly generated date intervals using an exponential distribution. The code implements a modular chart function that creates SVG elements within styled containers, using `d3.scaleTime()` to map date ranges to pixel positions. The example highlights the transition from D3 v3 to v5 practices, showcasing proper data binding, scale construction, and container management in a reusable component pattern.

Nov 20, 2021
Loading thumbnail…

MasteringD3js_ReuseProD3_Ch2 pt2.2a

Reusable D3 chart functions build SVG bar charts from an array of four string values, rendering yellow background rectangles with blue bars in separate containers for two chart instances. The code demonstrates the transition from D3 v3 to v5 while implementing the ProD3 reusable chart pattern, using `selection.each`, `selection.enter`, and `selection.call` to structure modular chart components.

Nov 16, 2021
Loading thumbnail…

V5 Reusable Examples - Nested data, Chart (line) series DDM - Example 5.1

This example demonstrates a nested multi-line chart that visualizes monthly fruit sales across two years, with a drop-down menu filtering the displayed data. The chart uses D3.js v5 to load CSV data, nest it by fruit type and year, and render separate line series with an ordinal color scale. The visualization implements a reusable chart pattern based on Mike Bostock's principles, using SVG for rendering and d3.scaleTime, d3.scaleLinear, and d3.axisBottom for scales and axes.

Nov 11, 2021
Loading thumbnail…

V5 Reusable Examples - Nested data, Chart (line) series - Example 4.1

This example demonstrates how nesting data structures can be used to create a multi-series line chart, plotting monthly sales across three fruit types (strawberry, grape, blueberry) over two years. It uses D3.js v5 with an SVG rendering approach. The chart is built using the ProD3 reusable chart pattern, derived from Mike Bostock’s Towards Reusable Charts, with scales and axes constructed via d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, and d3.axisBottom and d3.axisLeft. Data is loaded from a CSV file via d3.csv.

Nov 11, 2021
Loading thumbnail…

V5 Reusable Examples - Nested data, Chart (line) series - Example 2

This example demonstrates how to create a reusable line chart with data nested by fruit type, rendering multiple series in a single SVG. It shows how to bind nested data to D3 selections and compute axis scales using nested max/min values via functions like `d3.max` with accessor callbacks. The chart uses D3 v5’s `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleTime`, with a modular structure based on the Pro D3 pattern for maintainable, testable visualizations. Data comes from a CSV file with monthly sales figures per fruit.

Nov 11, 2021
Loading thumbnail…

V5 Reusable Examples - Nested data, Chart series - Example 3.1

A nested bar chart displays monthly sales totals for three fruit categories, with each month’s sales aggregated and grouped by fruit type. The visualization uses a single x-axis for months and y-axis for sales values, rendering red-bordered bars per category. Built with D3 v5, it applies a reusable chart pattern based on Mike Bostock’s principles and Marcos Iglesias’ ProD3 structure. The code uses `d3.scaleBand` for x positioning, `d3.scaleLinear` for y scaling, and `d3.axisBottom`/`d3.axisLeft` for axes, with data loaded from a CSV file containing Month, Sales, and Fruit columns.

Nov 9, 2021
Loading thumbnail…

V5 Reusable Examples - Nested data, Chart series - Example 3.2

This example demonstrates nested data aggregation by displaying a bar chart of average sales per fruit across twelve months, with each fruit’s total sales represented as a single bar. The chart uses d3.rollup to group the CSV data by fruit and calculate the sum of sales values. The visualization is built with d3.scaleBand and d3.scaleLinear for positioning, while d3.axisBottom and d3.axisLeft render the axes. The reusable chart pattern follows the ProD3 structure, with the SVG rendered using d3-selection and append methods.

Nov 9, 2021
Loading thumbnail…

V5 Reusable Examples - Nested data, Chart (line) series - Example 2 (unnested)

This example demonstrates a simple line chart using unnested data, plotting monthly sales figures for three fruit categories (strawberry, grape, blueberry) as a single red line. The chart uses the D3.js v5 library with a reusable chart structure based on the ProD3 pattern, incorporating d3.scaleTime for the x-axis, d3.scaleLinear for the y-axis, and d3.line to generate the SVG path. The visualization includes labeled axes and a title, with data loaded from a CSV file containing Month, Sales, and Fruit columns.

Nov 9, 2021
Loading thumbnail…

d3NoobV5 Reusable Examples - Line Types Chart

This example demonstrates eight different D3 curve interpolation methods applied to a line chart of stock data, with each curve type rendered in a distinct color. The visualization compares curves such as linear, step, basis, cardinal, monotoneX, and Catmull-Rom, showing how each affects the visual smoothness and shape of the line. The code uses d3.axisBottom, d3.axisLeft, and d3.line with the corresponding d3.curve functions, while the data comes from a CSV file with date and closing price values. A static area fill is also included beneath the lines.

Oct 31, 2021
Loading thumbnail…

V5 Reusable Examples - Line Types Chart nested data series 1

This visualization demonstrates how to build a reusable line chart using D3 v5 with nested data series. It plots monthly sales data from a CSV file, displaying sales figures across the months of January through June. The chart uses a time scale for the x-axis and a linear scale for the y-axis, with a steelblue line representing the data. The code follows the ProD3 pattern for reusable chart modules, incorporating margins, axes, and SVG rendering.

Oct 31, 2021
Loading thumbnail…

Data manipulation workings

This example demonstrates a variety of D3 data manipulation techniques on a small dataset of transaction records. It displays computed statistics such as the minimum, maximum, extent, sum, median, mean, and quantile using d3.min, d3.max, d3.extent, d3.sum, d3.median, d3.mean, and d3.quantile, alongside sorted arrays and a bisect result. The page also experiments with generating synthetic barcode-like data using an exponential distribution and attempts to combine string arrays with timestamped objects via JavaScript’s Array methods and d3.nest, though several of these exploratory operations are commented out or incomplete.

Oct 30, 2021
Loading thumbnail…

MasteringD3js_ReuseProD3_Ch2 pt1

This example demonstrates how to build reusable chart components in D3.js v5 by wrapping SVG creation logic in a function that can be called on a selection, following the pattern from Pro D3.js. The page shows two containers where an array of three string values is bound to div elements, then each div uses `selection.call()` with a custom `chart2` function to append an SVG element with a white background rectangle. The code highlights the transition from earlier D3 versions, using `data()`, `enter()`, and `append()` to manage the enter selection, with the second example adding nested divs and SVG elements.

Oct 26, 2021
Loading thumbnail…

d3Edge_v5ProReusable_BarChart-Ch4.2

This bar chart example demonstrates the Pro D3.js reusable chart pattern, rendering two separate charts from distinct datasets. Mouse hover on the first chart triggers a custom event that logs data values and indices to the console. The visualization uses d3.scaleBand and d3.scaleLinear for axes, with d3.axisBottom and d3.axisLeft for tick marks, all drawn as SVG rectangles with CSS styling.

Oct 25, 2021
Loading thumbnail…

d3Edge_v5ProReusable_BarChart-Ch4.1

This example demonstrates a reusable bar chart built with D3.js v5, following the Pro D3.js pattern for modular chart creation. The SVG-based visualization renders two separate bar charts from hardcoded arrays of numeric string values, with steel-blue bars and no axes. The chart employs a dispatcher object to broadcast a customHover event, which prints data values and indices to the console when the mouse hovers over a bar. The implementation uses D3’s `scaleBand` and `scaleLinear` for positioning and scaling, while the reusable `barChart` module exposes configurable width and height accessors.

Oct 25, 2021
Loading thumbnail…

d3Edge_v5ProReusable_HelloWord-Ch3.1

This example demonstrates a reusable chart component built with D3.js v5 following the ProD3 pattern, displaying a static "Hello World" message derived from input data. The code defines a custom module, `d3.edge.table`, which encapsulates chart configuration through setter methods like `.fontSize()` and `.fontColour()`, and renders text into a designated DOM element. It also implements a custom event dispatcher via `d3.dispatch`, broadcasting a `'customHover'` event on mouseover. The chart is instantiated and applied to a selection using `.call(Table)`, showing a simple yet modular approach to building interactive, configurable D3 components.

Oct 25, 2021
Loading thumbnail…

d3EdgeReusable_BarChartWithAxes-Simple2.2_v5

This example shows three bar charts with axes, two fixed and one updated with random data, built using the reusable chart pattern from "Developing a D3.js Edge." It demonstrates the d3.edge.barChart module that returns a function, which uses d3.scaleBand, d3.scaleLinear, and d3.axisBottom/axisLeft to render axes. The code applies d3 transitions with d3.easeBounce for animation, and includes a hover dispatcher that prints data and index values to the console.

Oct 25, 2021
Loading thumbnail…

d3EdgeReusable_BarChart-Simple2.1_v5

Two D3.js bar charts render side by side from static data arrays, demonstrating a reusable chart module built on the Pro D3.js pattern. The charts display simple vertical bars without axes, using `d3.scaleBand` for x-positioning and `d3.scaleLinear` for y-scaling. A `d3.dispatch` event triggers `console.log` output with each bar's data and index on mouse hover. The SVG output is animated through `svg.transition()` when dimensions change, and the module pattern allows configuring chart width, height, and padding via chained methods.

Oct 25, 2021
Loading thumbnail…

GiRiB&W_Ep4-Sol_LeWitt-FullRepo Ex V2

A generative black-and-white composition reproduces a Sol LeWitt-style grid, layering horizontal and vertical bars across the full viewport. The piece alternates masked regions filled with geometric symbols from the D3 symbol set, splitting the canvas into six equal sections with alternating inverted palettes. Using D3 v6 selection and data-join methods, the code constructs four SVG mask groups, each combining rectangles and paths to create overlapping positive and negative spaces. The visualization relies entirely on SVG rendering and D3’s `symbol` and `symbols` APIs to draw the abstract forms.

Oct 24, 2021
Loading thumbnail…

d3EdgeReusable_Examples-Simple1_v5

This example demonstrates how to build reusable charts in D3.js v5 by creating modular table functions that generate “Hello World” text from a numeric dataset. It shows three progressively advanced implementations: a basic module, one with getter/setter functions for styling (font size and color), and a third that adds event handling via `d3.dispatch` for custom mouseover events. The code uses D3 selections, `.datum()` to bind data, and `.call()` to invoke the module functions, following the ProD3 pattern for maintainable, testable visualizations.

Oct 23, 2021
Loading thumbnail…

d3EdgeReusable_Examples-Simple2

This example demonstrates a simple reusable chart pattern using D3.js v5, rendering a single green rectangle with fixed dimensions. The code defines a modular `d3.reusable.Chart` factory function that encapsulates SVG construction, margin conventions, and drawing logic, following the ProD3 pattern. It builds an SVG container with grouped elements, then appends a rectangle via `append('rect')` with static width, height, and fill attributes. The chart is instantiated with custom dimensions and margins, then bound to a div element using `datum()` and `.call()`, while the data array itself is not used for any visual encoding.

Oct 23, 2021
Loading thumbnail…

GiRiB&W_Ep4-Sol_LeWitt-FullRepo Ex

This example recreates a Sol LeWitt-inspired grid of horizontal and vertical lines that are partially revealed by two SVG masks containing geometric shapes and D3 symbols. The code uses D3 selections and data joins to draw one hundred alternating stripes across the screen, while the `renderMask` function builds each mask with rectangles and paths generated from `d3.symbol` glyphs. Rendered as an SVG, the piece uses black and white fills to create a dynamic interplay between the line grid and the symbolic cutouts.

Oct 11, 2021
Loading thumbnail…

GiRiB&W_Ep3-Sol_LeWitt-FullRepo-pt5

This visualization reproduces a Sol LeWitt art piece using overlapping horizontal and vertical stripes. A grid of thin black rectangles is layered in both orientations, each masked by one of two complementary masks that reveal different symbol shapes. The code uses D3 selections, `range`, and `symbol` to generate the masks, with `svg.append('mask')` defining white or black fill areas. Rendered as SVG in the browser, it dynamically fills the viewport and cycles through D3’s symbol types at varying positions.

Oct 10, 2021
Loading thumbnail…

GIRIBnW_JM-3_VizHub logo Sol_Lewit

The visualization generates a full-screen pattern of repeating VizHub logos arranged in both horizontal and vertical bands, with alternating white and black circular masks that create an interlocking two-tone effect. It uses D3 v6's `select`, `range`, and `path` modules to render SVG paths, scaling and rotating the logo via `transform` strings. The `mask` elements with `rect` and `circle` shapes define the visible regions. The composition adapts to the window dimensions, computing row and column counts dynamically to fill the viewport with the repeating logo geometry.

Oct 10, 2021
Loading thumbnail…

GIRIBnW_JM-3_VizHub logo Horizontal Bands ForLooped

This visualization displays a grid of miniature VizHub logos tiled as horizontal bands across the full screen. Built with D3.js (v6.6.1), the code defines a single logo path and uses `select().append('svg')` to create an SVG canvas sized to the browser window. It calculates the number of repetitions needed and uses a nested for-loop to push position coordinates into an array, which is then bound to the `d3.join('path')` method. Each path is scaled to 5% of its original size and translated via a custom transform function, creating a repeating pattern that spans both axes.

Oct 10, 2021
Loading thumbnail…

GIRIBnW_JM-3_VizHub logo Horizontal Bands

This example creates a repeating VizHub logo pattern that spans the full width and height of the browser window. Using D3 v6, it imports `select`, `range`, and `path` to render SVG path elements in a grid formation. The code scales the logo path by a factor of 0.05 and translates it horizontally and vertically based on calculated array lengths for the screen dimensions. Multiple bands of logos are generated by nesting D3 selections, where outer groups handle vertical positioning via the `yPosition` function and inner paths apply the logo path data with horizontal transforms.

Oct 10, 2021
Loading thumbnail…

GIRIBnW_JM-3_VizHub logo Vertical Bands

The visualization displays the VizHub logo repeated as a single vertical band of rotated, scaled paths spanning the full screen height. A single SVG path is replicated across the viewport using a D3 data join, with each iteration positioned by a transform function that calculates the x-coordinate based on the logo’s original length and a 0.05 scale factor, plus a 90-degree rotation. The code imports `select`, `range`, and `path` from the D3 library to generate the repeating pattern, rendering the black-and-white logo in a continuous column from top to bottom.

Oct 10, 2021
Loading thumbnail…

GIRIBnW_JM-3_VizHub logo Horizontal Band

A horizontal band of repeated VizHub logos spans the full screen width, with each logo rendered in black as a single SVG path. The code uses D3's `select`, `range`, and `path` functions to generate the repeating pattern, calculating the number of iterations based on the viewport width and a fixed logo scale of 0.05. The `join('path')` method binds the range data to SVG path elements, applying a scale and translate transform to position each logo. The original logo path data is stored as a constant string and reused for every repetition.

Oct 10, 2021
Loading thumbnail…

GIRIBnW_JM-3_VizHub Width Path

The visualization creates a repeating band of the VizHub logo that spans the full width of the browser window. Using D3.js, the code calculates how many times the logo must be repeated to cover the screen width based on a scaling factor of 0.05, then appends SVG path elements in a loop. Each logo is positioned horizontally using SVG transform translations. The original logo path data is scaled and reused in a straightforward iterative pattern, resulting in a continuous decorative strip across the viewport.

Oct 10, 2021
Loading thumbnail…

GiRiB&W_JM_Ep3-ex

The visualization replicates a Sol LeWitt–style geometric composition using repeated horizontal and vertical bands formed by hundreds of thin rectangles, rendered as SVG. Two circular masks—one with a black background and white circle, the other inverted—reveal and hide intersecting strips, creating a dynamic black-and-white pattern at the center. Built with D3 v6, the code uses `select`, `range`, and `.join()` to generate the rectangles, while SVG `<mask>` elements define the circular cutouts. The artwork fills the entire browser window, adapting to viewport dimensions.

Oct 9, 2021
Loading thumbnail…

SVG Fundamentals-JM exercise

This example demonstrates the foundational SVG shapes used to build a playful outdoor scene. A light blue rectangle forms the sky, a green rectangle represents the grass, and curved paths create rolling hills. The sun is constructed from circles with black eye dots and an arc for a smile, topped with a yellow hat. Other elements include a multi-circle ice cream with a cone, and a VizHub logo. All shapes are drawn using standard SVG elements like `rect`, `circle`, `line`, `path`, and `g` with inline styling, rendered in a browser.

Oct 8, 2021
Loading thumbnail…

MasteringD3js_Ch4.1_1

This example demonstrates a draggable circle implemented with D3.js v5’s drag behavior. The circle, rendered as an SVG element, moves in response to pointer events, and its new coordinates are logged to the console. The code defines a reusable chart module that builds an SVG container, appends a circle, and attaches a drag handler via `d3.drag()`. A custom event dispatcher (`d3.dispatch`) broadcasts the drag action, and the circle’s position updates using the event’s x and y properties. The example reflects an adaptation from D3 v3 to v5.

Oct 6, 2021
Loading thumbnail…

d3NoobV5 Reusable Examples - Sankey Diagram - v2 (with drag)

This Sankey diagram visualizes the flow of values between five nodes, with adjustable node positions through drag interactions. The chart uses the reusable chart pattern from Mike Bostock's "Towards Reusable Charts" and incorporates d3.sankey for layout computation, including node breadth and depth algorithms. Rendered in SVG, the code applies d3.drag for node movement and d3.scaleOrdinal with d3.schemeCategory10 for coloring. Links are drawn as curved paths with stroke widths proportional to flow values, and hover effects increase link opacity. The implementation follows Marcos Iglesias' ProD3 modular pattern with dispatchers for custom events.

Oct 6, 2021
Loading thumbnail…

MasteringD3js_Ch2 pt2.2

This example demonstrates three versions of an interactive barcode chart that visualizes event timestamps as vertical lines on a timeline, with buttons to add new data points using an exponential random interval generator. The first chart shows basic updates, the second addresses transition smoothing, and the third refines bar removal. Built with D3 v5, the code uses `d3.scaleTime`, `d3.timeDay`, and `d3.dispatch` for time-domain mapping and custom event handling, rendering SVG elements with enter/update selections and animated transitions. The dataset consists of JavaScript `Date` objects generated client-side.

Oct 2, 2021
Loading thumbnail…

MasteringD3js_Ch4.1

This example demonstrates three stages of building an interactive slider control using D3.js v5. It first shows a draggable circle using the `d3.drag` behavior, then constructs a reusable slider component with a linear scale and drag handler, and finally binds the slider to update data. The SVG rendering approach uses `d3.select` and `d3.scaleLinear` to map domain values to pixel positions, with circles and lines as visual elements. The code reflects a migration from v3 to v5, adapting drag event handling from the older API.

Sep 10, 2021
Loading thumbnail…

MasteringD3js_Ch2 pt2-2

This example demonstrates a barcode chart built with D3.js v5, showing how to add, update, and remove data points over time. It uses exponentially distributed random intervals to generate timestamped data, which are rendered as vertical lines in SVG. The chart evolves through several stages: setting date accessors, fixing time intervals, and refining transitions between updates. Interactive buttons trigger data additions and removals, while the visualization uses d3.scaleTime for horizontal positioning and d3.selectAll for binding data to line elements.

Sep 5, 2021
Loading thumbnail…

d3NoobV5 Reusable Examples - Sankey Diagram - static v1 (without drag)

A static Sankey diagram visualizes the flow of values between five nodes, with ribbon-like links whose thickness encodes the magnitude of each connection. The diagram uses `d3.sankey` to compute node positions and link paths, rendering them as SVG paths with hover effects that increase stroke opacity. The chart is built using a reusable module pattern with `d3.scaleOrdinal` for node coloring and `d3.format` for value labels, drawing data from a static JSON file.

Sep 4, 2021
Loading thumbnail…

d3NoobV5 Reusable Examples - Bullet Chart

This bullet chart example displays CPU load and memory usage data, with color-coded ranges, measures, and marker lines to compare performance against targets. The chart is built as a reusable D3 component following the Towards Reusable Charts pattern, using `d3.bullet` with `d3.scaleLinear` for axis scaling and `transition` for animated updates. Data loads from a JSON file containing two sample metrics, and the interface includes a button to trigger chart updates. The visualization renders in SVG with CSS styling for the range, measure, and tick elements.

Sep 4, 2021
Loading thumbnail…

d3NoobV5 Reusable Examples - Tree Diagram Interactive v5

This example shows an interactive tree diagram built with D3.js v5, displaying hierarchical data from a flat JSON array. The visualization uses d3.stratify to convert the flat parent-child relationships into a hierarchy, followed by d3.tree to compute the layout. Nodes are rendered as SVG circles with text labels, connected by curved paths that serve as links. The code follows a reusable chart pattern, with margins, configurable dimensions, and a title, all drawn within an SVG container. The data includes five nodes across three levels, with the tree expanding downward and to the right.

Sep 4, 2021
Loading thumbnail…

d3NoobV5 Reusable Examples - Tree Diagram v4

This example shows a horizontal tree diagram built with D3.js v5, displaying hierarchical data from a flat JSON structure where each node references a parent by name. The visualization uses `d3.stratify` to convert the flat data into a hierarchy, `d3.tree` to compute the layout, and SVG paths with cubic Bézier curves to draw the links between nodes. Node circles and labels are rendered as SVG groups, with a title displayed above the chart. The reusable chart pattern follows the Pro D3.js structure, keeping the visualization modular and configurable.

Sep 4, 2021
Loading thumbnail…

d3NoobV5 Reusable Examples - Tree Diagram v3

This example presents a horizontal tree diagram visualizing hierarchical data, with nodes as circles and curved links connecting parent and child elements. The chart is built using a reusable D3 v5 component pattern, deriving its architecture from Mike Bostock's reusable charts and the ProD3 modular approach. The implementation employs `d3.tree()` for layout, `d3.hierarchy()` for data structuring, and SVG paths with cubic Bézier curves for the links. Node positions are computed with the tree layout's size method, and all elements render within an SVG container with configurable margins and dimensions.

Sep 4, 2021
Loading thumbnail…

d3NoobV5 Reusable Examples - Tree Diagram v1

This example presents a vertical tree diagram built with D3.js v5, showing hierarchical data as a node-link layout. It renders nodes as circles with text labels and curved paths for links, using the `d3.tree()` layout and `d3.hierarchy()` to process the input data. The visualization is implemented as a reusable chart module following the Pro D3 pattern, with configurable dimensions, margins, and title. The SVG rendering approach uses chained selections and classed groups for structured styling, with all layout computation performed before drawing.

Sep 4, 2021
Loading thumbnail…

d3NoobV5 Reusable Examples - Tree Diagram v2

This example shows a vertical tree diagram built with D3.js v5, displaying hierarchical data as linked nodes with circles and text labels. It uses `d3.hierarchy` and `d3.tree` to compute the layout, with curved paths generated via SVG path strings for the links. The chart is implemented as a reusable module following the ProD3 pattern, with configurable dimensions, margins, and title. Data comes from a hardcoded JavaScript object, and the visualization renders entirely in SVG within a responsive container. The code also includes CSS styling for node circles, text, and link strokes.

Sep 3, 2021
Loading thumbnail…

d3NoobV5 Reusable Examples - Bar Chart

A reusable bar chart built with D3 v5 renders sales data from a CSV file, displaying a categorical x-axis of salesperson names and a linear y-axis for sales values. The chart uses `d3.scaleBand` and `d3.scaleLinear` for positioning, with `d3.axisBottom` and `d3.axisLeft` for axes, and draws bars as SVG `rect` elements. The code follows a modular pattern based on Mike Bostock’s reusable charts approach.

Sep 1, 2021
Loading thumbnail…

d3NoobV5 Reusable Examples - Histogram

This example shows a reusable histogram of earthquake magnitudes, with time on the x-axis and the count of earthquakes per month on the y-axis. The chart is built with D3 v5, using `d3.histogram` to bin the data and `d3.scaleTime` and `d3.scaleLinear` for the axes. It renders as SVG, with bars styled in steelblue. The code is structured using Mike Bostock’s reusable chart pattern and the Pro D3.js modular template, with data loaded from the included `earthquake.csv` file.

Sep 1, 2021
Loading thumbnail…

Reusable Examples - Pie Chart

This example demonstrates a reusable pie chart built with D3.js v5, following the patterns from Mike Bostock's "Towards Reusable Charts" and the Pro D3.js methodology. It renders two separate pie charts within a single SVG container, using `d3.pie` and `d3.arc` to calculate and draw the slices with an inner radius for a donut effect. The chart includes a title and uses `d3.scaleOrdinal` with the category10 color scheme to distinguish data categories. The code shows a modular structure with separate functions for building the layout, shape, scales, and SVG, allowing the chart to be easily reused with different datasets.

Sep 1, 2021
Loading thumbnail…

Reusable Examples - Pie Chart 2

A reusable pie chart displays browser usage percentages from a CSV file, with a legend of seven categories and labels positioned between the inner and outer radii. Built with D3 v5 using the ProD3 pattern, the chart leverages `d3.pie()` and `d3.arc()` to generate SVG arc paths, with `d3.scaleOrdinal` and `d3.schemeCategory10` for color encoding. The implementation follows a modular structure with configurable margins, dimensions, and title, rendering via an SVG container.

Sep 1, 2021
Loading thumbnail…

Untitled

Two SVG canvases demonstrate basic line drawing with D3 v5. The first shows a single fixed red line, while the second uses `d3.select` and `.enter().append('line')` to map an array of seven numeric values to multiple blue and green lines with varying coordinates. The blue lines position themselves horizontally based on array index, while green lines stagger vertically. Both use SVG attributes like `x1`, `y1`, `x2`, and `y2` with inline stroke styles, rendered against light and dark gray backgrounds. The page loads D3 from a CDN and renders purely as vector SVG without animation or interaction.

Jul 3, 2021
Loading thumbnail…

MasteringD3js_Ch2 pt1

This example demonstrates four fundamental techniques for creating DOM elements with D3.js v5, adapted from a v3-era cookbook. It shows method chaining to append divs and paragraphs, the `selection.call` function to encapsulate creation logic, a custom initializer function passed to `.call()`, and finally, dynamic SVG element creation with bound data. The code uses `d3.select` (a corrected form of `d3.select`) and the enter/append pattern to build a simple bar-like structure of labeled boxes.

Jul 1, 2021
Loading thumbnail…

D3_CookBook(v5)_Ch3 pt2

This example demonstrates a streaming bar chart that updates every 1.5 seconds by shifting the first data point and pushing a new random value onto the end of an array. It shows the classic D3 data-join pattern using `.enter()`, `.update`, and `.exit()` to manage div elements with the class `h-bar`. The code uses `d3.select` and `data()` binding to set each bar’s width and display its numeric value in a span. The visualization relies on `setInterval` to trigger re-renders, with the bars growing and shrinking as the dataset evolves.

Jul 1, 2021
Loading thumbnail…

D3_CookBook(v5)_Ch3 pt1

This example demonstrates a dynamic bar chart that updates every 1.5 seconds by shifting data and appending a random value, with the bars resizing to reflect the new array length. It uses the D3.js v5 library with the enter, update, and exit selection pattern to manage the bar elements. The code calls `d3.select` to bind data to `div` elements, sets their width via the `style` method, and updates text labels through `select("span")`. The animation uses `setInterval` to trigger the `render` function repeatedly.

Jul 1, 2021
Loading thumbnail…

D3_CookBook(v5)_Ch2 pt2

Three HTML tables display financial transactions, with each table's rows styled differently through D3 selections. The example demonstrates raw DOM selection and manipulation using d3.select and .selectAll("tr") to target table rows, then applying CSS classes like "table-header" and "table-row-odd" based on row index. It shows how to filter row elements via a selection's .select(function(d, i) { ... }) callback, checking an element's position before assigning class attributes. The code adapts older D3 v3 patterns to D3 v5, highlighting changes in how raw selections and element references are handled.

Jun 30, 2021
Loading thumbnail…

D3_CookBook_Ch 1 & 2

This example demonstrates introductory D3.js and JavaScript concepts from the D3 Cook Book, showing how to create reusable widget functions and manipulate DOM elements. It uses d3.select and d3.selectAll to target paragraphs and divisions, applying CSS classes to render colored boxes with red and blue backgrounds. The code also illustrates functional JavaScript patterns through a SimpleWidget constructor that chains methods like _headline and _description to build custom components. Data binding is shown through d3's .each method to append text elements within selected paragraphs.

Jun 30, 2021
Loading thumbnail…

Multi Line Chart

This multi-line chart shows three time series labeled Serie A, B, and C across dates in late July and early August 2019, with a y-axis labeled “Frequency.” The D3.js v5 code loads data from a CSV file, parses dates with `d3.timeParse`, and uses `d3.scaleTime` and `d3.scaleLinear` to construct axes. Lines are drawn via `d3.line` and appended as SVG paths, with distinct strokes for each series. The visualization is rendered entirely in SVG, with the final data point of each serie labeled beside the line.

Jun 28, 2021
Loading thumbnail…

GiRiB&W_Ep3-Sol_LeWitt-FullRepo-Exercise_1

This visualization reproduces a Sol LeWitt-inspired geometric composition using D3.js. It displays ten horizontal black rectangles stacked vertically across the left half of the SVG canvas, with each rectangle’s vertical position mapped through a linear scale from the data range to half the window height. The code uses `d3.range` and `d3.scaleLinear` to generate and position the shapes, applying an SVG mask that is defined but not fully rendered in the provided source. The artwork is generated programmatically in an SVG format, directly responding to the browser window dimensions.

Jun 28, 2021
Loading thumbnail…

GiRiB&W_Ep3-Sol_LeWitt-FullRepo-pt4

White and black horizontal and vertical stripes fill the entire browser window, but patterned mask regions interrupt them. Two separate groups of stripes intersect, producing a grid-like texture. The artwork uses D3 selections and joins to generate 100 rectangles in each orientation. A custom `renderMask` function builds two SVG masks, each containing a single D3-symbol shape, to reveal or hide portions of the stripes. The rendering is entirely SVG-based, with D3 v6.6.1 handling data binding and symbol generation.

Jun 25, 2021
Loading thumbnail…

GiRiB&W_Ep3-Sol_LeWitt-FullRepo-pt3

This visualization reproduces a Sol LeWitt-style geometric composition using a grid of horizontal and vertical rectangles. The code generates 100 stripes in each direction, applying two distinct masks that reveal a white diamond shape within a black background and its inverse, creating overlapping layered effects. Built with D3.js (v6.6.1), it leverages `select`, `range`, `join`, and `symbol` APIs to construct SVG elements and masks. The rendering is entirely SVG-based, with dimensions matching the full browser window, and the masks are defined programmatically through D3’s `call` method.

Jun 25, 2021
Loading thumbnail…

GiRiB&W_Ep3-Sol_LeWitt-FullRepo-pt2

This visualization reproduces a Sol LeWitt-inspired geometric composition using alternating horizontal and vertical striped rectangles, masked by two overlapping circle shapes to create a dynamic intersecting pattern. The piece uses D3.js (v6.6.1) with specific imports including `select`, `range`, `symbols`, and `symbol` to generate the SVG output. It creates a 100-stripe grid where horizontal and vertical bands are each constrained by a separate SVG mask—one with a black background and white circle, the other inverted—resulting in a crossfading intersection of line directions. The code dynamically sizes elements to the window dimensions.

Jun 25, 2021
Loading thumbnail…

GiRiB&W_Ep3-Sol_LeWitt-FullRepo-pt1

A generative black-and-white composition reproduces a Sol LeWitt-inspired wall drawing using intersecting grids of horizontal and vertical bands. Two D3 masks define contrasting circular cutouts at the center, where one mask inverts the visible area and the other reveals it. Built with d3-selection, `range`, and `symbol` from D3 v6, the rendering uses SVG paths and rectangles to layer the striped fields. The artwork runs full-window in an HTML page with JavaScript.

Jun 25, 2021
Loading thumbnail…

GiRiB&W_Ep3-Sol_LeWitt

This example reproduces a Sol LeWitt-style geometric composition using only D3 selections and SVG masks. It shows a grid of alternating horizontal and vertical black bars, with a circular region in the center where the pattern reverses contrast. The horizontal bars use a mask that reveals them only inside the circle, while the vertical bars use an inverse mask, creating the interplay. The code leverages D3’s `select`, `range`, and `join` to generate the repeating rectangles, and SVG `mask` elements with `circle` shapes to define the visible areas.

Jun 25, 2021
Loading thumbnail…

Fork of Fork of d3NoobV5 Reusable Examples - Line Types Chart

This example compares eight D3 line interpolation methods—curveLinear, curveStep, curveStepBefore, curveStepAfter, curveBasis, curveCardinal, curveMonotoneX, and curveCatmullRom—by rendering the same financial time series with each. Using d3.axisBottom and d3.axisLeft, it draws axes on an SVG while overlaying green and orange reference lines from the same dataset. The reusable chart pattern, based on Mike Bostock’s “Towards Reusable Charts” and the Pro D3 structure, animates the lines via D3 v5 transitions. Data comes from a CSV file with date and close prices.

Jun 22, 2021
Loading thumbnail…

d3NoobV5 Reusable Examples ## - Line Types Chart

This example shows a time-series chart comparing eight different line interpolation methods from D3.js, including `d3.curveLinear`, `d3.curveStep`, `d3.curveBasis`, and `d3.curveMonotoneX`. Each curve is drawn as a separate SVG path using the same stock price dataset, with a legend labeling each curve type. Users can click a legend item to toggle the visibility of its corresponding line via opacity transitions. The chart uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line`, and `d3.csv` to load the data.

Jun 22, 2021
Loading thumbnail…

Fork of d3NoobV5 Reusable Examples - Line Types Chart

This example demonstrates eight different D3 line interpolation curves—linear, step, basis, cardinal, monotone, and Catmull-Rom—plotted together on a single time-series chart using stock close prices from a CSV file. Each curve is rendered as a distinct colored SVG path with a corresponding legend, and the chart includes axes, labels, and a title. Built with d3.v5, the code uses reusable chart patterns to organize scales, axes, and data binding, and it animates the drawing of the lines and data points.

Jun 22, 2021
Loading thumbnail…

D3 Selection Practice pt3

Fifteen circles appear one by one every second, with each new circle positioned along a sine wave based on its index. Built with D3 v3 and rendered as SVG, this example demonstrates the `selectAll` data-join pattern, where `range(15)` generates the dataset and `enter().append()` adds new circle elements. The animation updates the wave at a fixed interval, showing a static wave shape that shifts position with each tick due to changing sine values.

Jun 17, 2021
Loading thumbnail…

D3 Selection Practice pt2

Fifteen circles arranged along a sine wave demonstrate basic D3 data joins and SVG rendering. The code uses `d3.range` to generate data points, then binds them to circle elements via `selectAll().data().enter().append()`, positioning each with `cx` and `cy` attributes. The example shows how D3 v3's selection API maps array values to visual properties, with commented alternative `cy` expressions hinting at layout variations. The SVG fills the browser window, and all rendering is done dynamically in the browser.

Jun 17, 2021
Loading thumbnail…

D3 Selection Practice

Fifteen circles, arranged in a sine-wave pattern across the viewport, demonstrate basic D3 data joins and selections. The example uses D3 v6's `select`, `range`, and `selectAll().data().enter().append()` to bind an array of numbers to SVG circle elements, positioning them with `cx` and `cy` attributes. Rendered as an SVG in a full-window `<svg>` element, it shows how D3's functional attribute syntax derives coordinates from the bound data. The circles are static, with no interactions or transitions.

Jun 17, 2021
Loading thumbnail…

d3NoobV5 Reusable Examples - Dotted Line Chart

This example shows a dotted line chart of stock closing prices over time, using a reusable chart module pattern derived from d3noob’s D3 tips and the Pro D3 book. The SVG renderer uses `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` with a `stroke-dasharray` attribute to create the dotted effect. Data comes from a CSV file with date and close values.

Jun 17, 2021
Loading thumbnail…

d3NoobV5 Reusable Examples - MultiLine Chart (adjusted) with lines labelled

This example shows a multi-line chart with two labeled lines, plotting date against two numeric values from a CSV dataset. The chart uses D3.js v5 to render SVG elements, with scales mapping time and linear values. A reusable chart module builds axes, gridlines, and lines via `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleTime`, while `data.columns.slice(1).map` transforms the raw CSV data for plotting. The visualization highlights two series, with labels drawn after the lines, and a title and axis labels included.

Jun 9, 2021
Loading thumbnail…

d3NoobV5 Reusable Examples - MultiLine Chart with different axes

This example demonstrates a multi-line chart with two distinct y-axes, plotting both the close and open values from a CSV dataset over time. It uses D3 v5 to render SVG elements, with a time-scaled x-axis and separate linear scales for the left and right axes, each styled with different text colors. The chart follows a reusable module pattern inspired by Mike Bostock’s “Towards Reusable Charts” and the Pro D3 book, creating maintainable, modular visualizations. The code builds scales, axes, and lines programmatically, positioning the right axis and its corresponding line alongside the left one.

Jun 7, 2021
Loading thumbnail…

d3NoobV5 Reusable Examples - MultiLine Chart

A reusable multi-line chart renders two time-series lines from a CSV dataset, plotting date against closing and opening values. The visualization demonstrates a modular chart architecture using D3 v5's SVG rendering, with scales, axes, and gridlines constructed via `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` within a pattern inspired by Mike Bostock's reusable charts. The chart draws two distinct lines from the same data columns, showing how additional series can be added to the reusable component.

Jun 7, 2021
Loading thumbnail…

d3NoobV5 Reusable Examples - MultiLine Chart with lines labelled

This example shows a multi-line chart that plots two time-series from a small CSV dataset, with each line labeled directly on the chart. Using the D3.js v5 library, it defines reusable chart components through a module pattern, building SVG output with scales for date and linear values. The code constructs axes, gridlines, and lines via `d3.axisBottom`, `d3.axisLeft`, `d3.scaleTime`, and `d3.scaleLinear`, while the data is accessed using extractor functions. The chart is based on Malcolm Maclean's "D3 Tips and Tricks" examples, adapted into a modular, testable structure following the ProD3 pattern.

Jun 7, 2021
Loading thumbnail…

d3NoobV5 Reusable Examples - Line Chart with Grid Lines

A reusable line chart renders financial closing prices from a CSV file, mapping dates on a time scale and values on a linear scale. The visualization includes labeled axes, a title, and light gray grid lines created with d3.axisBottom and d3.axisLeft using negative tick sizes. Built with d3.v5 and SVG, the code applies the ProD3 pattern for modular chart components, following Malcolm Maclean’s D3 Tips and Tricks and Mike Bostock’s reusable chart principles.

Jun 7, 2021
Loading thumbnail…

d3NoobV5 Reusable Examples - Simple Line Chart

This example displays a simple line chart of stock closing prices over time, with a steelblue stroke on an SVG canvas. It implements a reusable chart module using D3 v5, following the ProD3 pattern for maintainable structure. The code defines scales with `d3.scaleTime` and `d3.scaleLinear`, renders axes via `d3.axisBottom` and `d3.axisLeft`, and draws the line with `d3.line`. Data is loaded from a CSV file containing date and close values, with axis labels and a title included.

Jun 6, 2021
Loading thumbnail…

d3NoobV5 Reusable Examples - Area Chart

This example demonstrates a reusable area chart built with D3.js v5, showing stock closing prices over time from a CSV dataset with date and close columns. The chart renders an SVG containing a lightsteelblue area path and an overlaid steelblue line, using d3.area() and d3.line() with time and linear scales. Axes are generated via d3.axisBottom and d3.axisLeft, while the chart’s modular structure follows the Pro D3 pattern, separating scales, axes, and drawing functions into reusable components.

Jun 6, 2021
Loading thumbnail…

d3NoobV5 Reusable Examples - Scatter Chart

A d3NoobV5 reusable scatter chart visualizes a date-close value dataset from a CSV file, plotting green circular dots over a steelblue line graph with labeled time and linear axes. Built with d3.v5 and SVG rendering, it uses `d3.scaleTime` and `d3.scaleLinear` for scales, `d3.axisBottom` and `d3.axisLeft` for axes, and reusable chart pattern principles from Mike Bostock and Marcos Iglesias. The example demonstrates modular code structure with margin conventions and separate build/draw functions.

Jun 6, 2021
Loading thumbnail…

Fork of Animated Reusable D3 Scatter Plot

This animated scatter plot visualizes the Iris dataset, cycling through four attribute pairs every three seconds to explore relationships between measurements. Built with D3 v6, it uses reusable chart functions and the `selection.join` pattern to smoothly transition circles between positions with staggered delays. The visualization also renders a path element, though its coordinates are based on raw data values rather than scaled positions. SVG rendering with CSS transitions, axes via `axisLeft` and `axisBottom`, and linear scales from `scaleLinear` handle the dynamic updates.

Jun 5, 2021
Loading thumbnail…

SANKEY Experiment

A Sankey diagram visualizes the flow of "Widgets" between five nodes, with link thickness proportional to the quantity transferred. The layout uses `d3.sankey()` from a custom `sankey.js` plugin, rendering nodes as SVG rectangles and links as cubic Bézier paths, while interactively dragging nodes triggers `sankey.relayout()`. Node and link tooltips display values via `d3.format`. The data originates from `sankey.json`, which defines the nodes and edges.

Dec 21, 2020
Loading thumbnail…

ERP DisCal Chart - Force Bubble start COMPLEX - DisCal v4

A force-directed bubble chart visualizes organizational impact data, mapping each node’s position along x- and y-axes representing response ability and disruption severity. Node color encodes organization budget via a quantized spectral scale, while link thickness reflects edge weight. The visualization uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to position nodes, and reads CSV data from Google Sheets. Interactive tooltips appear on mouseover via d3.select and transition, with SVG rendering and animation.

Dec 19, 2020
Loading thumbnail…

ERP DisCal Chart - Force Bubble start COMPLEX - DisCal

This force-directed bubble chart visualizes randomly generated data points on a quadrant grid that measures the "game-changingness" of an ERP system against the ability to respond in time. The four colored rectangles delineate strategic response zones, with bubble positions plotted using `scaleLinear` on the x and y axes and `scaleSqrt` for symbol sizing. The chart is rendered as an SVG using D3.js v5, with axis labels designating the quadrants and a tooltip showing circle details upon hover.

Dec 19, 2020
Loading thumbnail…

Force Directed Graph - Simple

This example shows a simple force-directed graph with a small dataset of character relationships from Les Misérables, rendered as SVG circles in D3 v5. Each node is a character, colored by group using `d3.scaleOrdinal` with `d3.schemePaired`, and hover text reveals the character’s id. The layout is driven by `d3.forceSimulation` with link, charge, and center forces, while nodes are draggable via `d3.drag`. The data is loaded from a CSV file using `d3.csv` with `d3.autoType`, and the code also builds a hierarchy from flat data using `d3.rollup` and `d3.hierarchy`, though links are not displayed.

Dec 18, 2020
Loading thumbnail…

Force Directed Graph - Simple

A force-directed graph renders a small network of six nodes from the `miserables.json` dataset, with circles colored by group and draggable via mouse events. The code builds the visualization using D3 v5’s `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes, while link lines are omitted. SVG elements are created for nodes, and `d3.drag` enables interactive repositioning, updating node coordinates on each simulation tick.

Dec 18, 2020
Loading thumbnail…

Force Directed Graph - Simple

This example shows a force-directed graph built from hierarchical data stored in a flat CSV file. The visualization converts the parent-child relationships into a network layout using `d3.stratify`, then renders the resulting nodes as circles positioned by the `d3.forceSimulation` with link, charge, and center forces. The example uses D3 v5 to load the data with `d3.csv`, applies a paired color scale to nodes based on their parent, and draws the output as SVG elements. The code includes commented-out drag and tooltip interactions that are not active in the final rendering.

Dec 16, 2020
Loading thumbnail…

Force Directed Graph - Simple

A force-directed graph displays hierarchical data through a network of linked nodes. The example loads a flat CSV file, converts it into a tree hierarchy using `d3.stratify`, and renders it with SVG paths and circles. The layout is computed by `d3.tree`, with curved links drawn between parent and child nodes. The visualization uses `d3.csv`, `d3.hierarchy`, and `d3.select` to structure and display the data from `data.csv`, showing relationships from "Top Level" down to individual leaf nodes.

Dec 11, 2020
Loading thumbnail…

Force Directed Graph - Simple

This example displays a simple force-directed graph built from a CSV file containing hierarchical data, showing parent-child relationships as an interactive tree layout with curved links and labeled circular nodes. The code uses d3.v5’s `d3.csv`, `d3.stratify`, and `d3.hierarchy` to transform the flat tabular data into a tree structure, which is then rendered as an SVG via the `d3.tree()` layout. Nodes are drawn as circles with text labels, connected by cubic Bézier paths, with styling applied through CSS classes.

Dec 11, 2020
Loading thumbnail…

ERP DisCal Chart - Force Bubble type

This force-directed bubble chart visualizes ERP disruption by mapping nodes on a two-axis grid of game-changingness and response ability. The SVG is divided into four colored quadrants representing different strategic outcomes. Node positions are determined by d3.forceSimulation, while d3.scaleLinear and d3.scaleSqrt handle axis mapping and bubble sizing. Data comes from randomly generated JSON with group assignments, and a tooltip appears on hover. The chart uses D3 v5 with axis labels and custom CSS styling.

Dec 8, 2020
Loading thumbnail…

ERP DisCal Chart - Force Bubble type

Four colored quadrants position randomly generated data points along two axes: “game-changingness” horizontally and “ability to respond in time” vertically. Force-directed bubbles, rendered as SVG circles using d3.forceSimulation, repel and settle into clusters, with point size scaled by d3.scaleSqrt. The code builds axes with d3.axisBottom and d3.axisLeft, applies hover effects with CSS, and uses a tooltip div for interaction. Data is generated randomly, with no external dataset.

Dec 8, 2020
Loading thumbnail…

ERP TIMEBAR

This example presents a stacked bar chart that visualizes temporal ERP data across multiple series. A dropdown filter enables users to select and compare different data groups. The visualization animates the bars, drawing them from right to left to represent a consistent timeline starting at year 2000. The chart uses an ordinal color scale with distinct palettes per group to differentiate categories. The implementation relies on D3 v5’s core API, including `d3.select`, `d3.scaleBand`, `d3.scaleLinear`, `d3.stack`, and `d3.csv`, with data fetched from a GitHub gist. Rendering is done via SVG with CSS-based hover effects that highlight individual bars.

Dec 8, 2020
Loading thumbnail…

ERP TIMEBAR

This visualization displays ERP (Enterprise Resource Planning) process timing data as a horizontally stacked bar chart, where each row represents a series and colored segments show time ranges from minimum to maximum values across multiple groups. The bars animate from zero width to their full extent using D3 transitions, with a tooltip feature implemented via the d3-tip library. The chart uses d3.scaleBand for the y-axis, d3.scaleLinear for the x-axis, and d3.stack for data serialization. Data is loaded from a CSV file via d3.csv with autoType parsing, rendered as SVG elements with ordinal color scaling per group.

Dec 6, 2020
Loading thumbnail…

ERP TIMEBAR

The ERP TIMEBAR displays stacked bar segments for event-related potential data across multiple series, with each colored group representing a factor level (Min, All, Max) over a shared time axis. The visualization animates bar growth using D3 v5 transitions, delaying each segment’s expansion to reveal the progression of values. It loads a CSV via `d3.csv` and `autoType`, applying `d3.stack()` and `d3.scaleBand`/`scaleLinear` scales, while `svg` rects are colored through a custom ordinal scale and rendered as SVG with timed `.attrTween`-like transitions.

Dec 3, 2020
Loading thumbnail…

ERP DisCal Chart - Force Bubble type

This visualization presents a force-directed bubble chart of ERP disruption calculus, mapping items on axes for game-changingness and ability to respond in time. Randomly generated data points are plotted within four colored quadrants that categorize the disruption scenarios. The chart uses D3.js v5, specifically employing `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.axisBottom` and `d3.axisLeft` for axes. The SVG rendering includes custom tooltips and hover effects on circles, with animation implied through force simulation as noted in the adaptation source.

Dec 3, 2020
Loading thumbnail…

STACKBAR Group Colours

This stacked bar chart visualizes the distribution of four numeric values (A–D) across eight animal species, with each bar’s segments colored by the animal’s group (Domestic, Pest, Africa, or Marine) rather than by the series itself. The animation on load slides the bars into place from the right, with each segment transitioning in width and position. Built with D3.js v5 and rendering SVG, it uses `d3.stack()`, `d3.scaleBand()`, `d3.scaleLinear()`, and `d3.scaleOrdinal()` to map data from a CSV file, while each group receives its own color palette defined through a custom ordinal scale.

Dec 3, 2020
Loading thumbnail…

STACKBAR Group Colours

A stacked horizontal bar chart displays animal data across four value columns, with each bar segment colored according to the animal's group membership (Domestic, Pest, Africa, Marine). Built with D3 v5, the visualization uses `d3.stack()` and `d3.scaleOrdinal` to map group colors, with `d3.scaleBand` for the categorical axis and `d3.scaleLinear` for values. The chart includes mouseover tooltips showing animal and group, hover highlighting via CSS, and dropdown controls for group selection. Data loads from CSV using `d3.csv` with automatic type conversion and total column calculation.

Dec 1, 2020
Loading thumbnail…

STACKBAR Group Colours

This stacked bar chart visualizes animal populations across four categories (A–D), with bars colored by the animals’ group membership—Domestic, Pest, Africa, or Marine. Using D3 v5, the visualization loads CSV data via `d3.csv` and constructs horizontal stacked bars with the `d3.stack()` layout. Each rectangular segment’s fill color is assigned based on the group scale, mapping each stack layer to a distinct color scheme. The chart includes top and left axes rendered with `d3.axisTop` and `d3.axisLeft`, with SVG rendering for all elements.

Nov 30, 2020
Loading thumbnail…

ERP TIMEBAR

The ERP Timebar visualizes stacked timeline data for enterprise resource planning projects, showing duration breakdowns across four time categories for each server or task. Categories are color-coded, with a distinct palette applied to Infrastructure groups versus other project types. The chart uses D3 v5 with SVG rendering, employing `d3.scaleBand` and `d3.scaleLinear` for positioning, `d3.stack()` for data aggregation, and `d3.axisTop`/`d3.axisLeft` for axes. Data loads from a CSV via `d3.csv`, and a legend clarifies the category colors.

Nov 23, 2020
Loading thumbnail…

STACKBAR Group Colours

This example presents a horizontal stacked bar chart where each bar represents an animal species, segmented by four numeric categories (A, B, C, D). The bars are differentially shaded by the animal’s group classification (Domestic, Pest, Africa, Marine) using a custom ordinal color scale. Built with D3.js v5, it reads CSV data via `d3.csv` and uses `d3.stack` and `d3.scaleBand` to compute and position the stacked segments within an SVG.

Nov 23, 2020
Loading thumbnail…

STACKBAR Group Colours

This stacked bar chart displays animal categories across four quantitative segments (A, B, C, D), with each bar colored by a group such as Domestic, Pest, Africa, or Marine. The visualization uses D3 v5 with SVG rendering to create horizontal stacked bars, where the length of each segment corresponds to its value. The code employs d3.stack(), d3.scaleBand(), d3.scaleLinear(), and d3.scaleOrdinal() to process the CSV data and assign differential shading based on animal group membership, producing a color-coded breakdown of totals across species.

Nov 23, 2020
Loading thumbnail…

STACKBAR Group Colours

This stacked bar chart displays eight animals across the horizontal axis, with four quantitative series (A, B, C, D) stacked vertically. The bars are colored by a second categorical variable, assigning distinct color ranges to each animal group (Domestic, Pest, Africa, Marine). The visualization uses D3 v5 with SVG rendering, employing `d3.stack()`, `d3.scaleBand()`, `d3.scaleLinear()`, and two `d3.scaleOrdinal()` color scales. Data is loaded from a CSV file where each animal’s total is calculated before stacking. The example explores differential shading to distinguish groups within a stacked layout.

Nov 19, 2020
Loading thumbnail…

STACKBAR Group Colours

This stacked bar chart colors each bar segment by animal group—Domestic, Pest, Africa, Marine—using a custom scale with four shades per group, one per series (A–D). Built with D3 v5, it loads CSV data via `d3.csv`, stacks values using `d3.stack`, and renders SVG. The code assigns a unique color per segment, combining group and series indices, to differentiate categories beyond standard stacked-bar coloring.

Nov 18, 2020
Loading thumbnail…

STACKBAR Group Colours

This stacked bar chart displays animal species categorized by group, with each bar segment colored to represent a shared group rather than individual species categories. The horizontal bars show proportional values across four data columns (A–D) for eight animals. The visualization uses D3 v5’s `d3.stack`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal` APIs to render SVG rectangles. Data is loaded from a CSV file, and colors are assigned by the `Group` column (Domestic, Pest, Africa, Marine) through the ordinal scale’s range.

Nov 14, 2020
Loading thumbnail…

Dishonest Bar Chart

This visualization presents a stacked bar chart of the top 10 most populous countries using 2018 United Nations population estimates. Each bar is divided into three colored segments—red, yellow, and orange—representing quarter, third, and remainder population portions. The chart uses d3.stack to generate the stacked series, d3.scaleBand for the categorical country axis, and d3.scaleLinear for the population scale. Country names appear on the left y-axis, while population values are formatted with abbreviated labels along the bottom x-axis.

Nov 14, 2020
Loading thumbnail…

Dishonest Bar Chart

This horizontal bar chart compares the populations of the top ten most populous countries, using a non-zero baseline to exaggerate differences between values. The visualization is rendered as SVG with D3 v5, using `scaleLinear` for the x-axis and `scaleBand` for the y-axis, with data loaded from a CSV file via `d3.csv`. The example intentionally demonstrates a misleading charting practice, as noted in its README, with population figures from the United Nations’ 2017 World Population Prospects. Axes and tick labels are styled with custom CSS classes.

Nov 14, 2020
Loading thumbnail…

Stylized Bar Chart

A stylized horizontal bar chart displays the top 10 most populous countries based on United Nations World Population Prospects 2019 data, with teal bars and a clean grid. The React-based visualization uses d3.csv to load data, d3.scaleBand for the categorical y-axis, and d3.scaleLinear for the quantitative x-axis, with population formatted in billions via d3.format. Axes and marks render as SVG elements, with tooltips showing exact values through native <title> tags.

Nov 14, 2020
Loading thumbnail…

Let's make a World Map - Cholropleth with interactions

This example presents an interactive choropleth world map built with D3 v5 and TopoJSON, using a natural Earth projection rendered as SVG. The map colors countries by continent using a categorical color scale, with specific overrides for the United Kingdom and Egypt in green and orange. A zoom interaction enables panning and scaling, while a legend widget displays the color scale domain. Data is loaded from the world-atlas package, combining TSV metadata with TopoJSON geometry. Hovering reveals a tooltip with country name, economy, and continent information via appended title elements.

Nov 14, 2020
Loading thumbnail…

World Map - continent interactions (labels)

A stylized world map renders countries as light blue paths, with the United Kingdom highlighted in green and Egypt in orange. The visualization displays interactive labels that reveal each country’s name and continent when hovered. Built with D3 v5 and topojson, it uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` for geometry, with hover effects defined in CSS. Geographic data comes from the world-atlas package.

Nov 5, 2020
Loading thumbnail…

Deaths registered per week in the Engalnd and Wales 2020

This visualization displays weekly registered deaths in England and Wales for 2020, comparing the actual figures against the five-year average. The line chart shows a significant spike in deaths around weeks 14-18, corresponding to the COVID-19 pandemic's first wave. The chart uses D3.js v5 with a linear scale for both the weekly number and the week-of-year axis, rendering the data as an SVG line path. The data is sourced from the Office for National Statistics, with the chart also referencing influenza and pneumonia death mentions within the dataset.

Nov 5, 2020
Loading thumbnail…

ERP Issue List

This example displays a tabular ERP issue list with columns for Serial, Title, and Group. It loads CSV data from a GitHub gist using `d3.csv` and renders an HTML table dynamically with D3 v5’s data joins, appending `th` and `td` elements via `append` and `enter`. The table is styled with custom CSS, setting fixed column widths and a scrollable container. The visualization focuses on presenting raw issue metadata clearly rather than applying visual encodings, relying on D3’s selection and data-binding methods to structure the rows.

Nov 1, 2020
Loading thumbnail…

ERP DisCal Chart - Scatter Plot type

This scatter plot visualizes the ERP Disruption Calculus, positioning each scenario by its 'ValueX' and 'ValueY' coordinates, which are derived from a randomly generated CSV dataset. The chart uses colored rectangles to divide the space into four quadrants, and circles are colored by their 'Group' category using a D3 ordinal scale. A D3 tooltip reveals the scenario's title and its four summary values (SumBU, SumEvo, SumGC, SumDis) on mouseover. The visualization is built with D3 v5, rendering to SVG, and includes animated transitions for the tooltip's opacity.

Nov 1, 2020
Loading thumbnail…

Let's make a World Map - Cholropleth with interactions

This interactive choropleth world map uses D3 v5 and the geoNaturalEarth1 projection to display countries colored by continent. Built with d3.geoPath and topojson, it loads geographic data from world-atlas and renders SVG paths. Hovering highlights countries and shows tooltips with name, economy, and continent. A color legend using d3.scaleOrdinal with the RdYlGn scheme explains the mapping, while the view supports pan and zoom interactions.

Oct 27, 2020
Loading thumbnail…

Let's make a World Map - Cholropleth with interactions

This choropleth world map colors each country by its economy classification using a diverging color scale. Users can zoom and pan the map, and hovering over a country reveals its name, economy type, and continent in a tooltip. The visualization uses d3.geoPath with a natural Earth projection, d3.zoom for interactions, and d3.scaleOrdinal with the RdYlGn scheme. It renders geographic data from the world-atlas TopoJSON and TSV datasets, with a custom color legend built using D3’s join pattern.

Oct 27, 2020
Loading thumbnail…

Let's make a World Map - choropleth with interactive filters

This example presents a world choropleth map colored by income group, rendered with SVG paths projected using d3.geoNaturalEarth1 and d3.geoPath. Users can click legend items to filter countries by income level, with non-selected countries dimmed to 10% opacity and a zoom interaction provided via d3.zoom. The map draws country boundaries from TopoJSON data augmented with TSV attributes, while the color legend uses d3.scaleOrdinal with an RdYlGn scheme for categorical coloring.

Oct 26, 2020
Loading thumbnail…

Let's make a World Map - simple with interactions

This example presents an interactive world map rendered in SVG, where each country is filled with green and highlights red on hover. Built with D3 v5 and TopoJSON, it loads world-atlas data from unpkg and projects it using `geoNaturalEarth1` and `geoPath`. The map supports zooming and panning via `d3.zoom`, with tooltips showing country names extracted from TSV data. The background sphere is drawn separately in dark blue, demonstrating a simple yet interactive geographic visualization.

Oct 25, 2020
Loading thumbnail…

Let's make a World Map - simple

This example shows a simple world map rendered as an SVG, with countries filled in green against a dark blue sphere background. Built with D3 v5 and TopoJSON, it loads world-atlas country boundaries from a CDN and projects them using the geoNaturalEarth1 projection, with geoPath generating the SVG paths. The code also applies CSS classes for styling, demonstrating a basic geographic visualization workflow.

Oct 24, 2020
Loading thumbnail…

Let's make a World Map - basics

A world map rendered with SVG paths using D3’s `geoMercator` projection and `geoPath` generator. The code fetches country boundary data from the world-atlas TopoJSON dataset, converts it to GeoJSON via `topojson.feature`, and draws each country as a separate path element. The map fills the entire SVG viewport with no styling, showing only the raw political borders. The example demonstrates the minimal setup for geographic visualization with D3 v5.

Oct 24, 2020
Loading thumbnail…

VizHub Boiler Plate StartPoint

A minimal scaffold for building a D3 visualization, this example renders a single styled text message centered on the page. The code demonstrates a basic VizHub project structure, importing D3’s `select` method and a local ES6 module named `message`. The `index.html` includes D3 v5 from a CDN and loads a compiled `bundle.js`, while `index.js` sets the text content of a `div#message` element. The `myMessage.js` module exports the string, and `styles.css` applies large, centered typography.

Oct 23, 2020
Loading thumbnail…

Total Number of Rockets Throughout The Years

This bar chart shows the total number of rockets launched each year, with bars segmented by mission status (success or failure) to add a categorical color dimension. The visualization uses Vega-Lite, with data loaded via D3’s `csv` function from a Kaggle-sourced CSV file. The `groupby` transformation aggregates counts per year and status, while the tooltip displays the raw count. Custom axis styling and a dark color scheme in the config file improve readability against a full-window canvas.

Oct 23, 2020