2f:T12d3,map = { // Set up the clusters let clustered = new Supercluster(); let index = clustered.load(cities); // Width and height for the map on screen let w = 900; let h = 530; // Geographic bounds for the map. let geo_bbox0 = [-125, 24, -66.5, 50]; let corners = { type: "FeatureCollection", features: [ { type: "Feature", geometry: { type: "Point", coordinates: [geo_bbox0[0], geo_bbox0[1]] } }, { type: "Feature", geometry: { type: "Point", coordinates: [geo_bbox0[2], geo_bbox0[3]] } } ] }; // Set up the container and SVG let div = d3.create("div"); let mapNode = div.node(); let svg = div.append("svg").attr("viewBox", [0, 0, w, h]); let proj = d3.geoMercator().fitSize([w, h], corners); let path = d3.geoPath().projection(proj); // Expose some properties of the map container mapNode.transform = { k: 1, x: 0, y: 0 }; mapNode.update_circles = update_circles; mapNode.add_tooltips = add_tooltips; mapNode.cluster = true; // Add the states let map = svg.append("g"); let state_group = map.append("g"); state_group .attr("fill", "lightgray") .attr("stroke-width", 1.5) .attr("stroke", "#fff") .selectAll("path.state") .data(states.features) .join("path") .attr("d", path); // Add a group to container the circles and then // set them to their initial state. let circle_group = map.append("g"); update_circles({ k: 1, x: 0, y: 0 }, mapNode.cluster); // Add tooltips to the circles. // This will happen on zoom as well, so we'll need to keep // track of them to destroy them when appropriate. let tips = []; add_tooltips(); // Set the zoom behavior svg.call( d3 .zoom() .extent([ [0, 0], [w, h] ]) .translateExtent([ [0, 0], [w, h] ]) .scaleExtent([1, 20]) .duration(500) .on("zoom", function (evt) { update_circles(evt.transform, mapNode.cluster); mapNode.transform = evt.transform; state_group.attr("stroke-width", 1.5 / evt.transform.k); }) .on("end", function (evt) { update_circles(evt.transform, mapNode.cluster); add_tooltips(); mapNode.transform = evt.transform; }) .on("start", () => tips.forEach((tip) => tip.destroy())) ); // Return the map. return mapNode; // Auxiliary functions function update_circles(transform, cluster) { let data, zScale; if (cluster) { zScale = Math.floor(Math.log2(transform.k)); data = index.getClusters(geo_bbox(transform), zScale + 3); } else { data = cities; } circle_group.selectAll("circle").remove(); circle_group .selectAll("circle") .data(data) .join("circle") .attr("class", (o) => (o.properties.cluster ? "cluster" : "city")) .attr("cx", (o) => proj(o.geometry.coordinates)[0]) .attr("cy", (o) => proj(o.geometry.coordinates)[1]) .attr("r", (o) => o.properties.cluster ? 100 * (o.properties.point_count / (cities.length * transform.k)) ** 0.5 : 2 / transform.k ) .attr("fill", (o) => (o.properties.cluster ? "#83a6de" : "1c3661")) .attr("stroke-width", 1 / transform.k) .attr("stroke", "steelblue"); map.attr("transform", transform); } function add_tooltips() { tips.forEach((tip) => tip.destroy()); circle_group.selectAll("circle").each(function (d) { let tip = tippy(this, { content: tip_content(d), theme: "light-border", allowHTML: true }); tips.push(tip); }); } function tip_content(cluster_or_city) { if (cluster_or_city.properties.cluster) { let cities = index.getLeaves(cluster_or_city.id, Infinity); let states = d3.sort( Array.from(new Set(cities.map((o) => o.properties.RegionName))) ); return `

Cluster with ${cities.length} cities in ${ states.length == 1 ? `${states[0]}

` : `the following states:

${s}

` }`; } else { return `

${cluster_or_city.properties.Name}, ${cluster_or_city.properties.RegionName}

`; } } function geo_bbox(transform) { let lower_left_x = -transform.x / transform.k; let lower_left_y = (h - transform.y) / transform.k; let upper_right_x = (w - transform.x) / transform.k; let upper_right_y = -transform.y / transform.k; let lower_left = [lower_left_x, lower_left_y]; let upper_right = [upper_right_x, upper_right_y]; let geo_lower_left = proj.invert(lower_left); let geo_upper_right = proj.invert(upper_right); return [...geo_lower_left, ...geo_upper_right]; } }30:Tc4d,auto_zoom_map = { // Set up the clusters let clustered = new Supercluster(); let index = clustered.load(cities); // Width and height for the map on screen let w = 900; let h = 530; // Geographic bounds for the map. let geo_bbox0 = [-125, 24, -66.5, 50]; let corners = { type: "FeatureCollection", features: [ { type: "Feature", geometry: { type: "Point", coordinates: [geo_bbox0[0], geo_bbox0[1]] } }, { type: "Feature", geometry: { type: "Point", coordinates: [geo_bbox0[2], geo_bbox0[3]] } } ] }; // Set up the container and SVG let div = d3.create("div"); let svg = div.append("svg").attr("viewBox", [0, 0, w, h]); let proj = d3.geoMercator().fitSize([w, h], corners); let path = d3.geoPath().projection(proj); // Add the states let map = svg.append("g").attr("stroke-width", 1.5); let state_group = map.append("g"); state_group .attr("fill", "lightgray") .attr("stroke", "#fff") .selectAll("path.state") .data(states.features) .join("path") .attr("d", path); let circle_group = map.append("g"); update_circles(0); map .append("path") .attr( "d", d3.line()([ [559.174, 367.202], [765.596, 367.202], [765.596, 245.642], [559.174, 245.642], [559.174, 367.202] ]) ) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 2); // Return the map. div.node().zoom = zoom; return div.node(); // Auxiliary functions function update_circles(in_or_out) { let zScale = in_or_out % 2 ? 5 : 3; let transform = in_or_out % 2 ? { k: 4.36, x: -2438, y: -1071 } : { k: 1, x: 0, y: 0 }; let data = index.getClusters(geo_bbox(transform, proj), zScale); circle_group.selectAll("circle").remove(); circle_group .selectAll("circle") .data(data) .join("circle") .attr("class", (o) => (o.properties.cluster ? "cluster" : "city")) .attr("cx", (o) => proj(o.geometry.coordinates)[0]) .attr("cy", (o) => proj(o.geometry.coordinates)[1]) .attr("r", (o) => o.properties.cluster ? (4 * Math.log(o.properties.point_count)) / transform.k ** 0.7 : 2 / transform.k ) .attr("fill", (o) => (o.properties.cluster ? "#83a6de" : "1c3661")) .attr("stroke-width", 1 / transform.k) .attr("stroke", "steelblue"); } async function zoom(in_or_out) { if (in_or_out % 2) { await map .attr("transform", "translate(0,0) scale(1)") .attr("stroke-width", 1.5) .transition() .duration(750) .attr("transform", "translate(-2438, -1071) scale(4.36)") .attr("stroke-width", 1.5 / 4.36) .end(); update_circles(1); } else if (in_or_out > 0) { await map .attr("transform", "translate(-2438, -1071) scale(4.36)") .attr("stroke-width", 1.5 / 4.36) .transition() .duration(750) .attr("transform", "translate(0,0) scale(1)") .attr("stroke-width", 1.5) .end(); update_circles(0); } } }31:[{"id":"c5077641d18b1516ec73cf6b909e6a15bf2580317ad2f393101a748c75390a03755a81303528a5bac690dd9e7e9c0c9b2fc0418936614ae1656cfcca7f5dd356","href":"https://static.observableusercontent.com/files/c5077641d18b1516ec73cf6b909e6a15bf2580317ad2f393101a748c75390a03755a81303528a5bac690dd9e7e9c0c9b2fc0418936614ae1656cfcca7f5dd356","name":"cities5000.csv","type":"text/csv","lastModified":1697833114517.149,"size":387423},{"id":"b2ae3fc49c8446327367d5e152260d86cd2229fe1e167ebf88dcc0265dc6214795b2fa4d99527499fe1d68ac1e8fab0a4fbd88ece54e0c6c484e1930614cc623","href":"https://static.observableusercontent.com/files/b2ae3fc49c8446327367d5e152260d86cd2229fe1e167ebf88dcc0265dc6214795b2fa4d99527499fe1d68ac1e8fab0a4fbd88ece54e0c6c484e1930614cc623","name":"contiguous_states.json","type":"application/json","lastModified":1697833114517.149,"size":128429}] 2d:{"title":"D3 Supercluster Map","cells":[{"id":0,"value":"# D3 Supercluster Map\n\nSupercluster is a Javascript library for clustering geographic points. While it was developed by the Mapbox team for use in their product, they've released as an open source library for standalone use - as you can see on [it's Github page](https://github.com/mapbox/supercluster). \n\nThis notebook applies Supercluster to the 7255 cities in the contiguous US with a population of at least 5,000 for display in a thematic map generated by D3. The clusters appear as the larger, lighter blue circles. The smaller, darker blue circles are individual cities. You can zoom in to the map using standard gestures, like a double tap or a zoom wheel. Every time the zoom factor doubles, the clusters should be redrawn. You can get information both the clusters and the cities via toolips.","pinned":false,"hidden":false,"mode":"md"},{"id":361,"value":"cluster_switch = {\n let cluster_toggle = Inputs.toggle({ label: \"Cluster!\", value: true });\n cluster_toggle.oninput = function () {\n map.update_circles(map.transform, cluster_toggle.value);\n map.add_tooltips();\n map.cluster = cluster_toggle.value;\n };\n return cluster_toggle;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":629,"value":"## Comments\n\nThere are a few other notebooks here on Observable that use Supercluster. They mostly use a slippy map library, like Leaflet or Openlayers, to emulate what Mapbox can do. I think that [this notebook](https://observablehq.com/@pierreleripoll/hello-supercluster) is particularly good. It uses `d3.tile` to fetch CartoDB tiles and builds a slippy map from scratch. \n\nThe current notebook, though, is the only one I know of that uses Supercluster to plot points on an SVG map built with D3.","pinned":false,"hidden":false,"mode":"md"},{"id":800,"value":"### Setup\n\nWe can `require` Supercluster from UNPKG:","pinned":false,"hidden":false,"mode":"md"},{"id":48,"value":"Supercluster = require(\"https://unpkg.com/supercluster@8.0.1/dist/supercluster.min.js\")\n\n// We could also import from esm.run:\n// Supercluster = (await import(\"https://esm.run/supercluster\")).default","pinned":true,"hidden":false,"mode":"ojs"},{"id":673,"value":"We can now instantiate a new Supercluster object and use it to \"index\" a large number of points - in this case, the 7255 cities in the contiguous US with a population of at least 5,000. Note that this input must be an array of GeoJSON points.","pinned":false,"hidden":false,"mode":"md"},{"id":648,"value":"index = {\n let clustered = new Supercluster(); // There are a few options\n let index = clustered.load(cities);\n return index;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":688,"value":"### Generating clusters\n\nUsing this index to get clusters is pretty easy. We simply specify a geographic bounding box of the form\n\n [lon_min, lat_min, lon_max, lat_max]\n\ntogether with a zoom level and pass that to `index.getClusters`. Note that the zoom level corresponds to how a zoom level might work on most slippy maps. Thus, a zoom level of zero or one corresponds to a view of the whole world; if we zoom in by the factor two, then we increment the zoom level. Thus, an increase of the zoom level from 1 to 4 magnifies by the factor ${tex`2^{4-1}=8`}. The larger the zoom level, the finer the granularity of the resulting clusters.\n\nIn the following block of code, the `bbox` and `zoom_level` are reasonable choices for the contiguous US.","pinned":false,"hidden":false,"mode":"md"},{"id":653,"value":"clusters = {\n let bbox = [-125, 24, -66.5, 50];\n let zoom_level = 3;\n return index.getClusters(bbox, zoom_level);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":707,"value":"The result is a list of objects that come in two types: \n\n- clusters (created by Supercluster) and\n- cities (objects from the original dataset).\n\nThe clusters are identified by their `o.properties.cluster` property. Thus, we can easily separate these:","pinned":false,"hidden":false,"mode":"md"},{"id":680,"value":"clusters_and_cities = d3.group(clusters, (o) => o.properties.cluster)","pinned":true,"hidden":false,"mode":"ojs"},{"id":711,"value":"### Responding to zoom\n\nThe only tricky part is computing the appropriate `zoom_level` and `bbox` as we zoom in to the map. To do so, we need to understand how `d3.zoom` specifies an SVG transform and how to relate that to the zoom level and bounding box that Supercluster expects.\n\nFor an SVG map, zoom is accomplished by specifying the map's `transform` attribute. This is a string that might look something like so:\n\n \"translate(-2438, -1071) scale(4.36)\"\n\nThat particular transform first scales the map up by the factor 4.36 about the origin, which is the upper, left corner of the map. It then shifts the map 2438 pixels to the left and then 1071 pixels up (since the the y-axis is oriented downward). The result is that the rectangle outlined in the figure below maps to the viewport, which is 900 by 530 as specified by the SVG's `viewBox` attribute. You can see this in action by hitting the \"Zoom in or out\" button below.","pinned":false,"hidden":false,"mode":"md"},{"id":745,"value":"viewof in_or_out = Inputs.button(\"Zoom in or out\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":713,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":895,"value":"Now, to apply `index.getClusters`, we need to go the other way. That is, given the transform, we need to know the corners of the smaller rectangle. This is accomplished by applying the *inverse* of the transform. Then, we'll apply the inverse of the map projection to get the bounding box in geographic coordinates of longitude and latitude.\n\nThis is all accomplished in the following `geo_bbox` function:","pinned":false,"hidden":false,"mode":"md"},{"id":720,"value":"function geo_bbox(transform, cylindrical_proj) {\n // Width and height, as specified by the SVG's viewBox\n let w = 900;\n let h = 530;\n\n // Apply the inverse of the transform to obtain the\n // corners of the rectangle in pixels.\n let lower_left_x = -transform.x / transform.k;\n let lower_left_y = (h - transform.y) / transform.k;\n let upper_right_x = (w - transform.x) / transform.k;\n let upper_right_y = -transform.y / transform.k;\n let lower_left = [lower_left_x, lower_left_y];\n let upper_right = [upper_right_x, upper_right_y];\n\n // Aply the inverse of the projection to obtain\n // the geographic coordinates of the corners.\n let geo_lower_left = cylindrical_proj.invert(lower_left);\n let geo_upper_right = cylindrical_proj.invert(upper_right);\n return [...geo_lower_left, ...geo_upper_right];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":952,"value":"Note that this process is simplified by the fact that we're dealing with a [cylindrical map projection](https://en.wikipedia.org/wiki/Map_projection#Cylindrical) - Mercator's projection, in particular. It would be a bit more complicated if you're using a more general map projection.","pinned":false,"hidden":false,"mode":"md"},{"id":622,"value":"## Data, imports, and other code","pinned":false,"hidden":false,"mode":"md"},{"id":757,"value":"auto_zoom_map.zoom(in_or_out)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"// The city data is stored as a CSV file.\n// We've got to read that file and convert the resulting array of\n// objects to a valid array of GeoJSON points.\n\ncities = {\n let cities = await FileAttachment(\"cities5000.csv\").csv({ typed: true });\n cities = cities.filter(\n (c) => c.RegionName != \"Alaska\" && c.RegionName != \"Hawaii\"\n );\n cities = cities.map((c) => ({\n type: \"Feature\",\n properties: { ...c },\n geometry: { type: \"Point\", coordinates: [c.Longitude, c.Latitude] }\n }));\n return cities;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"states = {\n let states = await FileAttachment(\"contiguous_states.json\").json();\n return topojson.feature(states, states.objects.contiguous_states);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":541,"value":"tippy_style = html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":539,"value":"tippy = require(\"tippy.js@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}