2c:null 2d:["$","title",null,{"children":"Data Visualization in Munich Meetup - July, 6th 2022 | ee2dev | Observable"}] 32:[] 30:{"id":"a3d32193213b060b","slug":"data-visualization-in-munich-meetup-july-6th-2022","title":"Data Visualization in Munich Meetup - July, 6th 2022","thumbnail":"79b2e1df78825b8678a6b5fe5f6558e283d7769f44f62bf0de4960c4c72282ce","access_level":"public","create_time":"$D2022-07-06T17:48:40.423Z","update_time":"$D2022-11-25T23:04:41.377Z","view_time":null,"first_public_time":"$D2022-07-06T22:16:33.275Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e6e1e2a0da500bb6","login":"ee2dev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c41b514d64cff7415ffc87106c620e16cefe80b6d853fb3a05e19a000c3612c0","tier":"starter_2024"},"version":136,"publish_version":136,"role":null,"authored":false,"authors":[{"type":"individual","id":"9ba5e0b68d3e7972","login":"ee2dev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c41b514d64cff7415ffc87106c620e16cefe80b6d853fb3a05e19a000c3612c0","tier":null}],"members":[{"type":"individual","id":"9ba5e0b68d3e7972","login":"ee2dev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c41b514d64cff7415ffc87106c620e16cefe80b6d853fb3a05e19a000c3612c0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"2 + 4","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"greet(\"members of the data viz meetup\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"function greet(name) {\n return \"Hello, \" + name;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"c = \\pm\\sqrt{a^2 + b^2}","pinned":false,"hidden":false,"mode":"tex","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"import { countries } from \"@ee2dev/plot-party\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"countries","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"Inputs.table(countries)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"import { SummaryTable } from \"@observablehq/summary-table\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"SummaryTable(countries)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"viewof select = Inputs.select([\"area\", \"density\", \"fert_rate\"], {\n label: \"Select one column\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"select","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"viewof myCountry = Inputs.select(getCategories(\"country\"), {\n label: \"Select country\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"[...new Set(countries.map((d) => d.region))]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"function getCategories(column) {\n return [...new Set(countries.map((d) => d[column]))];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"getCategories(\"region\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"import {Treemap} from \"@d3/treemap\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"