Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Structuring D3 code with ES6 classes

Public visualization

Viewing a saved revision (read-only)

e9bebb6569064be2a3485060e43371b8

Structuring D3 code with ES6 classes

0 stars0🌍 Public
RRubens
Last edited Oct 11, 2018
Created on Sep 3, 2018
Forked from Making a Bar Chart

Two interactive line charts show monthly data points, with buttons to change the line color or regenerate random data. Built with D3 v5, the example structures chart logic as an ES6 `Chart` class that handles scales, axes, and rendering. The code uses `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` to draw SVG paths, and demonstrates public methods like `setColor` and `setData` for updating the visualization.

AI-generated description

This code is based on code from Elliot Bentley’s Block 774b87bf0f7482599419d1e7da9ed918.

For more information, see his blog post A better way to structure D3 code.