Simple scatterplot with d3.js

100%

Simple scatterplot with d3.js

✓ Published0🌍 Public

Last edited Oct 19, 2017

Created on Oct 19, 2017

This example shows a hybrid line-and-scatterplot of stock closing prices over time, with a steelblue line connecting daily data points and small circles marking each individual value. The code loads date and close values from a CSV file using d3.csv, parses dates with d3.time.format, and scales the data with d3.time.scale and d3.scale.linear. It renders axes with d3.svg.axis and draws the line using d3.svg.line, while circles are appended to the SVG canvas with explicit cx and cy attributes.

AI-generated description

This is a follow on from the simple d3.js graph used as an example in the book D3 Tips and Tricks.

It adds points to a simple line graph to produce a hybrid line / scatterplot graph. It should be taken in context with the text of the book which can be downloaded for free from Leanpub.

forked from <a href='http://bl.ocks.org/d3noob/'>d3noob</a>'s block: <a href='http://bl.ocks.org/d3noob/38744a17f9c0141bcd04'>Simple scatterplot with d3.js</a>

forked from <a href='http://bl.ocks.org/nguyenbq/'>nguyenbq</a>'s block: <a href='http://bl.ocks.org/nguyenbq/a350280a02c8105529d0'>Simple scatterplot with d3.js</a>

mit Licensed

Similar vizzes

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

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

88% match

Loading thumbnail…

Simple scatterplot with d3.js

This visualization combines a line graph and scatterplot to show Apple’s stock closing price over time, with data from a CSV file. The blue line connects daily price points, while small circles mark each individual observation along the series. Built with D3.js (version 3.5), it uses `d3.svg.line`, `d3.time.scale`, and `d3.svg.axis` to render the SVG path, axes, and date-based x-scale. The scatterplot circles are appended via `selectAll("dot")` with explicit radius and coordinate attributes. Data parsing relies on `d3.time.format` for date conversion and linear scaling for y-values.

Dd3noob

87% match

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

86% match

Loading thumbnail…

Simple scatter plot in v4

This example shows a simple line graph with circular data points overlaid to create a scatter plot, displaying stock closing prices over time. The visualization uses d3.csv to load the data, d3.timeParse to convert date strings, and d3.scaleTime and d3.scaleLinear to map the date and price values to pixel coordinates. A d3.line generator draws the line path, while appended circle elements mark each data point. The chart includes axes generated with d3.axisBottom and d3.axisLeft, all rendered as SVG within the page.

Dd3noob

86% match

Loading thumbnail…

Scatterplot with v5

This example shows a time-series line graph of stock closing prices, with circular scatterplot points overlaid on each data value. The visualization uses a steelblue line and dark circles to highlight individual daily observations across the date range. Built with d3 v5 and rendered as SVG, the code employs `d3.csv` to load the data, `d3.timeParse` for date formatting, and `d3.line` for the path, while `d3.scaleTime` and `d3.scaleLinear` handle the axes. The scatterplot points are appended as SVG circles positioned via the same x and y scales.

Dd3noob

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

Loading thumbnail…

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

83% match