2b:null 2c:["$","title",null,{"children":"🥔🥦🍅 Seasonal food guide | Jakob Listabarth | Observable"}] 31:T8bc,{ const groupedByCategory = d3.group(data, (d) => d.categoryEN); let yOffset = 0; const yGap = pedalLength; const categorySections = Array.from(groupedByCategory).map(([key, value]) => { const svgs = value.map((d) => flower(d)); const cols = outputMode === "screen" ? 4 : 9; const rows = Math.ceil(value.length / cols); const flowerWidth = d3.select(svgs[0]).attr("width"); const flowerHeight = d3.select(svgs[0]).attr("height"); const headerFontSize = nameFontSize * 2; const headerHeight = headerFontSize * 3; const sectionHeight = flowerHeight * rows + headerHeight + yGap; const container = d3 .create("svg:g") .attr("transform", `translate(0 ${yOffset})`); const svg = container .append("svg") .attr("width", width) .attr("height", sectionHeight) .attr("font-family", "Fraunces"); svg.append("defs").call(patternDefs); svg.call(iconDefs); const header = svg.append("g"); container .append("style") .attr("type", "text/css") .text(`.icon * {stroke: ${levelColors.A}; }`); header .append("use") .attr("xlink:href", `#${key}`) .attr("y", headerFontSize * 1.2) .attr("width", headerFontSize) .attr("height", headerFontSize) .classed("icon", true); header .append("text") .text(getFoodCategory(key, localeForVis)) .attr("font-size", headerFontSize) .attr("y", headerFontSize * 2) .attr("x", headerFontSize * 1.2) .attr("fill", levelColors.A); svg .append("g") .attr("transform", `translate(0 ${headerHeight})`) .selectAll("g") .data(svgs) .join("g") .attr( "transform", (d, i) => `translate(${flowerWidth * (i % cols)} ${ flowerHeight * Math.floor(i / cols) })` ) .append((d) => d); yOffset += sectionHeight; return { sectionHeight, node: container.node() }; }); const totalHeight = d3.sum(categorySections.map((d) => d.sectionHeight)); const svg = d3.create("svg").attr("width", width).attr("height", totalHeight); categorySections.forEach((category) => svg.append(() => category.node)); return svg.node(); }32:T9f4,flower = (food, category = false) => { const margin = { top: nameFontSize * 2, x: nameFontSize * 2, bottom: nameFontSize }; const footerHeight = category ? nameFontSize * 2 : nameFontSize; const verticalGap = nameFontSize * 2; const height = pedalLength * 2 + margin.top + margin.bottom + verticalGap + footerHeight; const width = pedalLength * 2 + margin.x * 2; const angleOffset = -90; const labelOffset = labelFontsize * 1.2; const monthNames = getMonths("EN-en"); const levelPerMonth = monthNames.map((month, idx) => food[month]); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("font-family", "Fraunces") .style("border", "1px solid lightgrey"); svg.call(iconDefs); svg.append("defs").call(patternDefs); const center = svg .append("g") .attr( "transform", `translate(${width / 2} ${height / 2 - verticalGap / 2})` ); const flower = center .append("g") .attr("transform", `translate(0 ${-footerHeight / 2})`); const months = flower .selectAll("g") .data(levelPerMonth) .join("g") .attr("transform", (d, i) => `rotate(${angleOffset + (360 / 12) * i})`); const leaves = months.each(drawPetals); months .append("text") .attr("transform", (d, i) => { const angle = -angleOffset + (360 / 12) * -i; return `rotate(${angle} ${pedalLength + labelOffset} 0)`; }) .attr("y", labelFontsize / 2) .attr("x", pedalLength + labelOffset) .attr("text-anchor", "middle") .attr("fill", levelColors.A) .attr("font-size", labelFontsize) .text((d, i) => getMonths(localeForVis)[i].slice(0, 1)); const text = svg .append("g") .attr( "transform", `translate(${width / 2} ${margin.top + pedalLength * 2 + verticalGap})` ); text .append("text") .text(food[`name${localeForVis}`]) .attr("font-weight", "bold") .attr("fill", levelColors.A) .attr("font-size", nameFontSize) .attr("text-anchor", "middle"); if (category) { text .append("use") .attr("xlink:href", `#${food.categoryEN}`) .attr("y", labelFontsize) .attr("x", -labelFontsize / 2) .attr("width", labelFontsize) .attr("height", labelFontsize); text .append("text") .attr("y", nameFontSize * 2) .text(food[`category${localeForVis.slice(0, 2)}`]) .attr("font-size", labelFontsize) .attr("fill", levelColors.A) .attr("text-anchor", "middle"); } return svg.node(); }33:T4fa,34:T521,35:[{"id":"af0ca7c9f2fe5a278c98bf630d6309eb1dc4023e84aee46f5a3820cebc41a5a6d97adc37ef0a443d3adce721859c22c82e556bef53220f7bad00f786a9f47827","href":"https://static.observableusercontent.com/files/af0ca7c9f2fe5a278c98bf630d6309eb1dc4023e84aee46f5a3820cebc41a5a6d97adc37ef0a443d3adce721859c22c82e556bef53220f7bad00f786a9f47827","name":"Fraunces-VariableFont_SOFT,WONK,opsz,wght.ttf","type":"font/ttf","lastModified":1671551860090.417,"size":355624},{"id":"825f69bd066658556dc51c16eadaecdce44b3200425f6f02308dc1b3071c830c3e531af1b1473ecfc5ced04ceb18c1c9031032b352ad3cd8dd6b79242e53aafc","href":"https://static.observableusercontent.com/files/825f69bd066658556dc51c16eadaecdce44b3200425f6f02308dc1b3071c830c3e531af1b1473ecfc5ced04ceb18c1c9031032b352ad3cd8dd6b79242e53aafc","name":"221225-season-food-data@1.tsv","type":"text/tab-separated-values","lastModified":1672592414967.146,"size":5891}] 2f:{"id":"5c40c06786bc8d83","slug":null,"title":"🥔🥦🍅 Seasonal food guide","thumbnail":"d2add45e77c677f13362dabaf41358ebfe255a7704037f5b117f80b7bb77ab55","access_level":"public","create_time":"$D2022-12-03T06:51:41.045Z","update_time":"$D2023-01-03T10:33:12.809Z","view_time":null,"first_public_time":"$D2022-12-03T06:52:47.562Z","fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"012b0b3e382a554e","login":"jakoblistabarth","name":"Jakob Listabarth","avatar_url":"https://avatars-next.observableusercontent.com/9729178963e994d34cfa91cdd1320563920ead897b5f1934136a47a96b83bd9d","tier":"starter_2024"},"version":2473,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"46e29826d3649e64","login":"jakoblistabarth","name":"Jakob Listabarth","avatar_url":"https://avatars-next.observableusercontent.com/a0e873c9f95e3800e63d3dcbbf26fd397ec65968ac816531408eda0ff84da48f","tier":null}],"members":[{"type":"individual","id":"46e29826d3649e64","login":"jakoblistabarth","name":"Jakob Listabarth","avatar_url":"https://avatars-next.observableusercontent.com/a0e873c9f95e3800e63d3dcbbf26fd397ec65968ac816531408eda0ff84da48f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"🥔🥦🍅 Seasonal food guide","cells":[{"id":0,"value":"banner(\n \"🥔🥦🍅 Seasonal food guide\",\n undefined,\n undefined,\n \"font-family:'Fraunces';\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"Seasonal food guide for local vegetables, fruit and salad in Germany. \nSource: [Verbraucherzentralen Nordrhein-Westfalen, Bayern,\nHessen, Niedersachsen,\nSaarland und SchleswigHolstein.](https://www.verbraucherzentrale.de/wissen/lebensmittel/gesund-ernaehren/saisonkalender-obst-und-gemuese-frisch-und-saisonal-einkaufen-17229)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2108,"value":"This notebook is made to create a (more or less) printable svg. For debugging I used a adjust view for screen (slightly larger text etc), hence the radio buttons below. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1884,"value":"viewof outputMode = Inputs.radio([\"print\", \"screen\"], {\n label: \"Select output\",\n value: \"screen\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"viewof localeForVis = Inputs.select([\"EN-en\", \"DE-at\", \"DE-de\"], {\n label: \"Set Locale\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1526,"value":"viewof colorPalette = Inputs.select(Object.keys(colorPalettes), {\n label: \"Color Scheme\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"## Styles ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1762,"value":"Use color inputs to quickly test out color combinations. 🎨 🚀 \nOr choose one of the defined [schemes](https://observablehq.com/d/5c40c06786bc8d83#colorPalette)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1457,"value":"viewof levelColors = Inputs.form({\n A: Inputs.color({ label: \"Color A\", value: colorPalettes[colorPalette][0] }),\n B: Inputs.color({ label: \"Color B\", value: colorPalettes[colorPalette][1] }),\n C: Inputs.color({ label: \"Color C\", value: colorPalettes[colorPalette][2] })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1519,"value":"colorPalettes = ({\n greys: [\"#949494\", \"#c2c2c2\", \"#ededed\"],\n trafficLights: [\"#7eb177\", \"#edd478\", \"#d26f56\"],\n greens: [\"#88d7a0\", \"#a0edb8\", \"#dfffe9\"],\n bluePurple: [\"#3a0094\", \"#c27fc0\", \"#edd7e8\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2074,"value":"getFoodCategory = (categoryEN, locale) => {\n const categoriesEN = Array.from(new Set(data.map((d) => d.categoryEN)));\n return data.find((d) => d.categoryEN === categoryEN)[\n `category${localeForVis.slice(0, 2)}`\n ];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"labelFontsize = outputMode === \"screen\" ? 10 : 6","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1890,"value":"nameFontSize = outputMode === \"screen\" ? 16 : 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"pedalLength = outputMode === \"screen\" ? 80 : 30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"pedalWidth = pedalLength / 5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1599,"value":"showPatterns = {\n const size = 100;\n\n const svg = d3.create(\"svg\").attr(\"height\", size);\n svg.append(\"defs\").call(patternDefs);\n\n const rectStyle = (selection) => {\n selection\n .attr(\"x\", (d, i) => i * (2 + size))\n .attr(\"y\", (d, i) => 0)\n .attr(\"width\", size)\n .attr(\"height\", size);\n };\n\n const patterns = svg.selectAll(\"g\").data(strokeWidths).join(\"g\");\n patterns.append(\"rect\").attr(\"fill\", levelColors.A).call(rectStyle);\n patterns\n .append(\"rect\")\n .attr(\"fill\", (d) => `url(#${d.name})`)\n .call(rectStyle);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1581,"value":"strokeWidths = [\n { name: \"sparse\", width: 0.5 },\n { name: \"medium\", width: 2 },\n { name: \"dense\", width: 5 }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"## Appendix\n\n### Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"data = {\n const data = await FileAttachment(\"221225-season-food-data@1.tsv\").tsv();\n return data.sort((a, b) =>\n d3.ascending(a[`name${localeForVis}`], b[`name${localeForVis}`])\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"stressLevels = {\n const months = getMonths(\"EN-en\");\n const levelsAcrossMonths = months\n .map((month) => data.map((d) => d[month]))\n .flat()\n .filter((d) => d);\n return Array.from(new Set(levelsAcrossMonths));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1538,"value":"stressSublevels = stressLevels\n .map((d) => d.split(\",\"))\n .flat()\n .filter((d) => d.slice(0, 1) === \"B\")\n .map((d) => d.slice(-2))\n .sort((a, b) => d3.ascending(a, b))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"getMonths = (locale) =>\n d3\n .range(0, 12)\n .map((_, idx) =>\n new Date(2022, idx, 1).toLocaleDateString(locale, { month: \"long\" })\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"months = getMonths(localeForVis)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1895,"value":"### Visual Components","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":211,"value":"demoFlower = {\n const container = d3\n .create(\"div\")\n .style(\"display\", \"flex\")\n .style(\"gap\", \"10px\");\n d3.range(2).forEach((demo, i) => {\n const category = i > 0 ? false : true;\n container.append(() => flower(data[foodIndex], category));\n });\n return container.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"$32","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"viewof selectedPetalName = Inputs.select(Object.keys(petals), {\n label: \"Select petal shape\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":702,"value":"petals = ({\n curvedSplit: petalCurvedSplit,\n curved: petalCurve,\n straight: petalStraight\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2273,"value":"#### Icons","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2275,"value":"$33","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"iconVegetables","database":"$undefined"},{"id":2289,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"iconFruit","database":"$undefined"},{"id":2297,"value":"$34","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"iconSalad","database":"$undefined"},{"id":1780,"value":"icons = ({\n fruit: iconFruit.cloneNode(true),\n vegetables: iconVegetables.cloneNode(true),\n salad: iconSalad.cloneNode(true)\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"### Helper Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1551,"value":"patternDefs = (selection) => {\n const patternSize = 5;\n const patternHeight = patternSize / 5;\n const patterns = selection\n .selectAll(\"pattern\")\n .data(strokeWidths)\n .join(\"pattern\")\n .attr(\"patternTransform\", \"rotate(-45)\")\n .attr(\"patternUnits\", \"userSpaceOnUse\")\n .attr(\"width\", patternSize)\n .attr(\"height\", patternSize)\n .attr(\"id\", (d) => d.name);\n\n patterns\n .append(\"line\")\n .attr(\"x2\", patternSize)\n .attr(\"y1\", patternHeight / 2)\n .attr(\"y2\", patternHeight / 2)\n .attr(\"stroke\", levelColors.B)\n .attr(\"stroke-width\", (d) => d.width);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1774,"value":"iconDefs = (selection) => {\n const symbolData = Object.entries(icons);\n const side = 40;\n selection\n .append(\"g\")\n .selectAll(\"symbol\")\n .data(symbolData)\n .join(\"symbol\")\n .attr(\"id\", ([k, d]) => k)\n .attr(\"width\", side)\n .attr(\"height\", side)\n .attr(\"viewBox\", `0 0 ${side} ${side}`)\n .append(([k, d]) => d.cloneNode(true));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"scaleLevelColor = {\n const mainStressLevels = stressLevels.map((d) => d.slice(0, 1));\n return d3\n .scaleOrdinal()\n .domain(mainStressLevels.sort((a, b) => d3.ascending(a, b)))\n .range([levelColors.A, levelColors.A, levelColors.C]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1543,"value":"scaleSubLevelPattern = d3\n .scaleOrdinal()\n .domain(stressSublevels)\n .range([\"sparse\", \"medium\", \"dense\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1722,"value":"viewof foodIndex = Inputs.range([0, data.length - 1], {\n label: \"Food No.\",\n value: 0,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":821,"value":"drawPetals = function (d) {\n const levelsParsed = d.split(\",\");\n const petalShape = levelsParsed.length > 1 ? petalCurvedSplit : petalCurve;\n d3.select(this).call(petalShape);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"fillPetal = (stressLevel) => {\n const levels = stressLevel.split(\",\");\n return levels;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":599,"value":"demoPetal(selectedPetal)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":707,"value":"selectedPetal = petals[selectedPetalName]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"demoPetal = (petal) => {\n const m = 20;\n const svg = d3\n .create(\"svg\")\n .attr(\"width\", pedalLength + m * 2)\n .attr(\"height\", pedalWidth * 2 + m * 2)\n .style(\"border\", \"1px solid lightgrey\");\n\n svg\n .append(\"g\")\n .datum(\"A,B\")\n .attr(\"transform\", `translate(${m} ${m + pedalWidth})`)\n .call(petal);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"petalStraight = (selection) => {\n const p = d3.path();\n p.moveTo(0, 0);\n p.lineTo(pedalLength * 0.75, pedalWidth);\n p.lineTo(pedalLength, 0);\n p.lineTo(pedalLength * 0.75, -pedalWidth);\n p.closePath();\n selection.append(\"path\").attr(\"d\", p);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":730,"value":"petalCurvedSplit = (selection) => {\n const p1 = d3.path();\n p1.moveTo(0, 0);\n p1.quadraticCurveTo(pedalLength * 0.6, pedalWidth * 1.2, pedalLength, 0);\n p1.lineTo(pedalLength * 0.9, -pedalWidth * 0.75);\n p1.quadraticCurveTo(pedalLength * 0.6, pedalWidth * 0.25, 0, 0);\n p1.closePath();\n\n const p2 = d3.path();\n p2.moveTo(0, 0);\n p2.quadraticCurveTo(\n pedalLength * 0.6,\n pedalWidth * 0.25,\n pedalLength * 0.9,\n -pedalWidth * 0.75\n );\n p2.lineTo(pedalLength * 0.75, -pedalWidth * 1.2);\n p2.quadraticCurveTo(pedalLength * 0.4, pedalWidth * 0.05, 0, 0);\n p2.closePath();\n\n [p1, p2].forEach((p, i) => {\n selection\n .append(\"path\")\n .attr(\"d\", p.toString())\n .attr(\"fill\", (d) => scaleLevelColor(d.split(\",\")[i].slice(0, 1)));\n selection\n .append(\"path\")\n .attr(\"d\", p)\n .attr(\"fill\", (d) => {\n const level = d.split(\",\")[i];\n if (level[0] !== \"B\") return \"none\";\n return `url(#${scaleSubLevelPattern(level.slice(-2))})`;\n });\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"petalCurve = (selection) => {\n const p = d3.path();\n p.moveTo(0, 0);\n p.quadraticCurveTo(pedalLength * 0.6, pedalWidth * 1.2, pedalLength, 0);\n p.lineTo(pedalLength * 0.9, -pedalWidth * 0.75);\n p.lineTo(pedalLength * 0.75, -pedalWidth * 1.2);\n p.quadraticCurveTo(pedalLength * 0.4, -pedalWidth * 0.05, 0, 0);\n p.closePath();\n\n selection\n .append(\"path\")\n .attr(\"d\", p)\n .attr(\"fill\", (d) =>\n d.length === 0 ? \"none\" : scaleLevelColor(d.slice(0, 1))\n )\n .attr(\"stroke\", (d) => (d.length === 0 ? \"lightgrey\" : \"none\"))\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"stroke-dasharray\", (d) => (d.length === 0 ? \"0 2\" : 0));\n selection\n .append(\"path\")\n .attr(\"d\", p)\n .attr(\"fill\", (d) => {\n return d.slice(0, 1) === \"B\"\n ? `url(#${scaleSubLevelPattern(d.slice(-2))})`\n : \"none\";\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"addFonts([\n {\n fontFamily: \"Fraunces\",\n url: await FileAttachment(\n \"Fraunces-VariableFont_SOFT,WONK,opsz,wght.ttf\"\n ).url(),\n style: \"normal\",\n weight: \"100 900\",\n stretch: \"normal\"\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1906,"value":"### Learning\nTrying to understand d3 concepts better, mainly how to deal with nested data structures and how to use advanced d3 flows using `.call()` and `.each()` out nested ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1097,"value":"test = {\n const data = [\n [1, 2, 1],\n [2, 1, 2],\n [1, 3, 1],\n [2, 1, 2],\n [1, 2, 1]\n ];\n const gap = 10;\n\n const svg = d3.create(\"svg\").attr(\"height\", 55);\n\n const drawItem = (selection) => {\n selection.call(drawCircle);\n };\n\n const drawCircle = (selection) => {\n selection.append(\"circle\").attr(\"r\", (d) => {\n return d * 2;\n });\n };\n\n const rows = svg\n .selectAll(\"g\")\n .data(data)\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(10 ${gap + i * gap})`);\n\n const items = rows\n .selectAll(\"g\")\n .data((d) => d)\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(${i * gap} 0)`)\n .call(drawItem);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1362,"value":"test1 = {\n const data = [\n [1, 2, 1],\n [2, 1, 2],\n [1, 3, 1],\n [2, 1, 2],\n [1, 2, 1]\n ];\n const gap = 10;\n\n const svg = d3.create(\"svg\").attr(\"height\", 55);\n\n const drawItem = function (d) {\n const call = d >= 2 ? drawRectangle : drawCircle;\n d3.select(this).call(call);\n };\n\n const drawRectangle = (selection) => {\n selection\n .append(\"rect\")\n .attr(\"transform\", (d) => `translate(${-d} ${-d})`)\n .attr(\"width\", (d) => d * 2)\n .attr(\"height\", (d) => d * 2);\n };\n const drawCircle = (selection) => {\n selection.append(\"circle\").attr(\"r\", (d) => {\n return d * 2;\n });\n };\n\n const rows = svg\n .selectAll(\"g\")\n .data(data)\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(10 ${gap + i * gap})`);\n\n const items = rows\n .selectAll(\"g\")\n .data((d) => d)\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(${i * gap} 0)`)\n .each(drawItem);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":441,"value":"import { addFonts } from \"4b99aad79b6e3d58\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1739,"value":"import { banner } from \"@jakoblistabarth/banner\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"