2c:null 2d:["$","title",null,{"children":"Mapbox D3 | John Alexis Guerra Gómez | Observable"}] 32:T1916,function* mapboxD3({ width = 900, height = 600, features = [], // geoJSON features to draw id = (d, i) => i, r = null, // If not null, must be a function that returns the radius in pixels given the datum fill = null, // If not null, must be a function that returns the color given the datum stroke = "#777", mapboxOptions = { style: "mapbox://styles/mapbox/light-v10", scrollZoom: true }, container = html`

`, // where to draw d3Background = null, delay = null, transitionDuration = 0, collide = false, alphaRestart = 0.3, // Alpha to set before restarting if using simulation collide = true parentInvalidation = invalidation, strokeWidth = 1, controls = false // Should display zooming controls } = {}) { let selected = null, // clicked element loaded = false; // has mapbox finished loading let rScale = null, colorScale = null, _r = r, simulation = null, hoverObj; let dots; if (!r) { rScale = d3 .scaleSqrt() .domain([0, d3.max(features, (d) => d?.properties?.value)]) .range([0, 15]); _r = (d) => rScale(d?.properties?.value); } if (!fill) { colorScale = colorScale || d3 .scaleSequential(d3.interpolateInferno) .domain([0, d3.max(features, (d) => d?.properties?.value)]); fill = (d) => colorScale(d?.properties?.value); } yield container; // Give the container dimensions. const map = (container.value = new mapboxgl.Map({ container, ...mapboxOptions })); // Setup our svg layer that we can manipulate with d3 const bb = container.getBoundingClientRect(); const svg = d3 .select(container) .append("svg") .attr("class", "d3Mapbox") .style("position", "absolute") .style("top", 0) .style("left", 0) // .attr("width", bb.width) // .attr("height", bb.height) .attr("width", width) .attr("height", height) .style("background", d3Background) .style("pointer-events", "none"); // the svg shouldn't capture mouse events, so we can have pan and zoom from mapbox //Project any point to map's current state function projectPoint(lon, lat) { let point = map.project(new mapboxgl.LngLat(lon, lat)); this.stream.point(point.x, point.y); } //Projection function let transform = d3.geoTransform({ point: projectPoint }); let path = d3.geoPath().projection(transform); svg.append("style").text(` circle.highlight { stroke: red; } `); const updateDots = (features) => { const dots = svg .selectAll(".feature") .data(features, id) .join(r ? "circle" : "path") .attr("class", "feature") .attr("stroke", stroke) .attr("stroke-width", strokeWidth) .on("click", (evt, d) => (selected = d)) .style("pointer-events", "all"); // hello-tippy needs nodes if (dots.nodes().length) { hoverObj = hover(dots, invalidation, { raise: false }); } return dots; }; dots = updateDots(features); const getTransition = () => { let t = dots; if (transitionDuration || delay) { t = t.transition().duration(transitionDuration).delay(delay); } return t; }; const update = () => { hoverObj && hoverObj.reset(); if (r) { let t = getTransition(); t.attr("r", _r); if (collide) { features.forEach((d) => (d.foci = path.centroid(d))); simulation.nodes(features); simulation.alpha(alphaRestart).restart(); } else { t.attr("cx", (d) => path.centroid(d)[0]).attr( "cy", (d) => path.centroid(d)[1] ); } } else { dots.attr("d", path); } dots.attr("fill", fill); dots.attr("stroke", stroke); }; // Positioning if (collide) { // Position nodes via simulation; features.forEach((d) => (d.foci = path.centroid(d))); simulation = Simulation(features, { clone: false, x: (d) => d?.foci[0], y: (d) => d?.foci[1], r, parentInvalidation, tick: () => { getTransition() .attr("r", _r) .attr("cx", (d) => d.x) .attr("cy", (d) => d.y); } }); } else { //position nodes manually; if (r) { dots .attr("r", _r) .attr("cx", (d) => path.centroid(d)[0]) .attr("cy", (d) => path.centroid(d)[1]); } else { dots.attr("d", path); } } // Parameters to return function set() { container.value = { transform, path, map, dots, hoverObj, selected, loaded, update, simulation, set r(_) { rScale = null; _r = _; if (collide) simulation.updateForces({ newR: _r }); }, get r() { return r; }, set fill(_) { colorScale = null; fill = _; }, get fill() { return fill; }, set rScale(_) { rScale = _; if (collide) simulation.nodes(features); }, get rScale() { return rScale; }, set colorScale(_) { colorScale = _; }, get colorScale() { return colorScale; }, set delay(_) { delay = _; }, get delay() { return delay; }, set features(_) { features = _; dots = updateDots(features); }, set width(_) { width = _; svg.attr("width", width).attr("height", height); }, set height(_) { height = _; svg.attr("width", width).attr("height", height); } }; container.dispatchEvent(new Event("input", { bubbles: true })); } if (!map) return; // Every time the map changes, update the dots map.on("viewreset", update); map.on("move", update); map.on("moveend", update); map.on("load", () => { loaded = true; set(); }); parentInvalidation.then(() => { map.off("viewreset", update); map.off("move", update); map.off("moveend", update); map.remove(); }); if (controls) { // Add zoom and rotation controls to the map. map.addControl(new mapboxgl.NavigationControl()); } // disable map rotation using right click + drag map.dragRotate.disable(); // disable map rotation using touch rotation gesture map.touchZoomRotate.disableRotation(); update(); set(); return container; }33:T43f,function Simulation( data, { warmup = 200, strengthY = 0.3, strengthX = 0.3, r = () => 3, tick = () => {}, x = () => 0, y = () => 0, clone = true, parentInvalidation } = {} ) { // return Generators.observe((notify) => { const nodes = clone ? [...data.map((d) => ({ ...d }))] : data; const simulation = d3.forceSimulation(nodes); // To be able to update the forces simulation.updateForces = ({ newX = x, newY = y, newR = r } = {}) => { x = newX; y = newY; r = newR; simulation .force("x", d3.forceX(x).strength(strengthX)) .force("y", d3.forceY(y).strength(strengthY)) .force("collide", d3.forceCollide(r)); }; simulation.updateForces(x, y, r); if (warmup) { simulation.stop(); for (let i = 0; i < warmup; i++) { simulation.tick(); } } simulation.restart(); simulation.on("tick", () => { // notify(nodes); // console.log(nodes[0]); tick(nodes); }); // notify(nodes); parentInvalidation.then(() => simulation.stop()); // }); return simulation; }34:Ta1c,viewof mapVegaLite = { const container = html`

`; yield container; // Give the container dimensions. const mapboxContainer = container.querySelector("#mapbox"); const vegaLiteContainer = container.querySelector("#vegaLite"); const map = (container.value = new mapboxgl.Map({ container: mapboxContainer, // Bogotá 4.7110° N, 74.0721° W center: [-74.0721, 4.711], zoom: 10, style: "mapbox://styles/jguerrag/cjuerw13z2vja1fndc9wzk7eo", scrollZoom: true })); // //Project any point to map's current state // function projectPoint() { // function forward(lon, lat) { // console.log("project", lon, lat); // const point = map.project(new mapboxgl.LngLat(lon, lat)); // // this.stream.point(point.x, point.y); // console.log(lon, lat, " -> ", [point.x, point.y]); // return [point.x, point.y]; // } // forward.invert = (x, y) => { // return [x, y]; // }; // return forward; // } // const p = d3.geoProjectionMutator(projectPoint)(); //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 }); const fakeProjection = (args) => { const p = transform; p.fitSize = () => {}; return p; }; vl.vega.projection("mapbox", fakeProjection); // Setup our svg layer that we can manipulate with d3 function update() { vl.markGeoshape({ fill: "steelblue", stroke: "#706545", strokeWidth: 0.5 }) .project(vl.projection("mapbox")) // .data(d3.geoProject(votingStations, transform).features) .data(votingStations.features) .config({ background: null }) .width(width) .height(container.getBoundingClientRect().height) .render() .then((view) => { vegaLiteContainer.innerHTML = ""; vegaLiteContainer.appendChild(view); }); } // Every time the map changes, update the dots map.on("viewreset", update); map.on("move", update); map.on("moveend", update); invalidation.then(() => { map.off("viewreset", update); map.off("move", update); map.off("moveend", update); map.remove(); }); update(); }35:[{"id":"0d0cd1d9bcf5a58da387b76c4e2e968ee2f58ef6483ea89304d53e5e445f55889ed1c9fa7345a0caf3cda6d3f5f59734064616979060e975c5697a1d46e0ecd8","href":"https://static.observableusercontent.com/files/0d0cd1d9bcf5a58da387b76c4e2e968ee2f58ef6483ea89304d53e5e445f55889ed1c9fa7345a0caf3cda6d3f5f59734064616979060e975c5697a1d46e0ecd8","name":"Colombia_departamentos_municipios_poblacion-topov2_simplifiedmapshaer_simpler.json","type":"application/json","lastModified":1654544651750.801,"size":773047}] 30:{"id":"37e242fa08c17468","slug":"mapbox-d3","title":"Mapbox D3","thumbnail":"cd8edf9614cbad17c2b5e652485dc2faecbd722ff475278f8565999889b8abd5","access_level":"public","create_time":"$D2019-04-12T14:36:24.238Z","update_time":"$D2023-04-11T23:11:39.705Z","view_time":null,"first_public_time":"$D2019-04-12T14:50:26.207Z","has_unpublished_edits":null,"fork":false,"stars":35,"starred":false,"owner":{"type":"team","id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":"starter_2024","bio":"I love to build dataviz for insight discovery. I also love to put technology to the service of humanity"},"version":815,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null,"bio":"I love to build dataviz for insight discovery. I also love to put technology to the service of humanity"}],"members":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null,"role":"editor"}],"comments":[{"id":"c53fb41e78af3fe7","reply_to_id":null,"content":"The Map is not displayed, could you please fix? Probably updating the MapBox version?","create_time":"$D2020-08-06T12:35:05.980Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d99d00db12b2ab97","login":"realsergii","name":"Sergii Dumyk","avatar_url":"https://avatars-next.observableusercontent.com/7c766e9045f054ec943904a165de01ce775ee5595e8c52f324862090d1b7c4c1","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":32,"collection":{"id":"ca26c91c9da0932e","slug":"visualizing-geo-maps","title":"Visualizing GEO / Maps","owner":{"id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez"}},"type":"notebook","body":{"titling":"auto","title":"Mapbox D3","cells":[{"id":0,"value":"# Mapbox D3\n\nA simple utility for combining d3 maps and MapBoxgl. Creates a svg on top of the mapbox layer that is controlled by D3. Then it uses a custom projection to connect both, letting Mapbox handle zoom and panning and reflecting the corresponding changes in D3.\n\n## Usage\n\n```js\nimport {mapboxD3} from \"@john-guerra/mapbox-d3\"\n```\n\nthen load your geoJSON features\n\n```js\nviewof map = mapboxD3({features})\n```\n\n\nFor the old demo check [@318](https://observablehq.com/@john-guerra/mapbox-d3@318)\n\nCC [@git-ashish](https://bl.ocks.org/git-ashish/55ae93f7c487c69d92004cf58451a9f6), [@enjalot](http://bl.ocks.org/enjalot/0d87f32a1ccb9a720d29ba74142ba365) blocks, [@mbostock notebook](https://observablehq.com/@mbostock/mapbox-fly-to)\n\n## Example\n\nColombia Departments by population","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":442,"value":"viewof map = mapboxD3({\n features: depts.features,\n fill: (d) => colorScale(+d.properties.STP27_PERS),\n\n width,\n mapboxOptions: {\n center: [-74.0721, 4.711],\n zoom: 4,\n style: \"mapbox://styles/mapbox/light-v10\",\n scrollZoom: true\n },\n r: (d) => rScale(+d.properties.STP27_PERS),\n parentInvalidation: invalidation\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"viewof mapChoropleth = mapboxD3({\n features: depts.features,\n fill: (d) => colorScale(+d.properties.STP27_PERS),\n mapboxOptions: {\n center: [-74.0721, 4.711],\n zoom: 4,\n style: \"mapbox://styles/mapbox/light-v10\",\n scrollZoom: true\n },\n width,\n parentInvalidation: invalidation\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"A map that will update the radius after it has been drawn","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":570,"value":"viewof mapUpdate = mapboxD3({\n features: depts.features,\n fill: (d) => colorScale(+d.properties.STP27_PERS),\n\n width,\n mapboxOptions: {\n center: [-74.0721, 4.711],\n zoom: 4,\n style: \"mapbox://styles/mapbox/light-v10\",\n scrollZoom: true\n },\n r: () => 30,\n delay: (_, i) => i * 10,\n parentInvalidation: invalidation\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":571,"value":"{\n await visibility();\n mapUpdate.r = (d) => rScale(+d.properties.STP27_PERS);\n mapUpdate.update();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"## With collisions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":609,"value":"viewof mapForces = mapboxD3({\n features: depts.features.map((d) => ({ ...d })),\n fill: (d) => colorScale(+d.properties.STP27_PERS),\n\n width,\n mapboxOptions: {\n center: [-74.0721, 4.711],\n zoom: 4,\n style: \"mapbox://styles/mapbox/light-v10\",\n scrollZoom: true\n },\n r: () => 10,\n // delay: (_, i) => i * 10,\n collide: true,\n parentInvalidation: invalidation\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":730,"value":"{\n // a little hack to show how to change the chart\n await visibility();\n mapForces.r = (d, i) => rScale(+d.properties.STP27_PERS);\n mapForces.update();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":650,"value":"depts.features[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"depts = {\n const depts = await FileAttachment(\n \"Colombia_departamentos_municipios_poblacion-topov2_simplifiedmapshaer_simpler.json\"\n ).json();\n return topojson.feature(depts, depts.objects.MGN_ANM_DPTOS);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"rScale = d3\n .scaleSqrt()\n .domain([0, d3.max(depts.features, (d) => +d.properties.STP27_PERS)])\n .range([0, 30])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"colorScale = d3\n .scaleSequential(d3.interpolateBlues)\n .domain([0, d3.max(depts.features, (d) => +d.properties.STP27_PERS)])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"topojson = require(\"topojson-server@3\", \"topojson-simplify@3\", \"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"function tipcontent(_d) {\n const d = _d.properties;\n return htl.html`\n ${Object.keys(d).map((c) => htl.html`

${c}: ${d[c]}

`)}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"import { hover, link } with { tipcontent, tippytheme } from \"@fil/hello-tippy\"\n// import { hover, link } with { tipcontent, tippytheme } from \"01649316c88b8149\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"tippytheme = \"light\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"link","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"mutable hovered = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"md`## Experiments: Mapbox with Vega-lite`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"import {vl} from '@vega/vega-lite-api'\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"vl.markCircle()\n .data(votingStations.features)\n .encode(\n vl.latitude().fieldQ(\"geometry.coordinates[1]\"),\n vl.longitude().fieldQ(\"geometry.coordinates[0]\")\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"vl\n .markGeoshape({ fill: 'steelblue', stroke: '#706545', strokeWidth: 0.5 })\n .project(vl.projection('mercator'))\n .data(votingStations.features)\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"votingStations = d3.json(\"https://gist.githubusercontent.com/john-guerra/c9c14729b8d15b2884d358fa9e368013/raw/d0a1bd65c926623869d62a64d9acd9cecd59d502/Puesto_Votacion_2018.geojson\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"d3 = require(\"d3@7\", \"d3-geo-projection\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl\");\n if (!gl.accessToken) {\n gl.accessToken =\n \"pk.eyJ1Ijoiamd1ZXJyYWciLCJhIjoiY2pueW9uMGhzMDA3NDN3bXp5b2Rqbzk1YiJ9.3scgV-j4d394mvOUqtz1XQ\";\n const href = await require.resolve(\"mapbox-gl/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 31:"$30:body"