Simple graph with table in v5

100%

Simple graph with table in v5

✓ Published0🌍 Public

Last edited Nov 28, 2019

Created on Nov 28, 2019

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.

AI-generated description

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

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

mit Licensed

Similar vizzes

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

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

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

87% match

Loading thumbnail…

Simple graph with grid lines in v5

This example shows a line graph of stock closing prices over time, enhanced with light gray grid lines for both the x- and y-axes. The chart loads CSV data with dates and values, parses the dates, and scales the data using `d3.scaleTime` and `d3.scaleLinear`. Grid lines are generated via `d3.axisBottom` and `d3.axisLeft` functions, with tick marks extended across the plot area. The line path is drawn with `d3.line`, and axes are rendered using D3 v5’s SVG-based axis components.

Dd3noob

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

85% match

Loading thumbnail…

Simple Line Graph v5

A simple line graph displays daily closing prices over roughly six weeks, extracted from a CSV file with date and value columns. The visualization uses an SVG path rendered through D3 v5's `d3.line()` generator, with a time scale for the x-axis and a linear scale for the y-axis. Margins are set explicitly, and both axes are drawn using `d3.axisBottom()` and `d3.axisLeft()`. The date strings are parsed with `d3.timeParse()`, and the line is styled with a steelblue stroke.

Dd3noob

85% match

Loading thumbnail…

Simple line graph with v4

A simple line graph shows the closing price of a dataset over time, with dates on the x-axis and values on the y-axis. Using d3.v4, the code loads a CSV file via `d3.csv`, parses dates with `d3.timeParse`, and constructs the line with `d3.line`. SVG scales and axes are built with `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`. The rendered SVG path displays a steelblue line, with margins and dimensions set explicitly.

Dd3noob

84% match

Loading thumbnail…

Simple d3.js Graph

This simple d3.js graph displays a time series of closing stock prices from a CSV file, with dates on the x-axis and values on the y-axis. Rendered as an SVG line chart, it uses d3.svg.line, d3.time.scale, and d3.scale.linear to map the data, while d3.svg.axis generates the axes. The data.csv file contains 26 daily entries from March to May 2012, positioned within a 600×270 pixel canvas with margins. The code also applies a steelblue stroke to the line and grey axis lines via CSS.

Dd3noob

84% match