Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Progress S Curve

Public visualization

Viewing a saved revision (read-only)

e28200d130d540de8ceb6a3164aefb79

Progress S Curve

0 stars1🌍 Public
HHe
Last edited Oct 5, 2021
Created on Sep 27, 2021

This visualization displays a project’s progress over time as two S-curves: a dashed blue line for planned cumulative progress and an orange area with a solid line for actual progress. Both curves are derived from the ProgressData.csv file, which contains monthly plan and actual percentage values from January 2021 to March 2024. The chart updates dynamically through D3 v7’s general update pattern, using `d3.line` and `d3.area` generators with a basis curve, while `d3.scaleTime` and `d3.scaleLinear` map dates and cumulative percentages. An interactive zoom feature, powered by `d3.zoom`, allows panning and scaling the chart’s x and y axes independently.

AI-generated description

This line chart shows one week of temperature (in degrees Celcius) in San Francisco. The data comes from Data Canvas - Sense Your City.

Made in this video: