31:T573,svg = { const w = width; const h = w * 0.605; const pad = 20; const geoJSON = japan2; const projection = d3.geoMercator().fitSize([w, h], geoJSON); const pathBase = d3.geoPath(projection); const p = pathBase(coarse); const tooltip = htl.html`

`; const svg = htl.html`

${svg}${tooltip}`; }32:[] 2f:{"title":"100 Sounds of Japan","cells":[{"id":0,"value":"# 100 Sounds of Japan\n\n100 soundscapes of Japan is part of the \"百選\" or \"100 selections\" and were selected by Japan's Ministry of the Environment in 1994 to represent symbols of the region that people around the country cherish, and want to preserve for future generations. Theses 'symbols' were based of the results from Soundscape Study Group of Japan.\n\nThe odd part is there is no database or mention of one that I could find, and no recordings. The recordings I do have were scraped from mixed sources like youtube and wikipedia.\n\nThe blue circles contain sounds that I was able to scrape from the internet, so click on these to hear their sounds. The yellow circles are still sound-less. ","pinned":false,"hidden":false,"mode":"md"},{"id":497,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":275,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":740,"value":"## Further Reading\n- [English wiki article](https://en.wikipedia.org/wiki/100_Soundscapes_of_Japan)\n- [日本の音風景100選](https://www.env.go.jp/content/900400154.pdf)","pinned":false,"hidden":false,"mode":"md"},{"id":746,"value":"------","pinned":false,"hidden":false,"mode":"md"},{"id":706,"value":"function createAudioWidget(audioUrl, { size = 12, wrap = false } = {}) {\n const audio = new Audio(audioUrl);\n audio.loop = true;\n\n const play = htl.svg`\n \n `;\n const pause = htl.svg`\n \n \n \n `;\n\n play.onclick = () => {\n audio.play();\n play.replaceWith(pause);\n };\n pause.onclick = () => {\n audio.pause();\n pause.replaceWith(play);\n };\n\n // Workaround because translations break somehow if we nest SVGs, but we still want to\n // be able to create standalone buttons.\n return wrap\n ? htl.svg`${d.Soundscape} in ${d.Location} `\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('opacity', .7)\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"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":6,"value":"url = \"https://docs.google.com/spreadsheets/d/1Itj3hpb2rV28ohvnxYbhrE_XGFLrpEj8WHYlE7iIlXs/edit#gid=861230502\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"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('opacity', 1)\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":609,"value":"data = rawdata.sort((a, b) => {\n if (\"sound\" in a && \"sound\" in b) {\n return -1;\n } else if (\"sound\" in a) {\n return 0;\n } else {\n return;\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"rawdata = d3.csv(getCsvUrl(url), d3.autoType);","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"turf = require(\"@turf/turf@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"japan2 = d3.json(\"https://gist.githubusercontent.com/EmilienDupont/6bd3d35c50ec7fdfe6992ecef7b264c4/raw/ca724d49b428a9a7d5b30a4f97e5c1c6086d516a/japan.geojson\")\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"projection = d3.geoMercator().fitSize([width - 300, mapHeight], japan)","pinned":false,"hidden":false,"mode":"ojs"},{"id":761,"value":"centroid = {\n const path = d3.geoPath();\n return (feature) => path.centroid(feature);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":764,"value":"japan = topojson.feature(topo_japan, topo_japan.objects.prefectures)","pinned":false,"hidden":false,"mode":"ojs"},{"id":768,"value":"prefectureMap = new Map(\n topojson\n .feature(topo_japan, topo_japan.objects.prefectures)\n .features.map((d) => [d.id, d])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":757,"value":"prefectures = topojson.feature(topo_japan, topo_japan.objects.prefectures)","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"topo_japan = d3.json(\"https://cdn.jsdelivr.net/npm/jpn-atlas@1.0.2/japan/japan.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"mapHeight = width * 0.605","pinned":false,"hidden":false,"mode":"ojs"},{"id":377,"value":"simplify = require(\"simplify-js@latest\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"simplification = 1.8","pinned":false,"hidden":false,"mode":"ojs"},{"id":703,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":666,"value":"styles","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"topojson = require(\"topojson-client\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@0.49\");\n if (!gl.accessToken) {\n // https://www.mapbox.com/help/how-access-tokens-work/\n gl.accessToken =\n \"pk.eyJ1IjoibWdyYXplIiwiYSI6ImNrdXgwdXZ2ZzIyd2Myd3FqcGx4Yjl3djYifQ.QF4BpyeqnXtoemFNTkkpVQ\";\n const href = await require.resolve(\"mapbox-gl@0.49/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"import { coarse, curvedPath } from \"@ambassadors/historical-map-day-24\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":661,"value":"import { styles } from \"@datagrazing/ld-helpers-styles\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":779,"value":"inspiration:\n\n- [countors](https://observablehq.com/@pstuffa/neumorphism-contour-density-map?collection=@observablehq/maps)\n- [cartographic doodles](https://observablehq.com/@neocartocnrs/cartographic-doodles?collection=@observablehq/maps)","pinned":false,"hidden":false,"mode":"md"}],"files":"$W32","stdlib":"1","titling":"auto"}