2f:T4e3,{ const div = d3.create("div").style("display", "flex"); const entries = div .selectAll("div.entry") .data(Object.entries(fills)) .join("div") .attr("class", "entry") .style("background-image", (d) => `url(${d})`) .style("display", "flex") .style("gap", "4px") .style("align-items", "center") .style("padding", "10px") .style("margin", "2px"); entries .append("div") .style("width", "20px") .style("height", "20px") .style("border-radius", "2px") .style("background-image", (d) => `url(${d[1]})`) .style("margin-right", "4px"); entries .append("div") .style("color", "#33333") .text((d) => d[0]); const otherEntry = div .append("div") .attr("class", "entry") .style("display", "flex") .style("align-items", "center") .style("padding", "10px") .style("margin", "2px"); otherEntry .append("div") .style("width", "20px") .style("height", "20px") .style("border-radius", "2px") .style("background-color", "grey") .style("margin-right", "4px"); otherEntry .append("div") .style("color", "black") .style("stroke-width", "2px") .style("stroke", "#b9b9b9") .text("other"); return div.node(); }30:Td5f,chart = { const barHeight = 25; const marginTop = 30; const marginRight = 100; const marginBottom = 10; const marginLeft = 20; const width = 928; const x = d3 .scaleLinear() .domain([0, 1]) .range([marginLeft, width - marginRight]); const y = d3 .scaleBand() .padding(0.1); const format = x.tickFormat(20, "%"); const imageSize = 30; const svg = d3 .create("svg") .attr("width", width) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;"); const defs = svg.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); } const xAxis = svg .append("g") .attr("transform", `translate(0,${marginTop})`) .call(d3.axisTop(x).ticks(width / 80, "%")) .call((g) => g.select(".domain").remove()); const backgroundRect = svg .append("g") .attr("class", "background-rects") .attr("fill", colors.grey); const bars = svg.append("g").attr("class", "bars"); // .attr("fill", colors.orange); const labels = svg .append("g") .attr("class", "labels") .attr("fill", "white") .attr("text-anchor", "end"); function update(data) { const height = Math.ceil((data.length + 0.1) * barHeight) + marginTop + marginBottom; svg.attr("height", height).attr("viewBox", [0, 0, width, height]); y.domain( data.map((d) => d.organism).sort((a, b) => b.percentage - a.percentage) ).rangeRound([marginTop, height - marginBottom]); backgroundRect .selectAll("rect") .data(data) .join("rect") .attr("x", x(0)) .attr("y", (d) => y(d.organism)) .attr("width", (d) => x(1) - marginLeft) .attr("height", y.bandwidth()); bars .selectAll("rect") .data(data, (d) => d.organism) .join("rect") .attr("x", x(0)) .attr("y", (d) => y(d.organism)) .attr("height", y.bandwidth()) .attr("fill", (d) => d.type == "other" ? "#b9b9b9" : "url(#" + d.type.replace(/\s+/g, "_") + ")" ) .transition() .duration(750) .attr("width", (d) => x(d.percentage) - x(0)); // bars // .selectAll("rect") // .data(data, (d) => d.organism) // .join("rect") // .attr("x", x(0)) // .attr("y", (d) => y(d.organism)) // .attr("height", y.bandwidth()) // .attr("fill", (d) => color2[d.type]) // .transition() // .duration(750) // .attr("width", (d) => x(d.percentage) - x(0)); labels .selectAll("text") .data(data) .join("text") .attr("x", -100) .attr("y", (d) => y(d.organism) + y.bandwidth() / 2) .attr("dy", "0.35em") .attr("dx", -4) .transition() .duration(750) .attr("x", (d) => x(d.percentage)) .text((d) => d.organism) .call((text) => text // // .filter((d) => x(d.percentage) - x(0) < 20) // short bars .attr("dx", +4) .attr("fill", "#333333") .attr("text-anchor", "start") .attr("font-size", "14px") ); } return Object.assign(svg.node(), { update }); }31:T602,percentageData = { const counts = {}; const names = {}; const types = {}; let organismTypesObj = {}; organism_types.forEach((item) => { organismTypesObj[item.organism] = item.type; }); fullData.forEach((item) => { item.organisms.forEach((organism) => { counts[organism] = counts[organism] || {}; names[organism] = names[organism] || {}; types[organism] = organismTypesObj[organism] || "Unknown"; item.organisms.forEach((otherOrganism) => { if (organism !== otherOrganism) { counts[organism][otherOrganism] = (counts[organism][otherOrganism] || 0) + 1; names[organism][otherOrganism] = names[organism][otherOrganism] || []; if (!names[organism][otherOrganism].includes(item.Name)) { names[organism][otherOrganism].push(item.Name); // keep all the names for each pair of organisms } } }); }); }); let transformedData = {}; for (let organism in counts) { let totalCount = Object.values(counts[organism]).reduce((a, b) => a + b, 0); transformedData[organism] = Object.entries(counts[organism]).map( ([specificOrganism, count]) => { let percentage = count / totalCount; return { organism: specificOrganism, type: types[specificOrganism].toLowerCase(), percentage: percentage, names: names[organism][specificOrganism] // get the names for the specific pair of organisms }; } ); } return transformedData; }32:T654,transformedData = { const counts = {}; const names = {}; const types = {}; let organismTypesObj = {}; organism_types.forEach((item) => { organismTypesObj[item.organism] = item.type; }); fullData.forEach((item) => { item.organisms.forEach((organism) => { counts[organism] = counts[organism] || {}; names[organism] = names[organism] || {}; types[organism] = organismTypesObj[organism] || "Unknown"; item.organisms.forEach((otherOrganism) => { if (organism !== otherOrganism) { counts[organism][otherOrganism] = (counts[organism][otherOrganism] || 0) + 1; names[organism][otherOrganism] = names[organism][otherOrganism] || []; if (!names[organism][otherOrganism].includes(item.Name)) { names[organism][otherOrganism].push(item.Name); // keep all the names for each pair of organisms } } }); }); }); let transformedData = []; for (let organism in counts) { let totalCount = Object.values(counts[organism]).reduce((a, b) => a + b, 0); let pairs = Object.entries(counts[organism]).map( ([specificOrganism, count]) => { let percentage = count / totalCount; return { organism: specificOrganism, type: types[specificOrganism], percentage: percentage, names: names[organism][specificOrganism] // get the names for the specific pair of organisms }; } ); transformedData.push({ organism: organism, type: types[organism], pairs: pairs }); } return transformedData; }33:[{"id":"8ac05b855c9070b6cad8db72a529e81de31d5fe2446589bd22cf64ac32d2123dc9818564dfb7dfb065f6c32be055c9ae3e01c0c989549cfbab400b33e54620c3","href":"https://static.observableusercontent.com/files/8ac05b855c9070b6cad8db72a529e81de31d5fe2446589bd22cf64ac32d2123dc9818564dfb7dfb065f6c32be055c9ae3e01c0c989549cfbab400b33e54620c3","name":"organism_types.csv","type":"text/csv","lastModified":1700762162362.888,"size":3135}] 2d:{"title":"Microorganisms that appear together in commmon ferments","cells":[{"id":0,"value":"# Microorganisms that appear together in commmon ferments","pinned":false,"hidden":false,"mode":"md"},{"id":725,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"viewof organism = {\n const select = Inputs.select(keys.sort(), {\n value: keys[0],\n label: \"Select an organism:\"\n });\n\n return select;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":533,"value":"${organism} occurs with . . .","pinned":false,"hidden":false,"mode":"md"},{"id":301,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":548,"value":"in ${percentageData[organism][0].names.join(\", \")}\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":590,"value":"

\n Source: The Periodic Table of Fermented Foods\n

","pinned":false,"hidden":false,"mode":"md"},{"id":222,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":601,"value":"chart.update(\n percentageData[organism].sort((a, b) => b.percentage - a.percentage)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"keys = Object.keys(percentageData).sort()","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"colors = ({\n blue: \"#5A7E8C\",\n orange: \"#F2BC57\",\n tan: \"#F2E2CE\",\n reddish: \"#BF846F\",\n red: \"#D9736A\",\n strokeRed: \"#9f2305\",\n strokeDark: \"#35394E\",\n black: \"#333333\",\n grey: \"#eeeeee\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":566,"value":"color = ({\n Other: colors.tan,\n Yeast: colors.reddish,\n \"Lactic Acid Bacteria\": \"#4ECDC4\",\n \"Acetic Acid Bacteria\": \"#32A852\",\n Mold: \"#A1A680\",\n Bacilli: \"#FF6B6B\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":650,"value":"color2 = ({\n Other: \"grey\",\n Yeast: colors.tan,\n \"Lactic Acid Bacteria\": colors.blue,\n \"Acetic Acid Bacteria\": \"#ADD8E6\",\n Mold: \"#006400\",\n Bacilli: colors.reddish\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"fullData = {\n let newdata = unmodifiedData.map((d) => {\n if (d && d.organisms) {\n const orgArray = d.organisms.split(\",\");\n const catArray = d.category.split(\",\");\n\n return {\n ...d,\n organisms: orgArray.map((d) => d.trim()),\n category: catArray.map((d) => d.trim())\n };\n } else {\n return d;\n }\n });\n // .filter((d) => d.coordinates);\n\n return newdata.filter(\n (d) => d.organisms && !d.organisms.includes(\"lactic acid bacteria\")\n );\n // .map((d) => ({ ...d, texture: getTexture(d.categories) }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"unmodifiedData = d3.csv(getCsvUrl(url), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"url = \"https://docs.google.com/spreadsheets/d/1BsuByRGma22_IjnQXWhK5kjCJAw4Ov7W9BuCZpUpGfY/edit#gid=1372440667\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"// Converts a Google Sheets website URL to its CSV URL. You can also go to “File → Publish to web”, select the “Comma-separated values (.csv)” type, select the sheet with your data, and use that CSV URL directly with `d3.csv` above. If you need data to update faster, try the Google Sheets API: https://stackoverflow.com/questions/30082277/accessing-a-new-style-public-google-sheet-as-json/44479726#44479726\n\ngetCsvUrl = (url) => {\n url = new URL(url);\n const id = url.pathname.split(\"/\")[3];\n const gid = new URLSearchParams(url.hash.slice(1)).get(\"gid\") || 0;\n return `https://docs.google.com/spreadsheets/d/${id}/export?format=csv&gid=${gid}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":607,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":658,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":810,"value":"organism_types = FileAttachment(\"organism_types.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":668,"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":true,"hidden":false,"mode":"ojs"},{"id":522,"value":"styles","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"import { styles } from \"@datagrazing/ld-helpers-styles\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":450,"value":"// workbook = FileAttachment(\"google://Periodic Table of Fermented Foods Copy\").xlsx()","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"// unmodifiedData = workbook.sheet(3, {\n// headers: true\n// // range: \"A1:J10\"\n// })","pinned":false,"hidden":false,"mode":"ojs"},{"id":677,"value":"[this](https://observablehq.com/@fil/hello-tippy) could be helpful","pinned":false,"hidden":false,"mode":"md"}],"files":"$W33","stdlib":"1","titling":"auto"}