The Life Starter
0 of 6 complete0%
Course Library · Lesson 1 of 6
Digital · Guided lesson

Select a chart question and valid rows

About 14 minutes · 4 reading + 10 practice and checks
Time includes reading, practice, and questions. Extra videos or further study are optional.
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.
Open the full course project
Want more background?
Before you begin

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.

The idea

A bar chart compares quantities across categories. Its input must carry valid numeric values and its story must stay within the fictional data.

Follow along

Select a chart question and valid rows — original worked practice

A bar chart compares quantities across categories. Its input must carry valid numeric values and its story must stay within the fictional data.

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. 1. Step 1

    Read the three supplied place/visits rows and the question: which locations have more visits in this fictional sample?

    You should see: Three comparable category/value pairs are identified.

    A bar chart compares quantities across categories. Its input must carry valid numeric values and its story must stay within the fictional data.

  2. 2. Step 2

    Read bars validation: exactly three rows and finite visits from 0 to 20.

    You should see: The fixed-scale input contract is explicit.

    A bar chart compares quantities across categories. Its input must carry valid numeric values and its story must stay within the fictional data.

  3. 3. Step 3

    Run node test-chart.mjs; inspect the rejected negative, over-scale, NaN, and text cases.

    You should see: Invalid inputs are rejected before geometry is produced.

    A bar chart compares quantities across categories. Its input must carry valid numeric values and its story must stay within the fictional data.

  4. 4. Step 4

    Record the dataset and what it cannot prove about real libraries.

    You should see: A chart question and input-contract card.

    A bar chart compares quantities across categories. Its input must carry valid numeric values and its story must stay within the fictional data.

Now change one thing

North becomes -1 visits. Is it a valid input under this count contract?

Your work

What to finish

State the chart question, validated row contract, and limits of the fictional dataset.

Common mistake

Watch for this

Presenting fictional rows as real community evidence or silently coercing malformed data.

How can I tell I understand it?

Demonstrate the rule: A bar chart compares quantities across categories. Its input must carry valid numeric values and its story must stay within the fictional data. Use the supplied variant to distinguish a changed result from a broken implementation.

Try 3 questions

Quick knowledge check

Answer all 3 questions. Get at least 2 right and the lesson completes automatically.

Not yet passed

You’ll get an explanation for each answer. Signed in? Your results save to your account.

1Which question is supported by these fictional chart rows?
2Why reject the string "12" as a visits value here?
3What should happen to a value of 21 under this fixed 0–20 chart contract?
0 of 3 answeredApply the lesson to a short question, then review the explanation.
1
Finish this lesson

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 check
Tools, 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.

developer.mozilla.org — SVG_from_scratch
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.

www.w3.org — complex
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.

No sign-in needed.