Add D3.js line chart with confidence band visualization - #1

Creates a self-contained HTML visualization demonstrating D3.js v7 area and line chart techniques for displaying time series data with uncertainty bands.

Implementation

File: line-chart-band.html (251 lines)

• Data layer: Generates 30 time series points with central values and confidence bounds
• Scales: d3.scaleTime() for x-axis, d3.scaleLinear() for y-axis
• Rendering: d3.area() for shaded confidence band, d3.line() for central line
• Styling: Steelblue theme with 0.2 opacity band, 2.5px stroke line
• Interaction: Hover tooltips showing date, value, and confidence range

Code Structure

// Area generator for confidence band
const area = d3.area()
    .x(d => xScale(d.date))
    .y0(d => yScale(d.lowerBound))
    .y1(d => yScale(d.upperBound))
    .curve(d3.curveMonotoneX);

// Line generator for central values
const line = d3.line()
    .x(d => xScale(d.date))
    .y(d => yScale(d.value))
    .curve(d3.curveMonotoneX);

Notes

Uses D3.js v7 from CDN. Tooltip positioned relative to chart container to avoid DOM conflicts.

Note: Screenshot shows page structure; D3.js rendering requires network access to CDN in browser.

This pull request was created as a result of the following prompt from Copilot chat.

Create an HTML file named line-chart-band.html that uses D3.js (version 7) to display a line chart with a band of values (area chart) representing a range (e.g., confidence interval or min/max) at each data point.

The visualization should include:

1. Data Generation: Create dummy data in JavaScript that includes a date/x-value, a central y-value, and lower/upper bound values for the band.
2. Scales: Setup x (time or linear) and y (linear) scales.
3. Axes: Render x and y axes.
4. Area Generator: Use d3.area() to create the band using the lower and upper bound values.
5. Line Generator: Use d3.line() to draw the main line chart on top of the band.
6. Styling: Add basic CSS to style the line (e.g., stroke color, width) and the band (e.g., fill color, opacity).
7. Container: An SVG element to hold the visualization.

The file should be self-contained with the script and styles included.

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.