2f:Ta98,poc1 = { //https://d3-graph-gallery.com/graph/choropleth_basic.html const colorScale = d3.scaleThreshold() .domain([85, 170, 255, 340, 425, 510]) .range(d3.schemeBlues[7]); const svg = d3.select(DOM.svg(w, h)); // Colourbar // svg // .append("g") // .attr("transform", "translate(610,20)") // .append(() => legend({ colorScale, title: "Count", width: 260, tickFormat: ".0f" })); const path = d3.geoPath(); // const projection = d3.geoIdentity() // .scale(70) // .center([0,20]) // .translate([width / 2, height / 2]); const projection = d3.geoIdentity() .reflectY(true) .fitWidth(w, geoFsa) svg.append("g") .selectAll("path") .data(geoFsa.features) .enter() .append("path") // draw each country .attr("d", d3.geoPath() .projection(projection) ) .attr("class", "fsa") // set the color of each country .attr("fill", function (d) { let thisFSA = d.properties['CFSAUID']; const thisParam = `${evType}`; let thisVal; thisVal = q2_2023.find(o => o['FSA'] === thisFSA) ? q2_2023.find(o => o['FSA'] === thisFSA)[thisParam] : 0; console.log('this val: ', thisVal) return colorScale(thisVal); }) .attr('stroke', 'darkgrey') .attr('stroke-width', .2); // .append("title") // .text(d => `${d.properties.name}, ${states.get(d.id.slice(0, 2)).name} // ${format(data.get(d.id))}`); //https://observablehq.com/@lnicoletti/choropleth const tooltip = svg.append("g").attr("class", "tooltip"); //TODO: clamp tooltip to centroid, e.g. https://observablehq.com/@observablehq/plot-choropleth svg .selectAll(".fsa") .on("mouseover", function(d) { let thisFSA = d.properties['CFSAUID']; const thisParam = `${evType}`; let thisVal; thisVal = q2_2023.find(o => o['FSA'] === thisFSA) ? q2_2023.find(o => o['FSA'] === thisFSA)[thisParam] : "N/A"; tooltip.call( callout, `${d.properties['CFSAUID']} ${evType}: ${thisVal}` ); d3.select(this) .attr("stroke", "orange") .attr("stroke-width", 1) .raise(); }) .on("mousemove", function() { tooltip.attr( "transform", `translate(${d3.mouse(this)[0]},${d3.mouse(this)[1]})` ); }) .on("mouseout", function() { tooltip.call(callout, null); d3.select(this) .attr("stroke", 'darkgrey') .attr('stroke-width', .2) .lower(); }); // svg.append('path') // .datum(geoFsa) // .attr('d', path) // .attr('stroke', '#093672') // .attr('fill', 'none'); return svg.node(); }30:T679,poc2 = addTooltips( // Add tooltips Plot.plot({ width: w, height: 600, projection: d3.geoIdentity().reflectY(true).fitWidth(w/1.2, geoFsa), color: { scheme: "Viridis", // Change color scheme unknown: "green", // For polygons with null values type: "linear", // Linear scale for color progression legend: true, // Add the legend marginLeft: 15, width: 250, //marginTop: 0, //marginBottom: 50, label: "number of electric vehicles", //percent: true, // Convert value to a percent (from a proportion) domain: [0, 500] // Update the value domain to span 0 to 100% access }, marks: [ Plot.geo(geoFsa, { fill: (d) => ( data_allyrs.filter(e => (e.FSA === d.properties.CFSAUID && e.period === qperiod))[0] ? data_allyrs.filter(e => (e.FSA === d.properties.CFSAUID && e.period === qperiod)).map(function(d) {return d[evDict[evMenu]];}) : null ), title: (d) => `FSA: ${d.properties.CFSAUID} \n Number of ${evMenu}: ${data_allyrs.filter(e => (e.FSA === d.properties.CFSAUID && e.period === qperiod)).map(function(d) { console.log('val: ', d[evDict[evMenu]]) return d[evDict[evMenu]] ? d[evDict[evMenu]] : "Unknown";})}`, stroke: "grey", strokeWidth: 0.2 }, ), ], // tooltip: { // fill: "red", // stroke: "blue", // r: 8 // } }), { //fill: "none", "stroke": "orange", "stroke-width": 1 // opacity: 0 } )31:T4e8,dvStyles = html` `32:T63b,poc3 = addTooltips( // Add tooltips Plot.plot({ width: w, height: 600, projection: d3.geoIdentity().reflectY(true).fitWidth(w/1.2, geoFsa), color: { scheme: "blues", // Change color scheme unknown: "#ddd", // Polygons with unknown broadband values are gray type: "linear", // Linear scale for color progression legend: true, // Add the legend marginLeft: 15, width: 250, label: "number of electric vehicles", //percent: true, // Convert value to a percent (from a proportion) domain: [0, 300] // Update the value domain to span 0 to 100% access }, marks: [ Plot.geo(geoFsa, { fill: (d) => ( data_allyrs.filter(e => (e.FSA === d.properties.CFSAUID && e.period === pcPeriodScrubber))[0] ? Math.round(data_allyrs.filter(e => (e.FSA === d.properties.CFSAUID) && e.period === pcPeriodScrubber)[0][evDict[evMenu]] / data_allyrs.filter(e => (e.FSA === d.properties.CFSAUID) && e.period === "Q1-2022")[0][evDict[evMenu]] * 100) : 0 ), title: (d) => `FSA: ${d.properties.CFSAUID} \n ${data_allyrs.filter(e => (e.FSA === d.properties.CFSAUID && e.period === pcPeriodScrubber)).map(function(d) {return d[evDict[evMenu]] ? d[evDict[evMenu]] : "Unknown";})}%`, stroke: "grey", strokeWidth: 0.2 }, ), ], // tooltip: { // fill: "red", // stroke: "blue", // r: 8 // } }), { //fill: "none", "stroke": "orange", "stroke-width": 1 // opacity: 0 } )33:Ta9b,// from function myScrubber(values, { format = value => value, initial = 0, direction = 1, delay = null, buttonText = null, autoplay = true, loop = true, loopDelay = null, alternate = false } = {}) { values = Array.from(values); console.log('values: ', buttonText) const form = html``; let frame = null; let timer = null; let interval = null; function start() { form.b.textContent = "Pause"; if (delay === null) frame = requestAnimationFrame(tick); else interval = setInterval(tick, delay); } function stop() { form.b.textContent = buttonText ? buttonText : "Play"; if (frame !== null) cancelAnimationFrame(frame), frame = null; if (timer !== null) clearTimeout(timer), timer = null; if (interval !== null) clearInterval(interval), interval = null; } function running() { return frame !== null || timer !== null || interval !== null; } function tick() { if (form.i.valueAsNumber === (direction > 0 ? values.length - 1 : direction < 0 ? 0 : NaN)) { if (!loop) return stop(); if (alternate) direction = -direction; if (loopDelay !== null) { if (frame !== null) cancelAnimationFrame(frame), frame = null; if (interval !== null) clearInterval(interval), interval = null; timer = setTimeout(() => (step(), start()), loopDelay); return; } } if (delay === null) frame = requestAnimationFrame(tick); step(); } function step() { form.i.valueAsNumber = (form.i.valueAsNumber + direction + values.length) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); } form.i.oninput = event => { if (event && event.isTrusted && running()) stop(); form.value = values[form.i.valueAsNumber]; form.o.value = format(form.value, form.i.valueAsNumber, values); }; form.b.onclick = () => { if (running()) return stop(); direction = alternate && form.i.valueAsNumber === values.length - 1 ? -1 : 1; form.i.valueAsNumber = (form.i.valueAsNumber + direction) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); start(); }; form.i.oninput(); if (autoplay) start(); else stop(); Inputs.disposal(form).then(stop); return form; }34:T52b,# References ## Maps - http://www.d3noob.org/2013/03/a-simple-d3js-map-explained.html - play with different geo projections: https://observablehq.com/@uwdata/cartographic-visualization - Mike Bostock [Lambert Conformal Conic gist](https://gist.github.com/mbostock/3734321) - more setting up for [Lambert Conic Conformal](https://stackoverflow.com/questions/41282911/lambert-conic-conformal-projection-in-d3) (SO post) - [clamp tooltip to centroid of map polygons](https://observablehq.com/@observablehq/plot-choropleth) - small multiple facets (among other things): https://observablehq.com/@observablehq/plot-mapping - [d3-geo API documentation](https://github.com/d3/d3-geo/blob/v2.0.0/README.md#projection_fitWidth) (e.g. FitWidth option) - [Observable Plot color scales](https://observablehq.com/plot/features/scales#color-scales) - [Observable Plot main intro page](https://observablehq.com/plot/what-is-plot) - [GeoJSON viewer](https://observablehq.com/@mbostock/geojson-viewer) notebook, Mike Bostock ## Observable docs - options for Inputs: https://github.com/observablehq/inputs - css styling: - embedding css though [JS Runtime option](https://talk.observablehq.com/t/embedded-cell-loses-css-style/2450/3) - https://talk.observablehq.com/t/how-do-you-style-inputs-when-exporting-via-download-code/5696/535:T6f1,junkhexPoints = [ [ { "x": 472.5, "y": 21, "datapoint": 0 } ], [ { "x": 483, "y": 21, "datapoint": 0 } ], [ { "x": 462, "y": 31.5, "datapoint": 0 }, { "x": 472.5, "y": 31.5, "datapoint": 0 } ], [ { "x": 483, "y": 31.5, "datapoint": 0 } ], [ { "x": 493.5, "y": 31.5, "datapoint": 0 } ], [ { "x": 504, "y": 31.5, "datapoint": 0 } ], [ { "x": 514.5, "y": 31.5, "datapoint": 0 } ], [ { "x": 525, "y": 31.5, "datapoint": 0 } ], [ { "x": 535.5, "y": 31.5, "datapoint": 0 } ], [ { "x": 462, "y": 42, "datapoint": 0 } ], [ { "x": 472.5, "y": 42, "datapoint": 0 } ], [ { "x": 483, "y": 42, "datapoint": 0 } ], [ { "x": 493.5, "y": 42, "datapoint": 0 } ], [ { "x": 504, "y": 42, "datapoint": 0 }, { "x": 514.5, "y": 42, "datapoint": 0 } ], [ { "x": 525, "y": 42, "datapoint": 0 } ] ]36:T6c1,{ //https://d3-graph-gallery.com/graph/choropleth_basic.html var colorScale = d3.scaleThreshold() .domain([85, 170, 255, 340, 425, 510]) .range(d3.schemeBlues[7]); const svg = d3.select(DOM.svg(w, h)); const g = svg.append("g"); // Colourbar // svg // .append("g") // .attr("transform", "translate(610,20)") // .append(() => legend({ colorScale, title: "Count", width: 260, tickFormat: ".0f" })); const path = d3.geoPath(); // const projection = d3.geoIdentity() // .scale(70) // .center([0,20]) // .translate([width / 2, height / 2]); const projection = d3.geoIdentity() .reflectY(true) .fitWidth(w, geoFsa) //svg.append("g") g .selectAll("path") .data(geoFsa.features) .enter() .append("path") // draw each country .attr("d", d3.geoPath() .projection(projection) ) .attr("class", "fsa") // set the color of each country .attr("fill", "none") .attr('stroke', 'darkgrey') .attr('stroke-width', .2); g.selectAll("circle") .data(centroids_fsa_lambert) .enter() .append("circle") .attr("cx", function(d) { let lon = d['xcoord']; let lat = d['ycoord']; return projection([lon, lat])[0]; }) .attr("cy", function(d) { let lon = d['xcoord']; let lat = d['ycoord']; return projection([lon, lat])[1]; }) .attr("r", 2) .style("fill", "red"); // svg.append('path') // .datum(geoFsa) // .attr('d', path) // .attr('stroke', '#093672') // .attr('fill', 'none'); return svg.node(); }37:T520,// Cannot get this to work because cannot reference facet "period" within Plot.geo // So no way to tell "fill" which period to pick Plot.plot({ width: w, height: 200, projection: d3.geoIdentity().reflectY(true).fitWidth(w/5, geoFsa), fx: { tickFormat: (d) => `${d}`, padding: 0 }, facet: { data: data_allyrs, x: (d) => d.period }, marks: [ Plot.geo( tmpgeoFsa, { //fx: periodMap.period, fill: (d) => ( console.log('d: ', d), //console.log('get period: ', data_allyrs.get(d.period)), // console.log('d.properties.CFSAUID: ', d.properties.CFSAUID), // console.log("this: ", d3.select(".plot-d6a7b5")), // console.log('d.properties.period: ', d.properties["BEV"]), //console.log('get: ', periodMap.get(period) ), //mapBEV.get(d.properties.CFSAUID) ? mapBEV.get(d.properties.CFSAUID) : 0 // d.properties.CFSAUID === "P9N" ? // console.log('******* VAL: ', mapBEV.get(d.properties.CFSAUID) ? mapBEV.get(d.properties.CFSAUID).get(d.properties.period) : 0) : // console.log('..') 12 ) } // Fill color depends on broadband value ), //Plot.dot(data_2023, {x: "ycoord", y: "xcoord", stroke: "date", symbol: "circle"}) //centroids ] })38:T8a1,{ const w = 700; const h = 700; const svg = d3.select(DOM.svg(w, h)); //d3.create("svg"); const components = gridLayout(6, 3, 25, true); const path = d3.geoPath(); const projection = d3.geoIdentity() .reflectY(true) .fitWidth(w/1.5, geoFsa); const colorScale = d3.scaleThreshold() .domain([85, 170, 255, 340, 425, 510]) .range(d3.schemeBlues[7]); svg.attr("viewBox", [0, 0, components.outer_width, components.outer_height]); const cmp = svg .selectAll("g") .data(components.items) .enter(); // cmp // .append("rect") // .attr("class", (_, i) => `item_${i + 1}`) // .attr("transform", d => `translate(${d.x}, ${d.y})`) // .attr("width", d => d.width) // .attr("height", d => d.height) // .attr("fill", "white") // .attr("stroke", "black"); const gridGroup = cmp .append("g") .attr("class", (_, i) => `gridmap`) .attr("id", (_, i) => `gridmap_${i + 1}`) .attr("transform", d => `translate(${d.x}, ${d.y})`); gridGroup.each((e, j) => { // console.log("e: ", e); console.log("j: ", j); let counter = j; console.log("select: ", d3.select(`#gridmap_${j + 1}`) ) d3.select(`#gridmap_${j + 1}`) .selectAll("path") .data(geoFsa.features) .enter() .append("path") .attr("d", d3.geoPath().projection(projection)) .attr("class", "fsa") .attr('stroke', 'darkgrey') .attr('stroke-width', .2) }) // .attr("fill", function (e) { // console.log("components: ", components) // // // let thisFSA = d.properties['CFSAUID']; // // // const thisParam = `${evType}`; // // // let thisVal; // // // thisVal = data.find(o => o['FSA'] === thisFSA) ? data.find(o => o['FSA'] === thisFSA)[thisParam] : 0; // // // console.log('this val: ', thisVal) // return "blue"; //colorScale(thisVal); // }); return svg.node(); }39:T423,{ //https://d3-graph-gallery.com/graph/choropleth_basic.html const colorScale = d3.scaleThreshold() .domain([85, 170, 255, 340, 425, 510]) .range(d3.schemeBlues[7]); const svg = d3.select(DOM.svg(w, h)); const path = d3.geoPath(); const projection = d3.geoIdentity() .reflectY(true) .fitWidth(w, geoFsa) svg.append("g") .selectAll("path") .data(geoFsa.features) .enter() .append("path") // draw each country .attr("d", d3.geoPath() .projection(projection) ) .attr("class", "fsa") // set the color of each country .attr("fill", function (d) { let thisFSA = d.properties['CFSAUID']; const thisParam = `${evType}`; let thisVal; thisVal = data_allyrs.find(o => o['FSA'] === thisFSA) ? data_allyrs.find(o => o['FSA'] === thisFSA)[thisParam] : 0; console.log('this val: ', thisVal) return colorScale(thisVal); }) .attr('stroke', 'darkgrey') .attr('stroke-width', .2); return svg.node(); }3a:[{"id":"a6303068821f3f01806b56fc28a69ffacd6a0941b77574ef5a61f7ffaac9beb40b84f44553a9fc9d3ea62babc0a95f533864eafe9397f2d92d029944cace6934","href":"https://static.observableusercontent.com/files/a6303068821f3f01806b56fc28a69ffacd6a0941b77574ef5a61f7ffaac9beb40b84f44553a9fc9d3ea62babc0a95f533864eafe9397f2d92d029944cace6934","name":"census_lfsa000b21a_e_ont_geojson_EP4326.geojson","type":"application/geo+json","lastModified":1689611481298.814,"size":8667},{"id":"588ec3e9d4ea2b11e7fb77753c734c8f2b5b16283f06d992d1d2199c3bfc75af51d9739d56e923fc706c9ab4d150288327e71ea437e3014b79d70bda816ee9a9","href":"https://static.observableusercontent.com/files/588ec3e9d4ea2b11e7fb77753c734c8f2b5b16283f06d992d1d2199c3bfc75af51d9739d56e923fc706c9ab4d150288327e71ea437e3014b79d70bda816ee9a9","name":"census_lfsa000b21a_e_ont_geojson_EP4326_topojson.json","type":"application/json","lastModified":1689612209227.537,"size":1854},{"id":"38565b7479eb63255f739a11be6a4ec3048bd853cf44c58a2aafff2a57014947ec5dc2dee4abac8f37a4d595151719dfd73e2263c6355afa0005ab64366348d2","href":"https://static.observableusercontent.com/files/38565b7479eb63255f739a11be6a4ec3048bd853cf44c58a2aafff2a57014947ec5dc2dee4abac8f37a4d595151719dfd73e2263c6355afa0005ab64366348d2","name":"centroids_ontario_fsa_with_coords_EPSG3347.csv","type":"text/csv","lastModified":1689775946635.944,"size":37080},{"id":"8154da3aa91c2f10de8eae7833ed7dd2b192640ec234507fec8260be3b87ede50a077d1531d65736f0accefb0e058f46273a946655b6295d82720daa09696f1b","href":"https://static.observableusercontent.com/files/8154da3aa91c2f10de8eae7833ed7dd2b192640ec234507fec8260be3b87ede50a077d1531d65736f0accefb0e058f46273a946655b6295d82720daa09696f1b","name":"ontario_fsa_saved_as_EPSG4326_centroids_latlon.csv","type":"text/csv","lastModified":1689792735475.776,"size":39742},{"id":"3f23ca28a1e1e8114a237580c2321088c34a9b8f111c54023efb98a0fd947456bca55b2a87ed9e20faa8ce9b191fd427cf6746f5f74aa5217d4b97408636856c","href":"https://static.observableusercontent.com/files/3f23ca28a1e1e8114a237580c2321088c34a9b8f111c54023efb98a0fd947456bca55b2a87ed9e20faa8ce9b191fd427cf6746f5f74aa5217d4b97408636856c","name":"census_lfsa_000b21a_ont_outline_saved_as_EPSG4326_geojson.geojson","type":"application/geo+json","lastModified":1689795005586.324,"size":8771},{"id":"6bd0cee57f4ed5960486246e2504adff174ba525f99fef70853316901ec6ab22b39cdf359b07239bef422b95e59708fa7bb45a7ad2ed8f73a4ea362a5fdc8718","href":"https://static.observableusercontent.com/files/6bd0cee57f4ed5960486246e2504adff174ba525f99fef70853316901ec6ab22b39cdf359b07239bef422b95e59708fa7bb45a7ad2ed8f73a4ea362a5fdc8718","name":"ontario_fsa_EPSG3347_simplified_1000m_mapshaper.geojson","type":"application/geo+json","lastModified":1689803313408.588,"size":431877},{"id":"099387017267b72684b47b0c24aeb79b177beaa7470d89e002ef9f2532fffbb38cd1d8bd33009cb70581713e19a93eaa0add9200cf5a22c2c5ae1811d032a5f5","href":"https://static.observableusercontent.com/files/099387017267b72684b47b0c24aeb79b177beaa7470d89e002ef9f2532fffbb38cd1d8bd33009cb70581713e19a93eaa0add9200cf5a22c2c5ae1811d032a5f5","name":"ontario_fsa_EPSG3347_simplified_1000m_mapshaper_topojson.json","type":"application/json","lastModified":1689803741804.915,"size":149087},{"id":"56fc6e26f38932d8b4266184f29ee2930fd3119ff308369a376e7352f8ca5947e59d46f06398e5cb5960ec4d7c0dcee4e1e3576d9d29cd78e28aed2fa2971209","href":"https://static.observableusercontent.com/files/56fc6e26f38932d8b4266184f29ee2930fd3119ff308369a376e7352f8ca5947e59d46f06398e5cb5960ec4d7c0dcee4e1e3576d9d29cd78e28aed2fa2971209","name":"ontario_evs_by_fsa_2023-03-31_FIX.csv","type":"text/csv","lastModified":1690315491754.929,"size":8206},{"id":"4093560dc750ec70dc37ab5d7496c43a4bd71b28ef57a649d8b9fa4db261b69fd7881032e0b4982ec4e6598b8b0b9475be5f82edd88d9e9c49e4b778ec79a1ff","href":"https://static.observableusercontent.com/files/4093560dc750ec70dc37ab5d7496c43a4bd71b28ef57a649d8b9fa4db261b69fd7881032e0b4982ec4e6598b8b0b9475be5f82edd88d9e9c49e4b778ec79a1ff","name":"evs_by_fsa_30-jun-2023_FIX.csv","type":"text/csv","lastModified":1690315664102.534,"size":8363}] 2d:{"title":"Electric Vehicles in Ontario – By Forward Sortation Area","cells":[{"id":0,"value":"# Electric Vehicles in Ontario – By Forward Sortation Area \nFrom https://data.ontario.ca/dataset/electric-vehicles-in-ontario-by-forward-sortation-area\n\n**Columns:** \nFSA: Forward Sortation Area \nBEV: Battery Electric Vehicles \nPHEV: plug-in hybrid electric vehicles\n\nCurrent datasets available:\n- Q2, Q1 2023\n- Q1, Q2, Q3, Q4 2022","pinned":false,"hidden":false,"mode":"md"},{"id":1095,"value":"# POC 1: Snapshot: Number of Electric Vehicles across Ontario FSA regions in Q2 2023\nd3.js","pinned":false,"hidden":false,"mode":"md"},{"id":1037,"value":"viewof evType = Inputs.select(Object.keys(q2_2023[0]).filter(el => el !== \"FSA\" && el !== \"_id\"), \n {value: \"TotalEV\", label: \"Type of EV:\"}) \n//BEV: Battery Electric Vehicles\n//PHEV: plug-in hybrid electric vehicles","pinned":false,"hidden":false,"mode":"ojs"},{"id":941,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1238,"value":"# POC 2: Timelapse of Number of Electric Vehicles across Ontario FSA regions, 2022 - 2024\n(Observable Plot) \n\nThe number of electric vehicles in Ontario has been increasing since 2022, concentrated in the southwestern to southeastern area, especially for battery-electric vehicles. \n\nSelect an electric vehicle type (total, battery-electric, or plug-in hybrid) and hit the Play button to see a timelapse of the number in each Forward Sortation Area quarterly by year since 2022.","pinned":false,"hidden":false,"mode":"md"},{"id":2263,"value":"**Follow-up design notes:**\n\n- can we add a legend for acronyms FSA, EV, BEV, PHEV\n- can we move the number of electric vehicles legend elsewhere\n- move label of slider (eg. Q2-2022) to position on timeline rather than end of slider\n- consider different label for Play - not sure what yet though\n- consider adding zoom functionality","pinned":false,"hidden":false,"mode":"md"},{"id":2276,"value":"evDict = {\n //let objArr = [];\n let obj = {}\n // obj['FSA'] = 'Forward Sortation Area (FSA)';\n // obj['BEV'] = 'Battery Electric Vehicles (BEV)';\n // obj['PHEV'] = 'Plug-in Hybrid Electric Vehicles (PHEV)';\n // obj['TotalEV'] = 'Total Electric Vehicles (TotalEV)';\n obj['Forward Sortation Area (FSA)'] = 'FSA';\n obj['Battery Electric Vehicles (BEV)'] = 'BEV';\n obj['Plug-in Hybrid Electric Vehicles (PHEV)'] = 'PHEV';\n obj['Total Electric Vehicles (TotalEV)'] = 'TotalEV';\n\n //objArr.push(obj);\n\n return obj; //objArr;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2534,"value":"# Quarterly Electric Vehicle counts across Ontario: 2022 - 2024","pinned":false,"hidden":false,"mode":"md"},{"id":2274,"value":"viewof evMenu = Inputs.select(Object.keys(evDict).filter(d => d !== \"Forward Sortation Area (FSA)\"), \n {value: \"Total Electric Vehicles (TotalEV)\", \n label: \"Type of EV\",\n width: \"50%\", // auto\n }\n ) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1318,"value":"viewof qperiod = Scrubber(periods, {\n autoplay: false,\n loop: false,\n delay: 1100\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1205,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":1501,"value":"periods = [...new Set(data_allyrs.map(item => item.period))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2394,"value":"dvStyles_orig = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2528,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":2536,"value":"# Change in Electric Vehicle counts across Ontario since Q1 2022","pinned":false,"hidden":false,"mode":"md"},{"id":2564,"value":"pcPeriods = [...new Set(data_allyrs.map(item => item.period))].filter(function (letter) {\n return letter !== 'Q1-2022';\n});\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2587,"value":"viewof pcPeriodScrubber = Scrubber(pcPeriods, {\n autoplay: false,\n loop: false,\n delay: 1100\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2538,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1074,"value":"# Data","pinned":false,"hidden":false,"mode":"md"},{"id":1076,"value":"## 1. Primary Data sources: Ontario Data Catalogue\nhttps://data.ontario.ca/dataset/electric-vehicles-in-ontario-by-forward-sortation-area","pinned":false,"hidden":false,"mode":"md"},{"id":2707,"value":"// Returns raw api response\napi_response = function (url) {\n return new Promise(function (resolve, reject) {\n resolve(d3.json(url));\n });\n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":1446,"value":"#### API results","pinned":false,"hidden":false,"mode":"md"},{"id":2773,"value":"**Q1**","pinned":false,"hidden":false,"mode":"md"},{"id":1428,"value":"q1_2022 = api_response(\"https://data.ontario.ca/api/3/action/datastore_search?resource_id=aa3af935-3c6f-4921-8606-e9a30d088c7a&limit=541\").then(function (api_raw) {\n\treturn api_raw.result.records;\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":1477,"value":"q1_2023 = api_response(\"https://data.ontario.ca/api/3/action/datastore_search?resource_id=0cf5ab4c-b495-49c1-9118-841c8d79a6fb&limit=550\").then(function (api_raw) {\n\treturn api_raw.result.records;\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":2769,"value":"q1_2024 = api_response(\"https://data.ontario.ca/api/3/action/datastore_search?resource_id=5d70275f-8d7a-47e2-92fa-16a3073bb525&limit=573\").then(function (api_raw) {\n\treturn api_raw.result.records;\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":2775,"value":"**Q2**","pinned":false,"hidden":false,"mode":"md"},{"id":1433,"value":"q2_2022 = api_response(\"https://data.ontario.ca/api/3/action/datastore_search?resource_id=c5dc8e7a-432f-4b36-85be-44eb81c4b42d&limit=543\").then(function (api_raw) {\n\treturn api_raw.result.records;\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":1479,"value":"q2_2023 = api_response(\"https://data.ontario.ca/api/3/action/datastore_search?resource_id=d7c574f6-0d89-48fa-8f1e-32b1d4001932&limit=558\").then(function (api_raw) {\n\treturn api_raw.result.records;\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":2787,"value":"q2_2024 = api_response(\"https://data.ontario.ca/api/3/action/datastore_search?resource_id=f08d1b7c-3833-4a2a-bc8d-7a948ead990f&limit=578\").then(function (api_raw) {\n\treturn api_raw.result.records;\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":2780,"value":"**Q3**","pinned":false,"hidden":false,"mode":"md"},{"id":1438,"value":"q3_2022 = api_response(\"https://data.ontario.ca/api/3/action/datastore_search?resource_id=2a2bcaa8-8314-4e4e-bc24-dfbccaf03657&limit=547\").then(function (api_raw) {\n\treturn api_raw.result.records;\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":2751,"value":"q3_2023 = api_response(\"https://data.ontario.ca/api/3/action/datastore_search?resource_id=0048d330-4d34-4ce9-bdff-91b41be1129e&limit=563\").then(function (api_raw) {\n\treturn api_raw.result.records;\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":2789,"value":"q3_2024 = api_response(\"https://data.ontario.ca/api/3/action/datastore_search?resource_id=82a8dfd1-9890-4527-bb0e-5f1e7f6c594d&limit=576\").then(function (api_raw) {\n\treturn api_raw.result.records;\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":2784,"value":"**Q4**","pinned":false,"hidden":false,"mode":"md"},{"id":1442,"value":"q4_2022 = api_response(\"https://data.ontario.ca/api/3/action/datastore_search?resource_id=751cf779-300b-4c3b-9874-7cf9b21ec02c&limit=549\").then(function (api_raw) {\n\treturn api_raw.result.records;\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":2753,"value":"q4_2023 = api_response(\"https://data.ontario.ca/api/3/action/datastore_search?resource_id=dca5bef6-df38-4c45-be73-62e71b243d3d&limit=570\").then(function (api_raw) {\n\treturn api_raw.result.records;\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":2791,"value":"q4_2024 = api_response(\"https://data.ontario.ca/api/3/action/datastore_search?resource_id=d36d8aa0-9b43-46f7-bbfd-d011c394b607&limit=579\").then(function (api_raw) {\n\treturn api_raw.result.records;\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":2192,"value":"load csv files for Q1-2023 and Q2-2023","pinned":false,"hidden":false,"mode":"md"},{"id":2194,"value":"ontario_evs_by_fsa_20230331_fix = data_allyrs","pinned":true,"hidden":false,"mode":"ojs"},{"id":2643,"value":"### Missing values\nFrom the interactive data table, a number of missing values can be easily identified:\n\n1. **31 missing BEV values in total**:\n * 7 FSAs are missing BEV values from period Q1-2022: K8B, L2L, L2Y, L3J, M3R, P2N, P7L\n * 6 FSAs are missing BEV values from period Q2-2022: K8B, L2L, L2Y, M3R, P2N, P7L\n * 4 FSAs are missing BEV values from period Q3-2022: K8B, L2L, L2Y, M3R\n * 4 FSAs are missing BEV values from period Q4-2022: K8K, L2Y, M3R\n * 5 FSAs are missing BEV values from period Q1-2023: K3M, K6G, K8K, L2Y, M3R\n * 6 FSAs are missing BEV values from period Q2-2023: K3M, K6G, K8B, K8K, L2Y, M3R\n \n2. **147 missing PHEV values in total**\n ","pinned":false,"hidden":false,"mode":"md"},{"id":1463,"value":"## Process data","pinned":false,"hidden":false,"mode":"md"},{"id":1469,"value":"data_allyrs = {\n // Add \"period\" object key for each period and concatenate all periods into one array\n\n return [...q1_2022.map(v => ({...v, period: \"Q1-2022\"})), \n ...q2_2022.map(v => ({...v, period: \"Q2-2022\"})),\n ...q3_2022.map(v => ({...v, period: \"Q3-2022\"})),\n ...q4_2022.map(v => ({...v, period: \"Q4-2022\"})),\n ...q1_2023.map(v => ({...v, period: \"Q1-2023\"})),\n ...q2_2023.map(v => ({...v, period: \"Q2-2023\"})),\n ...q3_2023.map(v => ({...v, period: \"Q3-2023\"})),\n ...fix_cols(q4_2023).map(v => ({...v, period: \"Q4-2023\"})),\n ...fix_cols(q1_2024).map(v => ({...v, period: \"Q1-2024\"})),\n ...fix_cols(q2_2024).map(v => ({...v, period: \"Q2-2024\"})),\n ...fix_cols(q3_2024).map(v => ({...v, period: \"Q3-2024\"})),\n ...fix_cols(q4_2024).map(v => ({...v, period: \"Q4-2024\"}))\n ];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1756,"value":"// CHECK\ndata_allyrs.filter(d => d.period === \"Q2-2023\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1619,"value":"## View final input dataset","pinned":false,"hidden":false,"mode":"md"},{"id":438,"value":"data_allyrs","pinned":true,"hidden":false,"mode":"ojs"},{"id":2195,"value":"q1_2023_csv = FileAttachment(\"ontario_evs_by_fsa_2023-03-31_FIX.csv\").csv() // downloaded csv file in case API is not working","pinned":true,"hidden":false,"mode":"ojs"},{"id":419,"value":"q2_2023_csv = FileAttachment(\"evs_by_fsa_30-jun-2023_FIX.csv\").csv() // downloaded csv file in case API is not working","pinned":true,"hidden":false,"mode":"ojs"},{"id":1081,"value":"## 2. Secondary data sources\nDatasets obtained from sources external to the catalogue to assist in building the visualization.","pinned":false,"hidden":false,"mode":"md"},{"id":1084,"value":"### 2.1 GeoJSON file of FSA Regions\nCensus-based Ontario FSA regions from https://www12.statcan.gc.ca/census-recensement/2021/geo/sip-pis/boundary-limites/index2021-eng.cfm?year=21. Saved from shapefile to GeoJSON in QGIS with CRS = EPSG:4326 - WGS 84. \n\nTip: check GeoJSON file with Mike Bostock's GeoJSON Viewer: https://observablehq.com/@mbostock/geojson-viewer. ","pinned":false,"hidden":false,"mode":"md"},{"id":922,"value":"geoFsa = FileAttachment(\"ontario_fsa_EPSG3347_simplified_1000m_mapshaper.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1086,"value":"### 2.2 Coordinates of FSA centroids from QGIS\nNot currently used.","pinned":false,"hidden":false,"mode":"md"},{"id":395,"value":"centroids_fsa = FileAttachment(\"ontario_fsa_saved_as_EPSG4326_centroids_latlon.csv\").csv() //FileAttachment(\"centroids_ontario_fsa_with_coords_EPSG3347.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1552,"value":"# Data QA/QC\n","pinned":false,"hidden":false,"mode":"md"},{"id":2638,"value":"### Make column names the same\n**ONLY NEEDED FOR PROD:** \nIn 2023, label \"TotalEV\" becomes \"Total EV\". Change back for consistency.","pinned":false,"hidden":false,"mode":"md"},{"id":2683,"value":"fix_cols = function (o) {\n let o_fix = JSON.parse(JSON.stringify(o)); // deep copy original array\n o_fix.forEach(function(el) {\n el['TotalEV'] = el['Total EV'];\n delete el['Total EV'];\n})\n return o_fix;\n};\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":2183,"value":"q1_2023_fix = fix_cols(q1_2023);","pinned":true,"hidden":false,"mode":"ojs"},{"id":2694,"value":"q2_2023_fix = fix_cols(q2_2023);","pinned":true,"hidden":false,"mode":"ojs"},{"id":2764,"value":"q4_2023_fix = fix_cols(q4_2023);","pinned":true,"hidden":false,"mode":"ojs"},{"id":398,"value":"# Preprocess Data Layer","pinned":false,"hidden":false,"mode":"md"},{"id":129,"value":"# Settings","pinned":false,"hidden":false,"mode":"md"},{"id":31,"value":"# Plot settings","pinned":false,"hidden":false,"mode":"md"},{"id":33,"value":"height = 50","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"width = 50","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"# GeoJSON\nCensus-based Ontario FSA regions from https://www12.statcan.gc.ca/census-recensement/2021/geo/sip-pis/boundary-limites/index2021-eng.cfm?year=21. Saved from shapefile to GeoJSON in QGIS with CRS = EPSG:4326 - WGS 84. \n\nTip: check GeoJSON file with Mike Bostock's GeoJSON Viewer: https://observablehq.com/@mbostock/geojson-viewer. ","pinned":false,"hidden":false,"mode":"md"},{"id":585,"value":"w = 700","pinned":true,"hidden":false,"mode":"ojs"},{"id":588,"value":"h = 700","pinned":true,"hidden":false,"mode":"ojs"},{"id":582,"value":"projection = d3.geoIdentity()\n .reflectY(true)\n .fitWidth(w, mygeojson);\n//.fitExtent([0, h], [w, h], mygeojson);","pinned":true,"hidden":false,"mode":"ojs"},{"id":596,"value":"path = d3.geoPath().projection(projection); //d3.geoPath(projection);","pinned":true,"hidden":false,"mode":"ojs"},{"id":904,"value":"mygeojson = FileAttachment(\"census_lfsa_000b21a_ont_outline_saved_as_EPSG4326_geojson.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"mygeojson_orig_proj = FileAttachment(\"census_lfsa000b21a_e_ont_geojson_EP4326.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":326,"value":"{\n const svg = d3.select(DOM.svg(w, h));\n \n svg.append('path')\n .datum(mygeojson)\n .attr('d', path)\n .attr('stroke', '#093672')\n \t.attr('fill', 'none');\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":920,"value":"## FSA Regions GeoJSON","pinned":false,"hidden":false,"mode":"md"},{"id":1035,"value":"html`\n`","pinned":false,"hidden":false,"mode":"html"},{"id":981,"value":"// https://observablehq.com/@lnicoletti/choropleth\ncallout = (g, value) => {\n if (!value) return g.style(\"display\", \"none\");\n\n g\n .style(\"display\", null)\n .style(\"pointer-events\", \"none\")\n // .style(\"font\", \"10px sans-serif\");\n\n const path = g.selectAll(\"path\")\n .data([null])\n .join(\"path\")\n .attr(\"fill\", \"white\")\n .attr(\"stroke\", \"lightgrey\")\n .attr(\"stroke-width\", \"0.5px\");;\n\n const text = g.selectAll(\"text\")\n .data([null])\n .join(\"text\")\n .call(text => text\n .selectAll(\"tspan\")\n .data((value + \"\").split(/\\n/))\n .join(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"y\", (d, i) => `${i * 1.1}em`)\n .style(\"font-weight\", (_, i) => i ? null : \"bold\")\n .text(d => d));\n\n const {x, y, width: w, height: h} = text.node().getBBox();\n\n text.attr(\"transform\", `translate(${-w / 2},${15 - y})`);\n path.attr(\"d\", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"# TopoJSON","pinned":false,"hidden":false,"mode":"md"},{"id":119,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"usTopo = FileAttachment(\"census_lfsa000b21a_e_ont_geojson_EP4326_topojson.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":650,"value":"hex.grid","pinned":true,"hidden":false,"mode":"ojs"},{"id":186,"value":"usTopo.objects.census_lfsa000b21a_e_ont_geojson_EP4326","pinned":true,"hidden":false,"mode":"ojs"},{"id":192,"value":"usGeo = {\n const us = (await topojson.feature(usTopo, usTopo.objects.census_lfsa000b21a_e_ont_geojson_EP4326));\n us.features[0].geometry.coordinates = [us.features[0].geometry.coordinates[2]]\n return us\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":924,"value":"## FSA Regions TopoJSON","pinned":false,"hidden":false,"mode":"md"},{"id":926,"value":"topoFsa = FileAttachment(\"ontario_fsa_EPSG3347_simplified_1000m_mapshaper_topojson.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":933,"value":"topoFsa.objects.ontario_fsa_EPSG3347_simplified_1000m_mapshaper","pinned":true,"hidden":false,"mode":"ojs"},{"id":494,"value":"# Required Libraries","pinned":false,"hidden":false,"mode":"md"},{"id":131,"value":"d3 = require(\"d3@5\", \"d3-hexbin\", \"d3-hexgrid\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":603,"value":"// d3 = require(\n// 'd3-array',\n// 'd3-color',\n// 'd3-drag',\n// 'd3-ease',\n// 'd3-fetch',\n// 'd3-format',\n// 'd3-geo',\n// 'd3-hexbin',\n// 'd3-hexgrid',\n// 'd3-interpolate',\n// 'd3-scale',\n// 'd3-scale-chromatic',\n// 'd3-selection',\n// 'd3-shape',\n// 'd3-zoom'\n// )","pinned":true,"hidden":false,"mode":"ojs"},{"id":1106,"value":"import {legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1384,"value":"import {Scrubber} from \"@mbostock/scrubber\" // For animation Play button","pinned":true,"hidden":false,"mode":"ojs"},{"id":1655,"value":"import {addTooltips} from \"@mkfreeman/plot-tooltip\" // Choropleth tooltip, from https://observablehq.com/@observablehq/build-your-first-choropleth-map-with-observable-plot","pinned":true,"hidden":false,"mode":"ojs"},{"id":2614,"value":"Tooltip code from https://observablehq.com/@mkfreeman/plot-tooltip","pinned":false,"hidden":false,"mode":"md"},{"id":2611,"value":"// Function to position the tooltip\nhover = (tip, pos, text) => {\n const side_padding = 10;\n const vertical_padding = 5;\n const vertical_offset = 15;\n\n // Empty it out\n tip.selectAll(\"*\").remove();\n\n // Append the text\n tip\n .style(\"text-anchor\", \"middle\")\n .style(\"pointer-events\", \"none\")\n .attr(\"transform\", `translate(${pos[0]}, ${pos[1] + 7})`)\n .selectAll(\"text\")\n .data(text)\n .join(\"text\")\n .style(\"dominant-baseline\", \"ideographic\")\n .text((d) => d)\n .attr(\"y\", (d, i) => (i - (text.length - 1)) * 15 - vertical_offset)\n .style(\"font-weight\", (d, i) => (i === 0 ? \"bold\" : \"normal\"));\n\n const bbox = tip.node().getBBox();\n\n // Add a rectangle (as background)\n tip\n .append(\"rect\")\n .attr(\"y\", bbox.y - vertical_padding)\n .attr(\"x\", bbox.x - side_padding)\n .attr(\"width\", bbox.width + side_padding * 2)\n .attr(\"height\", bbox.height + vertical_padding * 2.5)\n .style(\"fill\", \"white\")\n .style(\"stroke\", \"#d3d3d3\")\n .lower();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2025,"value":"import {gridLayout} from \"@luciyer/grid-layout\" // https://observablehq.com/@luciyer/grid-layout","pinned":false,"hidden":false,"mode":"ojs"},{"id":2504,"value":"// Slider for Map Zoom Scale\n// https://observablehq.com/@uwdata/cartographic-visualization\nimport {slider} from '@jheer/dom-utilities' ","pinned":true,"hidden":false,"mode":"ojs"},{"id":2473,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":2475,"value":"viewof myscrubber = myScrubber(periods, {\n autoplay: false,\n loop: false,\n delay: 500,\n buttonText: \"Something\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1011,"value":"# Example ideas\n* stunning choropleth (R): [Switerland's regional income inequality](https://timogrossenbacher.ch/bivariate-maps-with-ggplot2-and-sf/)\n* [basic choropleth with tooltip](https://observablehq.com/@lnicoletti/choropleth)\n* [grid choropleth](https://observablehq.com/@observablehq/observable-plot-grid-choropleth) Need to supply grid layout\n* [grid layout](https://observablehq.com/@nyuvis/small-multiples) Creates a grid of rects\n* zoomable choropleth (d3js): https://observablehq.com/d/db260fb930c4c3a6\n\n\n* various [cartographic visualizations (observable)](https://observablehq.com/@uwdata/cartographic-visualization)\n\n* hexbin map: based on either a [map or as a 2D density scatterplot](https://www.data-to-viz.com/graph/hexbinmap.html)\n* hexbin map (R): [tesselated hexagons of US states](https://rud.is/b/2015/05/15/u-s-drought-monitoring-with-hexbin-state-maps-in-r/)","pinned":false,"hidden":false,"mode":"md"},{"id":1135,"value":"$34","pinned":false,"hidden":false,"mode":"md"},{"id":684,"value":"# Tests","pinned":false,"hidden":false,"mode":"md"},{"id":400,"value":"// Add coordinates to original dataset\ngeoData = {\n let geoData = JSON.parse(JSON.stringify(data_allyrs.filter(d => d.period === \"Q2-2023\"))) // deep copy original data objects\n \n geoData.forEach(function(datarow) {\n var result = centroids_fsa_lambert.filter(function(item) {\n return item.CFSAUID === datarow.FSA;\n });\n var isMatch = (result[0] !== undefined) ? result[0]['xcoord'] : null;\n datarow.xcoord = (result[0] !== undefined) ? result[0]['ycoord'] : null; // ****NB!!! make x = latitude\n datarow.ycoord = (result[0] !== undefined) ? result[0]['xcoord'] : null; // ****NB!!! make y = longitude\n if (isMatch === null) {\n console.log('isMatch:', datarow )\n }\n })\n\n // Remove rows that did not have a matching centroid\n geoData = geoData.filter(e => e.xcoord !== null); //rem = arr.filter(arr => arr.name != 'Harry');\n return geoData;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":769,"value":"centres_obj = centroids_fsa.map(function(d) {\n console.log('d: ', d)\n const allowed = ['xcoord', 'ycoord'];\n var filtered = Object.keys(d)\n .filter(key => allowed.includes(key))\n .reduce((obj, key) => {\n obj[key] = d[key];\n return obj;\n }, {});\n return filtered\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":803,"value":"centres = centres_obj.map(function(obj) {\n return Object.keys(obj).sort().map(function(key) { \n return obj[key];\n });\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":1404,"value":"## hexbin","pinned":false,"hidden":false,"mode":"md"},{"id":488,"value":"hexRadius = 5","pinned":true,"hidden":false,"mode":"ojs"},{"id":486,"value":"hexbin = d3.hexbin()\n .radius(hexRadius)\n .x(function(d) { return d.xcoord; })\n .y(function(d) { return d.ycoord; }) ","pinned":true,"hidden":false,"mode":"ojs"},{"id":842,"value":"hexbin.centers()","pinned":true,"hidden":false,"mode":"ojs"},{"id":514,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"{\n const w = 1296;\n const h = 432;\n const svg = d3.select(DOM.svg(w, h));\n const hexes = svg.append('g').attr('id', 'hexes')\n \t.selectAll('.hex')\n .data(junkhexPoints)\n //.data(hexPoints)\n .enter().append('path')\n .attr('class', 'hex')\n .attr('transform', function(d) { \n console.log('d.x: ', d.x)\n console.log('d.y: ', d.y)\n console.log('d.y - 200: ', d.y - 200)\n return 'translate(' + d[0].x + ', ' + d[0].y + ')'; }\n //return 'translate(' + 483 + ', ' + 200 + ')'; }\n //return 'translate(' + d.x - 6198177 + ', ' + 200 + ')'; } \n )\n .attr('d', hexbin.hexagon())\n .style('fill', 'none')\n .style('stroke', '#aaa')\n .style('stroke-width', 2);\n\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":498,"value":"hexPoints = hexbin(geoData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":610,"value":"{\n const w = 1296;\n const h = 432;\n const svg = d3.select(DOM.svg(w, h));\n const hexes = svg.append('g').attr('id', 'hexes')\n \t.selectAll('.hex')\n .data(hexPoints)\n .enter().append('path')\n .attr('class', 'hex')\n .attr('transform', function(d) { \n console.log('d: ', d)\n console.log('projection y: ', projection([d.y, d.x])[0])\n console.log('projection x: ', projection([d.y, d.x])[1])\n return 'translate(' + d.x + ', ' + d.y + ')'; }\n )\n .attr('d', hexbin.hexagon())\n .style('fill', 'none')\n .style('stroke', '#aaa')\n .style('stroke-width', 2);\n\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":689,"value":"## Plot.hexbin","pinned":false,"hidden":false,"mode":"md"},{"id":659,"value":"Plot.plot({\n width: 928,\n height: 928,\n inset: 10,\n x: { type: \"log\" },\n y: { type: \"log\" },\n color: {scheme: \"BuPu\", range: [0, 2]},\n marks: [\n Plot.hexagon(\n geoData,\n Plot.hexbin(\n {fill: \"count\"},\n {\n binWidth: 1,\n x: \"xcoord\",\n y: \"ycoord\",\n fill: \"#ccc\",\n stroke: \"#000\",\n strokeWidth: 0.75\n }\n )\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":691,"value":"## hexgrid","pinned":false,"hidden":false,"mode":"md"},{"id":836,"value":"mygeojson","pinned":true,"hidden":false,"mode":"ojs"},{"id":600,"value":"hexgrid = d3.hexgrid()\n .extent([w, h])\n//.extent([100, h])\n .geography(mygeojson)\n .projection(projection)\n .pathGenerator(path);","pinned":true,"hidden":false,"mode":"ojs"},{"id":648,"value":"hex = hexgrid(geoData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":864,"value":" hexgrid(centres).grid.layout","pinned":true,"hidden":false,"mode":"ojs"},{"id":830,"value":"hex.grid.layout","pinned":true,"hidden":false,"mode":"ojs"},{"id":653,"value":"{\n\tconst svg = DOM.svg(w, h)\n\n d3.select(svg).selectAll('path')\n\t\t.data(hex.grid.layout)\n\t\t.enter()\n\t\t.append('path')\n\t\t.attr('d', hex.hexagon())\n .attr('transform', d => `translate(${d.x} ${d.y})`)\n //.style('fill', d => !d.pointDensity ? '#fff' : marketColours(d.pointDensity))\n\t\t.style('stroke', '#ccc');\n \n return svg;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":873,"value":"hex.hexagon()","pinned":true,"hidden":false,"mode":"ojs"},{"id":877,"value":"hex_centres = hexgrid(centres)","pinned":true,"hidden":false,"mode":"ojs"},{"id":882,"value":"hex_centres.hexagon()","pinned":true,"hidden":false,"mode":"ojs"},{"id":887,"value":"hex_centres.extent()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1122,"value":"centroids_fsa","pinned":true,"hidden":false,"mode":"ojs"},{"id":1159,"value":"## Map with centroids overlay","pinned":false,"hidden":false,"mode":"md"},{"id":1128,"value":"centroids_fsa_lambert = FileAttachment(\"centroids_ontario_fsa_with_coords_EPSG3347.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1115,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":1148,"value":"Plot.plot({\n width: w,\n height: 700,\n // projection: {\n // type: \"identity\",\n // reflectY: true\n // },\n projection: d3.geoIdentity().reflectY(true).fitWidth(w/1.1, geoFsa),\n color: {\n legend: true,\n label: \"Opening year\"\n },\n marks: [\n Plot.geo(geoFsa),\n // //Plot.geo(statemesh, {strokeOpacity: 0.2}),\n // Plot.dot(walmarts, {x: \"longitude\", y: \"latitude\", stroke: \"date\", symbol: \"square\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1357,"value":"## Choropleth facets (small multiples)\nNote: maybe need to add the EV data into the geojson, e.g.https://observablehq.com/@markolalovic/interactive-choropleth-map:\n\n```\ncountries = {\n const countries = topojson.feature(topoJSONData, topoJSONData.objects.countries);\n const rowById = csvData.reduce((accumulator, d) => {\n accumulator[d.iso_n3] = d;\n return accumulator;\n }, {});\n countries.features.forEach(d => {\n Object.assign(d.properties, rowById[d.id]);\n });\n return countries;\n}\n```","pinned":false,"hidden":false,"mode":"md"},{"id":2236,"value":"tmpgeoFsa.features[0].properties.period","pinned":true,"hidden":false,"mode":"ojs"},{"id":1937,"value":"tmpgeoFsa = JSON.parse(JSON.stringify(geoFsa));","pinned":true,"hidden":false,"mode":"ojs"},{"id":1721,"value":"// Add EV data from data_allyrs to the GeoJSON properties object for each FSA\n{\n tmpgeoFsa.features.forEach(d => {\n let this_data = data_allyrs.find(el => el['FSA'] === d.properties.CFSAUID);\n if (this_data) { // there are some nulls\n d.properties.period = {};\n periods.forEach(p => {\n d.properties.period[p] = mapBEV.get(p).get(d.properties.CFSAUID);\n console.log('p: ', p)\n })\n } else {\n console.log('NULL!!!! ', d)\n }\n });\n return tmpgeoFsa;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1359,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":2251,"value":"periodMap.period","pinned":true,"hidden":false,"mode":"ojs"},{"id":2214,"value":"periodMap = {\n const o = {\n period: new Map(\n data_allyrs\n // create one [FSA, value] array for each period\n .map(d => ([\n d.period,\n // create one [FSA, value] array for each period\n new Map(data_allyrs.filter(e => (e.period === d.period)).map(({FSA, BEV}) => [FSA, BEV]))\n //new Map(data_allyrs.map(({FSA, BEV}) => [FSA, BEV]))\n ]))\n )\n }\n \n return o\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1285,"value":"mapBEV_byFSA = new Map(\n data_allyrs\n // create one [key, value] array for each FSA\n .map(d => ([\n d.FSA,\n // create one [key, value] array for each period\n new Map(data_allyrs.filter(e => (e.FSA === d.FSA)).map(({period, BEV}) => [period, BEV]))\n ]))\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1986,"value":"mapBEV = new Map(\n data_allyrs\n // create one [key, value] array for each FSA\n .map(d => ([\n d.period,\n // create one [key, value] array for each period\n new Map(data_allyrs.filter(e => (e.period === d.period)).map(({FSA, BEV}) => [FSA, BEV]))\n //new Map(data_allyrs.map(({FSA, BEV}) => [FSA, BEV]))\n ]))\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2031,"value":"### With grid layout\n`gridLayout(n_items, columns, margin, [top_left])`","pinned":false,"hidden":false,"mode":"md"},{"id":2049,"value":"h/5","pinned":true,"hidden":false,"mode":"ojs"},{"id":2033,"value":"$38","pinned":true,"hidden":false,"mode":"ojs"},{"id":2038,"value":"$39","pinned":true,"hidden":false,"mode":"ojs"},{"id":2502,"value":"viewof mapZoom = slider('Scale', 140, 50, 1000, 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2513,"value":"Plot.plot({\n width: w,\n height: 600,\n projection: d3.geoIdentity().reflectY(true).fitWidth(w/1.2, geoFsa), //.scale(1),\n\n marks: [\n Plot.geo(geoFsa, {\n fill: (d) => (\n data_allyrs.filter(e => (e.FSA === d.properties.CFSAUID && e.period === qperiod))[0] ? data_allyrs.filter(e => (e.FSA === d.properties.CFSAUID && e.period === qperiod)).map(function(d) {return d[evDict[evMenu]];}) : 0\n ),\n stroke: \"grey\",\n strokeWidth: 0.2 \n },\n \n ),\n ]\n })","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W3a","stdlib":"1","titling":"auto"}