Skip to main content
100%

21 - Graph and table with tricks

✓ Published0🌍 Public
Aadry34160
Last edited Jan 18, 2017
Created on Jan 9, 2017

This example combines a line chart and a sortable HTML table to display financial data from a CSV file. The line chart plots the closing price over time using D3 v3’s `d3.svg.line`, `d3.time.scale`, and `d3.svg.axis` with SVG rendering. The table lists dates, close and open values, plus a calculated difference column, and sorts its rows by closing price using `d3.descending`. Data is loaded via `d3.csv` from two separate CSV files, with only the second file used for both the chart and table.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/adry34160/'>adry34160</a>'s block: <a href='http://bl.ocks.org/adry34160/c1f2527426cc30f30779ce2fc41f243d'>20 - Simple graph and table using d3.js</a>

mit Licensed

Similar vizzes

Loading thumbnail…

20 - Simple graph and table using d3.js

This example displays a time-series line chart of stock closing prices alongside a table of the same data. The SVG line graph uses d3.svg.line to plot dates against close values, with d3.time.scale and d3.scale.linear handling the axes. Below the chart, a table is generated with d3.select and data joins, rendering the raw CSV rows in a Courier font. The visualization reads from data.csv and uses d3.v3, with parsing via d3.time.format.

Aadry34160
87% match
Loading thumbnail…

Graph and table with tricks

A line chart of stock closing prices over time is displayed alongside an HTML table listing each date’s close, open, and computed difference. The SVG chart uses d3.time.scale and d3.svg.line to render the path, while d3.csv loads the data. The table is built with d3.select and append, then sorted by closing price in descending order, with column headers capitalized.

Dd3noob
86% match
Loading thumbnail…

Graph and table with tricks in v4

This example combines a line chart with an interactive HTML table, both generated from the same CSV dataset. The line chart plots the closing values over time using D3’s time-scaled x-axis and linear y-axis, while the table displays the raw date, close, open, and computed difference columns. The table’s rows are sorted by descending close value, and the column headers are capitalized automatically. The chart is drawn as an SVG path using `d3.line`, with axes created via `d3.axisBottom` and `d3.axisLeft`. The table is built with the D3 selection API, appending `table`, `thead`, and `tbody` elements to the page body.

Dd3noob
84% match
Loading thumbnail…

Graph and table with tricks in v5

This example combines a line chart with an interactive HTML table on a single page. The SVG graph plots the `close` values from a CSV file over time, using d3 v5's `d3.line`, `d3.scaleTime`, and `d3.scaleLinear` for the axes. The accompanying table, generated with `d3.select("body").append("table")`, displays the raw `date`, `close`, `open`, and a calculated `diff` column. The table’s rows are sorted in descending order by the `close` value via `d3.descending`, demonstrating table manipulation alongside the chart.

Dd3noob
84% match
Loading thumbnail…

Graph and table with tricks in v4

This example pairs a line chart of stock closing prices with an interactive HTML table, both rendered as SVG and DOM elements using D3.js v4. The graph uses `d3.line`, `d3.scaleTime`, and `d3.scaleLinear` to plot date and close values from a CSV file, while the table displays date, close, open, and computed difference columns. The table is sorted by descending close values using `d3.descending`, and headers are capitalized via text manipulation. Data parsing relies on `d3.timeParse`, and all styling is applied through CSS and inline attributes.

TThanaporn-sk
83% match
Loading thumbnail…

Graph and table with tricks in v4

This example pairs a line chart of stock closing prices with an interactive HTML table, both rendered as SVG and DOM elements using D3.js v4. The graph uses `d3.line`, `d3.scaleTime`, and `d3.scaleLinear` to plot date and close values from a CSV file, while the table displays date, close, open, and computed difference columns. The table is sorted by descending close values using `d3.descending`, and headers are capitalized via text manipulation. Data parsing relies on `d3.timeParse`, and all styling is applied through CSS and inline attributes.

TThanaporn-sk
83% match
Loading thumbnail…

Graph and table with tricks in v7

A line chart displays closing stock prices over time, paired with an HTML table of the same data that adds an open-price column and a computed price-difference column. The table rows are sorted by closing price in descending order using `d3.descending`, and headers are capitalized via text manipulation. The visualization uses the D3 v7 library, with `d3.csv` loading the dataset, `d3.timeParse` for dates, `d3.scaleTime` and `d3.scaleLinear` for axes, and SVG paths rendering the line.

Dd3noob
82% match
Loading thumbnail…

Simple graph and table using d3.js

This example pairs a simple line graph with an HTML table generated from the same CSV dataset, showing date and closing value pairs. The SVG chart uses D3.js scales, axes, and a line generator to plot the data, while a separate table function renders the raw values beneath it. The code relies primarily on `d3.csv` for data loading, `d3.time.scale` and `d3.scale.linear` for scaling, and `d3.svg.axis` for axis creation, all within D3 version 3.5.17. The table is styled inline with font and margin attributes.

Dd3noob
82% match