Trend Chart (Area + Line)

100%

Trend Chart (Area + Line)

✓ Published0🌍 Public

Last edited Dec 11, 2016

Created on Dec 11, 2016

This trend chart visualizes loading times across releases of a hypothetical web application, combining a line chart with an area chart. The median daily loading time is drawn as a bold black line, while percentile ranges (5%-95% and 25%-75%) are shown as shaded outer and inner areas in blue tones. Release markers are represented as orange (client) and green (server) lollipops along the x-axis. Built with D3 v3 using SVG and animation, the chart uses a basis interpolation for smooth curves and includes axis gridlines, a clipped plotting area, and a y-axis labeled "Reflection Time."

AI-generated description

This "trend chart" shows loading times across releases of a hypothetical web application.

It is a mixture of a line chart and an area chart, with the daily median loading time indicated by the line and percentile ranges indicated by the surrounding areas.

The "lollipops" mark releases of (different parts of) the application.

forked from <a href='http://bl.ocks.org/rkirsling/'>rkirsling</a>'s block: <a href='http://bl.ocks.org/rkirsling/33a9e350516da54a5d4f'>Trend Chart (Area + Line)</a>

forked from <a href='http://bl.ocks.org/Cristian-pg/'>Cristian-pg</a>'s block: <a href='http://bl.ocks.org/Cristian-pg/31d2d88273276f07ab78'>Trend Chart (Area + Line)</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/e3124ca05fcc5577ffdb94496223a3ca'>Trend Chart (Area + Line)</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/15bff16960bb06bc1593cf15b57f0f19'>Trend Chart (Area + Line)</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/37ef7f24f85241c41903ce1ea0a1ed1d'>Trend Chart (Area + Line)</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/de7cee3aa84174aa85134c9f9f117ea3'>Trend Chart (Area + Line)</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Time based moving graph

A time-based line chart displays four network performance metrics—Partner, PCL, GOLAN, and DriveU—measured in MBPS over a two-minute period. The visualization animates by smoothly translating the x-axis and line paths leftward, creating the effect of a moving time window. Data is loaded from a CSV file and parsed into JavaScript Date objects. The chart uses D3 v6 scales, axes, line generators with basis curves, ordinal color scales, and clip paths to reveal the moving portion, with a linear transition controlling the animation speed.

PPiotr Paszek

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

71% match

Loading thumbnail…

Real-time Line Chart D3

The chart visualizes a real-time line graph that appends a new data point every 500 milliseconds, displaying a dynamic trend of values over time. Built with D3 v5, it uses an SVG renderer with a clip-path to constrain the line within the plotting area. The x-axis is driven by a time scale, while a linear scale maps values on the y-axis. Randomly generated data points are fed into a d3.line path with a basis curve, and the axis transitions (transition.call) slide smoothly as new points arrive.

PPawanjotSingh

70% match

Loading thumbnail…

Trend line

This visualization shows monthly water level trends for two well sites, with a brushable chart allowing users to select a date range and view a dashed regression trendline with its equation. The top chart displays the trendline and data points, while the bottom chart provides the brushing interface. The code uses d3.scaleTime, d3.scaleLinear, d3.line, d3.brushX, and d3.nest to render SVG paths and circles. The trendline is calculated via a custom least squares regression function imported from a separate module. Data is loaded from a CSV file.

SShane Carey

70% match

Loading thumbnail…

animated line

An animated line chart displays the changing popularity of a fictional topic over time, with an update button that regenerates the data to show the line redrawing itself with a smooth sinusoid easing. Built with D3.js (v7.8.5), the chart uses `scaleLinear` for axes, `line` for the path generator, and the `transition` API with `easeSin` to animate the stroke-dashoffset over 2.5 seconds. The SVG rendering includes axes and a steelblue path, with fake data defined in JavaScript rather than from an external source.

NNeeraj Kumar

70% match

Loading thumbnail…

Line Chart with Multiple Lines

This example visualizes projected delivery dates for Social Security numbers across multiple report years, using a smooth, curved line to show the relationship between report year and projected delivery time. The chart employs time-scaled axes on both dimensions, with a maroon line path rendered in SVG. Built with D3 v5, it uses d3.csv to load external data, d3.scaleTime for temporal scaling, d3.line with d3.curveBasis for the smoothed path, and d3.axisBottom and d3.axisLeft for labeled axes with grid ticks.

SSean Moore

70% match

Loading thumbnail…

Time based moving graph with no labels shift

Four parallel time-series lines show network bandwidth data for four services—Partner, PCL, GOLAN, and DriveU—over roughly two minutes. The chart animates by smoothly translating the entire plot area, including axes and lines, to the left, creating a moving-window effect while keeping the labels in place. The code uses D3 v6 with `scaleTime`, `scaleLinear`, and `scaleOrdinal` for axes, colors, and legends, plus `line` and `curveBasis` for paths. A `transition` with `easeLinear` drives the animation, and `clipPath` confines the visible region to the viewport.

PPiotr Paszek

70% match

Loading thumbnail…

My Line Chart

This line chart visualizes a user’s 2020 internet usage in gigabytes over time, with a highlighted band marking usage above 100 GB. The D3 v5 code loads CSV data, uses `d3.scaleTime` and `d3.scaleLinear` for axes, and draws the line with `d3.line`. It includes interactive tooltips triggered by `mousemove` events on a transparent overlay, using `d3.scan` to find the closest data point. The SVG rendering features custom axes, labels, and a dashed vertical guide.

FFramnk

69% match