20 - Simple graph and table using d3.js

1 - Simple d3.js Graph

This example plots a line chart of closing stock prices over time, with values read from a local CSV file containing date and close columns. The visualization uses D3.js v3 to create an SVG-based graph, employing `d3.svg.line`, `d3.time.scale`, and `d3.scale.linear` to map dates and prices to screen coordinates. It renders axes via `d3.svg.axis` with a bottom time axis and a left linear axis, while the line itself is drawn as a path with a steelblue stroke. The graph includes no interactive features or additional data layers, focusing solely on the basic line chart display.

Aadry34160

89% match

21 - Graph and table with tricks

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.

Aadry34160

87% match

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.

87% match

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.

86% match

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.

Simple line graph in d3.js

This simple line graph plots stock closing prices over time from a CSV dataset with date and value columns. The visualization uses d3.v3 with an SVG canvas, a time-scaled x-axis, and a linear y-axis, rendering the data as a single steelblue path. The code demonstrates core D3 concepts including `d3.time.format` for date parsing, `d3.time.scale` and `d3.scale.linear` for coordinate ranges, and `d3.svg.line` to generate the line geometry from the parsed data points.

Aadamfknapp

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.

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.