Graph and table with tricks in v6

100%

Graph and table with tricks in v6

✓ Published0🌍 Public

Last edited Sep 15, 2020

Created on Sep 15, 2020

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.

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 6 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

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

84% match

Loading thumbnail…

Simple graph with table in v6

This example combines a simple line graph with an accompanying HTML table, both rendered from the same CSV dataset of date and closing price values. The line chart uses SVG with d3.scaleTime and d3.scaleLinear to map the data, while d3.line generates the path and d3.axisBottom and d3.axisLeft add the axes. A separate table is generated below the chart using d3.select to append elements, displaying the raw date and close values in a Courier font. The code relies on d3.csv for data loading and d3.timeParse for date formatting.

Dd3noob

80% match

Loading thumbnail…

Gist 6285682

This simple line chart shows the daily closing price of Apple (AAPL) stock from late 2011 to mid-2012, with each trading day plotted in chronological order. The visualization uses a conventional margin layout with axes rendered via SVG, leveraging D3's time scale for the x-axis and a linear scale for price on the y-axis. The line is drawn using d3.svg.line, with the data loaded from a TSV file and parsed using d3.tsv and d3.time.format. The chart uses d3.extent to automatically compute the domain from the date and price values, and displays axes with d3.svg.axis for clear temporal and price reference. The result is a clean, minimal line chart showing the stock's trajectory over the period, demonstrating D3's data-joining and scalable vector graphics capabilities in a straightforward time-series context.

11wheel

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

80% match

Loading thumbnail…

Gist 6285771

This simple line chart tracks the daily closing price of AAPL stock from January 2012 to May 2012, with a data file storing date–price pairs. It uses D3’s SVG rendering, applying conventional margins, a time scale for the x-axis, a linear scale for the y-axis, and axis components. The line is drawn with d3.svg.line, while domains are computed with d3.extent. The chart demonstrates loading and parsing TSV data with d3.tsv and formatting dates with d3.time.format, offering a clean, compact example of D3’s core data-join and scales.

11wheel

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

79% match

Loading thumbnail…

Gist 5865021

This example shows the closing price of Apple (AAPL) stock over several months in 2011 and 2012 as a simple SVG line chart. The time-series data is loaded from a TSV file using `d3.tsv`, with dates parsed through `d3.time.format`. The chart uses a `d3.time.scale` for the x-axis, a linear `d3.scale.linear` for the y-axis, and `d3.extent` to compute the domains. Axes are rendered with `d3.svg.axis`, and the line itself is drawn using `d3.svg.line` with steelblue strokes on a white background.

11wheel

79% match