31:Te56,voronoiGrid = { const margin = { top: 10, right: 10, bottom: 10, left: 10 }; const spacing = 10; const columns = 12; const cellWidth = (width - (columns - 1) * spacing - margin.left - margin.right) / columns; const cellHeight = height / columns; const svg = d3 .create("svg") .attr("viewBox", [ 0, 0, width + margin.left + margin.right, width + margin.top + margin.bottom + 150 ]) // .attr("class", "viz"); .style("background-color", "#f9ece3"); groupedByFerment.forEach((data, i) => { const col = i % columns; const row = Math.floor(i / columns); const group = svg .append("g") .attr( "transform", `translate(${margin.left + col * (cellWidth + spacing)},${ margin.top + row * (cellHeight + spacing) })` ) .attr("class", "voronoi-group"); const voronoi = group .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")") .attr("class", "voronoi-circles"); const labels = group .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); const imageSize = 50; const defs = group.append("defs"); for (let key in fills) { let id = key.replace(/\s+/g, "_"); defs .append("pattern") .attr("id", id) .attr("patternUnits", "userSpaceOnUse") .attr("width", imageSize) .attr("height", imageSize) .append("image") .attr("href", fills[key]) .attr("width", imageSize) .attr("height", imageSize); } function circularPolygon(center, radius, sides) { let angle = (Math.PI * 2) / sides; let points = []; for (let i = 0; i < sides; i++) { let x = center[0] + radius * Math.cos(angle * i); let y = center[1] + radius * Math.sin(angle * i); points.push([x, y]); } return points; } let circlePolygon = circularPolygon( [cellWidth / 2, cellHeight / 2], Math.min(cellWidth, cellHeight) / 2, 100 ); const voronoiTreemap = d3.voronoiTreemap().clip(circlePolygon); // const voronoiTreemap = d3.voronoiTreemap().clip(circlePolygon); // const voronoiTreemap = d3.voronoiTreemap().prng(seed).clip(circlePolygon); const hierarchy = d3.hierarchy(data).sum((d) => d.percentage); voronoiTreemap(hierarchy); let allNodes = hierarchy .descendants() .sort((a, b) => b.depth - a.depth) .map((d, i) => Object.assign({}, d, { id: i })); voronoi .selectAll(".background-path") .data(allNodes) .join("path") .attr("class", "background-path") .attr("d", (d) => "M" + d.polygon.join("L") + "Z") .attr("fill", "ivory"); voronoi .selectAll(".foreground-path") .data(allNodes) .join("path") .attr("class", "foreground-path") .attr("d", (d) => "M" + d.polygon.join("L") + "Z") .attr("stroke", (d) => "ivory") .style("fill-opacity", (d) => (d.depth === 1 ? 1 : 0)) .attr("fill", (d) => { if (d.data.type && d.depth > 0) { return d.data.type == "other" ? "#b9b9b9" : "url(#" + d.data.type.replace(/\s+/g, "_") + ")"; } else if (d.data.type && d.data.type == "other") return "grey"; else return "yellow"; }) .attr("class", "path") .attr("stroke-width", (d) => 5 - d.depth * 2) .attr("pointer-events", (d) => (d.depth === 1 ? "all" : "none")) .on("mousemove", mouseOver) .on("mouseout", mouseOut) .transition() .duration(1000); }); return svg.node(); }32:T9b4,voronoiGrid2 = { const margin = { top: 10, right: 10, bottom: 10, left: 10 }; const radius = Math.min(width, height) / 6 - margin.top; // Radius for the large circle const strokeColor = "#FAFAFA"; // Filter the data for "Tequila" const tequilaData = groupedByFerment.find((d) => d.ferment === "Tequila"); if (!tequilaData) { console.error("No data found for 'Tequila'"); return; } const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const group = svg .append("g") .attr( "transform", `translate(${width / 2}, ${height / 2})` // Center the group ) .attr("class", "voronoi-group"); const imageSize = 50; const defs = group.append("defs"); for (let key in fills) { let id = key.replace(/\s+/g, "_"); defs .append("pattern") .attr("id", id) .attr("patternUnits", "userSpaceOnUse") .attr("width", imageSize) .attr("height", imageSize) .append("image") .attr("href", fills[key]) .attr("width", imageSize) .attr("height", imageSize); } function circularPolygon(center, radius, sides) { let angle = (Math.PI * 2) / sides; let points = []; for (let i = 0; i < sides; i++) { let x = center[0] + radius * Math.cos(angle * i); let y = center[1] + radius * Math.sin(angle * i); points.push([x, y]); } return points; } let circlePolygon = circularPolygon([0, 0], radius, 100); const voronoiTreemap = d3.voronoiTreemap().clip(circlePolygon); const hierarchy = d3.hierarchy(tequilaData).sum((d) => d.percentage); voronoiTreemap(hierarchy); let allNodes = hierarchy .descendants() .sort((a, b) => b.depth - a.depth) .map((d, i) => Object.assign({}, d, { id: i })); group .selectAll(".foreground-path") .data(allNodes) .join("path") .attr("class", "foreground-path") .attr("d", (d) => "M" + d.polygon.join("L") + "Z") .attr("stroke", (d) => strokeColor) .style("fill-opacity", (d) => (d.depth === 1 ? 1 : 0)) .attr("fill", (d) => { if (d.data.type && d.depth > 0) { return d.data.type == "other" ? "#b9b9b9" : "url(#" + d.data.type.replace(/\s+/g, "_") + ")"; } else if (d.data.type && d.data.type == "other") return "grey"; else return "yellow"; }) .attr("stroke-width", (d) => 5 - d.depth * 2) .on("mousemove", mouseOver) .on("mouseout", mouseOut) .transition() .duration(1000); }33:T46a,groupedByFerment = { let preparedData = full_ferment_data .filter( (d) => d && typeof d.organisms === "string" && d.organisms.trim() !== "" && typeof d.category === "string" && d.category.trim() !== "" ) .flatMap((d) => { const organisms = d.organisms.split(","); const categories = d.category.split(","); return organisms .map((o, i) => ({ ferment: d.Name.trim(), organism: o.trim(), type: categories[i]?.trim() })) .filter((o) => o.type !== "null"); }); let rollupMap = d3.rollup( preparedData, (v) => v.length, (d) => d.ferment, (d) => d.type ); let hierarchyData = Array.from(rollupMap, ([ferment, types]) => { let totalCount = Array.from(types.values()).reduce((a, b) => a + b, 0); return { ferment, children: Array.from(types, ([type, count]) => ({ type, percentage: count / totalCount })).map((child, i) => ({ ...child, organism: preparedData[i]?.organism })) }; }); return hierarchyData; }34:T466,percentageData = { let newdata = full_ferment_data .map((d) => { if (d && d.organisms) { const orgArray = d.organisms.split(","); const catArray = d.category.split(","); const ferment = d.Name.trim(); return { ...d, organisms: orgArray.map((d) => d.trim()), category: catArray.map((d) => d.trim()), ferment: ferment }; } else { return d; } }) .filter((d) => d.ferment); const types = {}; newdata.forEach((item) => { types[item.ferment] = types[item.ferment] || {}; const totalTypes = item.category.length; item.category.forEach((type) => { types[item.ferment][type] = (types[item.ferment][type] || 0) + 1 / totalTypes; }); }); let transformedData = {}; for (let ferment in types) { transformedData[ferment] = { ferment: ferment, children: [] }; for (let type in types[ferment]) { transformedData[ferment].children.push({ type: type, percentage: types[ferment][type] }); } } return transformedData; }35:T7bf,groupedByType = { let preparedData = full_ferment_data .filter( (d) => d && typeof d.organisms === "string" && d.organisms.trim() !== "" && typeof d.category === "string" && d.category.trim() !== "" ) .flatMap((d) => { const organisms = d.organisms.split(","); const categories = d.category.split(","); return organisms .map((o, i) => { let type = categories[i]?.trim(); // Capture the type if (type === "fungus") { // Check if the type is 'fungus' type = "mold"; // Change it to 'mold' } return { ferment: d.Name.trim(), organism: o.trim(), type // Use the possibly modified type }; }) .filter((o) => o.type && o.type !== "null"); // Filter out any records without a valid type }); let rollupMap = d3.rollup( preparedData, (v) => v.length, (d) => d.type, // Group by the (modified) type first (d) => d.ferment // Then by ferment ); let hierarchyData = Array.from(rollupMap, ([type, ferments]) => { let totalCount = Array.from(ferments.values()).reduce((a, b) => a + b, 0); return { type, children: Array.from(ferments, ([ferment, count]) => ({ ferment, count, // Direct count of occurrences percentage: count / totalCount // Calculate the percentage of each ferment within this type })) }; }); let totalOccurrences = hierarchyData.reduce( (acc, curr) => acc + curr.children.reduce((acc, child) => acc + child.count, 0), 0 ); hierarchyData.forEach((type) => { const typeTotalCount = type.children.reduce( (acc, child) => acc + child.count, 0 ); type.percentage = +((typeTotalCount / totalOccurrences) * 100).toFixed(2); }); const sortedData = [...hierarchyData].sort( (a, b) => a.percentage - b.percentage ); return sortedData; }36:[{"id":"4d0c711ee30d5d38afa84230ba0da8d54c7df11976a2879754f7c0bc18eacd916e8851058e111f018a6ca684251282e6f22520fe71af4df8dc1116acf42ed7fa","href":"https://static.observableusercontent.com/files/4d0c711ee30d5d38afa84230ba0da8d54c7df11976a2879754f7c0bc18eacd916e8851058e111f018a6ca684251282e6f22520fe71af4df8dc1116acf42ed7fa","name":"full_data@3.csv","type":"text/csv","lastModified":1739651160704.452,"size":38264},{"id":"2dd8303a66c8e09d86603712fe6069c5645647c0322e43d1f25cb37db6d155d771b5f9a4d1bc272dcc4c5838c61d9a55a02faca7759c4684942e85a047da4eb3","href":"https://static.observableusercontent.com/files/2dd8303a66c8e09d86603712fe6069c5645647c0322e43d1f25cb37db6d155d771b5f9a4d1bc272dcc4c5838c61d9a55a02faca7759c4684942e85a047da4eb3","name":"full_data-2.csv","type":"text/csv","lastModified":1739651826982.854,"size":38378},{"id":"4ab8ac6d7e1db4e80eb5c4041cdf1d5bc9a627c8cbfbd7254af2f12a10cd4e55c0b02ae797dadbd063a4f4838f0dcfbe90170d1dc00d5a66bcfe0874ad6b488e","href":"https://static.observableusercontent.com/files/4ab8ac6d7e1db4e80eb5c4041cdf1d5bc9a627c8cbfbd7254af2f12a10cd4e55c0b02ae797dadbd063a4f4838f0dcfbe90170d1dc00d5a66bcfe0874ad6b488e","name":"fermentation data - full_data.csv","type":"text/csv","lastModified":1739689031576.792,"size":38410},{"id":"3dcbdf83ca5cf3cc5705d0f8ac5c4f5226c1802bc097643c9b5e8effe1669de36820a915a00a9ea80e08c7390e6daf69f418130058cc1bafd10e3436b0f10d04","href":"https://static.observableusercontent.com/files/3dcbdf83ca5cf3cc5705d0f8ac5c4f5226c1802bc097643c9b5e8effe1669de36820a915a00a9ea80e08c7390e6daf69f418130058cc1bafd10e3436b0f10d04","name":"DtSFichier 4.png","type":"image/png","lastModified":1701362515070.97,"size":689948},{"id":"d0f04ae10cf8ad8c10b8237af33a879a160840b625e0234478d0dab1b6ab5cfeb395aa0e5269c3381c59c6f581437431a7efb2ab07b8c096ba95355d164fded9","href":"https://static.observableusercontent.com/files/d0f04ae10cf8ad8c10b8237af33a879a160840b625e0234478d0dab1b6ab5cfeb395aa0e5269c3381c59c6f581437431a7efb2ab07b8c096ba95355d164fded9","name":"full_data@1.csv","type":"text/csv","lastModified":1701362937710.216,"size":39433},{"id":"0dda7d38a91668817f3ee32f63e2d56e707c268611d2ee696af09ac05671b86d524118501e3483624195098d234fa458e13e753203fb001fee9030c10c128d90","href":"https://static.observableusercontent.com/files/0dda7d38a91668817f3ee32f63e2d56e707c268611d2ee696af09ac05671b86d524118501e3483624195098d234fa458e13e753203fb001fee9030c10c128d90","name":"percentageData.json","type":"application/json","lastModified":1701062497603.769,"size":50424}] 2f:{"title":"The microorganisms in your favorite fermented food","cells":[{"id":0,"value":"# The microorganisms in your favorite fermented food","pinned":false,"hidden":false,"mode":"md"},{"id":221,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":397,"value":"Uncover the symphony of microorganisms hidden within your favorite foods.

Check out the sonified version [here](https://microbial-symphony.vercel.app/)! ","pinned":false,"hidden":false,"mode":"md"},{"id":225,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"function mouseOut(event, d) {\n // Hide tooltip on mouse out\n 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 d3.select(event.target).transition().attr(\"opacity\", 1);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"function mouseOver(event, d) {\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\n .style(\"left\", event.pageX + 18 + \"px\")\n .style(\"top\", event.pageY + 18 + \"px\")\n .style(\"display\", \"block\")\n .html(\n `${d.data.type} in ${d.parent.data.ferment} `\n );\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).transition().attr(\"opacity\", 0.7);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"toolTip = d3.select(\"body\").append(\"div\").attr(\"class\", \"toolTip\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"ellipse = d3\n .range(100)\n .map((i) => [\n (width * (1 + 0.99 * Math.cos((i / 50) * Math.PI))) / 2,\n (height * (1 + 0.99 * Math.sin((i / 50) * Math.PI))) / 2\n ])","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"hierarchy = d3.hierarchy(groupedByFerment[0]).sum((d) => d.percentage)","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"margin = ({ top: 20, right: 20, bottom: 50, left: 50 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":371,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"percentagedata = FileAttachment(\"percentageData.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"full_ferment_data = FileAttachment(\"fermentation data - full_data.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"full_data = await FileAttachment(\"fermentation data - full_data.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"d3 = require(\"d3@7\", \"d3-weighted-voronoi\", \"d3-voronoi-map\", \"d3-voronoi-treemap\")\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"backgroundImage = FileAttachment(\"DtSFichier 4.png\").url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"fills = ({\n yeast:\n // \"https://raw.githubusercontent.com/infowetrust/albumcolors/master/SVG/Dec.20-1891.19-2.svg\",\n \"https://raw.githubusercontent.com/infowetrust/albumcolors/master/SVG/Dec.03-1881.12-1.svg\",\n // yeast:\n // \"https://raw.githubusercontent.com/infowetrust/albumcolors/master/SVG/Dec.20-1891.19-6.svg\",\n mold: \"https://raw.githubusercontent.com/infowetrust/albumcolors/master/SVG/Dec.03-1881.12-3.svg\",\n lactic_acid_bacteria:\n \"https://raw.githubusercontent.com/infowetrust/albumcolors/master/SVG/Dec.11-1891.14-1.svg\",\n \"acetic acid bacteria\":\n \"https://raw.githubusercontent.com/infowetrust/albumcolors/master/SVG/Dec.09-1888.27-4.svg\",\n bacilli:\n \"https://raw.githubusercontent.com/infowetrust/albumcolors/master/SVG/Dec.06-1880.07-1.svg\"\n // other: \"grey\",\n // additional:\n // \"https://raw.githubusercontent.com/infowetrust/albumcolors/master/SVG/Dec.06-1880.07-4.svg\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"Fills from [here](https://observablehq.com/@oliviafvane/svg-patterns-palettes-infowetrust-french-thematic-maps)","pinned":false,"hidden":false,"mode":"md"},{"id":305,"value":"styles","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"import { styles } from \"@datagrazing/ld-helpers-styles\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}