30:T436,md`# Geovember 2: lines In September, I got really into Black & White visualization, which resulted in [this choropleth map](https://observablehq.com/@tmcw/b-w-choropleth) that used an old-school library of patterns to show a choropleth. For Geovember, my goal is to solve a related problem: making that map plottable. This is going to be harder: 1. The AxiDraw will want the lines to be SVG line elements or similar. The existing example uses SVG patterns. 2. You can’t just draw 'thick lines' with the AxiDraw. I’ll need to manually create multiple nearby lines to draw density. 3. For efficiency, border-crossing lines should probably connect, so that the AxiDraw can draw them in continuous strokes. The original version _appears_ to have continuous lines because SVG patterns all use the same origin point, but it does not. 4. _Stretch goal_ - what if the lines aligned with the curve of the Albers projection, rather than the y-coordinate of pixel space? Unemployment rate by county, August 2016. Data: [Bureau of Labor Statistics](http://www.bls.gov/lau/#tables)`31:T592,{ let line = { type: 'MultiLineString', coordinates: [] }; let allIntercepts = []; for (let multi of allMerged.coordinates) { let shape = multi[0]; let intercepts = []; for (let i = 0, j = shape.length - 1; i < shape.length; j = i++) { if (shape[i][1] > y != shape[j][1] > y) { let xi = shape[i][0], xj = shape[j][0], yi = shape[i][1], yj = shape[j][1]; intercepts.push([((xj - xi) * (y - yi)) / (yj - yi) + xi, y]); allIntercepts.push([((xj - xi) * (y - yi)) / (yj - yi) + xi, y]); } } for (let i = 0; i < intercepts.length - 1; i += 2) { line.coordinates.push([intercepts[i], intercepts[i + 1]]); } } const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr('width', width); svg .append("g") .selectAll("path") .data([allMerged]) .join("path") .attr("stroke", '#000') .attr("fill", 'none') .attr("d", path); svg .append("g") .selectAll("path") .data([line]) .join("path") .attr("stroke", 'red') .attr("stroke-width", 2) .attr("fill", '#000') .attr("d", path); svg .append("g") .selectAll("circle") .data(allIntercepts) .join("circle") .attr("r", 4) .attr("fill", 'red') .attr("transform", d => `translate(${d})`); return html`

${svg.node()}

`; }32:T4a9,{ let line = { type: 'MultiLineString', coordinates: [] }; for (let multi of allMerged.coordinates) { for (let y of d3.range(0, 500, stripe)) { let shape = multi[0]; let intercepts = []; for (let i = 0, j = shape.length - 1; i < shape.length; j = i++) { if (shape[i][1] > y != shape[j][1] > y) { let xi = shape[i][0], xj = shape[j][0], yi = shape[i][1], yj = shape[j][1]; intercepts.push([((xj - xi) * (y - yi)) / (yj - yi) + xi, y]); } } for (let i = 0; i < intercepts.length - 1; i += 2) { line.coordinates.push([intercepts[i], intercepts[i + 1]]); } } } const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr('width', width); svg .append("g") .selectAll("path") .data([allMerged]) .join("path") .attr("stroke", '#000') .attr("fill", 'none') .attr("d", path); svg .append("g") .selectAll("path") .data([line]) .join("path") .attr("stroke", '#000') .attr("fill", '#000') .attr("d", path); return html`

${svg.node()}

`; }33:T668,{ let steps = d3.range(3, 12, 2).map(cutoff => d3.geoProject( topojson.merge( us, us.objects.counties.geometries.filter(g => { return (data.get(g.id) || 0) > cutoff; }) ), p ) ); let line = { type: 'MultiLineString', coordinates: [] }; let i = 8; let offset = 1; for (let step of steps) { for (let multi of step.coordinates) { for (let y of d3.range(0, 500, 5)) { y += offset; let intercepts = []; for (let shape of multi) { for (let i = 0, j = shape.length - 1; i < shape.length; j = i++) { if (shape[i][1] > y != shape[j][1] > y) { let xi = shape[i][0], xj = shape[j][0], yi = shape[i][1], yj = shape[j][1]; intercepts.push([((xj - xi) * (y - yi)) / (yj - yi) + xi, y]); } } for (let i = 0; i < intercepts.length - 1; i += 2) { line.coordinates.push([intercepts[i], intercepts[i + 1]]); } } } } // Make the offset light offset++; } line.coordinates.sort((a, b) => a[0][1] - b[0][1]); const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr('width', width); svg .append("g") .selectAll("path") .data([allMerged]) .join("path") .attr("stroke", '#000') .attr("fill", 'none') .attr("d", path); svg .append("g") .selectAll("path") .data([line]) .join("path") .attr("stroke", '#000') .attr("fill", '#000') .attr("d", path); return svg.node(); }34:[{"id":"8a6057f29caa4e010854bfc31984511e074ff9042ec2a99f30924984821414fbaeb75e59654e9303db359dfa0c1052534691dac86017c4c2f992d23b874f9b6e","href":"https://static.observableusercontent.com/files/8a6057f29caa4e010854bfc31984511e074ff9042ec2a99f30924984821414fbaeb75e59654e9303db359dfa0c1052534691dac86017c4c2f992d23b874f9b6e","name":"unemployment.csv","type":"application/octet-stream","lastModified":1572910080304.382,"size":109820}] 2e:{"title":"Geovember 2: lines","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"md`Okay, step one. I think the best way to preserve line continuity the most will be to:\n\n1. Merge layers in ascending groups. First, merge all counties that have _any_ lines, then the second level, and so on.\n2. Determine line intersections. Not sure yet - some of the options are Martinez (seems like overkill, it's for polygons), or ray casting.\n\nThe first step uses [topojson.merge](https://github.com/topojson/topojson-client/blob/master/README.md#merge), which is nifty and _much less error prone_ than the alternatives, because TopoJSON has a strong idea of which polygons border each other.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"viewof level = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":531,"value":"md`_Move this slider to adjust the cutoff_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":395,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .attr('width', width);\n\n svg\n .append(\"g\")\n .selectAll(\"path\")\n .data([\n d3.geoProject(\n topojson.merge(\n us,\n us.objects.counties.geometries.filter(g => {\n return (data.get(g.id) || 0) > level;\n })\n ),\n p\n )\n ])\n .join(\"path\")\n .attr(\"stroke\", '#000')\n .attr(\"fill\", 'none')\n .attr(\"d\", path);\n\n return html`

${svg.node()}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"allMerged = d3.geoProject(topojson.merge(us, us.objects.counties.geometries), p)","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":"md`Okay, that worked pretty well. Next, let’s clip that line. My conclusion having perused a few libraries is that it is most expedient to just do it.\n\nI’m using the logic from [Point in Polygon testing](https://observablehq.com/@tmcw/understanding-point-in-polygon), which generates a list of intersecting points, and then constructing a polyline from each point pair.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":536,"value":"md`_Move the slider to test the y coordinate._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":512,"value":"viewof y = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"md`Testing making a pattern from that…`","pinned":false,"hidden":false,"mode":"ojs"},{"id":595,"value":"viewof stripe = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":608,"value":"md`Okay, we have almost all the necessary pieces in place.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":606,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":702,"value":"md`Great - a line-oriented choropeth with discrete, continuous, sorted lines!\n\nNow to print… and… ugh, AxiDraw is broken by macOS Catalina 😭 https://wiki.evilmadscientist.com/Axidraw_Software_Installation#Mac\n\nSo you’ll have to imagine the SVG above printed, or plot it with your own pen plotter?\n\n---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"width = Math.min(window.innerWidth, 640)","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"height = (610 / 975) * width","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"data = Object.assign(\n new Map(\n await d3.csv(\n await FileAttachment(\"unemployment.csv\").url(),\n ({ id, rate }) => [id, +rate]\n )\n ),\n { title: \"Unemployment rate (%)\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":557,"value":"p = d3.geoIdentity().scale(width / 975)","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"path = d3.geoPath()","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"states = new Map(us.objects.states.geometries.map(d => [d.id, d.properties]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"us = d3.json(\"https://cdn.jsdelivr.net/npm/us-atlas@3/counties-albers-10m.json\")","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\", 'd3-geo-projection')","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}