Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Towards_Updateable-Resusable-ProD3js_d3jsCharts-Update with Join(j

Public visualization

Viewing a saved revision (read-only)

51614d73b5624b7b88bd43b1bc42d81c

Towards_Updateable-Resusable-ProD3js_d3jsCharts-Update with Join(j

0 stars0🌍 Public
JJimMaltby
Last edited Jan 4, 2022
Created on Jan 4, 2022

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.

AI-generated description

Simple Bar Chart example:

A vanilla HTML implementation of Rob Moores updateable pattern Towards Updatable https://www.toptal.com/d3-js/towards-reusable-d3-js-charts.

It is derived from Mike Bostock's Towards Reusable Charts (https://bost.ocks.org/mike/chart/) as the source of the foundational principles.

Will evolve to use 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 further charts.