Graph and table with tricks in v7

100%

Graph and table with tricks in v7

✓ Published0🌍 Public

Last edited Jun 19, 2021

Created on Jun 19, 2021

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.

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 graph is part of the code samples for the update to the book D3 Tips and Tricks to version 7 of d3.js.

mit Licensed

Similar vizzes

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…

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

84% 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

83% match

Loading thumbnail…

Simple graph with table in v7

This example shows a date-based line graph of closing values from a CSV file, accompanied by a table displaying the same raw data. The SVG line chart uses d3.line with a time scale (d3.scaleTime) and linear scale (d3.scaleLinear), while axes are generated with d3.axisBottom and d3.axisLeft. A separate HTML table is constructed via d3.select and append, with rows and cells bound to the parsed data. The code relies on d3.csv for loading and d3.timeParse for date formatting.

Dd3noob

82% 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

82% match

Loading thumbnail…

Simple graph with grid lines in v7

A simple line chart displays closing-price data from a CSV file over time. The graph uses light grey grid lines on both the x and y axes, created with `d3.axisBottom` and `d3.axisLeft` together with `tickSize` and `tickFormat`. The line itself is drawn via `d3.line` within an SVG. The chart is built with d3.v7, parsing dates with `d3.timeParse` and loading data via `d3.csv`. Axes and the line are rendered with standard d3 scale and shape functions.

Dd3noob

81% match

Loading thumbnail…

Simple Line Graph v7

This chart displays the closing price of a stock over time from late March to early May 2012, using a single blue line. It renders data from a CSV file as an SVG path, with the x-axis showing dates and the y-axis showing price values. The code loads the data via `d3.csv`, parses dates with `d3.timeParse`, scales the axes with `d3.scaleTime` and `d3.scaleLinear`, and draws the line using `d3.line`. It appends axes with `d3.axisBottom` and `d3.axisLeft` to complete the visualization.

Dd3noob

81% match