Skip to main content
SimilarExport ZIP
100%

Trend Chart (Area + Line)

✓ Published0🌍 Public
OOrhanYaz
Last edited Apr 5, 2017
Created on Apr 5, 2017

This trend chart illustrates loading times across releases of a hypothetical web application, combining a line chart and area chart to display the daily median loading time as a black line and percentile ranges as surrounding shaded areas. The "lollipop" markers indicate application releases, with animated transitions. Built with D3.js v3, the visualization uses `d3.svg.area` and `d3.svg.line` to construct the paths, rendering to SVG with clipping and a legend.

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>

mit Licensed

Similar vizzes

Loading thumbnail…

Trend Chart (Area + Line)

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

DDinoJay
96% match
Loading thumbnail…

Area Chart - Trend

This area chart visualizes the increasing trend of a value over a five-year period, using a light blue fill beneath the line to emphasize the magnitude of change from 2018 to 2022. Built with D3 v7 as an SVG, the code sets up linear scales and the `d3.area` generator, with the y-axis baseline anchored at the chart’s bottom. Axes, labels, and a simple dataset are rendered directly in JavaScript within an HTML file.

Ggayathrisaxena23@gmail.com
73% match
Loading thumbnail…

Line Chart - Trend

A line chart displays a quantitative trend over time, plotting five data points from 2018 to 2022 where values increase from 20 to 90. The SVG visualization uses d3.scaleLinear for both axes and a d3.line generator to create the blue stroked path. The chart includes labeled X and Y axes with tick marks, rendered using d3.axisBottom and d3.axisLeft. The code manually sets chart dimensions and margins, then appends the line and axes to a group element within the SVG canvas.

YYash Raj Mathur
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
72% match
Loading thumbnail…

Test

This visualization uses D3.js to display percentile trends over time for performance metrics. The view combines multiple SVG areas and a line to represent the 5-95%, 25-75%, and median values across dates from August to September 2014. Animated markers slide upward from the bottom to highlight Client and Server release versions, using D3 transitions with dynamic path lengths. The chart includes axes, a custom clip path for the legend area, and smooth basis interpolation for all drawn shapes.

CCheah Peng Huat
71% match
Loading thumbnail…

Line Chart - Trend

This line chart displays a quantitative trend over time, plotting five yearly data points from 2018 to 2022, with values increasing from 20 to 90. The visualization renders in an SVG using D3 v7, with a linear x-scale for years and a linear y-scale for values. The code constructs the line path using `d3.line()`, applies axes via `d3.axisBottom()` and `d3.axisLeft()`, and labels the axes as "Year" and "Value," all within a 600×400 pixel canvas with specified margins.

Ggayathrisaxena23@gmail.com
71% match
Loading thumbnail…

Fork of SVG Fundametal

This visualization shows a time series of page load performance metrics, displaying percentile bands (5–95% and 25–75%) as shaded areas alongside a bold median line. Animated circular markers highlight specific events—client releases and server versions—that slide upward from the chart’s baseline. Built with React and D3.js, the code uses `d3.svg.area()` and `d3.svg.line()` with basis interpolation to render smooth paths, while `transition()` animates marker positions. The data is loaded from JSON files containing daily percentile values and event annotations.

Mmotobernix@gmail.com
71% match
Loading thumbnail…

Area Chart- Trend

This area chart visualizes the trend of a single data series over time, using a light blue filled region to emphasize the change in value from 2018 to 2022. The visualization plots five data points using d3.scaleLinear for both axes and renders the area with d3.area, which draws a path from the x-axis baseline to the data points. Axes are generated with d3.axisBottom and d3.axisLeft, and the chart includes text labels for the Year and Value dimensions.

YYash Raj Mathur
71% match