Skip to main content
100%

Area chart with dark top stroke and smooth transitions

✓ Published0🌍 Public
Aandrewcowley
Last edited Mar 9, 2018
Created on Mar 9, 2018

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.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/3352beaa0dd85523ffd02dce8922b3a3'>fresh block</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/e6672c874443cad180ea16b59fa8aef8'>fresh block</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/dd79cab3e3b7104c3d02810b9353559e'>fresh block</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/48eddba0d1524508f37992c6b7f6104b'>fresh block</a>

forked from <a href='http://bl.ocks.org/denisemauldin/'>denisemauldin</a>'s block: <a href='http://bl.ocks.org/denisemauldin/5e44e790ae875a12de2f6b0faab44c3d'>Area chart with dark top stroke and smooth transitions</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/d8607c9de11a6bfe3b4f70e7825989db'>Area chart with dark top stroke and smooth transitions</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Area Chart

This example demonstrates an interactive area chart built with D3.js (v4) that presents two overlaid series with gradient fills, rendered as SVG. The visualization initially displays one dataset, and a button click transitions the chart to a second, extended dataset. The chart's axes and area paths smoothly animate their transitions over two seconds using D3's `.transition()` method. The code defines linear gradients with specified opacity stops for series styling, and uses `d3.scaleLinear` and `d3.axisBottom`/`d3.axisRight` for scaling and axes, respectively.

Ssunole896@yahoo.com
82% match
Loading thumbnail…

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

Animated area chart with linear gradients

Three synthetic datasets are drawn as smooth, gradient-filled area charts, with each series represented by a different color from the D3 `schemeDark2` palette. The visualization shows how three numeric trends evolve over 30 evenly spaced points, using `d3.area` with `curveMonotoneX` and linear gradients defined in SVG `defs` to fade each fill to white. A legend with interactive mouseover, mouseout, and click handlers toggles series emphasis, while custom axes with dashed gridlines and bold labels are rendered via `d3.axisBottom` and `d3.axisLeft`. The animation is implied by the static SVG, though no transition is present in the code.

AAlexDaGr8
81% 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
79% match
Loading thumbnail…

Interpolation and Area Charts

This interactive area chart visualizes three randomized data series, distinguishing state, national, and facility values by color. The visualization enables experimentation with different interpolation curves and easing functions. Users can dynamically change the interpolator, easing type, duration, or regenerate the data via buttons, which triggers animated transitions in the SVG rendering. The code leverages D3.js version 3.5.5, including its ordinal and linear scales, SVG axes, and interpolation methods like cardinal, monotone, and step, alongside custom easing functions such as elastic, bounce, and back.

AAjayyy
78% match
Loading thumbnail…

Viz - Area - Line - Point - Transition

A sequence of animated area, line, and point charts displays 20 random values, updating every two seconds. The area chart uses a cardinal curve, while the line and point layers share the same data and value scale. Built with D3 v4 and the viz.js abstraction, SVG shapes transition smoothly as new random data arrives, with the value scale recomputed on each update.

NNPashaP
77% match
Loading thumbnail…

Untitled

This example shows a continuously updating line chart that plots random data points in real time, with a smooth curve and a filled area beneath it. The chart scrolls horizontally as new points are added, while the x-axis shifts to keep the latest data in view. It uses D3 v4 scales and generators such as `d3.line` with `d3.curveCardinal` for the smooth path, `d3.area` for the fill, and `d3.axisBottom` for the axis. Animated transitions with `transition.attr` and `ease` shift both the path and area, with grid lines drawn as static SVG paths.

IIgor Borzunov
77% match
Loading thumbnail…

Area Chart Trial

This area chart animates daily revenue data from a CSV file, showing a sharp rise in late 2013 followed by volatility. Built with React and D3 v5, the SVG visualization uses `d3.area()` with `d3.scaleTime()` and `d3.scaleLinear()` to map dates and values, while axes are rendered via `d3.axisBottom()` and `d3.axisLeft()`. A 750ms transition updates the chart, and the area is filled with a light beige and stroked in green.

DdeafMother
77% match