31:T457,contourMap = { const svg = d3.select(DOM.svg(width, height)) svg.append("path") .datum(continental_us) .attr("class", "outer") .attr("d", path) .attr("id", "usPath") .style("fill", "none") .style('stroke','none') svg.append("clipPath") .attr("id", "usClipPath") .append("use") .attr("xlink:href","#usPath"); const g = svg.append("g") .selectAll(".contour") .data(contours) .join("g"); svg.append('g') .selectAll("path") .data(states) .join("path") .attr("d", path) .attr('fill','none') .attr('stroke','#bbb') .attr('stroke-width',.5) .attr('opacity',.3); g.append("path") .attr("clip-path", "url(#usClipPath)") .attr("class", d => `contour ${(d.value)}`) .attr("d", d3.geoPath()) .attr("stroke-width", (d, i) => i % 5 ? 0.25 : 1) .style("stroke", "white") .attr("fill", d => color(d.value)) .on("mouseover", d => { mutable hover = d.value }) .on("mouseout", () => { mutable hover = null }); return svg.node(); }32:[{"id":"783cf2bf259e16d662d92c9f59ec97e564c50841c5984f2bb6f65a6d31f8c1b80846bffb65cb654dc2b587ac96f0007ab68c24bacce33655fd785e46020aff74","href":"https://static.observableusercontent.com/files/783cf2bf259e16d662d92c9f59ec97e564c50841c5984f2bb6f65a6d31f8c1b80846bffb65cb654dc2b587ac96f0007ab68c24bacce33655fd785e46020aff74","name":"counties-10m.json","type":"application/json","lastModified":1589693572947.555,"size":842177},{"id":"af8d12c9ba7ce2e0c0061559ed9f8ee9c59bba75f293ee35acebbab0c4503d62c900a07f74eb68fbd73c9ebb26debf5a67bb8791894973ebc135dc4c531f8f6b","href":"https://static.observableusercontent.com/files/af8d12c9ba7ce2e0c0061559ed9f8ee9c59bba75f293ee35acebbab0c4503d62c900a07f74eb68fbd73c9ebb26debf5a67bb8791894973ebc135dc4c531f8f6b","name":"ancestryData.csv","type":"text/csv","lastModified":1589692227148.781,"size":3633376}] 2f:{"title":"Contour Density Map Walkthrough","cells":[{"id":0,"value":"md`# Contour Density Map Walkthrough\n\nThis combines notebooks and ideas from [@mbostock](https://observablehq.com/@mbostock/ancestry-by-u-s-county), [@harrystevens](https://observablehq.com/@harrystevens/mapping-gridded-data-with-a-voronoi-diagram) and [@efrymire](https://observablehq.com/@efrymire/gridding-map-files). The code below reworks a given choropleth into a contour density map.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1431,"value":"viewof choice = radio({\n title: 'Chapters',\n options: [\n { label: 'Contour density', value: 'contourMap' },\n { label: 'Muted choropleth with colored dots', value: 'overlapMap' },\n { label: 'Choropleth with uncolored dots', value: 'choroplethMap' },\n ],\n value: 'contourMap'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1779,"value":"md` ## Ancestry by U.S. County`","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"viewof variable = {\n const form = html``;\n form.select.value = new URL(location).searchParams.get(\"ancestry\") || \"B04006_108E\";\n form.select.onchange = () => {\n form.value = variables.get(form.select.value);\n form.querySelector(\"a\").href = `?race=${form.select.value}`;\n form.dispatchEvent(new CustomEvent(\"input\"));\n };\n form.select.onchange();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1722,"value":"mutable hover = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":1442,"value":"{\n if (choice === 'contourMap') {\n return html`${contourMap}`\n } else if (choice === 'overlapMap') {\n return html`${overlapMap}`\n } else if (choice === 'choroplethMap') {\n return html`${choroplethMap}`\n }\n}\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1612,"value":"md` # Drawing the charts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1556,"value":"md` ## Contour Density\n\nThis is the final version of the map. There are five general steps here:\n\n 1. Map the continental US using a multi-line string via Topojson.mesh().\n 2. Append a clipPath on the US. Append a use and give it an xlink:href.\n 3. Create a g element and bind the countours planes data.\n 4. (optional) Draw the state boundaries.\n 5. Draw contour paths using d3.geoPath. Color using the color scale. Clip-path using the xlink:href\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1154,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1599,"value":"md` ## Muted Choropleth & Colored Dots\n This is the mid-point. There are only two steps:\n1. Draw the colored dots using the geojson data. Send each point's coordinates into the get_point_data lookups. Return the value into the color scale.\n2. Draw the choropleth with a low opacity. Make sure the dots line up correctly.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":669,"value":"overlapMap = {\n const svg = d3.select(DOM.svg(width, height));\n \n svg.selectAll(\".point\")\n .data(geojson)\n .enter().append(\"path\")\n .attr(\"d\", path)\n .style(\"stroke\", \"#000\")\n .style(\"stroke-width\", .1)\n .style('fill', (d, i) => { \n const value = get_point_data(d.geometry.coordinates, i)\n if (value === null) return \"none\"\n return color(value)\n })\n \n svg.append('g')\n .selectAll(\"path\")\n .data(newCounties.features)\n .join('path')\n .attr(\"d\", path)\n .attr(\"fill\", d => color(d.properties.value))\n .attr('opacity',.6);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1615,"value":"md` ## Choropleth & Uncolored Dots\nThis is the first step. We have the given choropleth that we want to transform. There are three steps.\n\n1. Draw the points using the geojson data. For the d, use path.\n2. Draw the choropleth. Color counties using color scale.\n3. (optional) Draw the state boundaries.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"choroplethMap = {\n const svg = d3.select(DOM.svg(width, height));\n \n svg.append('g')\n .selectAll(\".point\")\n .data(geojson)\n .join(\"path\")\n .attr(\"class\", \"point\")\n .attr(\"d\", path)\n \n svg.append('g')\n .selectAll(\"path\")\n .data(newCounties.features)\n .join('path')\n .attr(\"d\", path)\n .attr(\"fill\", d => color(d.properties.value));\n \n svg.append('g')\n .selectAll(\"path\")\n .data(states)\n .join(\"path\")\n .attr(\"d\", path)\n .attr('fill','none')\n .attr('stroke','#666')\n .attr('opacity',.3);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1628,"value":"md` # Dealing with the data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1658,"value":"md ` The first step is to create an array of latitudes and longitudes that we can map. There is a specificity of every half degree here that works a bit better for getting each county.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1820,"value":"getInterval = {\n if (width < 500) {\n return 1\n } else if (width < 700) {\n return .75\n } else {\n return .5\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":644,"value":"rawPoints = { \n // range longitudes from 10 (S) to 55 (N) for every .5 degree\n const lons = d3.range(10, 55, getInterval).reverse()\n\n // range latitudes from -130 (W) to -60 (E) for every .5 degree\n const lats = d3.range(-130, -60, getInterval)\n \n // long / lat points in order from west to east, then north to south, like a wrap\n return lons.map((lon, i) => lats.map(lat => [lat, lon])).flat()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1666,"value":"md ` This is all of the points from above put into a geojson layout. This powers the choropleth and colored dots. This dataset is unused in the final map, but it's an important step.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"geojson = rawPoints.map((d,i) => {\n return {\n \"type\": \"Feature\",\n \"geometry\": {\n \"type\": \"Point\",\n \"coordinates\": d\n },\n \"properties\": {\n // 'data': +raw\n \"index\": i\n }\n } \n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":1673,"value":"md ` This is the dataset used for the countour denisty map. The original points are given a centroid and a value, which is determined by comparing the coordinates to the counties. Lookups are covered next.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1103,"value":"gridPoints = rawPoints.map((point, i) => ({\n 'centroid': projection(point),\n 'data': get_point_data(point, i)\n})).filter(d => d.centroid !== null && d.data !== null)","pinned":true,"hidden":false,"mode":"ojs"},{"id":417,"value":"md `# Lookups`","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"countiesVoronoi = d3.geoVoronoi({type:'FeatureCollection', features: newCounties.features})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1695,"value":"md` This runs through the counties and creates a map with an index and the county's ID.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":643,"value":"voronoiLookup = {\n const voronoiPoints = rawPoints.map(d => newCounties.features[countiesVoronoi.find(...d)].id)\n return new Map(voronoiPoints.map((d, i) => [i, d]))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1689,"value":"md` This is the lookup that grabs the points data. It does a voronoi lookup over the county and then grabs the value from our data map. If there isn't a point, it returns null.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":658,"value":"get_point_data = (d, i) => {\n let pointData = null\n \n // this limits the data to regions in or close to the US. \n if (d3.geoContains(nation, d) || d3.geoContains(bufferGeo, d)) {\n pointData = +data.get(voronoiLookup.get(i))\n }\n \n return pointData\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1541,"value":"md` # Contour\n\nThis utilizes [d3's Contour Density API](https://github.com/d3/d3-contour) to draw the different layers. The data here comes from a lookup of the gridded points and the raw data.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1137,"value":"contour_data = gridPoints.reduce((acc, div) => {\n \n // calculate the number of points based on the percentage. Multiplied by 100 to get calculated percent.\n const num_points = Math.floor(div.data * 100)\n \n // create an array of that same value repeated to create stacked points tied to the data value\n const array = new Array(num_points).fill(div.centroid, 0, num_points)\n \n return [...acc, ...array] \n}, [])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1141,"value":"// the final countours that we'll feed into our contour function\ncontours = contour(contour_data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1139,"value":"contour = d3.contourDensity()\n .x(d => d[0])\n .y(d => d[1])\n .size([width, height])\n // .cellSize(15)","pinned":false,"hidden":false,"mode":"ojs"},{"id":455,"value":"md `# Importing Data\n\nThe data is [ACS 5-year estimates from 2018](https://data.census.gov/cedsci/table?tid=ACSDT5Y2018.B04006&vintage=2018). I pulled it from [@mbostock](https://observablehq.com/@mbostock/ancestry-by-u-s-county)'s choropleth.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"total = \"B04006_001E\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":458,"value":"alldata = d3.csvParse(await FileAttachment('ancestryData.csv').text())","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"variables = new Map(Object.entries(alldata[0])\n .filter(([GEO_ID]) => /^B\\d+_\\d+E$/.test(GEO_ID) && GEO_ID !== total)\n .map(([GEO_ID, id]) => [GEO_ID, {id: GEO_ID, name: id.split(/!!/g).pop(), total: d3.sum(alldata.slice(1), d => d[GEO_ID])}])\n .sort(([, {total: a}], [, {total: b}]) => d3.descending(a, b)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1709,"value":"md` This is the final map of the counties and their value. This is what feeds into the other lookups and the SVGs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"data = new Map(alldata.slice(1).map(d => [d.GEO_ID.slice(-5), +d[variable.id] / +d[total]]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"md` # The JSON files`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1503,"value":"md`This is the base file for our shapes. It was sourced from the [World Atlas](https://github.com/topojson/world-atlas). It's not the Albers projection because the gridded dots get hard to work with then. All these variables feed into the SVGs and mapping.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":892,"value":"//it's a bit tricky to do this with those outside the contiguous US\nnotContiguous = ['02','72','15','78','68','66']","pinned":false,"hidden":false,"mode":"ojs"},{"id":538,"value":"states = topojson.feature(countiesData, countiesData.objects.states).features.filter(d => !notContiguous.includes(d.id))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1307,"value":"nation = topojson.feature(countiesData, countiesData.objects.nation)","pinned":false,"hidden":false,"mode":"ojs"},{"id":928,"value":"counties = topojson.feature(countiesData, countiesData.objects.counties).features.map(county => {\n const stateCode = county.id.substring(0,2)\n \n if (!notContiguous.includes(stateCode)) {\n return county\n }\n}).filter(d => d)","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"// tagging the data together to make it easier for voronoi lookups\nnewCounties = {\n const dataTemp = { \n type: \"FeatureCollection\", \n features: counties.map(d => {\n d.properties.value = data.get(d.id)\n return d\n })\n }\n return dataTemp\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1259,"value":"continental_us = topojson.mesh(continental_us_redrawn, continental_us_redrawn.objects.states, (a,b) => a === b)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1256,"value":"continental_us_redrawn = ({ \n ...countiesData, \n objects: { \n states: { \n ...countiesData.objects.states, \n geometries: countiesData.objects.states.geometries.filter(d => !notContiguous.includes(d.id))\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"// main data file from topojson\n// includes counties, states and nations (also territories)\ncountiesData = FileAttachment(\"counties-10m.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":664,"value":"// This is a geojson of the buffer space around the US, created with qgis. \nbufferGeo = d3.json(\"https://gist.githubusercontent.com/efrymire/40006463cad8b7fce053ceb000ad0391/raw/320e1518773ef30330643045500e161659e92d42/states_buffer.geojson\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"md` # Config, scales, styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1713,"value":"md` The data are percentages so [0, MAX] works fine.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":557,"value":"color = d3.scaleSequential([0, d3.max(data.values())], d3.interpolatePuBu)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1854,"value":"colorContour = d3.scaleSequential([0, 1], d3.interpolatePuBu)","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"height = width * .65","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"projection = d3.geoAlbersUsa().fitSize([width, height], bufferGeo); // fitting it to bufferGeo to give us some room","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"path = d3.geoPath()\n .projection(projection)\n .pointRadius(2); // this is the dot size","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`# Libs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1428,"value":"import {radio} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1760,"value":"import { ramp, swatches } from \"@d3/working-with-color\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1959,"value":"styles","pinned":false,"hidden":false,"mode":"ojs"},{"id":1956,"value":"import { styles } from '@sawyerclick/styles'","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"topojson = require('topojson-client@3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@5\", \"d3-geo-voronoi\", 'd3-array@2')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}