CSV: quoting, the file text, and the download call
The first three rows are real stations (S01 Quay, S02 Market, S03 Chapel, all in Harbour); the fourth is made-up test text. A formula-looking text gets a ' in front, and a negative number does not.
People want the chart in a slide, the numbers in a spreadsheet and the page on paper. An SVG file needs its styles written into it, a PNG goes through a canvas, a CSV needs careful quoting, and print needs its own CSS.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write exportName(kind, filter) that gives lumen-rides-saturdays-june.png for kind = "png" and a Saturday filter in June. What does it return for an empty filter?
Make toCsv write dates as 2025-06-01 and numbers with . for decimals, whatever the visitor's language. Why is toLocaleString the wrong tool here?
Explain it without notes
Why does an SVG made with serializeToString lose its colours when opened as a file?
How does a chart get from SVG to a PNG file in the browser?
Which values in a CSV need quoting, and what is CSV injection?
What is a tainted canvas and how do you avoid it?
Preview
Console
Nothing logged yet.Expected console output
"Quay" -> "Quay"
"Old Town, East" -> "\"Old Town, East\""
"He said \"go\"" -> "\"He said \"\"go\"\"\""
"line one\nline two" -> "\"line one\nline two\""
"=SUM(A1:A9)" -> "'=SUM(A1:A9)"
"-5 degrees" -> "'-5 degrees"
-3 -> "-3"
null -> ""
NaN -> ""
Date 2025-06-01T23:30:00.000Z -> "2025-06-01"
"<BOM>Station,Name,District\r\nS01,Quay,Harbour\r\nS02,Market,Harbour\r\nS03,Chapel,Harbour\r\nTEST,\"Test, \"\"quoted\"\" =HYPERLINK(\"\"x\"\")\",\r\n"
download: lumen-rides-2025-06-01-2025-06-30.csv | address starts with blob: true
odd names: lumen-rides-ardenvale-quay-caf-1.svg