Simple graph with filled area in v4

Area chart v3

This example shows a simple area chart of ten randomly generated values, rendered as a smooth filled path against a blank SVG canvas. The data is created inline using `Array.from` and `Math.random`, with values between 1 and 9. The code uses `d3.scale.linear` for both x and y axes, and `d3.svg.area` with a cardinal interpolation to draw the curved area from the baseline at height 500 up to each data point. The path is styled with a steelblue fill and stroke, and the visualization is fixed at 960 by 500 pixels.

Aalex-rind

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.

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`.

Simple graph with filled area in v5

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`.

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.

82% match

Viz - Area - line - axis

This example combines an area chart and a line chart on a shared y-axis, rendering 20 randomly generated data points as a smooth basis curve. The SVG output uses two D3 v4 modules: `viz.area()` fills the area beneath the curve with semi-transparent green, while `viz.line()` draws the line itself in solid green. A left-oriented axis with grey ticks and horizontal gridlines is created using `d3.axisLeft()`. The data is generated on the fly by `randomData()`, and the chart is assembled by passing the area and line components to a single `d3.select("g")` selection.

NNPashaP

79% match

Class: Area Graph

This example shows an area chart created from five data points, with a smooth curved boundary filling the space between the baseline and the data values. The visualization uses D3 v4 to render an SVG path, mapping x and y coordinates through linear scales. The `d3.area()` generator sets the baseline at y=0 and defines the upper boundary using a basis curve for smooth interpolation. The code appends a single path element with the generated `d` attribute, producing a gray, thick-stroked filled region that visually represents the trend across the dataset.

VVirginiaHNg

78% match