31:[] 2f:{"title":"Data Visualization in Munich Meetup - July, 6th 2022","cells":[{"id":0,"value":"# Data Visualization in Munich Meetup - July, 6th 2022\n\n
\n#### 👉 First steps: A taste of observable\n- https://observablehq.com/@observablehq/a-taste-of-observable\n\n#### 🌶️ Plot ressources:\n- API Reference: https://github.com/observablehq/plot\n- Examples by Plot features: https://observablehq.com/@observablehq/plot\n- Cheatsheets: https://observablehq.com/@observablehq/plot-cheatsheets\n- Collection: https://observablehq.com/collection/@observablehq/plot-examples\n\n#### 😎 Links shown at the end:\n- https://observablehq.com/@autopaideia/covid-19-in-nyc-by-zip-code-income\n- https://observablehq.com/@analyzer2004/bcgmatrix\n- https://twitter.com/KilledByAPixel/status/1517294627996545024\n- https://observablehq.com/@darabos/decoding-a-city-in-a-bottle","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"2 + 4","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"greet(\"members of the data viz meetup\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"function greet(name) {\n return \"Hello, \" + name;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"\n \n \n \n \n \n \n \n \n ${cars.slice(0, 5).map(car => htl.html`\n \n \n \n `)}\n \n

Name	Fuel economy	Year
${car[\"name\"]}	${car[\"economy (mpg)\"]} mpg	’${car[\"year\"]}

","pinned":false,"hidden":false,"mode":"html"},{"id":17,"value":"c = \\pm\\sqrt{a^2 + b^2}","pinned":false,"hidden":false,"mode":"tex"},{"id":19,"value":"import { countries } from \"@ee2dev/plot-party\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"countries","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"Inputs.table(countries)","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"import { SummaryTable } from \"@observablehq/summary-table\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"SummaryTable(countries)","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"Plot.plot({\n marginLeft: 100,\n height: 3000,\n marks: [\n Plot.dot(countries, {\n y: \"country\",\n x: \"area\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"Plot.plot({\n marginLeft: 100,\n height: 3000,\n marks: [\n Plot.dot(countries, {\n y: \"country\",\n x: \"area\",\n r: 5,\n fill: \"region\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"Plot.plot({\n marginLeft: 100,\n height: 3000,\n marks: [\n Plot.dot(countries, {\n y: \"country\",\n x: \"area\",\n r: 5,\n fill: \"region\",\n sort: { y: \"x\" }\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":67,"value":"Plot.plot({\n marginLeft: 100,\n height: 3000,\n marks: [\n Plot.dot(countries, {\n y: \"country\",\n x: \"area\",\n r: 5,\n fill: \"region\",\n sort: { y: \"x\", reverse: true }\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"Plot.plot({\n marginLeft: 100,\n marks: [\n Plot.dot(countries, {\n y: \"country\",\n x: \"area\",\n r: 5,\n fill: \"region\",\n sort: { y: \"x\", reverse: true, limit: 30 }\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"viewof select = Inputs.select([\"area\", \"density\", \"fert_rate\"], {\n label: \"Select one column\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"select","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"Plot.plot({\n marginLeft: 100,\n marks: [\n Plot.dot(countries, {\n y: \"country\",\n x: select,\n r: 5,\n fill: \"region\",\n sort: { y: \"x\", reverse: true, limit: 30 }\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"Plot.plot({\n facet: {\n data: penguins,\n x: \"species\"\n },\n marks: [\n Plot.frame(),\n Plot.dot(penguins, {x: \"culmen_length_mm\", y: \"culmen_depth_mm\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"viewof myCountry = Inputs.select(getCategories(\"country\"), {\n label: \"Select country\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"Plot.plot({\n height: 600,\n width,\n inset: 5,\n facet: {\n data: countries,\n x: \"region\"\n },\n marks: [\n Plot.frame(),\n Plot.dot(countries, {\n x: \"fert_rate\",\n y: \"area\",\n fill: \"region\",\n fillOpacity: (d) => (d.country === myCountry ? 1 : 0.1),\n r: 5,\n stroke: \"black\",\n strokeOpacity: (d) => (d.country === myCountry ? 1 : 0.1)\n }),\n Plot.text(countries, {\n x: \"fert_rate\",\n y: \"area\",\n text: \"country\",\n fillOpacity: (d) => (d.country === myCountry ? 1 : 0),\n textAnchor: \"start\",\n dx: 10,\n dy: -10,\n fontSize: 16\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":120,"value":"Treemap(flare, {\n path: (d) => d.name.replaceAll(\".\", \"/\"), // e.g. flare/animate/Easing\n label: (d) => d.name.split(\".\").pop(), // display text\n group: (d) => d.name.split(\".\")[1], // for color; e.g. animate\n value: (d) => d?.size, // area of each rect\n title: (d, n) => [n.id, n.value.toLocaleString()].join(\"\\n\"), // hover text\n width,\n height: 500\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"[...new Set(countries.map((d) => d.region))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"function getCategories(column) {\n return [...new Set(countries.map((d) => d[column]))];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":92,"value":"getCategories(\"region\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"import {Treemap} from \"@d3/treemap\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}