Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3_CookBook(v5)_Ch3 pt2

Public visualization

Viewing a saved revision (read-only)

82b319bf6a294dd39fc3b4c6dcb1a78a

D3_CookBook(v5)_Ch3 pt2

0 stars0🌍 Public
JJimMaltby
Last edited Jul 1, 2021
Created on Jul 1, 2021

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.

AI-generated description

D3 Cook Book getting used to JS in d3 CH2 Problem in converting from v3 to v5 and looks like book has poor practice of d3.js (https://stackoverflow.com/questions/45181773/d3-js-raw-selection-get-error-uncaught-typeerror-cannot-read-property-0-of-u)