3e:null 3f:["$","title",null,{"children":"US Cities by Population | Chris Sabb | Observable"}] 45:Td1f,{ // generic svg declaration let w = 900; let h = 530; let svg = d3 .create("svg") .attr("viewBox", [0, 0, w, h]) .attr("width", "100%") .style("max-width", `${w}px`) .on("click", reset); // geographic projection of the United States using D3's stateShapes let proj = d3.geoAlbersUsa().fitSize([w, h], stateShapes); let path = d3.geoPath().projection(proj); // stateShapes specific pathing // create and append map let map = svg.append("g"); let state_group = map.append("g"); state_group .selectAll("path.state") .data(stateShapes.features) .join("path") .attr("d", path) .attr("fill", "lightgray") .attr("stroke-width", "1") .attr("stroke", "#fff") .on("click", clicked); // coordinates of United States cities using D3's usCities let cities = usCities .filter((o) => o.population > min_population) .filter((o) => proj([o.longitude, o.latitude])); cities.forEach(function (o) { let [x, y] = proj([o.longitude, o.latitude]); o.x = x; o.y = y; }); let max = d3.max(cities.map((o) => o.population)); let circle_group = map.append("g"); circle_group .selectAll("circle.city") .data(cities) .join("circle") .attr("cx", (o) => o.x) .attr("cy", (o) => o.y) .attr("r", (o) => 12 * (o.population / max) ** 0.5) .attr("fill", "steelblue") .attr("fill-opacity", 0.5) .attr("stroke-width", 1) .attr("stroke", "steelblue") .on("pointerenter", function () { d3.select(this).attr("stroke", "black"); d3.select(this).attr("stroke-width", 2); }) .on("pointerleave", function () { d3.select(this).attr("stroke", "steelblue"); d3.select(this).attr("stroke-width", 1); }) .each(function (d) { let city = d.name; let state = state_abbrev.get(d.state); let population = d.population.toLocaleString("en-US"); tippy(this, { content: `

County: ${city}, ${state}

Population: ${population}

`, allowHTML: true, theme: "light-border" }); }); // Code below borrowed from Mike Bostock's "Zoom to Bounding Box" // https://observablehq.com/@d3/zoom-to-bounding-box const zoom = d3.zoom().scaleExtent([1, 8]).on("zoom", zoomed); function reset() { state_group.transition().style("fill", null); svg .transition() .duration(750) .call( zoom.transform, d3.zoomIdentity, d3.zoomTransform(svg.node()).invert([width / 2, h / 2]) ); } function clicked(event, d) { const [[x0, y0], [x1, y1]] = path.bounds(d); event.stopPropagation(); state_group.transition().style("fill", null); d3.select(this).transition(); svg .transition() .duration(750) .call( zoom.transform, d3.zoomIdentity .translate(width / 2, h / 2) .scale(Math.min(8, 0.9 / Math.max((x1 - x0) / width, (y1 - y0) / h))) .translate(-(x0 + x1) / 2, -(y0 + y1) / 2), d3.pointer(event, svg.node()) ); } function zoomed(event) { const { transform } = event; map.attr("transform", transform); map.attr("stroke-width", 1 / transform.k); } return svg.node(); }46:T50c,state_abbrev = { const abbrevs = new Map([ ["Alabama", "AL"], ["Alaska", "AK"], ["Arizona", "AZ"], ["Arkansas", "AR"], ["California", "CA"], ["Colorado", "CO"], ["Connecticut", "CT"], ["Delaware", "DE"], ["Florida", "FL"], ["Georgia", "GA"], ["Hawaii", "HI"], ["Idaho", "ID"], ["Illinois", "IL"], ["Indiana", "IN"], ["Iowa", "IA"], ["Kansas", "KS"], ["Kentucky", "KY"], ["Louisiana", "LA"], ["Maine", "ME"], ["Maryland", "MD"], ["Massachusetts", "MA"], ["Michigan", "MI"], ["Minnesota", "MN"], ["Mississippi", "MS"], ["Missouri", "MO"], ["Montana", "MT"], ["Nebraska", "NE"], ["Nevada", "NV"], ["New Hampshire", "NH"], ["New Jersey", "NJ"], ["New Mexico", "NM"], ["New York", "NY"], ["North Carolina", "NC"], ["North Dakota", "ND"], ["Ohio", "OH"], ["Oklahoma", "OK"], ["Oregon", "OR"], ["Pennsylvania", "PA"], ["Rhode Island", "RI"], ["South Carolina", "SC"], ["South Dakota", "SD"], ["Tennessee", "TN"], ["Texas", "TX"], ["Utah", "UT"], ["Vermont", "VT"], ["Virginia", "VA"], ["Washington", "WA"], ["West Virginia", "WV"], ["Wisconsin", "WI"], ["Wyoming", "WY"] ]); return abbrevs; }47:[] 43:{"id":"cef09a3b954bb323","slug":null,"title":"US Cities by Population","thumbnail":"ccee4c9496981ea623a0bacc5f4cbb65ed9b2fe0b197b4f5a6b3c58203fb5d52","access_level":"public","create_time":"$D2023-07-08T04:24:04.823Z","update_time":"$D2023-07-08T04:33:36.895Z","view_time":null,"first_public_time":"$D2023-07-08T04:24:04.823Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"d3b145490e6bde7c","login":"real-csabb","name":"Chris Sabb","avatar_url":"https://avatars-next.observableusercontent.com/12a6cc7102572f5a4ead1fba23d54d2ae89f9cabc8a5b1c7154fead63e01d287","tier":"starter_2024","bio":"CS & Stats student at UNC Asheville. Graduating May 2024 & pursuing data or machine learning engineering. I like big data viz.","following":false},"version":48,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2264c79b680a4ed7","login":"real-csabb","name":"Chris Sabb","avatar_url":"https://avatars-next.observableusercontent.com/12a6cc7102572f5a4ead1fba23d54d2ae89f9cabc8a5b1c7154fead63e01d287","tier":null,"bio":"CS & Stats student at UNC Asheville. Graduating May 2024 & pursuing data or machine learning engineering. I like big data viz.","following":false}],"members":[{"type":"individual","id":"2264c79b680a4ed7","login":"real-csabb","name":"Chris Sabb","avatar_url":"https://avatars-next.observableusercontent.com/12a6cc7102572f5a4ead1fba23d54d2ae89f9cabc8a5b1c7154fead63e01d287","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"US Cities by Population","cells":[{"id":0,"value":"# US Cities by Population","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"viewof min_population = Inputs.range([1000, 1000000], {\n value: 1000,\n step: 1000,\n label: \"Specify Minimum Population\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"import { reset, clicked, zoomed } from \"@d3/zoom-to-bounding-box\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"import { usCities } from \"@observablehq/us-county-datasets\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"import { stateShapes } from \"@observablehq/us-county-datasets\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"tippy = require(\"tippy.js@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 44:"$43:body"