2b:T8d7,vizBars = { const height = 500 const width = 1200 // Make an SVG wrapper const svgW = d3.select(DOM.svg(width, height)) .attr('id', 'svg-main') // Append a group and treat like the main svg const svg = svgW.append('g') // Default column selection var sel = 'Population Density (Sq Mi)_2017' // Push scales into an array for each value in the data var scales = [] var selections = [] for(var key in projected.features[0].properties.data){ selections.push(key) scales[key] = d3.scaleLinear().domain([0, d3.max(projected.features, d => { if(!d.properties.data) return; return d.properties.data[key] })]).range([0,200]) } console.log(projected.features) // Create a color scale. This could just be an array... var color = d3.scaleOrdinal().domain([1,2,3,4,5,6]).range([city, city2, city3, rural, rural2, rural3]) // Draw the map base layer var map = svg.selectAll('path') .data(projected.features) .enter() .append('path') .attr('d', pathGenerator) .attr('fill', 'none') .attr('stroke', '#eee') .attr('stroke-width', .5) // Append paths to each centroid that will later be drawn // Also sort the features by longitude so the ones further down appear on "top" var paths = svg.append("g") .attr("class", "rect") .selectAll("rect") .data(projected.features.sort((a,b) => pathGenerator.centroid(a)[1] - pathGenerator.centroid(b)[1])) .enter().append("rect") .attr('stroke', 'white') .attr('stroke-width',1) .attr('fill', d => { if(!d.properties.data) return; return color(d.properties.data.Type) }) .attr('width', barWidth*3) .attr('transform', function(d) { if(!d.properties.data) return; // Get centroid from shape var xy = pathGenerator.centroid(d) // Center the bars by offsetting the x position xy[0] = xy[0] - barWidth*1.5 xy[1] = xy[1] - scales[sel](d.properties.data[sel]) return "translate(" + xy + ")"; }) .attr('height', d => { if(!d.properties.data) return; return scales[sel](d.properties.data[sel]) }) return svgW.node() }2c:Tdfd,viz = { const height = 500 const width = 1200 // Make an SVG wrapper const svgW = d3.select(DOM.svg(width, height)) .attr('id', 'svg-main') // Append a group and treat like the main svg const svg = svgW.append('g') // Default column selection var sel = 'Population Density (Sq Mi)_2017' // Push scales into an array for each value in the data var scales = [] var selections = [] for(var key in projected.features[0].properties.data){ selections.push(key) scales[key] = d3.scaleLinear().domain([0, d3.max(projected.features, d => { if(!d.properties.data) return; return d.properties.data[key] })]).range([0,200]) } // Create a color scale. This could just be an array... var color = d3.scaleOrdinal().domain([1,2,3,4,5,6]).range([city, city2, city3, rural, rural2, rural3]) // Draw the map base layer var map = svg.selectAll('path') .data(projected.features) .enter() .append('path') .attr('d', pathGenerator) .attr('fill', 'none') .attr('stroke', '#eee') .attr('stroke-width', .5) // Append paths to each centroid that will later be drawn // Also sort the features by longitude so the ones further down appear on "top" var paths = svg.append("g") .attr("class", "path") .selectAll("path") .data(projected.features.sort((a,b) => pathGenerator.centroid(a)[1] - pathGenerator.centroid(b)[1])) .enter().append("path") .attr('stroke', 'white') .attr('stroke-width', 1) .attr('fill', d => { if(!d.properties.data) return 'black' return color(d.properties.data.Type) }) .attr("transform", function(d) { // Get centroid from shape var xy = pathGenerator.centroid(d) // Center the bars by offsetting the x position if(xy[0]) xy[0] = xy[0] - barWidth return "translate(" + xy + ")"; }) .attr('d', d => { if(!d.properties.data) return; return `M -${barWidth*2}, 0 L -1, ${-(scales[sel](d.properties.data[sel])-1)} Q 0 ${-(scales[sel](d.properties.data[sel]))} 1, ${-scales[sel](d.properties.data[sel])+1} L ${barWidth*2}, 0 Q 0 ${barWidth*2}, -${barWidth*2} 0 Z` }) .on('mousedown', function(d){ // Inspect the bars by clicking them console.log(d); d3.select(this).attr('fill', 'red') }) // Update the bars by drawing a path using a scale based on the current selection function updateBars(sel){ paths .attr("transform", function(d) { // Get centroid from shape var xy = pathGenerator.centroid(d) // Center the bars by offsetting the x position if(xy[0]) xy[0] = xy[0] - barWidth/2 return "translate(" + xy + ")"; }) .attr('d', d => { if(!d.properties.data) return; // if(d.properties.data.Type == 1 || d.properties.data.Type == 6) { return `M -${barWidth}, 0 L -1, ${-(scales[sel](d.properties.data[sel])-1)} Q 0 ${-(scales[sel](d.properties.data[sel]))} 1, ${-scales[sel](d.properties.data[sel])+1} L ${barWidth}, 0 Q 0 ${barWidth}, -${barWidth} 0 Z` // } }) } // Update the selection by monitoring the dropdown // (There has to be a better way to do this?) var selectedItem = null setInterval(function(){ // Prevent it from redrawing if already selected if(selectedItem != selName){ selectedItem = selName updateBars(selName) } },10) // Draw using default data updateBars(sel) return svgW.node() }2d:[] 2a:{"title":"How We Made a Map of the United States With \"Data Cones\"","cells":[{"id":0,"value":"md`# How We Made a Map of the United States With \"Data Cones\"`","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"md`Here's how we made the cones for this story on rural America.\n\nWe started with a geojson file containing Albers USA county shapes and the data we're interested in plotting. We then used a transform matrix to \"rotate\" the projection.\n\nWe were inspired by this much [fancier Pudding piece](https://pudding.cool/2018/12/3d-cities-story/index.html) on population change.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":843,"value":"md`### \"Rotating\" a map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":494,"value":"md`You can change the angle by adjusting the slider below:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"viewof demoA = slider({\n min: 0, \n max: 90, \n step: 1, \n value: 60, \n title: \"Angle\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":832,"value":"vizJustCounties = {\n \n const height = 500\n const width = 1200\n \n // Make an SVG wrapper\n const svg = d3.select(DOM.svg(width, height))\n .attr('id', 'svg-main')\n \n // Push scales into an array for each value in the data\n var scales = []\n var selections = []\n for(var key in projected.features[0].properties.data){\n selections.push(key)\n scales[key] = d3.scaleLinear().domain([0, d3.max(projected.features, d => {\n if(!d.properties.data) return;\n return d.properties.data[key]\n })]).range([0,200])\n }\n\n // Draw the map base layer\n var map = svg.selectAll('path')\n .data(projected.features)\n .enter()\n .append('path')\n .attr('d', pathGeneratorDemo)\n .attr('fill', 'none')\n .attr('stroke', '#eee')\n .attr('stroke-width', .5)\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1053,"value":"md`### How it works`","pinned":false,"hidden":false,"mode":"ojs"},{"id":647,"value":"md`Start by making a normal map projection using \\`d3.geoAlbersUsa()\\`. Pass it the geojson data file (which we prepared separately and contains all the county shapes plus our data). That defines the projection we're using, so all latitude/longitude coordinates will be translated into our SVG space.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":686,"value":"projection = d3.geoAlbersUsa().fitSize([width, height], geojsonWithData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":734,"value":"md`To make a normal map, we would take this projection and create a path generator, which would spit out our projected coordinates and create a map. Like this:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":929,"value":"pathGeneratorStatic = d3.geoPath()","pinned":true,"hidden":false,"mode":"ojs"},{"id":937,"value":"md`Feeding the \\`projection.features\\` geojson data to the \\`pathGeneratorStatic()\\` creates a normal Albers USA map, like this:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":924,"value":"vizStatic = {\n \n const height = 500\n const width = 1200\n \n // Make an SVG wrapper\n const svg = d3.select(DOM.svg(width, height))\n .attr('id', 'svg-main')\n \n // Draw the map base layer\n var map = svg.selectAll('path')\n .data(projected.features)\n .enter()\n .append('path')\n .attr('d', pathGeneratorStatic)\n .attr('fill', 'none')\n .attr('stroke', '#eee')\n .attr('stroke-width', 1)\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":739,"value":"md`But we wanted to try for a more 3D effect so we could represent the data as bars instead of a simple chloropleth.\n\n### Rotating the map\nSo our reprojection uses a transform function, which modifies the *x* and *y* coordinates according to the angle we're defining. This code comes from [@sahilchinoy](http://www.twitter.com/sahilchinoy), who solved this issue for me!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":944,"value":"md`First, we define the transform function, which calls a matrix function with a number of variables. The most important one is *a*, which represents the angle in degrees.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"transform = matrix(1, 0, 0, Math.cos(a * Math.PI / 180), 0, 0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1060,"value":"md`The \\`matrix()\\` function calculates the new points:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"function matrix(a, b, c, d, tx, ty) {\n return d3.geoTransform({\n point: function(x, y) {\n const x1 = x;\n const y1 = y - height / 2;\n \n const x2 = a * x1 + b * y1;\n const y2 = c * x1 + d * y1;\n \n const x3 = x2;\n const y3 = y2 + height / 2;\n \n this.stream.point(x3, y3)\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":674,"value":"md`Then we create a pathGenerator, just like above. But this time, we pass the transform. This gives us re-projected coordinates based on the angle supplied to our transform function.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"pathGenerator = d3.geoPath(transform)","pinned":true,"hidden":false,"mode":"ojs"},{"id":947,"value":"md`You can see the difference in coordinates between the original, flat projection and this modified projection. Let's feed the same sample coordinates to both pathGenerator \\`centroid()\\` functions and see what comes back:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":971,"value":"md`**Original, static coordinates:**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":963,"value":"pathGeneratorStatic.centroid(geojsonWithData.features[0])[1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":974,"value":"md`**Re-projected coordinates based on angle:**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":978,"value":"viewof aModified = slider({\n min: 0, \n max: 90, \n step: 1, \n value: 60, \n title: \"Angle\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":949,"value":"{\n return pathGeneratorModified.centroid(geojsonWithData.features[0])[1]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":883,"value":"md`When generating the map, call the pathGenerator you've defined by sending it \\`geojson.feataures\\` like this:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":879,"value":"md`\\`\\`\\`{\n var map = svg.selectAll('path')\n .data(projected.features)\n .enter()\n .append('path')\n .attr('d', pathGenerator)\n .attr('fill', 'none')\n .attr('stroke', '#eee')\n .attr('stroke-width', .5)\n}\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs"},{"id":752,"value":"md`### Adding data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":754,"value":"md`We started charting data using rectangles, shown below. They're actually much more performant than paths. But we weren't happy with the effect. It looked a little weird and lacking real dimension, especially in clusters.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":888,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs"},{"id":903,"value":"md`So we ended up using paths, or cones, to give it more dimension.\n\nWe drew these using the SVG path syntax. We start by transforming our path to the xy starting point defined by the centroid...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":770,"value":"md`\\`\\`\\`{\nsvg.selectAll('path')\n .data(projected.features).enter()\n .append('path')\n .attr('transform', d => pathGenerator.centroid(d))\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs"},{"id":793,"value":"html`Then we're just drawing a path by moving it slightly to four corners. We're also using a quadradic curve to give some roundness at the top and bottom.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":795,"value":"md`\\`\\`\\`{\n .attr('d', d => \\`M -\\$\\{barWidth}, 0 \n L -1, \\$\\{-(scales[sel](d.properties.data[sel])-1)} \n Q 0 \\$\\{-(scales[sel](d.properties.data[sel]))} 1, \\$\\{-scales[sel](d.properties.data[sel])+1\\} \n L \\$\\{barWidth\\}, 0 \n Q 0 \\$\\{barWidth\\}, -\\$\\{barWidth\\} 0 \n Z\\`)\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1044,"value":"md`And here is the final result.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"viewof selName = select({\n title: \"Data Column\",\n options: names,\n value: \"Moe\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":910,"value":"viewof a = slider({\n min: 0, \n max: 90, \n step: 1, \n value: 60, \n title: \"Angle\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs"},{"id":1010,"value":"md`That's it! I hope this was helpful.\n\nReach me at [@stuartathompson](http://twitter.com/stuartathompson) with any questions.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1013,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":678,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"md`**Here are just some other variables and stuff for Observable you can ignore**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":600,"value":"projected = gp.geoProject(geojsonWithData, projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"gp = require('d3-geo-projection')","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"geojsonWithData = d3.json('https://gist.githubusercontent.com/stuartathompson/3b4f31d88ac334a96a70549e3d31cdfb/raw/d849965381f445ecc8eefc63ca132e4a559478f8/county-data-brookings-paths.geojson')","pinned":false,"hidden":false,"mode":"ojs"},{"id":595,"value":"md`#### Variables`","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"viewof city = colorPicker(\"#29ABE2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"viewof city2 = colorPicker(\"#6bd3ff\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"viewof city3 = colorPicker(\"#c6eeff\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"viewof rural = colorPicker(\"#ffe8c4\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"viewof rural2 = colorPicker(\"#fecc7e\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"viewof rural3 = colorPicker(\"#FBB03B\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"margin = 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":579,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":777,"value":"barWidth = 2.5 // Maximum bar width in pixels","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"centroidsAllCounties = d3.json('https://gist.githubusercontent.com/stuartathompson/418289e7d32014a01a4a4dbc0dc94538/raw/0b4724178487a2b03129329b1e93404ab7d6fc5d/centroids-all-counties.json')","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"names = [\n 'Population Density (Sq Mi)_2017',\n 'Professional and Digital Services Job Share_2017'\n ]","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"projectedCentroids = gp.geoProject(centroidsAllCounties, projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":699,"value":"transformDemo = matrix(1, 0, 0, Math.cos(demoA * Math.PI / 180), 0, 0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":991,"value":"transformModified = matrix(1, 0, 0, Math.cos(aModified * Math.PI / 180), 0, 0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":913,"value":"pathGeneratorDemo = d3.geoPath(transformDemo)","pinned":false,"hidden":false,"mode":"ojs"},{"id":987,"value":"pathGeneratorModified = d3.geoPath(transformModified)","pinned":false,"hidden":false,"mode":"ojs"},{"id":927,"value":"transformStatic = matrix(1, 0, 0, Math.cos(0 * Math.PI / 180), 0, 0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"import { slider, select } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"import {colorPicker} from \"@shaunlebron/color-picker\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"import { serialize } from '@mbostock/saving-svg'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2d","stdlib":"1","titling":"auto"}