Skip to main content
SimilarExport ZIP
100%

d3EdgeReusable_Examples-Simple1_v5

✓ Published3🌍 Public
JJimMaltby
Last edited Oct 23, 2021
Created on Oct 23, 2021

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.

AI-generated description

A vanilla HTML implementation of a d3Edge examples in v5 build towards ProD3 pattern

It is derived from Mike Bostock's Towards Reusable Charts (https://bost.ocks.org/mike/chart/) as the source of the foundational principles. But uses the ProD3 pattern (Pro D3.js Use D3.js to Create Maintainable, Modular, and Testable Charts by Marcos Iglesias https://www.apress.com/gp/book/9781484252024) as the basis for the charts.

Addtional help from and aknowledgement to:

MIT Licensed

Similar vizzes

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.

JJimMaltby
89% match
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.

JJimMaltby
82% match
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.

JJimMaltby
80% match
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.

JJimMaltby
80% match
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.

JJimMaltby
79% match
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.

JJimMaltby
78% match
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.

JJimMaltby
77% match
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.

JJimMaltby
77% match