Class: Area Graph

100%

Class: Area Graph

✓ Published0🌍 Public

Last edited Jun 27, 2017

Created on Jun 27, 2017

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.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/VirginiaHNg/'>VirginiaHNg</a>'s block: <a href='http://bl.ocks.org/VirginiaHNg/d458b01d4a1c13966b6fef702a50ce3f'>Class: Line Graph</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Class: Line Graph

A smooth line graph plots five points from a hardcoded dataset, connecting them with a curved basis spline. The visualization uses D3 v4’s `d3.line` generator with `d3.curveBasis`, mapping the x- and y-coordinates through `d3.scaleLinear` domains of 0–100 to an SVG canvas sized 960×500. The single path element receives its `d` attribute from the generated line data, rendered with a grey stroke of width 5 and no fill.

VVirginiaHNg

82% match

Loading thumbnail…

Area Chart

This example visualizes monthly website visitor counts over a five-year period, using a smooth area chart with a green fill and an overlaid orange line. The D3 v5 code loads CSV data from a GitHub Gist, parses the year field as dates, and renders the SVG chart on a 930×450 canvas. It employs `scaleTime`, `scaleLinear`, `area`, and `line` generators with `curveBasis` for smoothing, while `axisBottom` and `axisLeft` add labeled ticks with gridlines. Styling is handled via CSS classes for the area and line paths.

CChaitanya Ratan Sree

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

80% match

Loading thumbnail…

area chart

This example shows an area chart of visual acuity data, with a gradient fill transitioning from green through yellow to red based on y-values. The chart encodes data points as white circles positioned along the area’s upper boundary, each with a title tooltip displaying its value. Built with D3 v5, the visualization uses `d3.scaleLinear` for both x/y positioning and color mapping, an `area()` generator with `curveMonotoneX` for the shape, and SVG `linearGradient` definitions to color the fill. A simple SVG rect outlines the plot area.

Nnorangai

80% match

Loading thumbnail…

D3 Area - Multiarea

This example shows a multi-area chart built with D3 v7, displaying a gray band between upper and lower y-values across six x-axis points. The chart uses a linear scale to map input values (0–100) to pixel coordinates, while a d3.area() generator computes the path for the filled region. The data is provided as an inline array of objects with x, y0, and y1 fields, and the result is rendered as a single SVG path element inside a 700×400 viewport.

SSubhendu Karmakar

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

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

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

79% match