Skip to main content
SimilarExport ZIP
100%

d3NoobV5 Reusable Examples - Add an HTML table to your graph

✓ Published1🌍 Public
JJimMaltby
Last edited Nov 28, 2021
Created on Nov 28, 2021

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.

AI-generated description

Simple Line Chart:

A vanilla HTML implementation of a d3Noob's V5 examples.

Examples Malcolm Maclean's (d3noob) great book "D3 Tips and Tricks v5.x Interactive Data Visualization in a Web Browser" (https://leanpub.com/d3-t-and-t-v5).

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…

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.

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

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

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

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

JJimMaltby
85% match
Loading thumbnail…

Simple graph with table in v4

This example shows a line chart of stock closing prices over time, paired with an HTML table displaying the same underlying data. The visualization uses D3 v4’s `d3.line`, `d3.scaleTime`, and `d3.scaleLinear` to render the SVG path and axes, while the table is generated dynamically with D3’s data-join methods (`selectAll`, `enter`, `append`). The data is loaded from a CSV file and parsed with `d3.timeParse`. The table appears to the right of the chart when viewed in full screen.

Dd3noob
84% match
Loading thumbnail…

Simple graph with table in v5

A simple line graph displays closing stock prices over time, with a data table shown below it that lists the same date and close values. Built with d3.v5, the example uses `d3.csv` to load the data, `d3.timeParse` to format dates, and `d3.line` with `d3.scaleTime` and `d3.scaleLinear` to render the SVG path. Axis labels are generated via `d3.axisBottom` and `d3.axisLeft`. The table is constructed dynamically using a custom `tabulate` function that appends HTML rows and cells.

Dd3noob
83% match