Skip to main content
100%

1 - Simple d3.js Graph

✓ Published0🌍 Public
Aadry34160
Last edited Oct 30, 2016
Created on Oct 30, 2016

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Simple line graph in d3.js

This example shows a simple line graph plotting stock closing prices over time, with date values on the x-axis and price on the y-axis. The visualization uses D3.js version 3.5.17, employing `d3.time.scale` for the date range, `d3.scale.linear` for the value axis, and `d3.svg.line` to generate the path. Data is loaded from a local CSV file via `d3.csv`, with the axes created through `d3.svg.axis`. The SVG rendering includes styled axis lines and a steelblue line, providing a minimal teaching example for D3 chart construction.

Dd3noob
92% match
Loading thumbnail…

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
91% 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
90% match
Loading thumbnail…

20 - Simple graph and table using d3.js

This example displays a time-series line chart of stock closing prices alongside a table of the same data. The SVG line graph uses d3.svg.line to plot dates against close values, with d3.time.scale and d3.scale.linear handling the axes. Below the chart, a table is generated with d3.select and data joins, rendering the raw CSV rows in a Courier font. The visualization reads from data.csv and uses d3.v3, with parsing via d3.time.format.

Aadry34160
89% match
Loading thumbnail…

9 - Simple scatterplot with d3.js

This example visualizes stock closing prices over time using a combined line and scatterplot. The code plots each date’s close value as a small circle, with a steelblue line connecting the points to emphasize the overall trend. It uses d3.v3 with SVG rendering, employing d3.time.scale for the date axis and d3.scale.linear for the price values. The axes are generated via d3.svg.axis, while the line is drawn with d3.svg.line and the points are appended as SVG circle elements. Data comes from a local CSV file containing date and close columns.

Aadry34160
88% match
Loading thumbnail…

Simple d3.js graph with internal data

This example shows a line chart of stock closing prices over a three-week period in April and May 2012. The data is declared internally as a JavaScript array of date-value pairs. The visualization uses D3.js version 3.5.17, with `d3.time.scale`, `d3.scale.linear`, `d3.svg.axis`, and `d3.svg.line` to render the axes and the line path in SVG. The chart includes styled axes and a steelblue line, with the date parsed via `d3.time.format`.

Dd3noob
86% 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
85% 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
85% match