Simple scatter plot in v4

Scatterplot with v4

This example shows a line graph of stock closing prices over time, with scatterplot points overlaid on the line to mark individual data values. The code loads a CSV file with dates and closing prices, parses the dates with `d3.timeParse`, and defines scales using `d3.scaleTime` and `d3.scaleLinear`. It renders the line with a `d3.line` path and adds circles for each data point using SVG. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`. The visualization uses d3.v4 and is rendered as SVG in the browser.

92% match

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.

87% match

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.

Simple graph with grid lines in v4

A line chart displays stock closing prices over time from a CSV file, with light gray grid lines added behind the data. The chart uses D3 v4 with an SVG rendering approach, employing `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the path, and `d3.axisBottom` and `d3.axisLeft` with custom tick sizes to generate the grid. The visualization is based on a gist by d3noob, serving as a follow-up to a simpler line graph example.

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.

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.

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.