Update all representations from one source
See this course’s project requirements
A local SVG bar chart generated from fictional library-use rows, with checked numeric scale, visible labels, matching data table and a text summary.
Keep your working files in your own notebook or software. Save a private description, checklist, and work link in My Proof.
What to include
- State the chart question, validated row contract, and limits of the fictional dataset.
- Produce a checked common-scale geometry table with value, height, and top coordinate.
- Create namespaced SVG shapes and labels from one validated source and inspect their rendered agreement.
- Provide and reconcile the chart name, fuller text summary, and structured data table.
- Retain a baseline/change matrix proving every represented value stays synchronized.
- Deliver the chart with independent arithmetic and separate data, rendered, and assistive test statuses.
Review and revise
Use these criteria to check your work and choose what to improve.
- The implementation or declared simulation follows the supplied contract and retains inspectable original inputs.
- Normal, boundary and rejected cases are recorded with expected versus observed results.
- The changed case has a correct explanation and does not rely on hidden state.
- The project includes source, outputs, instructions and honest tool, privacy and verification limits.
Want more background?
The idea in everyday life
Files chart.html, chart-data.mjs and test-chart.mjs use North 8, South 12, West 0 fictional visits. Serve locally with python3 -m http.server 8765 --bind 127.0.0.1; open chart.html.
An input change must update geometry, visible values, summary, and table together. A correct initial chart is not evidence that its update stays consistent.
Update all representations from one source — original worked practice
An input change must update geometry, visible values, summary, and table together. A correct initial chart is not evidence that its update stays consistent.
Files chart.html, chart-data.mjs and test-chart.mjs use North 8, South 12, West 0 fictional visits. Serve locally with python3 -m http.server 8765 --bind 127.0.0.1; open chart.html.
1. Step 1
Activate Set West to 4. Read the West label and bar.
You should see: West becomes 4 visits and height 20.
An input change must update geometry, visible values, summary, and table together. A correct initial chart is not evidence that its update stays consistent.
2. Step 2
Read the summary total and table West row.
You should see: Total becomes 24 and the table shows West 4.
An input change must update geometry, visible values, summary, and table together. A correct initial chart is not evidence that its update stays consistent.
3. Step 3
Run test-chart.mjs and inspect the changed-case geometry and summary assertions.
You should see: The changed data functions agree with the independent calculation.
An input change must update geometry, visible values, summary, and table together. A correct initial chart is not evidence that its update stays consistent.
4. Step 4
Record baseline and changed representations with any rendered discrepancy.
You should see: A complete chart-update consistency test.
An input change must update geometry, visible values, summary, and table together. A correct initial chart is not evidence that its update stays consistent.
What to finish
Retain a baseline/change matrix proving every represented value stays synchronized.
Watch for this
Updating only the graphic while leaving a stale text or table alternative.
How can I tell I understand it?
Demonstrate the rule: An input change must update geometry, visible values, summary, and table together. A correct initial chart is not evidence that its update stays consistent. Use the supplied variant to distinguish a changed result from a broken implementation.
Quick knowledge check
Answer all 3 questions. Get at least 2 right and the lesson completes automatically.
You’ll get an explanation for each answer. Signed in? Your results save to your account.
Pass the check. We’ll save the progress.
Answer all 3 questions above and get at least 2 right. You can review the explanations and try again.
Go to the knowledge checkTools, templates, and lesson sources
Tools and templates
Tools open in a new tab so you can keep your place here.
Sources and further reading
Explore the references behind this lesson.
Source & access notes · checked 2026-10-01
Relevant documented module/API behavior inspected during expansion authoring; actual execution evidence is recorded separately. No grant eligibility is established.
Access: Official page retrieved with the web reader on 2026-10-01. Documentation reading does not certify execution in every native tool or browser.
Reuse: Original local practice files, fictional data, worked examples and questions. Concepts paraphrased and linked; source exercises are not copied.
Source & access notes · checked 2026-10-01
Relevant documented module/API behavior inspected during expansion authoring; actual execution evidence is recorded separately. No grant eligibility is established.
Access: Official page retrieved with the web reader on 2026-10-01. Documentation reading does not certify execution in every native tool or browser.
Reuse: Original local practice files, fictional data, worked examples and questions. Concepts paraphrased and linked; source exercises are not copied.
Source & access notes · checked 2026-10-01
Relevant documented module/API behavior inspected during expansion authoring; actual execution evidence is recorded separately. No grant eligibility is established.
Access: Official page retrieved with the web reader on 2026-10-01. Documentation reading does not certify execution in every native tool or browser.
Reuse: Original local practice files, fictional data, worked examples and questions. Concepts paraphrased and linked; source exercises are not copied.
Report a problem with this lesson
Tell us what went wrong. Please leave out personal information and private project contents.