Line chart with gradient range
This line chart displays the daily average temperature in Atlanta, Georgia, over the first month of 2010, with the area around the line shaded to represent a range of ±2 standard deviations. Because the standard deviation varies per data point, the visualization builds the shaded region from individual area slices, one for each date. The chart is rendered in SVG using D3 version 3.5, with `d3.time.scale` for the time axis, `d3.svg.area` for the slices, and a vertical linear gradient that transitions from yellow to black. The data comes from a local JavaScript file containing weather station records.
AI-generated descriptionA standard line chart with the addition of a gradient to show the range of values at each point. (In this case the range is ± 2 standard deviations.) Because the center point of the gradient varies with position on the x-axis, a single SVG area is not sufficient. Instead, the code creates a separate area (referred to as a slice) for each data point.
This was the best example I could find for demonstrating a gradient that varied over an irregular line.
forked from <a href='http://bl.ocks.org/sathomas/'>sathomas</a>'s block: <a href='http://bl.ocks.org/sathomas/f00d5205ba4d661540c5'>Variable gradient test</a>