Skip to main content
SimilarExport ZIP
100%

Simple graph with filled area in v5

✓ Published0🌍 Public
Dd3noob
Last edited Nov 26, 2019
Created on Nov 26, 2019

This example shows a time series line graph with a filled area beneath it, displaying stock close prices over a month. The chart uses D3 v5 with SVG rendering, where the area is generated by the `d3.area` API and the line by `d3.line`. Data is loaded from a CSV file and parsed with `d3.timeParse`. Axes are added using `d3.axisBottom` and `d3.axisLeft`, with scales defined via `d3.scaleTime` and `d3.scaleLinear`.

AI-generated description

This is a simple graph demonstrating the addition of a filled area in conjunction with 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…

Simple graph with filled area in v6

This example shows a time-series line graph of stock closing prices, with the area beneath the line filled in light blue to emphasize the trend. It uses d3.csv to load date and close values from a local CSV file, then renders the data as an SVG path using d3.area() and d3.line(). The x-axis uses d3.scaleTime with date parsing via d3.timeParse, while the y-axis uses d3.scaleLinear, and axes are drawn with d3.axisBottom and d3.axisLeft.

Dd3noob
93% match
Loading thumbnail…

Simple graph with filled area in v7

This example shows a time-series line graph of stock closing prices, with the area beneath the line filled in light blue to emphasize the trend. The chart uses an SVG rendered with D3 v7, and reads its data from a local CSV file. It defines an `d3.area` generator for the filled region and an `d3.line` generator for the stroke, both mapping dates to an `d3.scaleTime` x-axis and values to an `d3.scaleLinear` y-axis. The axes are drawn with `d3.axisBottom` and `d3.axisLeft`.

Dd3noob
92% match
Loading thumbnail…

Simple graph with filled area in v4

This example shows a line graph of daily closing values with a filled area beneath the line, using a simple time-series dataset parsed from CSV. The visualization is rendered as SVG using D3 v4, with `d3.scaleTime` and `d3.scaleLinear` mapping dates and values to pixel coordinates. The area is generated via `d3.area`, while the line uses `d3.line`, and both axes are drawn with `d3.axisBottom` and `d3.axisLeft`. The data comes from a local `data.csv` file containing date and close columns.

Dd3noob
91% match
Loading thumbnail…

Area graph with gradient in v5

This example shows a time-series area chart of stock closing prices with a multi-color gradient that shifts from red through black to green based on the y-axis value. The area fills beneath the line, while the x-axis uses time scaling and the y-axis uses linear scaling. Built with D3 v5, it loads data from a CSV file and renders as SVG. The gradient is defined using an SVG `linearGradient` with `userSpaceOnUse` units, created via D3’s selection and data-join methods, and applied to a path generated with `d3.area`. Axis helpers `d3.axisBottom` and `d3.axisLeft` add the scales.

Dd3noob
85% 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
85% match
Loading thumbnail…

Simple graph with table in v5

A simple line graph displays closing stock prices over time, with a data table shown below it that lists the same date and close values. Built with d3.v5, the example uses `d3.csv` to load the data, `d3.timeParse` to format dates, and `d3.line` with `d3.scaleTime` and `d3.scaleLinear` to render the SVG path. Axis labels are generated via `d3.axisBottom` and `d3.axisLeft`. The table is constructed dynamically using a custom `tabulate` function that appends HTML rows and cells.

Dd3noob
83% match
Loading thumbnail…

d3.js Graph with many features

This example presents a line chart of stock closing prices over time, with a filled area beneath the curve to emphasize the trend. It uses d3.svg.axis, d3.svg.line, and d3.svg.area to render the axes, value line, and shaded region, while d3.csv loads the date and price data from a local CSV file. The chart includes custom grid lines, axis labels, and a white-shadowed y-axis label, all drawn as SVG within the D3 v3 framework.

MMattDionis
82% match
Loading thumbnail…

Simple graph with grid lines in v6

This example displays a line chart of stock closing prices over time, with light gray grid lines spanning both axes to aid readability. It uses D3 v6 to load a CSV file, parse dates, and scale the data with `d3.scaleTime` and `d3.scaleLinear`. The grid lines are generated by calling `d3.axisBottom` and `d3.axisLeft` with custom tick sizes, while the line path is drawn using `d3.line`. The SVG rendering includes margins and styled grid elements for a clean visual layout.

Dd3noob
82% match