2b:null 2c:["$","title",null,{"children":"D3 map + Leaflet: circles | Yuanjie (Tukey) Tu | Observable"}] 31:T112e,presentMap = { let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield container; let map = L.map(container).setView([53.2527, -123.1207], 5).fitBounds(L.geoJson(stations).getBounds()); let CartoDB_Positron = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}{r}.png', { attribution: '© OpenStreetMap | © CartoDB', maxZoom: 20 }).addTo(map); //initialize svg to add to map L.svg({clickable: true}).addTo(map) const svg = d3.select(map.getPanes().overlayPane) .select('svg') .attr("pointer-events", "auto") const tooltip = svg.append("g").style("display", "none") const path = tooltip.append("path") const text = tooltip.append("text") const Dots = svg.selectAll('circle') .attr("class", "Dots") .data(stations2020.features) .join('circle') .attr("id", "dotties") .attr("fill", "yellow") //Leaflet has to take control of projecting points. Here we are feeding the latitude and longitude coordinates to //leaflet so that it can project them on the coordinates of the view. Notice, we have to reverse lat and lon. //Finally, the returned conversion produces an x and y point. We have to select the the desired one using .x or .y .attr("cx", d => map.latLngToLayerPoint([d.geometry.coordinates[1],d.geometry.coordinates[0]]).x) .attr("cy", d => map.latLngToLayerPoint([d.geometry.coordinates[1],d.geometry.coordinates[0]]).y) .attr("r", 5) .attr("stroke", "black") .attr("opacity", 0.8) .on('mouseover', function(e, d) { //function to add mouseover event const [xm, ym] = d3.pointer(e) d3.select(this).transition() //D3 selects the object we have moused over in order to perform operations on it .duration('150') //how long we are transitioning between the two states (works like keyframes) .ease(d3.easeBounce) .attr("fill", "red") //change the fill .attr('r', 15) //change radius // tooltip tooltip .transition() .duration(200) .style("display", null) tooltip.attr("transform", `translate(${xm - 4},${ym + 3})`); path.attr("fill", "white").attr("stroke", "black"); const textLabel = d.properties["Station Name"] text .text(textLabel) .attr("font-size", 10) size(text, path) }) .on('mouseout', function() { //reverse the action based on when we mouse off the the circle d3.select(this).transition() .duration('150') .ease(d3.easeBounce) .attr("fill", "yellow") .attr('r', 5) tooltip .style("display", "none") }) // Wraps the text with a callout path of the correct size, as measured in the page. function size(text, path) { const {x, y, width: w, height: h} = text.node().getBBox(); text.attr("transform", `translate(${-w / 2},${15 - y})`); path.attr("d", `M${-w / 2 - 10}, 5H-5l5, -5l5, 5H${w / 2 + 10}v${h + 20}h-${w + 20}z`); } const update = () => Dots .attr("cx", d => map.latLngToLayerPoint([d.geometry.coordinates[1],d.geometry.coordinates[0]]).x) .attr("cy", d => map.latLngToLayerPoint([d.geometry.coordinates[1],d.geometry.coordinates[0]]).y) map.on("zoomend", update) }32:T5cc,map = { // You'll often see Leaflet examples initializing a map like L.map('map'), // which tells the library to look for a div with the id 'map' on the page. // In Observable, we instead create a div from scratch in this cell (called "map") let container = DOM.element('div', {style: `width:${width}px;height:${width/1.6}px`}) // This component utilizes "yield" which pauses the execution of this code block // returns the value of container back to the notebook which allows the // div to be placed on the page. This is important, because Leaflet uses // the div's .offsetWidth and .offsetHeight (used to get current size of the div) // to size the map. If I were to only return the container at the end of this method, // Leaflet might get the wrong idea about the map's size. yield container // Now we create a map object and add a layer to it. let map = L.map(container).setView([37.4357395, -122.1378595], 12); // initializes the map, sets zoom & coordinates let CartoDB_Positron = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}{r}.png', { attribution: '© OpenStreetMap | © CartoDB', maxZoom: 20 }).addTo(map); //This adds the tile layer to the map. The map dynamically loads tiles based on current view the experience smooth and seamless. Make sure to add attribution to your map. }33:T910,circles = { //define our map size const height = 400 // This is a Observables specific convenience method which creates an SVG in the DOM. const svg = d3.select(DOM.svg(width, height)) //projection this projects out points into space and fits the viewport based on const projection = d3.geoMercator().fitExtent([[50,50], [width-50, height-50]], stations2020) ; const label = svg .append("text") .attr("display", "none") const points = svg.selectAll('circle')//Selects all circles (haven't been created yet, I know its confusing) .data(stations2020.features) //loads the data we need - In this case our flat array of objects of features .join('circle') //creates a circle for each element in the array .attr("fill", "steelblue") // colors it blue .attr("cx", d => projection(d.geometry.coordinates)[0]) // forEach element takes the coordinates and *projects* .attr("cy", d => projection(d.geometry.coordinates)[1]) // then we index this array for the long(x) and lat(y) .attr("r", 5) //radius of the circle .attr("opacity", "0.5") .on('mouseover', function(e, d) { //function to add mouseover event const [xm, ym] = d3.pointer(e) d3.select(this).transition() //D3 selects the object we have moused over in order to perform operations on it .duration('150') //how long we are transitioning between the two states (works like keyframes) .attr("fill", "red") //change the fill .attr('r', 10) //change radius const labelText = d.properties["Station Name"] label .attr("display", null) .attr("font-size", 15) .attr("font-weight", "bold") .style("opacity", 1) .attr("transform", `translate(${xm}, ${ym})`) .attr("dx", 12) .attr("dy", -9) .text(d => labelText) }) .on('mouseout', function() { //reverse the action based on when we mouse off the the circle d3.select(this).transition() .duration('150') .attr("fill", "steelblue") .attr('r', 5) label .attr("display", "none") }) return svg.node(); }34:Td58,overlayMap = { let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield container; let map = L.map(container).setView([53.2527, -123.1207], 5).fitBounds(L.geoJson(stations).getBounds()); let CartoDB_Positron = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}{r}.png', { attribution: '© OpenStreetMap | © CartoDB', maxZoom: 20 }).addTo(map); const svg = d3.select(map.getPanes().overlayPane) .append("svg") .style("position", "relative") const g = svg .append("g") .attr("class", "leaflet-zoom-hide") const label = g .append("text") .attr("display", "none") const Dots = g.selectAll('circle') .attr("class", "Dots") .data(stations2020.features) .join('circle') .attr("id", "dotties") .attr("fill", "steelblue") //Leaflet has to take control of projecting points. Here we are feeding the latitude and longitude coordinates to //leaflet so that it can project them on the coordinates of the view. Notice, we have to reverse lat and lon. //Finally, the returned conversion produces an x and y point. We have to select the the desired one using .x or .y .attr("cx", d => map.latLngToLayerPoint([d.geometry.coordinates[1],d.geometry.coordinates[0]]).x) .attr("cy", d => map.latLngToLayerPoint([d.geometry.coordinates[1],d.geometry.coordinates[0]]).y) .attr("r", 5) .attr("opacity", 0.5) .on('mouseover', function(e, d) { //function to add mouseover event const [xm, ym] = d3.pointer(e) d3.select(this).transition() //D3 selects the object we have moused over in order to perform operations on it .duration('150') //how long we are transitioning between the two states (works like keyframes) .attr("fill", "red") //change the fill .attr('r', 10) //change radius const labelText = d.properties["Station Name"] label .attr("display", null) .attr("font-size", 15) .attr("font-weight", "bold") .style("opacity", 1) .attr("transform", `translate(${xm}, ${ym})`) .attr("dx", 12) .attr("dy", -9) .text(d => labelText) }) .on('mouseout', function() { //reverse the action based on when we mouse off the the circle d3.select(this).transition() .duration('150') .attr("fill", "steelblue") .attr('r', 5) label .attr("display", "none") }) }35:Teb9,zoomMap = { let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield container; let map = L.map(container).setView([53.2527, -123.1207], 5).fitBounds(L.geoJson(stations).getBounds()); let CartoDB_Positron = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}{r}.png', { attribution: '© OpenStreetMap | © CartoDB', maxZoom: 20 }).addTo(map); //initialize svg to add to map L.svg().addTo(map) const svg = d3.select(map.getPanes().overlayPane) .select('svg') const label = svg .append("text") .attr("display", "none") const Dots = svg.selectAll('circle') .attr("class", "Dots") .data(stations2020.features) .join('circle') .attr("id", "dotties") .attr("fill", "steelblue") //Leaflet has to take control of projecting points. Here we are feeding the latitude and longitude coordinates to //leaflet so that it can project them on the coordinates of the view. Notice, we have to reverse lat and lon. //Finally, the returned conversion produces an x and y point. We have to select the the desired one using .x or .y .attr("cx", d => map.latLngToLayerPoint([d.geometry.coordinates[1],d.geometry.coordinates[0]]).x) .attr("cy", d => map.latLngToLayerPoint([d.geometry.coordinates[1],d.geometry.coordinates[0]]).y) .attr("r", 5) .attr("stroke", "black") .attr("opacity", 0.5) .on('mouseover', function(e, d) { //function to add mouseover event const [xm, ym] = d3.pointer(e) d3.select(this).transition() //D3 selects the object we have moused over in order to perform operations on it .duration('150') //how long we are transitioning between the two states (works like keyframes) .attr("fill", "red") //change the fill .attr('r', 10) //change radius const labelText = d.properties["Station Name"] label .attr("display", null) .attr("font-size", 15) .attr("font-weight", "bold") .style("opacity", 1) .attr("transform", `translate(${xm}, ${ym})`) .attr("dx", 12) .attr("dy", -9) .text(d => labelText) }) .on('mouseout', function() { //reverse the action based on when we mouse off the the circle d3.select(this).transition() .duration('150') .attr("fill", "steelblue") .attr('r', 5) label .attr("display", "none") }) const update = () => Dots .attr("cx", d => map.latLngToLayerPoint([d.geometry.coordinates[1],d.geometry.coordinates[0]]).x) .attr("cy", d => map.latLngToLayerPoint([d.geometry.coordinates[1],d.geometry.coordinates[0]]).y) map.on("zoomend", update) }36:T10d3,interactionMap = { let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield container; let map = L.map(container).setView([53.2527, -123.1207], 5).fitBounds(L.geoJson(stations).getBounds()); let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); //initialize svg to add to map L.svg({clickable: true}).addTo(map) const svg = d3.select(map.getPanes().overlayPane) .select('svg') .attr("pointer-events", "auto") const tooltip = svg.append("g").style("display", "none") const path = tooltip.append("path") const text = tooltip.append("text") const Dots = svg.selectAll('circle') .attr("class", "Dots") .data(stations2020.features) .join('circle') .attr("id", "dotties") .attr("fill", "yellow") //Leaflet has to take control of projecting points. Here we are feeding the latitude and longitude coordinates to //leaflet so that it can project them on the coordinates of the view. Notice, we have to reverse lat and lon. //Finally, the returned conversion produces an x and y point. We have to select the the desired one using .x or .y .attr("cx", d => map.latLngToLayerPoint([d.geometry.coordinates[1],d.geometry.coordinates[0]]).x) .attr("cy", d => map.latLngToLayerPoint([d.geometry.coordinates[1],d.geometry.coordinates[0]]).y) .attr("r", 5) .attr("stroke", "black") .attr("opacity", 0.8) .on('mouseover', function(e, d) { //function to add mouseover event const [xm, ym] = d3.pointer(e) d3.select(this).transition() //D3 selects the object we have moused over in order to perform operations on it .duration('150') //how long we are transitioning between the two states (works like keyframes) .ease(d3.easeBounce) .attr("fill", "red") //change the fill .attr('r', 15) //change radius // tooltip tooltip .transition() .duration(200) .style("display", null) tooltip.attr("transform", `translate(${xm - 4},${ym + 3})`); path.attr("fill", "white").attr("stroke", "black"); const textLabel = d.properties["Station Name"] text .text(textLabel) .attr("font-size", 10) size(text, path) }) .on('mouseout', function() { //reverse the action based on when we mouse off the the circle d3.select(this).transition() .duration('150') .ease(d3.easeBounce) .attr("fill", "yellow") .attr('r', 5) tooltip .style("display", "none") }) // Wraps the text with a callout path of the correct size, as measured in the page. function size(text, path) { const {x, y, width: w, height: h} = text.node().getBBox(); text.attr("transform", `translate(${-w / 2},${15 - y})`); path.attr("d", `M${-w / 2 - 10}, 5H-5l5, -5l5, 5H${w / 2 + 10}v${h + 20}h-${w + 20}z`); } const update = () => Dots .attr("cx", d => map.latLngToLayerPoint([d.geometry.coordinates[1],d.geometry.coordinates[0]]).x) .attr("cy", d => map.latLngToLayerPoint([d.geometry.coordinates[1],d.geometry.coordinates[0]]).y) map.on("zoomend", update) }37:[{"id":"911bed6c8c6870e2a507914692d4b93c2486327d22c8b6da4304e9a83042a04dd466c1fa5dc4d14e07170e27a3bf20b259156b80a6141f355df093f36b647e1b","href":"https://static.observableusercontent.com/files/911bed6c8c6870e2a507914692d4b93c2486327d22c8b6da4304e9a83042a04dd466c1fa5dc4d14e07170e27a3bf20b259156b80a6141f355df093f36b647e1b","name":"stations.geojson","type":"application/geo+json","lastModified":1712599212792.423,"size":61808},{"id":"499713f5af8af8853813abb23c8070eb3133c21dd407f462a360142ee637c8127ddb21445ffb639a6974bf2082eb27c34260fe184e7f2884cca834fbb2f05476","href":"https://static.observableusercontent.com/files/499713f5af8af8853813abb23c8070eb3133c21dd407f462a360142ee637c8127ddb21445ffb639a6974bf2082eb27c34260fe184e7f2884cca834fbb2f05476","name":"chargingStationLocations2011_2020@1.csv","type":"text/csv","lastModified":1712617153654.219,"size":12777}] 2f:{"id":"7fa8f70646470328","slug":null,"title":"D3 map + Leaflet: circles","thumbnail":"8efe64c90cf80c576604b1bdb9d3545f17e8eb9d454a69d3cb85b593f2b36f39","access_level":"public","create_time":"$D2024-04-08T17:34:09.096Z","update_time":"$D2024-04-09T04:59:40.661Z","view_time":null,"first_public_time":"$D2024-04-08T23:55:22.951Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"38d64ae7e708b9b5","login":"yuanjt2","name":"Yuanjie (Tukey) Tu","avatar_url":"https://avatars-next.observableusercontent.com/34bc1666f6489c9f64e21f0c1ce4779151877d75c3f3c3f065e58f6a9bd14f0e","tier":"starter_2024"},"version":244,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"450fe71eaac7001f","login":"yuanjt2","name":"Yuanjie (Tukey) Tu","avatar_url":"https://avatars-next.observableusercontent.com/ea52f9066051a7ecd9e98037b8a1e1c0cf765011b054117f0758a83f8e870f29","tier":null}],"members":[{"type":"individual","id":"450fe71eaac7001f","login":"yuanjt2","name":"Yuanjie (Tukey) Tu","avatar_url":"https://avatars-next.observableusercontent.com/ea52f9066051a7ecd9e98037b8a1e1c0cf765011b054117f0758a83f8e870f29","tier":null,"role":"editor"},{"type":"team","id":"38d64ae7e708b9b5","login":"yuanjt2","name":"Yuanjie (Tukey) Tu","avatar_url":"https://avatars-next.observableusercontent.com/34bc1666f6489c9f64e21f0c1ce4779151877d75c3f3c3f065e58f6a9bd14f0e","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"8feacd2f2ece2457","slug":"intro-to-d3","title":"Intro to D3","owner":{"id":"38d64ae7e708b9b5","login":"yuanjt2","name":"Yuanjie (Tukey) Tu"}},"type":"notebook","body":{"title":"D3 map + Leaflet: circles","cells":[{"id":0,"value":"# D3 map + Leaflet: circles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":119,"value":"_This tutorial is part of the [Intro to D3 Collection](https://observablehq.com/collection/@yuanjt2/intro-to-d3)_.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":121,"value":"md`Sometimes we'd like to overlay the openstreetmap with our D3 map. In that case we can use the Leaflet library. The final visualization looks like below. Our example is electric vehicle charging stations map in Palo Alto, California - you can hover over the electric charging stations, drag, and zoom in and out.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"## Import Leaflet","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"L = {\n const L = await require(\"leaflet@1/dist/leaflet.js\")\n if (!L._style) {\n const href = await require.resolve(\"leaflet@1/dist/leaflet.css\")\n document.head.appendChild(L._style = html``)\n }\n return L\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"## Load data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":213,"value":"md`Now we import our data - in this tutorial, we are using the electric vehicle (EV) charging behavior dataset from Palo Alto from 2011 to 2020, and we are going to visualize the location of EV charging stations.\n\n**Note: Leaflet only allows the use of GeoJSON, not TopoJSON!**\n\nWe can use an external tool [MapShaper](https://mapshaper.org/) to convert .csv, TopoJSON to GeoJSON data format.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"stations = FileAttachment(\"stations.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"stations2011 = geo.filter(stations, d => d.StartYear === 2011)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"stations2020 = geo.filter(stations, d => d.StartYear === 2020)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"## Draw base map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":226,"value":"Next, let's add the base openstreetmap as a base map.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"## Draw EV charging station map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":228,"value":"Then, we could try plotting our EV charging stations in 2020.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"## overlay SVG elements","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":230,"value":"Next, we need to overlay our EV charging stations on the base map we created.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":159,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"But, we noticed one glitch that as we zoom in, the charging station locations do not update.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":157,"value":"## Set zoom consistency","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":232,"value":"In this part, we will need to set zoom consistency so that the EV charging station locations change consistently as we zoom in and out the map.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"## Add interactions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":238,"value":"Finally, we are going to add some interactions!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":191,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"## Reference\n* [Filter (geojson)](https://observablehq.com/@neocartocnrs/filter-geojson), Nicolas Lambert, 2023\n* [Leaflet API reference](https://leafletjs.com/reference.html)\n* [Introduction to leaflet and D3](https://observablehq.com/@sfu-iat355/introduction-to-leaflet-and-d3), IAT355, 2019\n* [Intro to Leaflet + d3 + interactivity](https://observablehq.com/@sfu-iat355/intro-to-leaflet-d3-interactivity), IAT355, 2019","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":125,"value":"import {toc} from \"@jonfroehlich/collapsible-toc\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"import {textcolor} from \"@observablehq/text-color-annotations-in-markdown\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"geo = require(\"geotoolbox@2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 30:"$2f:body"