31:T97e,map = { prepareColors(); let textPlacement = width / 9; let translateX = width / 1.1; let translateY = width / 1.5; let textY = -width / 45; let textX = -width / 40; const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("class", "map"); // position SVG over Canvas element // svg.style("position", "absolute").style("top", 0).style("left", 0); const textBox = svg .append("g") // .attr("transform", "translate(50%, 25%)`); .attr("transform", `translate(${translateX}, ${translateY})`); const box = textBox .append("rect") .attr("x", textX) .attr("y", textY) // .attr("transform", `translate(${textX},${textY})`) .attr("height", width / 3.25) .attr("width", width / 18) .attr("fill", "none") .attr("stroke", "grey"); const text = svg .append("text") .attr("x", textPlacement) .attr("y", textPlacement) .text("Microorganism Landscape of") .style("fill", "#333333") .style("font-size", "4vw") .style("font-weight", "bold") .attr("class", "title"); text .append("tspan") .attr("x", textPlacement) .attr("y", textPlacement) .attr("dy", "1.5em") .text("Japan's fermented food") // .style("font-size", "1em") .attr("class", "title"); textBox .append("text") // .attr("x", 50) // .attr("y", 600) .attr("font-size", "1.8vw") .attr("id", "title") .style("fill", "#5e5e5e") .attr("text-anchor", "middle") .selectAll("tspan") .data("発酵食　品　の　微　生　物".split("")) .join("tspan") .attr("x", 0) .attr("dy", "1.7vw") .text((d) => d); const nation = svg.append("g").selectAll("path").data(japan.features); const pathBase = d3.geoPath(projection); const p = pathBase(coarse); const path = nation .join("path") // .attr("class", "land") .attr("fill", (d) => { let t = d.properties.ferment.texture; svg.call(t); return t.url(); }) .attr( "d", (d) => curvedPath(pathBase(d)) + curvedPath(pathBase(d), d3.curveBasisClosed) + curvedPath(pathBase(d), d3.curveNatural) ) .attr("stroke-linejoin", "round") .on("mouseover", mouseOver) .on("mouseout", mouseOut); return htl.html`

${svg.node()}`; }32:T61a,function getTexture({ organisms }) { let fill = "grey"; let size = 0; let yeast = false; let mold = false; let aspergillus = false; let background; let backgroundArr = []; if (organisms.length > 1) { organisms.forEach((o) => { // if(o === 'yeast') fill = textureMap[o] // else if (o === 'aspergillus oryzae' || o === 'mold') size = textureMap[o] // else backgroundArr.push(o) switch (o) { case "aspergillus oryzae": fill = colors[o]; aspergillus = true; break; case "mold": fill = colors[o]; mold = true; break; case "yeast": yeast = true; break; default: backgroundArr.push(o); } }); } if (organisms.length === 1) background = color[organisms]; if (backgroundArr.length > 0) { background = backgroundArr.length >= 2 ? blendColors(color[backgroundArr[0]], color[backgroundArr[1]]) : color[backgroundArr[0]]; } // if (typeof background == undefined) background = colors.tan // let texture = [fill, size, background] if (aspergillus || mold || yeast) { return ( textures .lines() .orientation(yeast ? "7/8" : "3/8") .lighter() .size(yeast ? 5 : 10) // .stroke(yeast ? colors.strokeRed : colors.strokeDark) .stroke(mold ? colors.strokeDark : colors.strokeRed) .background(background) ); } else { return textures.lines().stroke(colors.green).background(background); } }33:T444,function mouseOver(event, d) { tooltip .style("left", event.pageX + width / 40 + "px") .style("top", event.pageY + width / 40 + "px") .style("display", "block") //change to selection & add paragraph element .html( !d.properties.ferment ? `${d.properties.name}` : `${d.properties.name}
` ); // Optional cursor change on target d3.select(event.target).style("cursor", "pointer"); // Optional highlight effects on target d3.select(event.target) .raise() //so that the polygon edges aren't covered by neighboring polygons. .transition() .attr("stroke", "#aaa") .attr("stroke-width", 1); }34:T48c,style = html``35:[{"id":"b1146110ad7f1b9a414204e5c42b41bda50984d3abb8473b48cb533e8f20253a464ff079bfc161b84a119a10990fb50a059ac1db180b8220b728c726b6e41c3c","href":"https://static.observableusercontent.com/files/b1146110ad7f1b9a414204e5c42b41bda50984d3abb8473b48cb533e8f20253a464ff079bfc161b84a119a10990fb50a059ac1db180b8220b728c726b6e41c3c","name":"image@1.png","type":"image/png","lastModified":1635640047215.422,"size":866894},{"id":"46276f76337db0bf416ad033e7991356e9d193652c2d84d745b164079b81837cd8949de2d65f588f715258e0e85d878bccc448342cf8cbdfa9b159be21c0bf22","href":"https://static.observableusercontent.com/files/46276f76337db0bf416ad033e7991356e9d193652c2d84d745b164079b81837cd8949de2d65f588f715258e0e85d878bccc448342cf8cbdfa9b159be21c0bf22","name":"belltoposans-italic-webfont.woff","type":"font/woff","lastModified":1635718329202.774,"size":31804},{"id":"14d28d9d4e334c5492d37858e8ad82bd4c4ef0d282bfd4b4614d3f52debb613cd113b7e36135add5c837041e72cbe41de3da5c1bf8657691d9f3204ec05299ce","href":"https://static.observableusercontent.com/files/14d28d9d4e334c5492d37858e8ad82bd4c4ef0d282bfd4b4614d3f52debb613cd113b7e36135add5c837041e72cbe41de3da5c1bf8657691d9f3204ec05299ce","name":"belltoposans-bold-webfont.woff","type":"font/woff","lastModified":1635718332598.606,"size":30012},{"id":"3e3255eabc4bc15691c57e1f32ea720ab19d021b9b34b918a05bcf39809372fee38ca9bcbdcacd699e983bc351404d1c382baf26d04818e130d84d85b6d5bb3e","href":"https://static.observableusercontent.com/files/3e3255eabc4bc15691c57e1f32ea720ab19d021b9b34b918a05bcf39809372fee38ca9bcbdcacd699e983bc351404d1c382baf26d04818e130d84d85b6d5bb3e","name":"DtSFichier 4.png","type":"image/png","lastModified":1636691897972.087,"size":689948},{"id":"4c18114b9db0c34e534513f4b00d236073c619c93efcffcf493fd0cea24ee489d1a000d3ee80c9c11df270802f76c21c5f9a76c3e7a8df7ba16a62446cb376f0","href":"https://static.observableusercontent.com/files/4c18114b9db0c34e534513f4b00d236073c619c93efcffcf493fd0cea24ee489d1a000d3ee80c9c11df270802f76c21c5f9a76c3e7a8df7ba16a62446cb376f0","name":"belltoposans-bolditalic-webfont.woff","type":"font/woff","lastModified":1635718326651.587,"size":34884},{"id":"e9a72820c4fbacb66424271d186cd592f658fa2b3633b10ebfe6a399af22f8403b6d43393a5017d0744ff7b9528bdfe92904f34d830a89ad6886fc2cc6a5af46","href":"https://static.observableusercontent.com/files/e9a72820c4fbacb66424271d186cd592f658fa2b3633b10ebfe6a399af22f8403b6d43393a5017d0744ff7b9528bdfe92904f34d830a89ad6886fc2cc6a5af46","name":"belltoposans-regular-webfont.woff","type":"font/woff","lastModified":1635692754635.939,"size":27532},{"id":"e36208bc20d8b278fe7ed48af23604226b02949ff1e492b4165fa16e5287ec88acbc4e35c44e29a1c5a51d2d38949a2406790599bf3c2c7299ae6f158107511a","href":"https://static.observableusercontent.com/files/e36208bc20d8b278fe7ed48af23604226b02949ff1e492b4165fa16e5287ec88acbc4e35c44e29a1c5a51d2d38949a2406790599bf3c2c7299ae6f158107511a","name":"legend.png","type":"image/png","lastModified":1638893892513.272,"size":21543}] 2f:{"title":"Historical Map: Day 24","cells":[{"id":0,"value":"

Historical Map: Day 24

","pinned":false,"hidden":false,"mode":"html"},{"id":2500,"value":"-----","pinned":false,"hidden":false,"mode":"md"},{"id":934,"value":"

Japan's most popular microorganisms,

","pinned":false,"hidden":false,"mode":"html"},{"id":2619,"value":"FileAttachment(\"legend.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2489,"value":"are featured on this map. Just as they combine forces to transform the initial product into an umami and flavor-pack food, here too their mix to form a new color. For visibility, the bacteria group combine colors if they are together in the fermented dish listed, while if they are molds or yeast, they are attributed a pattern to lay on top. While I bet Japan has at least twice as many ferments as France has cheeses, this map just shows one fermentation landscape among many possibilities. Hover over the regions to discover a fermented treat that they produce!\n
\n
\nData was collected manually and lovingly from Hikaru Ogaru, whose japanese fermentation exhibit I had the luck to catch in Tokyo during its run.","pinned":false,"hidden":false,"mode":"html"},{"id":2504,"value":"----","pinned":false,"hidden":false,"mode":"md"},{"id":109,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"## Code Snippets & Thanks\n- [Curved Geo](https://observablehq.com/@fil/pencil-airocean) from [Fil](https://observablehq.com/@fil)\n- [Fabian Iwand](https://observablehq.com/@mootari) and Fil helped me with some of my struggles\n- The Observable Ambassador community for their feedback.\n\n## Colors \nPulled from [these](https://www.oldimprints.com/pages/books/45262/japan-atlas-world-map-california-as-an-island-yoshimoto-yamazaki/dai-nihon-yochi-benran) [two](http://japanmaps.davidrumsey.com/luna/servlet/detail/RUMSEY~9~1~23254~70186:Kaga-Kanazawa-saikenzu?sort=Pub_Date%2CPub_List_No%2CSeries_No&qvq=w4s:/where%2FJapan;sort:Pub_Date%2CPub_List_No%2CSeries_No;lc:RUMSEY~9~1&mi=255&trs=1707) old Japanese maps.\n","pinned":false,"hidden":false,"mode":"md"},{"id":2583,"value":"## Code","pinned":false,"hidden":false,"mode":"md"},{"id":73,"value":"details = 3.8","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"function blendColors(color1, color2, percentage) {\n // check input\n color1 = color1 || \"#000000\";\n color2 = color2 || \"#ffffff\";\n percentage = percentage || 0.5;\n\n console.log(\"valid: c1 => \" + color1 + \", c2 => \" + color2);\n\n // 3: we have valid input, convert colors to rgb\n color1 = d3.color(color1);\n color2 = d3.color(color2);\n\n // 4: blend\n let color3 = [\n (1 - percentage) * color1.r + percentage * color2.r,\n (1 - percentage) * color1.g + percentage * color2.g,\n (1 - percentage) * color1.b + percentage * color2.b\n ];\n\n let rgb = {\n r: (1 - percentage) * color1.r + percentage * color2.r,\n b: (1 - percentage) * color1.g + percentage * color2.g,\n g: (1 - percentage) * color1.b + percentage * color2.b\n };\n\n // 5: convert to hex\n let mixedColor = d3.rgb(rgb.r, rgb.b, rgb.g).hex();\n\n return mixedColor;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":559,"value":"function getColor({ organisms: [orgA, orgB, orgC] }) {\n const blended = blendColors(color[orgA], color[orgB]);\n return !orgC ? blended : blendColors(blended, color[orgC], 0.33);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1783,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"function mouseOut(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(\"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', 'none')\n // .attr('stroke-width', 1);\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"colors = ({\n blue: \"#5A7E8C\",\n orange: \"#F2BC57\",\n tan: \"#F2E2CE\",\n reddish: \"#BF846F\",\n red: \"#D9736A\",\n strokeRed: \"#9f2305\",\n strokeDark: \"#35394E\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"color = ({\n \"aspergillus oryzae\": colors.tan,\n bacteria: colors.red,\n yeast: colors.red,\n \"lactic acid bacteria\": colors.orange,\n \"acetic bacteria\": colors.blue,\n mold: \"#A1A680\",\n \"natto bacteria\": \"#8C3C1F\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"tooltip = d3.select(\"body\")\n\t.append(\"div\")\n .attr('class', 'tooltip')","pinned":false,"hidden":false,"mode":"ojs"},{"id":702,"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":1008,"value":"function prepareColors() {\n for (let i = 0; i < data.length; i++) {\n japan.features.forEach((d) => {\n if (d.properties.name.indexOf(data[i].prefecture) !== -1) {\n d.properties.ferment = data[i];\n }\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"function curvedPath(path, curve, context) {\n return !path\n ? path\n : path\n .replace(/(\\.\\d\\d)\\d+/g, \"$1\")\n .split(\"M\")\n .filter(d => d.length > 0)\n .map(d =>\n d.split(\"L\").map(e =>\n e\n .replace(\"Z\", \"\")\n .split(\",\")\n .map(f => +f)\n )\n )\n .filter(d => d.length > 2)\n .map(d =>\n d3\n .line()\n .context(context)\n .curve(curve || d3.curveCatmullRomClosed.alpha(0.4))\n .x(d => d[0])\n .y(d => d[1])([...d, d[0]])\n )\n .join(\"\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"projection = d3.geoMercator().fitExtent(\n //fitExtent puts it in the entire viewbox\n [\n [87, 87],\n [width - 27, width - 27]\n ],\n coarse\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"coarse = {\n let topo = topojson.topology({ japan });\n\n topo = topojson.presimplify(topo);\n topo = topojson.simplify(topo, Math.pow(10, 2 - details));\n\n return topojson.feature(topo, topo.objects.japan);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":703,"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":64,"value":"japan = d3.json(\"https://gist.githubusercontent.com/EmilienDupont/6bd3d35c50ec7fdfe6992ecef7b264c4/raw/ca724d49b428a9a7d5b30a4f97e5c1c6086d516a/japan.geojson\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1397,"value":"backgroundImage = FileAttachment(\"DtSFichier 4.png\").url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"data = full_data.map((d, i) => ({\n // assign a color value to each state\n // d.properties = Object.assign(d.properties, {strokeColor: mapColors[i], fillColor: lighter(mapColors[i])});\n name: d.name,\n locations: d.location,\n prefecture: d.prefecture,\n type: d.type,\n description: d.desc_short,\n organisms: d.organisms,\n coor: d.coor.split(\",\").map((s) => +s),\n image: d.image[0].url,\n texture: getTexture(d) \n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1019,"value":"Airtable = (await import(\"https://cdn.skypack.dev/airtable@0.11.1?min\")).default","pinned":false,"hidden":false,"mode":"ojs"},{"id":1742,"value":"textures = require(\"textures\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"topojson = require(\"topojson\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1633,"value":"full_data = {\n const base = new Airtable({ apiKey: \"keyqcVv7EZOCZz120\" }).base(\n \"app8gs5ywCKfgsi6j\"\n );\n const records = await base(\"Table 1\").select({ view: \"Grid view\" }).all();\n return records.map((d) => d.fields);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":976,"value":"## Inspiration","pinned":false,"hidden":false,"mode":"md"},{"id":831,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":333,"value":"FileAttachment(\"image@1.png\").image()","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}