31:T854,chart = { // const svg = d3.select(DOM.svg(size + margin.left + margin.right, size + margin.left + margin.right)); const svg = d3 .create("svg") .attr('viewBox', [0, 0, width + margin.top + margin.right, width + margin.left + margin.right]) .style("background-color", "#f9ece3") const voronoi = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); const labels = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); const legend = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); let def = svg.append("defs").html(grouped12518022.patterns) let seed = new Math.seedrandom('seed'); const voronoiTreemap = d3.voronoiTreemap() .prng(seed) .clip([ [0, 0], [0, width], [width, width], [width, 0], ]); voronoiTreemap(hierarchy); let allNodes = hierarchy.descendants() .sort((a, b) => b.depth - a.depth) .map((d, i) => Object.assign({}, d, {id: i})); voronoi.selectAll('path') .data(allNodes) .join('path') .attr('d', d => "M" + d.polygon.join("L") + "Z") .attr("stroke", d => d.depth === 2 ? 'ivory' : strokeColor) .style('fill-opacity', d => d.depth === 2 ? 1 : 0) .style('fill', d => d.parent ? colorScale(d.data[0]) : '') .attr("class","path") .attr("stroke-width", d => 5 - d.depth*2) .attr('pointer-events', d => d.depth === 2 ? 'all' : 'none') .on('mousemove', mouseOver) .on('mouseout', mouseOut ) .transition() .duration(1000) labels.selectAll('text') .data(allNodes.filter(d => d.depth === 2 )) .join('text') .attr('class', d => `label-${d.id}`) .attr("transform", d => "translate("+[d.polygon.site.x, d.polygon.site.y+6]+")") // legend.selectAll("text") // .data(allNodes) // .enter() // .append("text") // .attr("class", "title") // //.attr('x', 0 ) // .attr('y',(d,i)=> 15*i - 5) // .attr("class", "legend_label") // //.attr('fill',fillColor) // .style('fill', 'grey') return svg.node(); }32:[{"id":"f16ed867cc912d6c2d0357620fae412819c6b5b8e8d1c48cef314b5ca255a6e7d265c8ad4821ccc8f9a9f7298edf62aea8332e57ef2135a80066a8c28a12642e","href":"https://static.observableusercontent.com/files/f16ed867cc912d6c2d0357620fae412819c6b5b8e8d1c48cef314b5ca255a6e7d265c8ad4821ccc8f9a9f7298edf62aea8332e57ef2135a80066a8c28a12642e","name":"Margo_v0.2_Condensed-Medium_Italic.woff","type":"font/woff","lastModified":1650136007980.716,"size":17084},{"id":"6b0cc3af9647bddc273b15968343a5a1e3e3f8e74f5a0e585e8a4d7612f0e1a1f4ea573a23df12a94a2dd75f8b72625bf46664ae740c091334ee929d47bb93aa","href":"https://static.observableusercontent.com/files/6b0cc3af9647bddc273b15968343a5a1e3e3f8e74f5a0e585e8a4d7612f0e1a1f4ea573a23df12a94a2dd75f8b72625bf46664ae740c091334ee929d47bb93aa","name":"Margo_v0.2_Condensed-Medium.woff","type":"font/woff","lastModified":1650136008234.598,"size":15764},{"id":"c65814768344f66d8da8be88b82be57ebb6376e9b329d87277c7d29a37b74cb9780d8e8bdcdb51da64de84a746f05f91fcc46f658793659e2df2da215e896b8e","href":"https://static.observableusercontent.com/files/c65814768344f66d8da8be88b82be57ebb6376e9b329d87277c7d29a37b74cb9780d8e8bdcdb51da64de84a746f05f91fcc46f658793659e2df2da215e896b8e","name":"Margo_v0.2_Condensed-Medium.woff2","type":"font/woff2","lastModified":1650136008274.379,"size":14808}] 2f:{"title":"PROPORTION OF","cells":[{"id":17,"value":"# PROPORTION OF \n# BACTERIA & YEASTS \n# IN SHORT-FERMENTED DAIRY PRODUCTS","pinned":false,"hidden":false,"mode":"md"},{"id":31,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":735,"value":"toolTip = d3.select(\"body\").append(\"div\").attr(\"class\", \"toolTip\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":732,"value":" function mouseOver(event, d){\n console.log(d.parent.data[0])\n // Get the toolTip, update the position, and append the inner html depending on your content\n // I tend to use template literal to more easily output variables.\n toolTip.style(\"left\", event.pageX + 18 + \"px\")\n .style(\"top\", event.pageY + 18 + \"px\")\n .style(\"display\", \"block\")\n .html(`${d.data[0]} in ${d.parent.data[0]} `);\n \n // Optional cursor change on target\n d3.select(event.target).style(\"cursor\", \"pointer\"); \n \n // Optional highlight effects on target\n d3.select(event.target)\n .transition()\n .attr('opacity', .7)\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":737,"value":" function mouseOut(event, d){\n // Hide tooltip on mouse out\n\t toolTip.style(\"display\", \"none\"); // Hide toolTip\n \n // Optional cursor change removed\n d3.select(event.target).style(\"cursor\", \"default\"); \n \n // Optional highlight removed\n\t d3.select(event.target)\n .transition()\n .attr('opacity', 1)\n\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":628,"value":"### LEARNINGS:\n- voronoi\n- hierarchy data manipulation","pinned":false,"hidden":false,"mode":"md"},{"id":274,"value":"allNodes = hierarchy.descendants()\n .sort((a, b) => b.depth - a.depth)\n .map((d, i) => Object.assign({}, d, {id: i})).filter(d => d.parent)","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"margin = ({top: 30, right: 15, bottom: 30, left: 15 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"viewof strokeWidth = slider({min: 5, max:10, step:0.5, title: \"Stroke width:\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"viewof fillColor = color({\n value: \"#ffffff\",\n title: \"Fill Color\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"strokeColor = \"#F2E3C2\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":721,"value":"tooltipWidth = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":647,"value":"mutable type = 'yeast'","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"backgroundColor = '#f9ece3'","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"height = width/2","pinned":false,"hidden":false,"mode":"ojs"},{"id":576,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":0,"value":"md`# Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":786,"value":"`hierarchy` replaces the code below it, but I want to keep that code as a reference future data manipulation (using `d3.groups` in replace of `d3.nest`. This amazing implementation was provided by [Ben Oldenberg](https://observablehq.com/collection/@benoldenburg/transit)","pinned":false,"hidden":false,"mode":"md"},{"id":248,"value":"hierarchy = {\n let config = {\n dataset: organisms,\n // this sets the order of the grouping (the voronoi tree seems to only work with 2 levels)\n groupByFns: [d => d.dairy, d => d.organism],\n reduceFn: v => d3.sum(v, d => 1) // this sets size/value to be based on the by\n // reduceFn: v => d3.sum(v, d => d[\"some_other_value\"]) // alternatively you can use a data variable like volume\n}\n \n const defaultConfig = {\n childrenAccessorFn: ([key, value]) => value.size && Array.from(value),\n sumFn: ([key, value]) => value,\n sortFn: (a, b) => b.value - a.value,\n };\n const { dataset, reduceFn, groupByFns, childrenAccessorFn, sumFn, sortFn } = { ...defaultConfig, ...config };\n const rollupData = d3.rollup(dataset, reduceFn, ...groupByFns);\n const hierarchyData = d3.hierarchy([null, rollupData], childrenAccessorFn)\n .sum(sumFn)\n .sort(sortFn);\n return hierarchyData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"rootNode = d3.hierarchy(data_nested)\n .count(d => d.ferments)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"nodes = rootNode.descendants()\n .sort((a, b) => b.depth - a.depth)","pinned":false,"hidden":false,"mode":"ojs"},{"id":348,"value":"function colorScale(d) {\n if (!d) return\n else if (d.includes('ces') || d.includes('yeast') || d.includes('candi') || d.includes('pich')) {\n mutable type = 'yeast'\n return \"url(#grouped-12518022-3)\"\n }\n else {\n mutable type = \"bacteria\"\n return \"url(#grouped-12518022-4)\"\n }\n \n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"data_nested = {\n let data_nest = d3.group(organisms, d => d.organism)\n return {key: \"data_nest\", children: Array.from(data_nest).map(d => ({\n key:d[0],\n ferments: d[1].map(v => v.dairy)\n })\n)}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"org = [...new Set(d3.merge(full_data.map(d => d['Main organisms']).filter(d => d)))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":402,"value":"organisms = d3.merge(full_data.map(d => d['Main organisms'].map(v => ({\n color: colorScale(v),\n organism: v,\n dairy: d.Name,\n type: mutable type\n})))).sort((a, b) => d3.descending(a.type, b.type))","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"full_data = {\n const base = new Airtable({ apiKey: \"keyqcVv7EZOCZz120\" }).base(\n \"appeD1izSz4zN9NKA\"\n );\n const records = await base(\"Table 1\").select({ view: \"grouped_organisms\" }).all();\n return records.map((d) => d.fields).filter(d => d['Main organisms']);\n\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":567,"value":"margo = awaitProperties({\n regular: FileAttachment(\"Margo_v0.2_Condensed-Medium.woff\").url(),\n bold: FileAttachment(\"Margo_v0.2_Condensed-Medium.woff2\").url(),\n italic: FileAttachment(\"Margo_v0.2_Condensed-Medium_Italic.woff\").url() \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":562,"value":"// Ensures that any promises property values are resolved.\nasync function awaitProperties(obj) {\n return Object.fromEntries(\n await Promise.all(Object.entries(obj).map(async ([k, v]) => [k, await v]))\n );\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`# Library`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"Airtable = (await import(\"https://cdn.skypack.dev/airtable@0.11.1?min\")).default","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"import {grouped12518022} from \"@tomshanley/cheysson-color-palettes\" ","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"import {wrap_text_nchar} from \"@ben-tanen/svg-text-and-tspan-word-wrapping\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@6\", \"d3-weighted-voronoi\", \"d3-voronoi-map\", \"d3-voronoi-treemap\", \"seedrandom@2.4.3/seedrandom.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"import {slider, radio, text, select, color} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"md`## Reference\n- https://github.com/Kcnarf/d3-voronoi-treemap\n- https://observablehq.com/@will-r-chase/voronoi-treemap\n- [inspring twitter posts](https://twitter.com/search?q=voronoi%20treemap&src=typed_query)\n- [interactive](https://observablehq.com/@pstuffa/expanding-voronoi-treemap)\n- [another square](https://observablehq.com/@andreabenedetti/voronoi-treemap-ambiti-tematici-adi)\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}