30:T921,viewof mapChoropleth = mapboxD3({ features: depts.features, fill: (d) => { const c = d3.color(colorScale(+d.properties.properties_owned)); if (!c) return "#ccc"; c.opacity = 0.8; return c.formatRgb(); }, mapboxOptions: { center: [-121.5, 38.5], zoom: 7, style: "mapbox://styles/mapbox/light-v10", scrollZoom: true }, width, update: (map) => { if (!map.getSource("depts")) { map.addSource("depts", { type: "geojson", data: { type: "FeatureCollection", features: depts.features } }); // Choropleth polygons map.addLayer({ id: "choropleth-fill", type: "fill", source: "depts", paint: { "fill-color": [ "interpolate", ["linear"], ["get", "properties_owned"], 0, "#fee5d9", 500, "#fcae91", 1000, "#fb6a4a", 2000, "#de2d26", 5000, "#a50f15" ], "fill-opacity": 0.6 } }); // Polygon borders map.addLayer({ id: "choropleth-outline", type: "line", source: "depts", paint: { "line-color": "#888", "line-width": 1 } }); // Labels (must be added AFTER fill + outline to render on top) map.addLayer( { id: "labels", type: "symbol", source: "depts", layout: { "text-field": [ "format", ["get", "NAME"], { "font-scale": 1.2, "text-font": ["literal", ["Open Sans Bold"]] }, "\n", ["get", "properties_owned"], { "font-scale": 1.0 } ], "text-size": 12, "text-anchor": "center" }, paint: { "text-color": "#000000", "text-halo-color": "#ffffff", "text-halo-width": 1.2 } }, "choropleth-outline" // 👈 ensures labels are on top of both fill + outline ); } else { map .getSource("depts") .setData({ type: "FeatureCollection", features: depts.features }); } }, parentInvalidation: invalidation })31:T11eb,function* mapboxD3({ width = "full", height = 800, features = [], id = (d, i) => i, r = null, fill = null, stroke = "#777", mapboxOptions = { style: "mapbox://styles/mapbox/light-v10", scrollZoom: true }, container = html`

`, d3Background = null, delay = null, transitionDuration = 0, collide = false, alphaRestart = 0.3, parentInvalidation = invalidation, strokeWidth = 1, controls = false } = {}) { let selected = null, loaded = false; 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?.properties_owned)]) .range([0, 15]); _r = (d) => rScale(d?.properties?.properties_owned); } if (!fill) { colorScale = d3 .scaleSequential(d3.interpolateBlues) .domain([0, d3.max(features, (d) => d?.properties?.properties_owned)]); fill = (d) => colorScale(d?.properties?.properties_owned); } yield container; const map = (container.value = new mapboxgl.Map({ container, ...mapboxOptions })); const svg = d3 .select(container) .append("svg") .attr("class", "d3Mapbox") .style("position", "absolute") .style("top", 0) .style("left", 0) .attr("width", width) .attr("height", height) .style("background", d3Background) .style("pointer-events", "none"); let transform = d3.geoTransform({ point: function projectPoint(lon, lat) { let point = map.project(new mapboxgl.LngLat(lon, lat)); this.stream.point(point.x, point.y); } }); let path = d3.geoPath().projection(transform); // --- append dots first --- 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"); if (dots.nodes().length) { hoverObj = hover(dots, invalidation, { raise: false }); } return dots; }; dots = updateDots(features); // --- labels go in their own group appended LAST so they stay on top --- const labelGroup = svg.append("g").attr("class", "label-group"); const getTransition = () => transitionDuration || delay ? dots.transition().duration(transitionDuration).delay(delay) : dots; const update = () => { hoverObj && hoverObj.reset(); if (r) { let t = getTransition().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); // --- UPDATE LABELS --- const labels = labelGroup .selectAll("text") .data(features, id) .join("text") .attr("text-anchor", "middle") .attr("font-size", 12) .attr("x", (d) => path.centroid(d)[0]) .attr("y", (d) => path.centroid(d)[1] - (_r ? _r(d) + 2 : 0)) .each(function (d) { const sel = d3.select(this); sel.selectAll("tspan").remove(); // County name (bold) sel.append("tspan").text(d.properties.NAME).attr("font-weight", "bold"); sel.append("tspan").text(`: `); // Value (normal weight) sel .append("tspan") .text(d.properties.properties_owned) .attr("font-weight", "normal"); }); // make sure label group is always above circles labelGroup.raise(); if (!collide) { 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); } } }; map.on("viewreset", update); map.on("move", update); map.on("moveend", update); map.on("load", () => { loaded = true; update(); }); parentInvalidation.then(() => { map.off("viewreset", update); map.off("move", update); map.off("moveend", update); map.remove(); }); if (controls) map.addControl(new mapboxgl.NavigationControl()); map.dragRotate.disable(); map.touchZoomRotate.disableRotation(); update(); return container; }32: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; }33:Tb57,function addLegendAndLabels( view, features, { colorScale, rScale, labelField = "NAME", valueField = "properties_owned" } = {} ) { return (async () => { // wait until the mapboxD3 view has initialized and set .value while (!view.value || !view.value.loaded) { await new Promise((r) => setTimeout(r, 50)); } const v = view.value; const svg = v.dots.node().ownerSVGElement; const host = svg.parentNode; // the map container div // --- labels on the SVG --- let labels = svg.querySelector(".labels"); if (!labels) { labels = document.createElementNS(d3.namespaces.svg, "g"); labels.setAttribute("class", "labels"); svg.appendChild(labels); } const drawLabels = () => { labels.innerHTML = ""; features.forEach((f) => { const [x, y] = v.path.centroid(f); const t = document.createElementNS(d3.namespaces.svg, "text"); t.setAttribute("x", x); t.setAttribute("y", y); t.setAttribute("text-anchor", "middle"); t.setAttribute("font-size", "10px"); t.setAttribute("fill", "#333"); const name = f.properties?.[labelField] ?? ""; const val = +f.properties?.[valueField] || 0; t.textContent = `${name}: ${val.toLocaleString()}`; labels.appendChild(t); }); }; drawLabels(); // keep labels in the right place when the map moves/zooms v.map.on("move", drawLabels); v.map.on("moveend", drawLabels); // --- legend as an absolutely-positioned DIV over the map --- let legend = host.querySelector(".legend"); if (!legend) { legend = document.createElement("div"); legend.className = "legend"; Object.assign(legend.style, { position: "absolute", right: "12px", top: "12px", background: "rgba(255,255,255,0.9)", padding: "8px 10px", borderRadius: "6px", font: "12px/1.2 sans-serif", boxShadow: "0 1px 3px rgba(0,0,0,.2)", pointerEvents: "none" }); host.appendChild(legend); } const max = d3.max(features, (d) => +d.properties?.[valueField]) || 1; const ticks = d3.ticks(0, max, 4); legend.innerHTML = `

Properties owned

` + ticks .map((v) => { const col = d3.color(colorScale(v)); col.opacity = 0.6; return `

${v.toLocaleString()}

`; }) .join(""); return { labels, legend }; })(); }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":"4bf1f217df325cacbe726ef9105c9ec834ab35c5504ce7f963edb382c6208e6ad9e69a2c8a5f8cca40db8877f5760d22a4bbda0d79c36c81ed3147aaeb66ce61","href":"https://static.observableusercontent.com/files/4bf1f217df325cacbe726ef9105c9ec834ab35c5504ce7f963edb382c6208e6ad9e69a2c8a5f8cca40db8877f5760d22a4bbda0d79c36c81ed3147aaeb66ce61","name":"atlanta_with_properties_filtered.geojson","type":"application/geo+json","lastModified":1755318094153.153,"size":6162894},{"id":"1edac014d7996768dda8ccd53e7652236840aa56544f5dc18d47cd8bcb63f10474a894b2cd20a528bf8231fbca6859d5faf1cc6ab5fea34f236174522b73eb6f","href":"https://static.observableusercontent.com/files/1edac014d7996768dda8ccd53e7652236840aa56544f5dc18d47cd8bcb63f10474a894b2cd20a528bf8231fbca6859d5faf1cc6ab5fea34f236174522b73eb6f","name":"norcal.geojson","type":"application/geo+json","lastModified":1755541187665.67,"size":3293022},{"id":"1edac014d7996768dda8ccd53e7652236840aa56544f5dc18d47cd8bcb63f10474a894b2cd20a528bf8231fbca6859d5faf1cc6ab5fea34f236174522b73eb6f","href":"https://static.observableusercontent.com/files/1edac014d7996768dda8ccd53e7652236840aa56544f5dc18d47cd8bcb63f10474a894b2cd20a528bf8231fbca6859d5faf1cc6ab5fea34f236174522b73eb6f","name":"output.geojson","type":"application/geo+json","lastModified":1755546344568.21,"size":3293022},{"id":"e03a0e55cdd64431369a1fc112a074f48f3396cc68a5d182e05d060daa0f20eca20b3d6a12cda312efcf43b6337c7017d45e60046acc7ccebf234a7fe6aa97e9","href":"https://static.observableusercontent.com/files/e03a0e55cdd64431369a1fc112a074f48f3396cc68a5d182e05d060daa0f20eca20b3d6a12cda312efcf43b6337c7017d45e60046acc7ccebf234a7fe6aa97e9","name":"output (1).geojson","type":"application/geo+json","lastModified":1755546554303.254,"size":2860000}] 2e:{"title":"Roofstock Portfolio Team Visualization Tool Test","cells":[{"id":0,"value":"# Roofstock Portfolio Team Visualization Tool Test\n\nAuthor: Chad Vo\n\n## Credit\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)","pinned":false,"hidden":false,"mode":"md"},{"id":442,"value":"viewof map = mapboxD3({\n features: depts.features,\n fill: (d) => {\n const c = d3.color(colorScale(+d.properties.properties_owned));\n if (!c) return \"#ccc\";\n c.opacity = 0.9;\n return c.formatRgb();\n },\n stroke: \"none\",\n width,\n mapboxOptions: {\n center: [-84.388, 33.749],\n zoom: 8,\n style: \"mapbox://styles/mapbox/light-v10\",\n scrollZoom: true\n },\n r: (d) => rScale(+d.properties.properties_owned),\n update: (map) => {\n const svg = map.dots.node().ownerSVGElement;\n const svgSel = d3.select(svg);\n\n svgSel\n .selectAll(\"text.feature-label\")\n .data(depts.features, (d, i) => i)\n .join(\"text\")\n .attr(\"class\", \"feature-label\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-size\", 10)\n .attr(\"fill\", \"#000\")\n .attr(\"x\", (d) => map.projection(d.geometry.coordinates)[0])\n .attr(\"y\", (d) => map.projection(d.geometry.coordinates)[1])\n .text((d) => d.properties.properties_owned);\n },\n parentInvalidation: invalidation\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":924,"value":"import { Legend } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":927,"value":"legend = Legend(colorScale, {\n title: \"Top Owners Properties Owned\",\n tickFormat: d3.format(\",\")\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":334,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":573,"value":"A map that will update the radius after it has been drawn","pinned":false,"hidden":false,"mode":"md"},{"id":570,"value":"viewof mapUpdate = mapboxD3({\n features: depts.features,\n fill: (d) => colorScale(+d.properties.properties_owned),\n\n width,\n mapboxOptions: {\n center: [-84.388, 33.749], // Atlanta center [lon, lat]\n zoom: 8, // zoom in on metro area\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"},{"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"},{"id":680,"value":"## With collisions","pinned":false,"hidden":false,"mode":"md"},{"id":609,"value":"viewof mapForces = mapboxD3({\n features: depts.features.map((d) => ({ ...d })), // keep all properties\n fill: (d) => colorScale(+d.properties.properties_owned), // use properties_owned\n\n width,\n mapboxOptions: {\n center: [-84.388, 33.749], // Atlanta center [lon, lat]\n zoom: 8, // zoom in on metro area\n style: \"mapbox://styles/mapbox/light-v10\",\n scrollZoom: true\n },\n r: (d) => rScale(+d.properties.properties_owned), // radius by properties_owned\n collide: true,\n parentInvalidation: invalidation\n})","pinned":true,"hidden":false,"mode":"ojs"},{"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.propertieproperties_owned);\n mapForces.update();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":406,"value":"/*depts = {\n const depts = await FileAttachment(\n FileAttachment(\"atlanta_with_properties_filtered.geojson\").json();)\n return topojson.feature(depts, depts.objects.MGN_ANM_DPTOS);\n}*/\ndepts = await FileAttachment(\"output (1).geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":471,"value":"rScale = d3\n .scaleSqrt()\n .domain([0, d3.max(depts.features, (d) => +d.properties.properties_owned)])\n .range([0, 30])","pinned":true,"hidden":false,"mode":"ojs"},{"id":490,"value":"colorScale = d3\n .scaleSequential(d3.interpolateBlues)\n .domain([0, d3.max(depts.features, (d) => +d.properties.properties_owned)])","pinned":true,"hidden":false,"mode":"ojs"},{"id":319,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":595,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":410,"value":"topojson = require(\"topojson-server@3\", \"topojson-simplify@3\", \"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":933,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":328,"value":"tippytheme = \"light\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":498,"value":"link","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"mutable hovered = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"md`## Experiments: Mapbox with Vega-lite`","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"import {vl} from '@vega/vega-lite-api'\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":11,"value":"d3 = require(\"d3@7\", \"d3-geo-projection\")","pinned":false,"hidden":false,"mode":"ojs"},{"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"}],"files":"$W35","stdlib":"1","titling":"auto"}