32:T568,chart = { const svg = d3.select(DOM.svg(mapWidth, mapHeight)); svg .append("g") .selectAll(".county") .data(state_counties.features) .join("path") .attr("class", "county") .attr("fill", mapFillColor) .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("d", path); const legend = svg .append("g") .attr("fill", "#777") .attr("transform", `translate(${mapWidth - 50},${mapHeight - 2})`) .attr("text-anchor", "middle") .style("font", `10px ${font}`) .selectAll("g") .data(legendValues.split(",").map(d => +d)) .join("g"); legend .append("circle") .attr("fill", "none") .attr("stroke", "#ccc") .attr("cy", d => -radius(d)) .attr("r", radius); legend .append("text") .attr("y", d => -2 * radius(d)) .attr("dy", "1.3em") .text(d => d.toLocaleString()); svg .append("g") .attr("fill", circleFill) .attr("fill-opacity", circleFillOpacity) .attr("stroke", circleStrokeColor) .attr("stroke-width", circleStrokeWidth) .selectAll("circle") .data(mapData) .join("circle") .attr("transform", d => `translate(${state_counties_centroids.get(d.id)})`) .attr("r", d => radius(d.value)) .append("title") .text( d => `${state_counties_names.get(d.id)} County: ${formatNumber(d.value)}` ); return svg.node(); }33:[] 30:{"title":"Plug-and-Play Bubble Map: Individual Counties in U.S. States","cells":[{"id":0,"value":"md`# Plug-and-Play Bubble Map: Individual Counties in U.S. States\n\nThis notebook tweaks [Ben Welsh's excellent notebook](https://observablehq.com/@datadesk/plug-and-play-bubble-map) to make a template for quickly loading county-level data (in \\`csv\\` format) as proportional circles over a map of the counties in a specific state. The data should have a column named \\`id\\` with county fips codes (e.g., 37001). \n\nThe example shows the registered nurses per 10,000 population in North Carolina.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":443,"value":"viewof rotation = {\n const form = html``;\n form.oninput = () =>\n (form.value = [\n form.lambda.valueAsNumber,\n form.phi.valueAsNumber,\n form.gamma.valueAsNumber\n ]);\n form.oninput();\n \"λ\", \"φ\", \"γ\";\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"viewof csvUrl = text({\n title: \"CSV URL\",\n description: \"The data you want to load on the map\",\n value:\n \"https://gist.githubusercontent.com/gallowayevan/7b94c0b0fc3283c8909f769b1d04cb08/raw/b266ee5dc9529d73160a88849c26b0c4f2a03b7e/csvData.csv\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"viewof circleValue = select({\n title: \"Circle value\",\n description:\n \"The data field that will be used to determine the size of the circle\",\n options: Object.keys(csvData[0]),\n value: \"universe\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"csvData = await d3.csv(csvUrl)","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"mapData = {\n return csvData\n .map(d => ((d.value = +d[circleValue]), d))\n .sort((a, b) => b.value - a.value);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"md`### Symbology`","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"viewof circleFill = color({\n title: \"Circle fill color\",\n value: \"#006d8f\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"viewof circleFillOpacity = slider({\n title: \"Circle fill opacity\",\n value: 0.5\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"viewof circleStrokeColor = color({\n title: \"Circle stroke color\",\n value: \"#006d8f\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"viewof circleStrokeWidth = slider({\n title: \"Circle stroke width\",\n value: 0.5,\n min: 0,\n max: 2,\n step: 0.1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"viewof maxRadius = slider({\n value: 25,\n title: \"Maximum radius\",\n step: 1,\n min: 1,\n max: 100,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"extent = d3.extent(mapData.map(d => d.value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"radius = d3\n .scaleSqrt()\n .domain([0, extent[1]])\n .range([0, maxRadius])","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"md`### Legend`","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"viewof font = text({\n title: \"Font\",\n value: \"sans-serif\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"viewof legendValues = text({\n title: \"Legend values\",\n description: \"A comma-separated list of the example values in the legend\",\n value: d3.ticks(extent[0], extent[1], 3)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"md`### Background` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"viewof mapFillColor = color({\n title: \"Map fill color\",\n value: \"#dddddd\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"md`### Dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"viewof mapWidth = slider({\n title: \"Width\",\n value: width,\n min: 10,\n max: width,\n step: 10,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"viewof mapHeight = slider({\n title: \"Height\",\n value: 600,\n min: 10,\n max: 1000,\n step: 10,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"md`### Projection`","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"projection = d3\n .geoAlbers()\n .rotate(rotation)\n .fitSize([mapWidth, mapHeight], state_counties)","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"formatNumber = d => d.toLocaleString()","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"md`### Geographies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"state_counties_names = new Map(\n state_counties.features.map(d => [d.properties.id, d.properties.NAME])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":510,"value":"state_counties_centroids = new Map(\n state_counties.features.map(d => [d.properties.id, path.centroid(d)])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"state_counties = {\n const stateFips = mapData[0].id.slice(0, 2);\n\n return {\n type: \"FeatureCollection\",\n features: us_counties.features.filter(\n d => d.properties.id.slice(0, 2) == stateFips\n )\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"us_counties = topojson.feature(\n us_topojson,\n us_topojson.objects.cb_2016_us_county_500k\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"us_topojson = await d3.json(\n \"https://gist.githubusercontent.com/gallowayevan/05dbce8ac7d51cb75aef4522fb9a2291/raw/5d3cc1678ebe7414902d70d309f13b7ff510c9a9/cb_2016_us_county_500k.json\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"import {select, slider, text, color, number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}