31:T6c3,masonJar = { console.log(ferment[0].key); let [svg, svgElement] = getSVG(); let wrapper = d3 .select(svg) .attr( "transform", isMobile ? `translate(${width / 3}, 10px` : `translate(${width / 3},${height / 5})` ); const foreign = wrapper .append("foreignObject") .attr("width", isMobile ? "8em" : "16em") .attr("height", "10em") .attr("x", isMobile ? width / 2 + 50 : width / 4 + margin.left) .attr("y", isMobile ? width / 3 : height / 4); foreign .append("xhtml:div") .html(isMobile ? mobileText : text) .style("padding", "12px"); let rectGroup = wrapper .selectAll(".jar") .data(stack) .join("g") .attr("fill", (d) => colorScale(d.key)) .attr("transform", "translate(0, 43)") .selectAll("rect") .data((d) => d) .attr("height", 0) .join("rect") //transition from bottom to top .attr("y", (d) => yScale(d[0])) .attr("height", 0) .attr("width", isMobile ? xScale.bandwidth() * 4 : xScale.bandwidth()) .transition(d3.easeCubicIn) .duration(500) .attr("clip-path", "url(#myCliparea)") .attr("y", (d) => yScale(d[1])) .attr("height", (d, i) => yScale(d[0]) - yScale(d[1])) .attr("x", (d) => xScale(d.data.name)); // .attr("width","300px") let path = wrapper .append("clipPath") .attr("id", "myCliparea") .append("path") .attr("transform", "translate(0, 17)") .attr("d", jarBottom); let riso = wrapper .append("svg:image") .attr("xlink:href", riso_overlay) .attr("transform", "translate(0, 43)") .attr("clip-path", "url(#myCliparea)"); let jar = wrapper.append("path").attr("class", "jar").attr("d", jar2); return svg; }32:T5ce,jar2="M58.7,62.4c20.9,1.8,26.3,2.6,48.9,2.7c27.6,0.1,41.7,2.1,61.3-0.4c13.6-1.7,23.9-6.7,26.1,0.4 c4.1,13.1,11,27,13.6,40.2c2.1,11,2.1,26.3,2.4,44.3c0.6,30.9-1.5,32.5-2.7,75.4c-1,35.1,0,51.1-8.1,73.7 c-3.5,9.8-7.7,17.8-15.5,24.1c-7.4,6-15.8,8.4-36.7,10.6c-23.3,2.5-41.5,2.4-51.7,2.3c-47.8-0.5-57.4-4.5-64.5-8.9 c-2.2-1.3-11.7-7.4-19.6-18.7C0.1,290.8,1.8,275.7,1.4,220c-0.3-38.1-1.2-41.5-0.8-73c0.2-17.6-0.4-31.3,1.2-42.9 C2.5,98.4,5.3,91.9,7.6,84c5.7-19.5,5.7-23.1,8.5-23.2C35.7,60.1,36.6,60.6,58.7,62.4z M13.7,52.4c2,3.6,8.9,3.2,11.2,3.1 c28.4-1.2,56.9,4.7,85.3,3.9c45.6-1.3,80.5,1.7,86.5-9.3c0.4-0.7,1.6-2.9,0.8-4.6c-2.4-4.9-19.3-1.1-29,0.8c0,0-25.9,4.9-59.1,4.2 c-16.2-0.3-63.6-3.5-82.6-7.3c-2.1-0.4-8.3-1.7-11.6,1.5C13.3,46.6,12.5,50.1,13.7,52.4z M18,25.7c-1.5,0.2-5.2,2.7-5,5 s4.3,4.2,5.8,4.2c18.9,0.8,86.9,3.1,86.9,3.1s42.5-1.4,84.9-7.7c0.8-0.1,3.6-0.6,5.8-2.7c0.5-0.5,2.8-2.7,2.3-5 c-0.6-2.7-4.5-3.7-5.4-3.9c-4.7-1-8.9,1.5-9.7,1.9c-9.6,5.5-53.6,9.9-78.8,9.3C73.8,29.2,31.5,24.2,18,25.7z M30.3,11.1 c23.8,5.2,51.4,4.1,68.3,4.2c30.1,0.2,50.5,4.4,78.4-1.2c14-2.8,14.3-4.9,14.3-5.4c0-2.4-9.4-4-15.8-5c-28.8-4.3-49-2.3-74.5-2.7 C84.6,0.8,58.1-0.6,32.3,2.6c-5.2,0.6-13.4,1.9-13.5,3.9C18.7,6.9,19.2,8.6,30.3,11.1z M18.8,6.4c-0.6,2.6-1.2,5.8-1.5,9.3 c-0.3,3.8-0.2,7.2,0,10 M192.6,18.6c0.2-1.8,0.2-2.7,0-4.9c-0.2-2.1-0.8-3.8-1.2-5.4 M18.4,43.6c-0.1-1.3-0.2-2.7-0.3-4.4 c-0.1-1.6-0.3-3-0.4-4.1 M17.2,60.8c0.1-0.9,0.2-2,0.4-3.2c0.1-1.1,0.2-2.2,0.2-3 M191.1,42.5l0.9-12.4 M192,61.9l-0.5-7.5"33:T5e0,jar = "M58.7,62.4c20.9,1.8,26.3,2.6,48.9,2.7c27.6,0.1,41.7,2.1,61.3-0.4c13.6-1.7,23.9-6.7,26.1,0.4 c4.1,13.1,11,27,13.6,40.2c2.1,11,2.1,26.3,2.4,44.3c0.6,30.9-1.5,32.5-2.7,75.4c-1,35.1,0,51.1-8.1,73.7 c-3.5,9.8-7.7,17.8-15.5,24.1c-7.4,6-15.8,8.4-36.7,10.6c-23.3,2.5-41.5,2.4-51.7,2.3c-47.8-0.5-57.4-4.5-64.5-8.9 c-2.2-1.3-11.7-7.4-19.6-18.7C0.1,290.8,1.8,275.7,1.4,220c-0.3-38.1-1.2-41.5-0.8-73c0.2-17.6-0.4-31.3,1.2-42.9 C2.5,98.4,5.3,91.9,7.6,84c5.7-19.5,5.7-23.1,8.5-23.2C35.7,60.1,36.6,60.6,58.7,62.4z M13.7,52.4c2,3.6,8.9,3.2,11.2,3.1 c28.4-1.2,56.9,4.7,85.3,3.9c45.6-1.3,80.5,1.7,86.5-9.3c0.4-0.7,1.6-2.9,0.8-4.6c-2.4-4.9-19.3-1.1-29,0.8c0,0-25.9,4.9-59.1,4.2 c-16.2-0.3-63.6-3.5-82.6-7.3c-2.1-0.4-8.3-1.7-11.6,1.5C13.3,46.6,12.5,50.1,13.7,52.4z M18,25.7c-1.5,0.2-5.2,2.7-5,5 c0.2,2.3,4.3,4.2,5.8,4.2c18.9,0.8,86.9,3.1,86.9,3.1s42.5-1.4,84.9-7.7c0.8-0.1,3.6-0.6,5.8-2.7c0.5-0.5,2.8-2.7,2.3-5 c-0.6-2.7-4.5-3.7-5.4-3.9c-4.7-1-8.9,1.5-9.7,1.9c-9.6,5.5-53.6,9.9-78.8,9.3C73.8,29.2,31.5,24.2,18,25.7z M30.3,11.1 c23.8,5.2,51.4,4.1,68.3,4.2c30.1,0.2,50.5,4.4,78.4-1.2c14-2.8,14.3-4.9,14.3-5.4c0-2.4-9.4-4-15.8-5C146.7-0.6,126.5,1.4,101,1 C84.6,0.8,58.1-0.6,32.3,2.6c-5.2,0.6-13.4,1.9-13.5,3.9C18.7,6.9,19.2,8.6,30.3,11.1z M18,24.2 M18.8,6.4c-0.6,2.6-1.2,5.8-1.5,9.3 c-0.3,3.8-0.2,7.2,0,10 M192.6,18.6c0.2-1.8,0.2-2.7,0-4.9c-0.2-2.1-0.8-3.8-1.2-5.4 M18.4,43.6c-0.1-1.3-0.2-2.7-0.3-4.4 c-0.1-1.6-0.3-3-0.4-4.1 M17.2,60.8c0.1-0.9,0.2-2,0.4-3.2c0.1-1.1,0.2-2.2,0.2-3 M191.1,42.5l0.9-12.4 M192,61.9l-0.5-7.5"34:[{"id":"46276f76337db0bf416ad033e7991356e9d193652c2d84d745b164079b81837cd8949de2d65f588f715258e0e85d878bccc448342cf8cbdfa9b159be21c0bf22","href":"https://static.observableusercontent.com/files/46276f76337db0bf416ad033e7991356e9d193652c2d84d745b164079b81837cd8949de2d65f588f715258e0e85d878bccc448342cf8cbdfa9b159be21c0bf22","name":"belltoposans-italic-webfont.woff","type":"font/woff","lastModified":1645899541190.974,"size":31804},{"id":"e9a72820c4fbacb66424271d186cd592f658fa2b3633b10ebfe6a399af22f8403b6d43393a5017d0744ff7b9528bdfe92904f34d830a89ad6886fc2cc6a5af46","href":"https://static.observableusercontent.com/files/e9a72820c4fbacb66424271d186cd592f658fa2b3633b10ebfe6a399af22f8403b6d43393a5017d0744ff7b9528bdfe92904f34d830a89ad6886fc2cc6a5af46","name":"belltoposans-regular-webfont.woff","type":"font/woff","lastModified":1645899541482.873,"size":27532},{"id":"14d28d9d4e334c5492d37858e8ad82bd4c4ef0d282bfd4b4614d3f52debb613cd113b7e36135add5c837041e72cbe41de3da5c1bf8657691d9f3204ec05299ce","href":"https://static.observableusercontent.com/files/14d28d9d4e334c5492d37858e8ad82bd4c4ef0d282bfd4b4614d3f52debb613cd113b7e36135add5c837041e72cbe41de3da5c1bf8657691d9f3204ec05299ce","name":"belltoposans-bold-webfont.woff","type":"font/woff","lastModified":1645899541324.165,"size":30012},{"id":"4c18114b9db0c34e534513f4b00d236073c619c93efcffcf493fd0cea24ee489d1a000d3ee80c9c11df270802f76c21c5f9a76c3e7a8df7ba16a62446cb376f0","href":"https://static.observableusercontent.com/files/4c18114b9db0c34e534513f4b00d236073c619c93efcffcf493fd0cea24ee489d1a000d3ee80c9c11df270802f76c21c5f9a76c3e7a8df7ba16a62446cb376f0","name":"belltoposans-bolditalic-webfont.woff","type":"font/woff","lastModified":1645899541406.571,"size":34884},{"id":"4bb49b8b13da95c56c0db4065364a44d949b6e8d4b33f30ac09374d3bebe55507e6a86a17be29509e24ed0bcabf821c5f986ad4d546ca18f87af78c8ed20307e","href":"https://static.observableusercontent.com/files/4bb49b8b13da95c56c0db4065364a44d949b6e8d4b33f30ac09374d3bebe55507e6a86a17be29509e24ed0bcabf821c5f986ad4d546ca18f87af78c8ed20307e","name":"risograph_texture_overlay.png","type":"image/png","lastModified":1645923848341.831,"size":817440}] 2f:{"title":"Fermentation Jar","cells":[{"id":0,"value":"# Fermentation Jar\nFrustrated by recipes and googling for fermentation ratios, I wanted to create a central location where I could easily know how much salt each ferment uses, and their fermentation time. To use this tool, just pick the oversimplified ferment base (lacto for vegetables, like for making sauerkraut or kimchi and koji for ferments like miso), then select a ferment from the drop-down menu. If you're combining ferments, as I often do, you can usually just use the salt ratio for the vegetable that takes up the most space in the jar.\n\nYou'll notice a to-do list. I'm planning a few upgrades...eventually. If you have any ferments that you want to add to my spreadsheet or have any suggestions for improvements, don't hesitate to reach out!","pinned":false,"hidden":false,"mode":"md"},{"id":994,"value":"viewof fermentChoice = Inputs.radio([\"Lacto\", \"Koji\"], {value: \"Lacto\", label: \"Ferment base:\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1496,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":635,"value":"viewof ferment = Inputs.select(fermentChoice === \"Lacto\" ? d3.group(data, d => d.name) : d3.group(kojiData, d => d.name), {label: \"Ferment:\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":769,"value":"swatch = {\n let swatchChoice =\n fermentChoice === \"Koji\"\n ? Swatches(d3.scaleOrdinal([\"Koji\", \"Substrate\", \"Salt\"], kojiColors))\n : Swatches(d3.scaleOrdinal([ferment[0].name, \"Salt\"], colors));\n\n return swatchChoice;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":683,"value":"## TO DO\n- Add more ferments\n- Make it a calculator that lets the user add multiple vegetables\n","pinned":false,"hidden":false,"mode":"md"},{"id":63,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":1518,"value":"ferment[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1391,"value":"mobileText = ferment[0].salt_end ? `You'll need about ${(ferment[0].salt_start * 100).toFixed(1)}% - ${(ferment[0].salt_end * 100).toFixed(1)}% salt` : `About ${(ferment[0].salt_avg * 100).toFixed(1)}% salt for the total weight of your ${ferment[0].name.toLowerCase()}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":689,"value":"text = ferment[0].koji_ratio ? kojiText : lactoText","pinned":false,"hidden":false,"mode":"ojs"},{"id":1128,"value":"lactoText = ferment[0].salt_end ? `You'll need about ${(ferment[0].salt_start * 100).toFixed(1)}% - ${(ferment[0].salt_end * 100).toFixed(1)}% salt for the total weight of your ${ferment[0].name.toLowerCase()}`\n: `You'll need about ${(ferment[0].salt_avg * 100).toFixed(1)}% salt for the total weight of your ${ferment[0].name.toLowerCase()}`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1523,"value":"ferment[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1122,"value":"kojiText = ferment[0].name === \"Sagohachi\"\n ? `You'll need about ${(\n ferment[0].salt_avg * 100\n ).toFixed(\n 1\n )}% salt for the total weight of your ${ferment[0].name.toLowerCase()} with a salt : koji : substrate ratio of 1 : ${\n ferment[0].substrate_ratio\n } `\n : ferment[0].name === \"Shoyu Koji\"\n ? `You'll need 3 parts koji : 2 parts soy sauce.`\n : `You'll need about ${(\n ferment[0].salt_avg * 100\n ).toFixed(\n 1\n )}% salt for the total weight of your ${ferment[0].name.toLowerCase()} with a koji : substrate ratio of 1 : ${\n ferment[0].substrate_ratio\n } `","pinned":true,"hidden":false,"mode":"ojs"},{"id":974,"value":"riso_overlay = await FileAttachment(\"risograph_texture_overlay.png\").url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"colorScale = d3.scaleOrdinal()\n .domain(fermentChoice === \"Lacto\" ? names : kojiNames)\n .range( fermentChoice === \"Lacto\" ? colors : kojiColors)","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"colors = [\"whitesmoke\", ferment[0].color]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1027,"value":"kojiColors = [\"tan\", \"brown\", \"whitesmoke\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":889,"value":"keys = ferment[0].koji_ratio > 0 ? kojiKeys : standardKeys","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"standardKeys = [\"salt_avg\", \"weight\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":884,"value":"kojiKeys = [\"koji_ratio\", \"substrate_ratio\", \"salt_avg\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"stackGen = d3.stack()\n .keys(keys)\n .order(d3.stackOrderAscending)\n .offset(d3.stackOffsetExpand)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"stack = stackGen(ferment)","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"xAccessor = d => d.name","pinned":false,"hidden":false,"mode":"ojs"},{"id":538,"value":"range1 = 290\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":539,"value":"range2 = 16","pinned":false,"hidden":false,"mode":"ojs"},{"id":941,"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":939,"value":"bellTopoSans = awaitProperties({\n regular: FileAttachment(\"belltoposans-regular-webfont.woff\").url(),\n bold: FileAttachment(\"belltoposans-bold-webfont.woff\").url(),\n italic: FileAttachment(\"belltoposans-italic-webfont.woff\").url(),\n boldItalic: FileAttachment(\"belltoposans-bolditalic-webfont.woff\").url()\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1033,"value":"kojiNames = kojiData.map(d => d.name)","pinned":false,"hidden":false,"mode":"ojs"},{"id":572,"value":"names = data.map(d => d.name)","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"yScale = d3.scaleLinear()\n .domain([0, 1])\n // .range([ height/2 - margin.bottom, margin.top])\n // .rangeRound([height - margin.bottom, margin.top])\n .rangeRound([range1, range2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"xScale = d3.scaleBand()\n .domain(keys)\n .range([margin.left, width - margin.right])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1307,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":861,"value":"function getColor(color) {\nswitch (color) {\n case 'green':\n return '#6c8b23';\n case 'orange':\n return '#ed9121';\n case 'purple':\n return \"#693b58\"\n case 'red':\n return \"#9f2305\";\n case 'white':\n return 'ivory'\n default:\n return color\n}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1011,"value":"kojiData = fullData.filter((d) => d.koji_ratio)","pinned":true,"hidden":false,"mode":"ojs"},{"id":595,"value":"data = {\n fullData.forEach((d) => {\n (d.weight = 1 - d.salt_avg), (d.color = getColor(d.color)), (d.legume = 1);\n });\n return fullData\n .filter(\n (d) =>\n d.name.includes(\"Miso\") == false &&\n d.name.includes(\"Sagohachi\") == false &&\n d.name.includes(\"Kimchi\") == false\n )\n .filter((d) => !!d.weight);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"jarBottom=\"M58.7,2.4C79.6,4.2,85,5,107.6,5.1c27.6,0.1,41.7,2.1,61.3-0.4C182.5,3,192.8-2,195,5.1 c4.1,13.1,11,27,13.6,40.2c2.1,11,2.1,26.3,2.4,44.3c0.6,30.9-1.5,32.5-2.7,75.4c-1,35.1,0,51.1-8.1,73.7 c-3.5,9.8-7.7,17.8-15.5,24.1c-7.4,6-15.8,8.4-36.7,10.6c-23.3,2.5-41.5,2.4-51.7,2.3c-47.8-0.5-57.4-4.5-64.5-8.9 c-2.2-1.3-11.7-7.4-19.6-18.7C0.1,230.8,1.8,215.7,1.4,160c-0.3-38.1-1.2-41.5-0.8-73c0.2-17.6-0.4-31.3,1.2-42.9 C2.5,38.4,5.3,31.9,7.6,24c5.7-19.5,5.7-23.1,8.5-23.2C35.7,0.1,36.6,0.6,58.7,2.4z\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1347,"value":"mediaQueryLimit = 680","pinned":false,"hidden":false,"mode":"ojs"},{"id":1349,"value":"isMobile = width < mediaQueryLimit","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"getSVG = () => {\n const svgElement = DOM.svg(\"max-width: 100%\",isMobile ? width : height);\n\n const svg = d3\n .select(svgElement)\n .append(\"g\")\n .attr(\"transform\", `translate(${margin},${margin})`);\n return [svgElement, svg];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"margin = ({top: 10, right: 10, bottom: 20, left: 50})","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"height = width/2","pinned":false,"hidden":false,"mode":"ojs"},{"id":1480,"value":"fullData = d3.csv(getCsvUrl(url), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1474,"value":"url = \"https://docs.google.com/spreadsheets/d/1jgF5dYTXTO8F55DakENv73E1764y-dQHwUcXqquy_is/edit?usp=sharing\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1477,"value":"getCsvUrl = (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":767,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1429,"value":"import { getAirtable } with { baseId, apiKey } from \"@john-guerra/airtable\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}