2a:[{"id":"6fa88a81db84f5b8076c0065919acde89afa01377973ed13886f97675fd31ad2776b66d953c1d0c2cc3716c355fd101cc4f629b453927675d12fc57ea22d48eb","href":"https://static.observableusercontent.com/files/6fa88a81db84f5b8076c0065919acde89afa01377973ed13886f97675fd31ad2776b66d953c1d0c2cc3716c355fd101cc4f629b453927675d12fc57ea22d48eb","name":"beispiel.csv","type":"text/csv","lastModified":1638727953519.811,"size":105}] 29:{"title":"Template for exploring a German data set","cells":[{"id":0,"value":"step1 = md`# Template for exploring a German data set`","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"heading(\" 👉 Choose a data set\", 1, 4)","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"viewof file = localFileInput({\n // Inputs.file does not support initial calues yet\n accept: \".csv,.txt\",\n value: FileAttachment(\"beispiel.csv\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":583,"value":"heading(\" 👉 Choose a delimiter\", 2, 4)","pinned":false,"hidden":false,"mode":"ojs"},{"id":506,"value":"viewof delimiter = Inputs.select(delimiters, {\n label: \"Delimiter:\",\n value: getDefaultDelimiter(delimiters, fileToText.content.split(\"\\n\")[0])\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":457,"value":"heading(\" 🤓 Process your data (if applicable)\", 3, 4)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1068,"value":"fileToText = {\n const myFile = await file.text();\n return { content: myFile };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1279,"value":"firstRow = {\n const lines = fileToText.content.split(\"\\n\");\n const myFile = lines[0] + \"\\n\" + lines[1];\n const psv = d3.dsvFormat(delimiter.charAt(0));\n return psv.parse(myFile)[0];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1629,"value":"#### Values of the first row:","pinned":false,"hidden":false,"mode":"md"},{"id":1263,"value":"viewof valuesFirstRow = {\n let ar = [];\n let i = 0;\n for (const prop in firstRow) {\n ar[i] = { column: prop, value: firstRow[prop] };\n i++;\n }\n return Inputs.table(ar, { label: \"Values of first row:\" });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":531,"value":"initialData = {\n d3.timeFormatDefaultLocale(localeGerman);\n const myFile = fileToText.content;\n const psv = d3.dsvFormat(delimiter.charAt(0));\n // const typeConversion = d3.autoType; // default type conversion\n const typeConversion = customType; // custom type conversion\n return psv.parse(myFile, typeConversion);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1265,"value":"valuesFirstRow","pinned":false,"hidden":false,"mode":"ojs"},{"id":1143,"value":"dateColumns = {\n // 1: date columns have to be provided if the formatting is country specific\n let _dateColumns = [\"Datum\"];\n\n d3.timeFormatDefaultLocale(localeGerman);\n\n // 2: provide date format\n // see https://github.com/d3/d3-time-format\n // or https://bl.ocks.org/zanarmstrong/ca0adb7e426c12c06a95\n const parseTime = d3.utcParse(\"%d.%m.%Y\");\n\n const lines = fileToText.content.split(\"\\n\");\n const myFile = lines[0] + \"\\n\" + lines[1];\n const psv = d3.dsvFormat(delimiter.charAt(0));\n const firstLine = psv.parse(myFile)[0];\n let ar = [];\n for (const prop in firstLine) {\n if (\n _dateColumns.includes(prop) &&\n !isNaN(new NumberParser(\"de\").parse(firstLine[prop]))\n ) {\n ar.push(prop);\n }\n }\n return ar;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1072,"value":"numericColumns = {\n let _numericColumns = []; // 1: numeric columns can be specified or - if not - they als automatically infered\n\n const lines = fileToText.content.split(\"\\n\");\n const myFile = lines[0] + \"\\n\" + lines[1];\n const psv = d3.dsvFormat(delimiter.charAt(0));\n const firstLine = psv.parse(myFile)[0];\n let ar = [];\n for (const prop in firstLine) {\n if (\n !dateColumns.includes(prop) &&\n (_numericColumns.length === 0 || _numericColumns.includes(prop)) &&\n !isNaN(new NumberParser(\"de\").parse(firstLine[prop]))\n ) {\n ar.push(prop);\n }\n }\n return ar;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1148,"value":"otherColumns = Object.keys(data[0]).filter(\n (d) => !numericColumns.includes(d) && !dateColumns.includes(d)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"function customType(row, i) {\n let objNumbers = {};\n let objDates = {};\n // convert German numbers before d3.autoType\n for (const col of numericColumns) {\n // row[col] = String(new NumberParser(\"de\").parse(row[col]));\n objNumbers[col] = new NumberParser(\"de\").parse(row[col]);\n }\n // convert German dates before d3.autoType\n const parseTime = d3.utcParse(\"%d.%m.%Y\"); // --> provide date format\n // see also https://github.com/d3/d3-time-format or https://bl.ocks.org/zanarmstrong/ca0adb7e426c12c06a95\n for (const col of dateColumns) {\n // convert columns before d3.autoType\n // row[col] = parseTime(row[col]);\n objDates[col] = parseTime(row[col]);\n }\n return {\n ...d3.autoType(row),\n ...objNumbers,\n ...objDates\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"function processData(_initialData) {\n // process data here\n return _initialData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":525,"value":"data = processData(initialData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":461,"value":"heading(\" 🧐 Check if the data looks right?\", 4, 4)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1107,"value":"\n#### Numeric columns:\n${numericColumns.toString()}\n#### Date columns:\n${dateColumns.toString()}\n#### Other columns:\n${otherColumns.toString()}","pinned":false,"hidden":false,"mode":"md"},{"id":1511,"value":"data","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"heading(\" Visualize and explore 📊📈✨ \", 1, 1, \"blue\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1678,"value":"PlotMatrix()","pinned":true,"hidden":false,"mode":"ojs"},{"id":436,"value":"

\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":1076,"value":"#### Colors","pinned":false,"hidden":false,"mode":"md"},{"id":1080,"value":"viewof myColor = Inputs.table(colorPalette, {\n format: {\n cyan: colorCell,\n orange: colorCell,\n blue: colorCell,\n green: colorCell\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1651,"value":"quantizeColors(\"blue\", \"white\", 5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1663,"value":"quantizeColors(\"blue\", \"white\", 5, true)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1649,"value":"// example: quantizeColors(\"red\", \"green\", 5) - see https://observablehq.com/@d3/working-with-color\nfunction quantizeColors(color1, color2, steps, display = false) {\n let res = d3.quantize(d3.interpolateHcl(color1, color2), steps);\n return display ? swatches(res) : res;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1658,"value":"import { swatches } from \"@d3/working-with-color\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1084,"value":"function colorCell(c, i) {\n return htl.html`

3 ? \"black\" : \"white\"};\">${c}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1086,"value":"colorPalette = cyan.map((d, i) => ({\n cyan: cyan[i],\n orange: orange[i],\n blue: blue[i],\n green: green[i]\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1088,"value":"cyan = [\n \"#003a6d\",\n \"#294d7e\",\n \"#436090\",\n \"#5b74a2\",\n \"#7389b4\",\n \"#8b9ec6\",\n \"#a3b5d9\",\n \"#bbcbec\",\n \"#d4e2ff\"\n] // created with https://learnui.design/tools/data-color-picker.html#single","pinned":false,"hidden":false,"mode":"ojs"},{"id":1090,"value":"orange = [\n \"#ff832b\",\n \"#ff8e40\",\n \"#ff9a53\",\n \"#ffa566\",\n \"#ffaf78\",\n \"#ffba8b\",\n \"#ffc59d\",\n \"#ffcfb0\",\n \"#ffdac3\"\n] // created with https://learnui.design/tools/data-color-picker.html#single","pinned":false,"hidden":false,"mode":"ojs"},{"id":1092,"value":"blue = [\n // cornflowerBlue\n \"#6495ed\",\n \"#749ef0\",\n \"#84a8f2\",\n \"#92b1f4\",\n \"#a0bbf7\",\n \"#aec5f9\",\n \"#bbcefb\",\n \"#c9d8fd\",\n \"#d6e2ff\"\n] // created with https://learnui.design/tools/data-color-picker.html#single","pinned":false,"hidden":false,"mode":"ojs"},{"id":1094,"value":"green = [\n // darkOliveGreen\n \"#556b2f\",\n \"#657a40\",\n \"#758852\",\n \"#869863\",\n \"#96a776\",\n \"#a7b788\",\n \"#b8c79b\",\n \"#c9d7ae\",\n \"#dbe7c2\"\n] // created with https://learnui.design/tools/data-color-picker.html#single","pinned":false,"hidden":false,"mode":"ojs"},{"id":673,"value":"\n#### Useful links\n- https://observablehq.com/@observablehq/plot\n\n#### Arquero\n- [Introducing Arquero](https://observablehq.com/@uwdata/introducing-arquero)\n- [Arquero API - Verbs](https://uwdata.github.io/arquero/api/verbs)\n- [An Illustrated Guide to Arquero Verbs](https://observablehq.com/@uwdata/an-illustrated-guide-to-arquero-verbs)\n- [Tidy Data in Javascript](https://observablehq.com/@uwdata/tidy-data-in-javascript)\n- [Data Wrangler based on Arquero](https://observablehq.com/@observablehq/data-wrangler)","pinned":false,"hidden":false,"mode":"md"},{"id":1176,"value":"function convert(date) {\n d3.timeFormatDefaultLocale(localeGerman);\n const parseTime = d3.timeParse(\"%d.%m.%Y\");\n // return parseTime(\"June 30, 2015\"); // Tue Jun 30 2015 00:00:00 GMT-0700 (PDT)\n return parseTime(date); // Tue Jun 30 2015 00:00:00 GMT-0700 (PDT)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1603,"value":"function getDefaultDelimiter(_delimiters, text) {\n let dels = _delimiters.map((d) => d.charAt(0));\n let token;\n let map = new Map();\n for (let del of dels) {\n map.set(del, 0);\n }\n for (let i = 0; i < text.length; i++) {\n token = text[i];\n if (map.has(token)) {\n map.set(token, map.get(token) + 1);\n }\n }\n let counts = [...map].map((d) => d[1]);\n let indexOfMax = counts.indexOf(Math.max(...counts));\n return delimiters[indexOfMax];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1177,"value":"convert(\"30.06.2015\").toString()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1172,"value":"localeGerman = (\n await fetch(\"https://cdn.jsdelivr.net/npm/d3-time-format@3/locale/de-DE.json\")\n).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1517,"value":"// db = DuckDBClient.of({ data })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1599,"value":"delimiters = [\"; (semicolon)\", \", (comma)\", \"| (pipe)\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1671,"value":"setFormatLocale = {\n // const ldef = require(`d3-format/locale/${lang}.json`);\n const ldef = {\n // German Locale\n decimal: \",\",\n thousands: \".\",\n grouping: [3],\n currency: [\"\", \"\\u00a0€\"]\n };\n d3.formatDefaultLocale(ldef);\n return ldef;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":686,"value":"import { aq, op } from \"@uwdata/arquero\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":682,"value":"import { Wrangler } from \"@observablehq/data-wrangler\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"import { localFileInput } from \"@mbostock/localfile\" // Inputs.file does not support initial values yet","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"import { heading } from \"@ee2dev/formatting-in-observable\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":664,"value":"import { NumberParser } from \"@mbostock/localized-number-parsing\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1675,"value":"import { PlotMatrix } with { data } from \"@observablehq/autoplot-matrix\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W2a","stdlib":"1","titling":"auto"}