Area chart v3

100%

✓ Published0🌍 Public

Last edited Dec 18, 2018

Created on Dec 18, 2018

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Simple graph with filled area in v4

A simple line graph displays ten random data points, with the area beneath the line filled in light steel blue. The chart uses d3.v4’s `d3.area` and `d3.line` generators, with `d3.scaleLinear` for both axes and `d3.axisBottom` and `d3.axisLeft` for ticks. The SVG paths are appended to a group, and the data is generated inline as an array of random integers. The fill extends from the baseline to the line, and the line itself is styled as a solid steelblue stroke.

Aalex-rind

84% match

Loading thumbnail…

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

84% match

Loading thumbnail…

Area chart with dark top stroke and smooth transitions

A button triggers a smooth update of an area chart, which displays three distinct series of random data points. The chart’s axes and the area shapes transition smoothly over 500 milliseconds whenever new data is generated. The visualization uses D3 v4 with SVG rendering, relying on `d3.scaleLinear`, `d3.axisBottom`, and transitions on the x-axis. The data is generated randomly in JavaScript via `Math.random`, and the chart is redrawn with updated scales and domains.

Aandrewcowley

82% match

Loading thumbnail…

Viz - Area - curve

This example draws a smooth area chart from twenty randomly generated data points. It uses the Viz.js library’s `area` generator, configured with a basis curve via `d3.curveBasis`, and renders the result as an SVG path with a steelblue fill. The random data is created on the fly using `d3.range`, and the chart is placed inside a `<g>` element translated within an SVG canvas.

NNPashaP

82% match

Loading thumbnail…

area chart

This area chart displays a series of 63 data points showing a fluctuating trend, with a smooth curve drawn through the values and a pink filled region beneath it. Built with Svelte and rendered as SVG, it uses d3.scaleLinear for the x and y axes, along with d3.area and d3.line generators with curveCatmullRom to create the smooth path. A gray overlay rectangle animates across the chart, sliding from left to right via a CSS keyframe animation. The visualization resizes responsively to fill its container using bound client dimensions.

TTarun Kumar Bosupally

81% match

Loading thumbnail…

Area chart

Three layered area bands show how a value range evolves across an x-axis from 0 to 70, with each band representing a distinct series (e.g., area1, area2, area3) defined by low and high y-values. The chart uses stacked-like transparency via SVG paths filled with teal shades, computed with D3 v4’s `d3.area()` generator and linear scales for x and y. Rendering is done through SVG path elements appended to a 700×400 viewport, with data hardcoded as JavaScript arrays in the gist source.

EEfratVil

81% match

Loading thumbnail…

D3 Area Chart

This example displays a stepped area chart of a time series where values rise in distinct plateaus from zero to 80,000, then fall back to zero. The chart uses an SVG path generated by d3.area, with d3.axisBottom and d3.axisLeft for scales, and linear scales for both x and y dimensions. Data is provided as a hardcoded array mapped to x/y points, rendered with yellow fill on a red background. The visualization demonstrates how d3.v7 constructs area shapes from discrete data points.

AAmeer Nuri

80% match

Loading thumbnail…

D3 Area Genrators

This example demonstrates two area charts generated from the same set of six data points. The D3 `d3.area()` generator creates a path with a closed shape; the first is drawn with a red fill and a default baseline of zero, while the second uses a `y0(150)` offset to position its blue shape higher on the SVG canvas. The paths are rendered as SVG elements using the `d` attribute set directly from the generator’s output, with data provided as an array of `[x, y]` coordinates.

SSubhendu Karmakar

80% match