${dataBivar.title[0]}${labels[j] && ` (${labels[j]})`} ${dataBivar.title[1]}${labels[i] && ` (${labels[i]})`}

2d:null 2e:["$","title",null,{"children":"Flood Hazard Locator | leonardo Nicoletti | Observable"}] 33:T1052,function renderMapbox(map) { const sourceId = 'van-blocks'; const layerId = `${sourceId}-layer`; const outlineId = `${sourceId}-outline`; // const layerId_imp = `${sourceId}-imp`; // const layerId_pop = `${sourceId}-pop`; let source = map.getSource(sourceId); let hoveredStateId = null; // Add the source and layer if we haven't created them yet if (!source) { map.addSource(sourceId, { type: 'geojson', data: dataColored }); map.addLayer({ id: layerId, source: sourceId, type: 'fill', // interactive: false, paint: { 'fill-color': colorExpr, 'fill-opacity': ['case', ['all', ['<', ['get', 'IMP'], 0.1]], 0, ['all', ['<', ['get', 'pop_den'], 2]], 0, // ['boolean', ['feature-state', 'hover'], true], // 0.5, 1 ] // 'fill-opacity': [ // 'case', // ['boolean', ['feature-state', 'hover'], false], // 1, // 0.5 // ] }, }); map.addLayer({ id: outlineId, source: sourceId, type: 'line', // interactive: false, paint: { 'line-color': 'white', 'line-width': 0.05 // [ // 'interpolate', // // Set the exponential rate of change to 0.5 // ['exponential', 0.1], // ['zoom'], // // When zoom is 10, buildings will be 100% transparent. // 9, // 0.05, // // When zoom is 18 or higher, buildings will be 100% opaque. // 14, // 1 // ] }, }); source = map.getSource(sourceId); } // Update the geojson data source.setData(dataColored); // tooltip // map.on('click', layerId, (e) => { // new mapboxgl.Popup() // .setLngLat(e.lngLat) // .setHTML("In this block: " + (e.features[0].properties.DBpop2016) + "people are at a flood risk of " + (e.features[0].properties.IMP)) // .addTo(map); // }); // Change the cursor to a pointer when // the mouse is over the states layer. map.on('mouseover', layerId, (e) => { showTooltip(e) }); map.on('mousemove', layerId, (e) => { d3.selectAll(".mapboxgl-popup-content").remove() d3.selectAll(".mapboxgl-popup-tip").remove() showTooltip(e) }); // Change the cursor to a pointer when // the mouse is over the states layer. map.on('mouseenter', layerId, () => { map.getCanvas().style.cursor = 'pointer'; }); // Change the cursor back to a pointer // when it leaves the states layer. map.on('mouseleave', layerId, () => { map.getCanvas().style.cursor = ''; d3.selectAll(".mapboxgl-popup-content").remove() d3.selectAll(".mapboxgl-popup-tip").remove() }); // // feature state for the feature under the mouse. // map.on('mousemove', layerId, (e) => { // if (e.features.length > 0) { // if (hoveredStateId !== null) { // map.setFeatureState( // { source: sourceId, id: hoveredStateId }, // { hover: false } // ); // } // hoveredStateId = e.features[0].id; // map.setFeatureState( // { source: sourceId, id: hoveredStateId }, // { hover: true } // ); // } // }); // // When the mouse leaves the state-fill layer, update the feature state of the // // previously hovered feature. // map.on('mouseleave', layerId, () => { // if (hoveredStateId !== null) { // map.setFeatureState( // { source: sourceId, id: hoveredStateId }, // { hover: false } // ); // } // hoveredStateId = null; // }); // // Change the cursor back to a pointer // // when it leaves the states layer. // map.on('mouseleave', layerId, () => { // map.getCanvas().style.cursor = ''; // }); // map.setPaintProperty(layerId, 'fill-opacity', config.fillOpacity); // map.setPaintProperty(layerId_pop, 'fill-opacity', config.fillOpacity); // map.setPaintProperty(layerId_imp, 'fill-opacity', config.fillOpacity); // map.setPaintProperty(layerId_pop, 'fill-opacity', config.fillOpacity); }34:T834,function renderLegend(map) { // const mapContainer = map.getCanvasContainer(); const dim = 240 const svg = d3 // .select(mapContainer) .select("#bivmap") .append("svg") .attr('width', dim) .attr('height', dim) .style('position', 'absolute') .style('z-index', 0) // .style("transform", `translate(45px, 100px)`) const leg = svg.append("g") // .attr("height", height) // .attr("width", width); // .style("overflow", "visible") // .attr('transform', `translate(${0}, ${marginTop+20})`) leg.append(legendIndex) // .attr("transform", `translate(100, 100)`) // .attr("transform", `rotate(45)`) .attr("transform", `rotate(45), translate(${185},${60})`) // .attr("transform", `rotate(45), translate(${100},${0})`) .attr("class", "bivlegend") // .attr("transform", `rotate(45), translate(${700},${-400})`); const title = d3 // .select(mapContainer) .select("#bivmap") // .append("div") // .attr('width', dim) // .attr('height', dim) .append("text") .text("FLOOD-HAZARD LOCATOR") .style("transform", "translate(45px,30px)") .attr("class", "mapTitle") .style('position', 'absolute') const subTitle = d3 // .select(mapContainer) .select("#bivmap") // .append("div") // .attr('width', dim) // .attr('height', dim) .append("text") .text("Mapping Flood Hazard in the Vancouver Metropolitan Region") .style("transform", "translate(45px,70px)") .attr("class", "mapSubTitle") .style('position', 'absolute') const credit = d3 // .select(mapContainer) .select("#bivmap") // .append("div") // .attr('width', dim) // .attr('height', dim) .append("html") .html("by LEONARDO NICOLETTI") .style("transform", "translate(30px,100px)") .attr("class", "mapCredit") .style('position', 'absolute') }35:T788,function renderHexesD3(map) { // remove previously existing hexagons d3.selectAll(".hexAccess").remove() // // Transform the current hexagon map into a GeoJSON object // const geojson = geojson2h3.h3SetToFeatureCollection( // Object.keys(hexagons), // hex => ({value: hexagons[hex]}) // ); const mapContainer = map.getCanvasContainer(); const svg = d3 .select(mapContainer) .append('svg') .attr('width', '100%') .attr('height', '100%') .style('position', 'absolute') .style('z-index', 0) // .attr("id", 'svg'+mapContainers[container]); //Project any point to map's current state function projectPoint(lon, lat) { var point = map.project(new mapboxgl.LngLat(lon, lat)); this.stream.point(point.x, point.y); } //Projection function var transform = d3.geoTransform({ point: projectPoint }); var path = d3.geoPath().projection(transform); const hex = svg // const hex = d3.select('svg'+mapContainers[container]) .selectAll(".hexAccess") .data(data.features) .join("path") .attr("class", "hexAccess") // .style("fill", d=>clusterColors(d.properties.kmodes_x)) .style("fill", (d, i) => colorBivar(dataBivar.get(i))) .style("opacity", d=>(d.properties.IMP<0.1)||(d.properties.pop_den<2)?0:1) // .style("opacity", d=>(d.properties.IMP<0.1)?0: // (d.properties.pop_den<2)?0.3:1) .attr("stroke", "white") .style("stroke-width", "0.1") // .style("fill", "salmon") // .on("mouseover", d => (mutable hovered = d)) .style("pointer-events", "all"); const update = () => { hex.attr("d", path); }; update() // Every time the map changes, update the dots map.on("viewreset", update); map.on("move", update); map.on("moveend", update); } 36:T614,function showTooltip(e) { // new mapboxgl.Popup({className: "accessTooltip"}) const visibleBlock = e.features[0].properties.IMP>0.1 && e.features[0].properties.pop_den>2 if (visibleBlock===true) { const impPop = e.features[0].properties.IMP*e.features[0].properties.pop_den/1000 const aLevel = impPop>20?"very high": (impPop>12)&&(impPop<=20)?"high": (impPop>8)&&(impPop<=12)?"average": (impPop>3)&&(impPop<=8)?"low": (impPop<=3)?"very low":"" const color = e.features[0].properties.colorHex new mapboxgl.Popup() .setLngLat(e.lngLat) // .setHTML("In this block: " + (e.features[0].properties.DBpop2016) + "people are at a flood risk of " + (e.features[0].properties.IMP)) .setHTML(`In this block, flood hazard during extreme events is ${aLevel}

there are ${e.features[0].properties.DBpop2016} residents and ${(e.features[0].properties.IMP*100).toFixed()}% of the ground is impermeable`) .addTo(map); d3.selectAll(".mapboxgl-popup-content") .style("background-color", "#e9f0f5") .style("fill", "black") d3.selectAll(".mapboxgl-popup") .style("max-width", "200px") } // d3.selectAll(".mapboxgl-popup-tip") // .style("fill", "none") // .attr("rx", 50) }37:T46a,schemes = [ // { // name: "RdBu", // colors: [ // "#e8e8e8", "#e4acac", "#c85a5a", // "#b0d5df", "#ad9ea5", "#985356", // "#64acbe", "#627f8c", "#574249" // ] // }, { name: "PuOr", colors: [ "#e8e8e8", "#e4d9ac", "#c8b35a", "#cbb8d7", "#c8ada0", "#af8e53", "#9972af", "#976b82", "#804d36" ] }, { name: "RdBu", colors: ["#f0f0f0", "#ead2d2", "#e4b5b5", "#de9696", "#d87676", "#d65454", "#d7eded", "#d7d2d2", "#d7b5b5", "#d79696", "#d77676", "#d15252", "#bdeaea", "#bdd2d2", "#bdb5b5", "#bd9696", "#bd7676", "#bd5252", "#a0e6e6", "#a0d2d2", "#a0b5b5", "#a09696", "#a07676", "#a05252", "#81e2e2", "#81d2d2", "#81b5b5", "#819696", "#817676", "#815252", "#5ddede", "#5dd2d2", "#5db5b5", "#5d9696", "#5d7676", "#5d5252"] }, { name: "BuPu", colors: [ "#e8e8e8", "#ace4e4", "#5ac8c8", "#dfb0d6", "#a5add3", "#5698b9", "#be64ac", "#8c62aa", "#3b4994" ] }, { name: "GnBu", colors: [ "#e8e8e8", "#b5c0da", "#6c83b5", "#b8d6be", "#90b2b3", "#567994", "#73ae80", "#5a9178", "#2a5a5b" ] } ]38:T46d,legendIndex = () => { const k = 70/n; const arrow = DOM.uid(); //font-family=sans-serif return svg` ${d3.cross(d3.range(n), d3.range(n)).map(([i, j]) => svg` ${dataBivar.title[0]}${labels[j] && ` (${labels[j]})`} ${dataBivar.title[1]}${labels[i] && ` (${labels[i]})`} `)} ${dataBivar.title[0]} ${dataBivar.title[1]} `; }39:T404,html` `3a:T110d,// function renderMapboxHalftone(map) { // const sourceId = 'van-blocks'; // // const layerId = `${sourceId}-layer`; // const layerId_imp = `${sourceId}-imp`; // const layerId_pop = `${sourceId}-pop`; // let source = map.getSource(sourceId); // let pattern = { // 'id': 'pattern', // 'type': 'fill', // 'source': 'data', // "sprite": "mapbox://sprites/mapbox/bright-v8", // // 'source': 'snailbones.dc1c6wzp', // 'paint': { // // 'fill-pattern': "curve-09", // "fill-pattern": ["step",["get","IMP"],"curve-10",20,"curve-09",40,"curve-11", 50, "curve-12", 100, "curve-13"], // "fill-opacity": .9, // // "fill-translate": [-100,-100], // // "fill-translate-transition": 500, // } // } // // Add the source and layer if we haven't created them yet // if (!source) { // map.addSource(sourceId, { // type: 'geojson', // data: data // }); // map.addLayer({ // id: layerId_imp, // source: sourceId, // type: 'fill', // interactive: false, // paint: { // // 'fill-outline-color': 'white', // // 'fill-outline-color': 'rgba(0,0,0,0)', // } // }); // map.addLayer({ // id: layerId_pop, // source: sourceId, // type: 'fill', // interactive: false, // paint: { // // 'fill-outline-color': 'white', // // 'fill-outline-color': 'rgba(0,0,0,0)', // } // }); // // map.addLayer({ // // 'id': layerId_imp, // // 'type': 'fill', // // 'source': sourceId, // // // "source-layer": layerId_imp, // // 'paint': { // // // 'fill-pattern': "curve-09", // // "fill-pattern": ["step",["get","IMP"],"yellow-1",0.3,"yellow-2",0.4,"yellow-3", 0.5, "yellow-4", 0.6, "yellow-5", 0.7, "yellow-6"], // // "fill-opacity": .8, // // } // // }, layerId_imp); // // map.addLayer({ // // "id": layerId_pop, // // "type": "fill", // // "source": sourceId, // // // "source-layer": layerId_imp, // // "paint": { // // "fill-pattern": ["step",["get","pop_den"],"magenta-1",10,"magenta-2",100,"magenta-3", 500, "magenta-4", 2000, "magenta-5", 10000, "magenta-6"], // // "fill-opacity": .4 // // }}, layerId_imp); // Place polygon under these labels. // // source = map.getSource(sourceId); // // } // // Update the geojson data // source.setData(data); // // Update the layer paint properties, using the current config values // // map.setPaintProperty(layerId_imp, 'fill-color', { // // property: 'IMP', // // stops: [ // // [0.3, config.colorScaleImp[1]], // // [0.4, config.colorScaleImp[2]], // // [0.5, config.colorScaleImp[3]], // // [0.6, config.colorScaleImp[4]], // // [0.7, config.colorScaleImp[5]], // // [0.8, config.colorScaleImp[6]], // // [0.9, config.colorScaleImp[6]], // // [1, config.colorScaleImp[6]], // // ] // // }); // // map.setPaintProperty(layerId_pop, 'fill-color', { // // property: 'pop_den', // // stops: [ // // [10, config.colorScalePop[1]], // // [100, config.colorScalePop[2]], // // [200, config.colorScalePop[3]], // // [500, config.colorScalePop[4]], // // [2000, config.colorScalePop[5]], // // [10000, config.colorScalePop[6]], // // [20000, config.colorScalePop[6]], // // [100000, config.colorScalePop[6]], // // ] // // }); // // // tooltip // // map.on('click', layerId, (e) => { // // new mapboxgl.Popup() // // .setLngLat(e.lngLat) // // .setHTML("Accessibility: " + (e.features[0].properties.value).toFixed(2)) // // .addTo(map); // // }); // // // Change the cursor to a pointer when // // // the mouse is over the states layer. // // map.on('mouseenter', layerId, () => { // // map.getCanvas().style.cursor = 'pointer'; // // }); // // // Change the cursor back to a pointer // // // when it leaves the states layer. // // map.on('mouseleave', layerId, () => { // // map.getCanvas().style.cursor = ''; // // }); // // map.setPaintProperty(layerId_imp, 'fill-opacity', config.fillOpacity); // // map.setPaintProperty(layerId_pop, 'fill-opacity', config.fillOpacity); // }3b:[] 31:{"id":"3869d36dea3ba623","slug":"flood-hazard-locator","title":"Flood Hazard Locator","thumbnail":"aa705767d10b93d032a033f6ee7bd760c4d9800010a4b0393369ccfc9ed47c7c","access_level":"public","create_time":"$D2021-11-18T12:00:00.726Z","update_time":"$D2021-11-24T14:00:10.330Z","view_time":null,"first_public_time":"$D2021-11-24T13:58:17.045Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"405a122b348425fd","login":"lnicoletti","name":"leonardo Nicoletti","avatar_url":"https://avatars-next.observableusercontent.com/36092ac2cd0189ba9d5c4621680d6b2ef55948e600102b0814f4135b9cec7068","tier":"starter_2024"},"version":776,"publish_version":776,"role":null,"authored":false,"authors":[{"type":"individual","id":"8280c368bc7eaac0","login":"lnicoletti","name":"leonardo Nicoletti","avatar_url":"https://avatars-next.observableusercontent.com/36092ac2cd0189ba9d5c4621680d6b2ef55948e600102b0814f4135b9cec7068","tier":null}],"members":[{"type":"individual","id":"3252c0480a163254","login":"carolinecullinan","name":"Caroline Cullinan","avatar_url":"https://avatars-next.observableusercontent.com/36537301c4253b6e5b85cebe4262781beb533d83fa0dfc319d1d1463d6166cf9","tier":null,"role":"editor"},{"type":"individual","id":"8280c368bc7eaac0","login":"lnicoletti","name":"leonardo Nicoletti","avatar_url":"https://avatars-next.observableusercontent.com/36092ac2cd0189ba9d5c4621680d6b2ef55948e600102b0814f4135b9cec7068","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Flood Hazard Locator","cells":[{"id":0,"value":"# Flood Hazard Locator","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":756,"value":"md`##### Prototype notebook to develop: https://lnicoletti.github.io/flood-locator-bc/`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"html`\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"{\n const height =270\n const svg = d3\n .create(\"svg\")\n .attr(\"height\", height)\n .attr(\"width\", width);\n const leg = svg.append(\"g\")\n // .style(\"overflow\", \"visible\")\n // .attr('transform', `translate(${0}, ${marginTop+20})`)\n \n leg.append(legendIndex)\n // .attr(\"transform\", `translate(100, 100)`);\n .attr(\"transform\", `rotate(45), translate(${700},${-400})`);\n\n // return svg.node()\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"viewof colors = {\n const form = html``;\n form.i.selectedIndex = 1;\n form.oninput = () => form.value = schemes[form.i.selectedIndex].colors;\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"config = ({\n lng: -123.0207,\n lat: 49.2667,\n zoom: 10.5,\n fillOpacity: 0.5,\n // colorScale: [\"#fee5d9\",\"#fcbba1\",\"#fc9272\",\"#fb6a4a\",\"#de2d26\",\"#a50f15\"],\n // colorScale: [\"#2166ac\", \"#4393c3\", \"#92c5de\", \"#d1e5f0\", \"#fddbc7\", \"#f4a582\", \"#d6604d\", \"#b2182b\"],\n colorScaleImp: [\"#f7fcfd\",\"#e0ecf4\",\"#bfd3e6\",\"#9ebcda\",\"#8c96c6\",\"#8c6bb1\",\"#88419d\",\"#6e016b\"],\n colorScalePop: [\"#fff5eb\",\"#fee6ce\",\"#fdd0a2\",\"#fdae6b\",\"#fd8d3c\",\"#f16913\",\"#d94801\",\"#8c2d04\"],\n areaThreshold: 0.75\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"init = {\n\n renderMapbox(map) \n renderLegend(map)\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"map = {\n let map = this;\n \n if (!map) {\n map = new mapboxgl.Map({\n container: \"bivmap\",\n center: [\n config.lng,\n config.lat,\n ],\n zoom: config.zoom,\n style: 'mapbox://styles/mapbox/light-v9',\n // style: 'mapbox://styles/lnicoletti/ckwaumva16h1315t6wcywwbk9',\n maxZoom: 14,\n minZoom: 9.5\n });\n }\n \n map.addControl(new mapboxgl.FullscreenControl(), 'top-right'); //zoom controls\n map.addControl(new mapboxgl.NavigationControl(), 'top-right'); //zoom controls\n \n // Wait until the map loads, then yield the container again.\n yield new Promise(resolve => {\n if (map.loaded()) resolve(map);\n else map.on('load', () => resolve(map));\n });\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"// Plot.rectY(dataColored.features.map(d=>d.properties).filter(d=>d.pop_den<50000), Plot.binX({y: \"proportion\"}, {x: d=>d.IMP*d.pop_den/1000})).plot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"// Plot.rectY(dataColored.features.map(d=>d.properties), Plot.binX({y: \"proportion\"}, {x: \"IMP\"})).plot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"findDuplicates = arr => arr.filter((item, index) => arr.indexOf(item) != index)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"md`#### Bivariate colorscale`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"colorExpr = ['match', ['string',['get', 'colorHex']]].concat(colors.map(d=>[d,d]).flat()).concat('#ccc')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":740,"value":"svg","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"labels = [\"low\", \"\", \"high\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"n = Math.floor(Math.sqrt(colors.length))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"xBivar = d3.scaleQuantile(Array.from(dataBivar.values(), d => d[0]), d3.range(n))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"yBivar = d3.scaleQuantile(Array.from(dataBivar.values(), d => d[1]), d3.range(n))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"colorBivar = {\n return value => {\n if (!value) return \"lightgrey\";\n let [a, b] = value;\n return colors[yBivar(b) + xBivar(a) * n];\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"md`#### Data and Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"dataBivar = Object.assign(new Map(data.features.map(d=>d.properties).map((d, i) => [i, [d.IMP, d.pop_den]])),{title: [\"Flood Risk\", \"Pop. Density\"]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"dataColored = {\n return {\n type: \"FeatureCollection\",\n features: data.features.map((d, i) => ({...d, \n properties:\n {...d.properties, colorHex: colorBivar(dataBivar.get(i))}}))\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"data = d3.json(\"https://gist.githubusercontent.com/lnicoletti/cdb0d6df5476da695f307b78e39ff864/raw/88ff0bbb9cd76ea72313da277a307e532af215d2/MV_IMP_POP_s_ll.json\", d3.autoType)\n//d3.json(\"https://gist.githubusercontent.com/lnicoletti/da98d3e9037dd938c65b960f593ff048/raw/f3fc9d7c09c3720d35aff6fe063fed574ae9c310/MV_IMP_POP_s_ll.json\", d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"mapboxApiToken = \"pk.eyJ1IjoibG5pY29sZXR0aSIsImEiOiJjazZ1a3I5cjgwNWxtM2xxcDlva2NvaDNzIn0.xDhib2HysGYu4_oIkgHHow\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@2\");\n if (!gl.accessToken) {\n // token allowed only for @sw1227\n gl.accessToken = \"pk.eyJ1IjoibG5pY29sZXR0aSIsImEiOiJjazZ1a3I5cjgwNWxtM2xxcDlva2NvaDNzIn0.xDhib2HysGYu4_oIkgHHow\";\n const href = await require.resolve(\"mapbox-gl@2/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"import {Plot} from \"@observablehq/plot\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"SansSerifFontParse = \"Oswald:wght@200;300;400;500;600;700\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"SansSerifFont = \"Oswald\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"SerifFont = \"Roboto Slab\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"value":"`https://fonts.googleapis.com/css2?family=${SansSerifFont}&display=swap`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3b","stdlib":"1","titling":"auto"}} 32:"$31:body"