Scatterplot with v5

100%

Scatterplot with v5

✓ Published0🌍 Public

Last edited Nov 25, 2019

Created on Nov 25, 2019

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.

AI-generated description

This is a simple line graph demonstrating the addition of scatterplot points to a line graph. This was written using d3.js v5 and is a follow on to the simple 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…

Scatterplot with v6

This scatterplot overlays a line chart to show the trend of stock closing prices over time. A steelblue line connects the chronological data points, while small circles highlight the individual daily values from the CSV file. The visualization uses D3 v6 with `d3.scaleTime`, `d3.line`, and `d3.axisBottom` to construct the axes and paths. The SVG rendering is driven by `d3.select` and attaches circles through `enter().append("circle")` to mark each data point. The x-axis maps dates while the y-axis scales the closing prices from the data.csv source.

Dd3noob

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

87% match

Loading thumbnail…

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.

Dd3noob

87% match

Loading thumbnail…

Scatterplot with v7

This example combines a line graph with an overlay of scatterplot points to show daily closing prices over time. The SVG visualization uses D3 v7 to load CSV data, parse dates with `d3.timeParse`, and scale values with `d3.scaleTime` and `d3.scaleLinear`. A `d3.line` path draws the trend, while circles are appended at each data point’s coordinates, with axes rendered via `d3.axisBottom` and `d3.axisLeft`.

Dd3noob

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

82% match

Loading thumbnail…

Using an 'if' statement in v5

This example shows a time-series line chart of stock closing prices over a month, with an overlaid scatterplot of individual data points. The points are colored conditionally: red when the closing price is less than or equal to 400, and black otherwise. Built with d3.js v5 and rendered as SVG, it uses `d3.line`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft`. Data is loaded from a CSV file and parsed with `d3.timeParse`. A simple inline `if` statement within the fill function demonstrates filtering logic for visual encoding.

Dd3noob

81% match

Loading thumbnail…

Multiple line graph in v5

This example shows two time-series lines, one for closing prices and one for opening prices, plotted against dates from a CSV file. The visualization uses d3.scaleTime and d3.scaleLinear to map data to x and y axes, with d3.line generating the two path elements. A steelblue line represents the close values, while a red line, styled via a second `.line` class, represents the open values. The axes are rendered with d3.axisBottom and d3.axisLeft in an SVG container sized at 960 by 500 pixels.

Dd3noob

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

80% match