Skip to main content
SimilarExport ZIP
100%

Graph and table with tricks in v4

✓ Published0🌍 Public
TThanaporn-sk
Last edited Jun 13, 2017
Created on Jun 13, 2017

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.

AI-generated description

This is a simple graph demonstrating the addition of a table with several 'tricks' and a graph (open in full screen to see the table). This was written using d3.js v4 and is a follow on to the simple graph with table example here.

This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 4 of d3.js.

forked from <a href='http://bl.ocks.org/d3noob/'>d3noob</a>'s block: <a href='http://bl.ocks.org/d3noob/6f41685b1cd675d2d3de4f8a14777774'>Graph and table with tricks in v4</a>

mit Licensed

Similar vizzes

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
100% 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
92% 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
88% 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
88% 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
87% 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
85% match
Loading thumbnail…

Graph and table with tricks in v6

A line chart plots stock closing prices over time for Apple (AAPL) in April-May 2012. A sorted HTML table appears below the chart with the date, close, open, and computed difference columns. The example uses D3 v6 with SVG, `d3.csv`, `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to render the graph, and builds the table with D3's selection and data-join methods. The table's rows are sorted by closing price using `d3.descending`, and headers are capitalized via text transformation.

Dd3noob
82% match
Loading thumbnail…

Simple line graph with v4

This simple line graph displays the daily closing value of a stock over a month, using data from a CSV file. The SVG chart is built with D3.js v4, employing `d3.scaleTime` and `d3.scaleLinear` to map dates and prices, while `d3.line` generates the path. The axes are drawn with `d3.axisBottom` and `d3.axisLeft`, and the line is styled with a steel-blue stroke.

Dd3noob
81% match