30:T452,md`# Pandemic Ferments ### What did I ferment during the "heart" of the pandemic? I love fermenting. I love experimenting. I have my share of failures, but my successes outshine them. If I have too much of something - a vegetable, grain or legume - my immediate response is to ferment. I didn't like radishes until I salted and transformed them into ginger-scallion radishes with a pucker, sweet and sour taste that makes me savor every last slice. They've become one of my favorite lacto-ferments. These ferment data points are colored by main ingredient and sized by how long they take on a scale of 1-4. __1:__ a few days __2:__ 7-14 days __3:__ 14-21 days __4:__ 1+ month My longest living ferment is a garum from 2017 (not mentioned here since it was made when pandemics were limited to science fiction and board games). I rescued it a few times from the garbage, which was the unfortunate fate for my fermented tofu. I tried to keep tabs on my ferments from March 2020, when I came back from France, up through January 2021. I'm sure I've forgotton something, but you get the idea. `31:T571,chart = { // labelAnnotations const lightGrey = "#EBE6ED"; const type = d3.annotationCallout const annotationsData = [{ note: { title: "Coding Bootcamp", bgPadding: {"top":15,"left":10,"right":10,"bottom":10}, // align: "middle", orientation: "leftRight" }, x: (xScale('October') + xScale('November'))/2, // x: 650, y: height * .4, dx: 20, dy: -40 }, ] const makeAnnotations = d3.annotation() .type(type) .editMode(true) .notePadding(15) .textWrap(300) .annotations(annotationsData); svg .append("g") .attr("class", "annotations") .call(makeAnnotations) const noteTitle = svg.selectAll(".annotation-note-title"); const noteConnector = svg.selectAll(".connector"); noteTitle .attr("fill", 'grey') .attr("font-family", "'Work Sans', sans-serif") .attr("font-size", 16) .attr("font-weight", 600); noteConnector .attr("stroke", 'grey') .attr("stroke-width", 0.5); // for animating annotations up with the curves // annotationG // .selectAll(".annotation") // .attr("opacity", 0) // // .attr("transform", d => `translate(${d.x}, ${yScale(0)})`) // .transition().duration(1500) // .attr("opacity", 1) // .attr("transform", d => `translate(${d.x}, ${d.y})`); draw(); return Object.assign(svg.node(), { draw, draw2 }); }32:T6c1,function draw() { svg.selectAll('.time-span-rect').attr('opacity', 0) svg.selectAll('.annotations').attr('opacity', 0) simulation .force("collide", d3.forceCollide(d => d.r + 3).iterations(12)) .force("charge", d3.forceManyBody()) .velocityDecay(0.75) //akin to atmosphere friction .alphaDecay(0.006) //if at 0 simulation runs forever .force('x', d3.forceX().strength(forceStrength).x(center.x)) .force('y', d3.forceY().strength(forceStrength).y(center.y)) simulation.alpha(1).restart(); const ticked = () => { nodeGroup.selectAll("circle") .attr("cx", d => d.x) .attr("cy", d => d.y); } simulation .nodes(data) .on("tick", ticked); const colorAccessor = d => d.Type; const max_length = d3.max(data, d => d.Length) const rAccessor = d => d.Length; const rScale = d3.scaleSqrt() .domain([0, max_length]) .range([0, 8]) const node = nodeGroup.selectAll("circle") .attr('class', 'ferments') .data(data, d => d.index) .join('circle') .on("mouseover", mouseover) .on("mouseout", mouseout) .attr("r", d => rScale(rAccessor(d))) .attr('fill', d => colorScale(colorAccessor(d))) .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); // node.attr("r", d => rScale(rAccessor(d))) // .attr('fill', d => colorObj[colorAccessor(d)]) // .attr('fill', d => colorScale(colorAccessor(d))) // .call(d3.drag() // .on("start", dragstarted) // .on("drag", dragged) // .on("end", dragended)); svg.select('.x-axis') .style('opacity', 0) }33:T613,function draw2() { svg.select('.time-span-rect').transition().duration(1000).delay(500).attr('opacity', .5) svg.selectAll('.annotations').transition().duration(1000).delay(100).attr('opacity', 1) const max = d3.max(data, d => d.Length) const rScale = d3.scaleSqrt().domain([0, max]).range([0, 8]) // function mouseover(d){ // tooltip.transition() // .duration(500) // tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px") // .style("opacity", 1) // tooltip.html(d.Name) // } // function mouseout(){ // tooltip.transition() // .duration(500) // .style("opacity", 0) // } simulation .force('x', d3.forceX().strength(2).x(d => xScale(d.Month))) .force('collide', d3.forceCollide(d => rScale(d.Length) + 0.5)) simulation.alpha(1).restart(); const circles = svg.selectAll("circle") .data(simulation.nodes(), d => d.index) .join('g') .call(g => g .append('circle') .transition() .duration(600) .attr("r", d => rScale(d.Length)) .style("fill", "#bdbdbd")) const xAxisGenerator = d3.axisBottom() .scale(xScale) const monthAxis = svg.select('.x-axis') .style("transform", `translate(-30px, ${height*0.6}px`) .style('opacity', 1) svg.selectAll('.time-span-rect').attr('opacity', .6) monthAxis.transition() .delay(100) .duration(500) .call(xAxisGenerator) }34:T4d0, function split() { svg.select('.time-span-rect').transition().duration(1000).delay(100).attr('opacity', 0) svg.select('.annotations').transition().duration(1000).delay(100).attr('opacity', 0) const xScale = d3.scaleBand() .domain(typeKeys) .range([0, width]) .padding(0.3); // simulation.force('x', d3.forceX().strength(forceStrength).x(nodeTypePos)); simulation.force('x', d3.forceX().strength(forceStrength).x(d => xScale(d.Type)+20)) // const xAxis = // svg.append("g") // .attr('class', 'x-axis') // .call(xAxisGenerator) // .style("transform", `translate(-30px, ${height*0.6}px`) // .selectAll('text') // .attr('text-anchor', 'middle') // .style('font-size', '14px') // .attr('font-family', 'Freight') simulation.alpha(1).restart(); const xAxisGenerator = d3.axisBottom() .scale(xScale) const xAxis = svg.select('.x-axis') .transition() .delay(100) .duration(500) .attr('text-anchor', 'middle') .style("transform", d => `translate(-35px, ${height*0.7}px`) .style('opacity', 1) .call(xAxisGenerator) // .attr('opacity', 1); }35:T19b7,data = [ { "Name": "Jasmine Rice Koji", "Month": "April", "Length": 1, "Type": "Grain" }, { "Name": "Jasmine Rice Koji", "Month": "April", "Length": 1, "Type": "Grain" }, { "Name": "Rouge de Bourdeaux Sourdough", "Month": "April", "Length": 1, "Type": "Grain" }, { "Name": "Sourdough Pizza", "Month": "April", "Length": 1, "Type": "Grain" }, { "Name": "Amazake", "Month": "April", "Length": 1, "Type": "Grain" }, { "Name": "Mirin", "Month": "April", "Length": 1, "Type": "Grain" }, { "Name": "Sake", "Month": "April", "Length": 4, "Type": "Grain" }, { "Name": "Jasmine Rice Koji", "Month": "May", "Length": 1, "Type": "Grain" }, { "Name": "Pinto bean Natto", "Month": "May", "Length": 1, "Type": "Protein" }, { "Name": "Rosemary Potato Sourdough", "Month": "May", "Length": 1, "Type": "Grain" }, { "Name": "Einkorn Sourdough", "Month": "May", "Length": 1, "Type": "Grain" }, { "Name": "Amazake", "Month": "May", "Length": 1, "Type": "Grain" }, { "Name": "Jerusalem Artichoke Kimchi", "Month": "May", "Length": 3, "Type": "Vegetable" }, { "Name": "Amazake Tsukemono", "Month": "May", "Length": 1, "Type": "Vegetable" }, { "Name": "Horesradish Mustard", "Month": "May", "Length": 1, "Type": "Other" }, { "Name": "Chickpea Miso", "Month": "May", "Length": 4, "Type": "Grain" }, { "Name": "Fermented Tofu", "Month": "May", "Length": 4, "Type": "Protein" }, { "Name": "Jasmine Rice Koji", "Month": "June", "Length": 1, "Type": "Grain" }, { "Name": "Grape Leaves", "Month": "June", "Length": 2, "Type": "Other" }, { "Name": "Pinto bean Miso", "Month": "June", "Length": 4, "Type": "Grain" }, { "Name": "Stuffed Jalapenos", "Month": "June", "Length": 3, "Type": "Vegetable" }, { "Name": "Porridge Bread Sourdough", "Month": "June", "Length": 1, "Type": "Grain" }, { "Name": "Rouge de Bourdeaux Sourdough", "Month": "June", "Length": 1, "Type": "Grain" }, { "Name": "Umeboshi", "Month": "June", "Length": 4, "Type": "Fruit" }, { "Name": "Sourdough Pizza", "Month": "July", "Length": 1, "Type": "Grain" }, { "Name": "Yecora Rojo Sourdough", "Month": "July", "Length": 1, "Type": "Grain" }, { "Name": "Ginger", "Month": "July", "Length": 4, "Type": "Other" }, { "Name": "Rhubarb Kimchi", "Month": "June", "Length": 3, "Type": "Vegetable" }, { "Name": "Radish", "Month": "July", "Length": 2, "Type": "Vegetable" }, { "Name": "Pepper", "Month": "July", "Length": 2, "Type": "Vegetable" }, { "Name": "Taco mix", "Month": "July", "Length": 3, "Type": "Vegetable" }, { "Name": "Hot sauce", "Month": "August", "Length": 4, "Type": "Vegetable" }, { "Name": "Half-Sour Cucumbers", "Month": "August", "Length": 1, "Type": "Vegetable" }, { "Name": "Seakraut", "Month": "August", "Length": 2, "Type": "Vegetable" }, { "Name": "Porridge Bread Sourdough", "Month": "August", "Length": 1, "Type": "Grain" }, { "Name": "Einkorn Sourdough", "Month": "August", "Length": 1, "Type": "Grain" }, { "Name": "Sourdough Pizza", "Month": "August", "Length": 1, "Type": "Grain" }, { "Name": "Figs in Honey", "Month": "August", "Length": 4, "Type": "Fruit" }, { "Name": "50% 50% Sourdough", "Month": "September", "Length": 1, "Type": "Grain" }, { "Name": "Sourdough Pita", "Month": "September", "Length": 1, "Type": "Grain" }, { "Name": "Whole Cabbage", "Month": "September", "Length": 4, "Type": "Vegetable" }, { "Name": "Salted Duck Eggs", "Month": "September", "Length": 4, "Type": "Protein" }, { "Name": "Fermented Tofu", "Month": "September", "Length": 4, "Type": "Protein" }, { "Name": "Kohlrabi Kraut", "Month": "September", "Length": 2, "Type": "Vegetable" }, { "Name": "Half-Sour Cucumbers", "Month": "September", "Length": 1, "Type": "Vegetable" }, { "Name": "Potato Rosemary Sourdough", "Month": "October", "Length": 1, "Type": "Grain" }, { "Name": "Sourdough Pizza", "Month": "October", "Length": 1, "Type": "Grain" }, { "Name": "Radish", "Month": "October", "Length": 2, "Type": "Vegetable" }, { "Name": "Rhubarb", "Month": "October", "Length": 2, "Type": "Vegetable" }, { "Name": "Polenta Pumpkin Sourdough", "Month": "November", "Length": 1, "Type": "Grain" }, { "Name": "Sourdough Pita", "Month": "November", "Length": 1, "Type": "Grain" }, { "Name": "Quince Achar", "Month": "November", "Length": 2, "Type": "Fruit" }, { "Name": "Polenta Pumpkin Sourdough", "Month": "December", "Length": 1, "Type": "Grain" }, { "Name": "Einkorn Sourdough", "Month": "December", "Length": 1, "Type": "Grain" }, { "Name": "Garlic Pepper Mash", "Month": "December", "Length": 3, "Type": "Vegetable" }, { "Name": "Yellow Squash", "Month": "December", "Length": 2, "Type": "Vegetable" }, { "Name": "Garlic Honey", "Month": "December", "Length": 4, "Type": "Vegetable" }, { "Name": "Acorn 'Cheese'", "Month": "December", "Length": 2, "Type": "Other" }, { "Name": "Porridge Bread Sourdough", "Month": "January", "Length": 1, "Type": "Grain" }, { "Name": "Tempeh", "Month": "January", "Length": 1, "Type": "Protein" }, { "Name": "Chestnut Miso", "Month": "January", "Length": 4, "Type": "Grain" }, { "Name": "Porridge Miso", "Month": "January", "Length": 4, "Type": "Grain" }, { "Name": "Ginger Daikon", "Month": "January", "Length": 2, "Type": "Vegetable" }, { "Name": "Persimmon Vinegar", "Month": "January", "Length": 4, "Type": "Fruit" }, { "Name": "Ricotta Amino", "Month": "January", "Length": 4, "Type": "Protein" } ] 36:[] 2e:{"title":"Pandemic Ferments","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":441,"value":"viewof month = {\n const button = html``;\n button\n .onclick = () => {\n chart.draw2()\n }\n\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"viewof splitElements = {\n const button = html``;\n button.onclick = () => {\n split();\n \n }\n\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"viewof restart = {\n const button = html``;\n button.onclick = () => {\n chart.draw()\n }\n\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":530,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":473,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":702,"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.style(\"left\", event.pageX + 18 + \"px\")\n .style(\"top\", event.pageY + 18 + \"px\")\n .style(\"display\", \"block\")\n .html(d.Name)\n \n//Role: UX Designer\n\n \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)\n .transition()\n .attr('stroke', 'gold')\n .attr('stroke-width', 2);\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":705,"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(\"stroke-width\", .3)\n .attr(\"stroke\", \"grey\");\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":713,"value":"tooltip = d3.select(\"body\").append(\"div\").attr(\"class\", \"tooltip\")\n // .style(\"opacity\", 0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":832,"value":"monthKeys = _.uniq(data.map(d => d.Month))","pinned":false,"hidden":false,"mode":"ojs"},{"id":829,"value":"xScale = d3.scaleBand()\n .domain(monthKeys)\n .range([0, width])\n .padding(0.3);","pinned":false,"hidden":false,"mode":"ojs"},{"id":602,"value":"typeKeys = _.uniq(data.map(d => d.Type))\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":635,"value":"xAxis = \n svg.append(\"g\")\n .attr('class', 'x-axis')\n .selectAll('text')\n .attr('text-anchor', 'middle')\n .style('font-size', '14px')\n .attr('font-family', 'Freight')\n .attr('dx', '.71em')\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":954,"value":"rectangleSpan = \nsvg.insert('g', '#nodes')\n .append('rect')\n .attr('class', 'time-span-rect')\n .attr('x', xScale(bootcampStart))\n .attr('y', 0)\n .attr('width', xScale(bootcampEnd) - xScale(bootcampStart) )\n .attr('height', '100px')\n .attr('fill', rectColor)\n .style(\"transform\", `translate(0, ${height*0.4}px`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":865,"value":"bootcampStart = 'September'\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":868,"value":"bootcampEnd = 'December'\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":" function nodeTypePos(d) {\n return typeCenters[d.Type].x;\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"width = 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"svg = d3.select(DOM.svg(width, height));","pinned":false,"hidden":false,"mode":"ojs"},{"id":476,"value":"nodeGroup = svg.append(\"g\").attr('id', 'nodes');","pinned":false,"hidden":false,"mode":"ojs"},{"id":475,"value":"simulation = d3.forceSimulation();","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":525,"value":" data.forEach(function(d) {\n d.x = Math.random()*width\n d.y = Math.random()*height\n }) //sets a random starting point for each data point","pinned":false,"hidden":false,"mode":"ojs"},{"id":816,"value":"rectColor = grouped12511007.rangeURLs[6]\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":771,"value":"colorScale = d3.scaleOrdinal()\n .domain(typeKeys)\n .range(grouped12511007.rangeURLs);","pinned":false,"hidden":false,"mode":"ojs"},{"id":765,"value":"def = svg.append('defs').html(grouped12511007.patterns)","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"forceStrength=0.3","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"center = {return { x: width / 2, y: height / 2 }};","pinned":false,"hidden":false,"mode":"ojs"},{"id":490,"value":"typeCenters = {\n const centers={\n Grain: { x: width / 6, y: height / 2 },\n Vegetable: { x: 2* width / 6, y: height / 2 },\n Protein: { x: width / 2, y: height / 2 },\n Fruit: { x: 4 * width / 6, y: height / 2 },\n Other: { x: 5 * width / 6, y: height / 2 }\n }\n return centers\n };\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":472,"value":" function dragstarted(d) {\n if (!d3.event.active) simulation.alphaTarget(1).restart();\n d.fx = d.x;\n d.fy = d.y;\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":471,"value":" function dragged(d) {\n d.fx = d3.event.x;\n d.fy = d3.event.y;\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":" function dragended(d) {\n if (!d3.event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":748,"value":"import {grouped12511007} from \"@tomshanley/cheysson-color-palettes\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require(\"d3@6\", \"d3-svg-annotation@2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"_ = {\n const [_, fp] = await Promise.all([\n require(\"lodash@4\"),\n require(\"https://cdn.jsdelivr.net/gh/lodash/lodash@4/dist/lodash.fp.min.js\")\n ]);\n return fp(_);\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}