31:[] 2f:{"title":"Making a tesselated hexbin map","cells":[{"id":0,"value":"md`# Making a tesselated hexbin map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5091,"value":"md `_...a shortened exercise from [Learning D3.js Mapping](https://www.packtpub.com/web-development/learning-d3js-4-mapping-second-edition) chapter 11 ._\n\n## Why hexagons?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6944,"value":"md `The hexagon is a skilled shape. It can do two things at the same time, no other shape can: it can regularly tesselate a plane while—at the same time—bin point data fairly. It's this combination that makes it unique, particularly for aggregating point distributions in data visualisations.\n\n_Regularly tesselating a plane_ means dividing a plane gap-free into equally sized units in English and hexagons are not alone with this property. There are two other shapes that can tesselate a plane in a regular fashion: the square and the triangle. Here's a plane regularly tesselated by squares:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":835,"value":"{\n const svg = d3.select(DOM.svg(width, height*0.5));\n svg.selectAll('rect')\n \t.data(pointGrid)\n \t.enter().append('rect')\n \t.attr('x', d => d.x).attr('y', d => d.y)\n \t.attr('width', hexDistance).attr('height', hexDistance)\n \t.style('fill', 'none').style('stroke', '#ccc').style('stroke-width', 1);\n return svg.node(); \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":779,"value":"md `That's pretty. But apart from being a little pedestrian, squares can also be mean to points when trying to bin them. Here's one of them:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1233,"value":"html `

\n\t

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1722,"value":"viewof triggerSquares = {\n const kickOffButton = html ``;\n // let cellHtml = html `

try click on this button here ${kickOffButton}

`;\n kickOffButton.addEventListener('click', function(){\n \tkickOffButton.value = 'true';\n kickOffButton.innerHTML = `Looks inconspicuous. Let's fill it with ${nPoints} randomly distributed points.`;\n kickOffButton.style.backgroundColor = '#fff';\n kickOffButton.style.cursor = 'default';\n kickOffButton.classList.remove(\"trigger-points-bg\")\n kickOffButton.blur();\n });\n return kickOffButton;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2972,"value":"md `Points closer to the square's centroid are coloured white. The further away the points lie from the centroid, the darker blue they get. The bar chart to the right of the square shows all centroid distances from smallest (at the right end →) to greatest (at the left end ←). See the dark-blue spike at the maximum distance of ${Math.round(maxDist)} pixel? This is a corner point.\n\nNow, let's fill up a circle and a hexagon. To level out the playing field, they have the same area as the square of ${squareArea} pixel. Here they are:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1756,"value":"html `

\n\t

\n\n

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

\n\t

\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2771,"value":"viewof triggerNonSquares = {\n const kickOffButton = html ``;\n kickOffButton.addEventListener('click', function(){\n\t kickOffButton.value = 'true';\n kickOffButton.innerHTML = `Let's fill each with the same number of ${nPoints} randomly distributed points and check their distribution of distance to the center.`;\n kickOffButton.style.backgroundColor = '#fff';\n kickOffButton.style.cursor = 'default';\n kickOffButton.classList.remove(\"trigger-points-bg\")\n kickOffButton.blur();\n });\n return kickOffButton;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1646,"value":"viewof nPoints = {\n const nPointDiv = html`\n \n
\n\t_{Set a different number of random points}\n `;\n const nPointRange = nPointDiv.querySelector('[type=range]');\n const nPointNumber = nPointDiv.querySelector('[type=number]');\n nPointDiv.value = nPointRange.value = nPointNumber.value = 3000;\n nPointRange.addEventListener('input', () => nPointNumber.value = nPointDiv.value = nPointRange.valueAsNumber);\n nPointNumber.addEventListener('input', () => nPointRange.value = nPointDiv.value = nPointNumber.valueAsNumber);\n // dispatch.call('changed')\n return nPointDiv;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3081,"value":"md `The circle has the lowest maximum distance to the centroid with ${Math.round(radius)} pixel, the hexagon is between the circle and the square with ${Math.round(hexSide)} pixel. But equally important, the rate of distance increase is almost constant with the circle. The haxagon—with its 6 corners—shows a slight rate spike for the distant corner points, but significatly milder than the square.\n\nIf a circle displays the best binning properties with the smallest bias to represent points distant to the centroid, why not use a circle for dot-binning?\n\nBecause it doesn't tesselate regularly:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":687,"value":"{\n const svg = d3.select(DOM.svg(width,height*0.5));\n svg.selectAll('circle')\n .data(hexbin(pointGrid))\n .enter().append('circle')\n .attr('cx', function(d) { return d.x; })\n .attr('cy', function(d) { return d.y; })\n \t.attr('r', hexRadius-2)\n .style('fill', '#fff').style('stroke', '#ccc').style('stroke-width', 1);\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3125,"value":"md `There will always be gaps a circle tesselation won't capture. So we chose the next best option—hexagons:` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":674,"value":"{\n const svg = d3.select(DOM.svg(width,height*0.5));\n svg.append('g')\n .selectAll('path')\n .data(hexbin(pointGrid))\n .enter().append('path')\n .attr('transform', function(d) { return 'translate(' + d.x + ', ' + d.y + ')'; })\n .attr('d', hexbin.hexagon())\n .style('fill', '#fff').style('stroke', '#ccc').style('stroke-width', 1);\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3195,"value":"md `_{_There are more reasons why hexagons are special, written up in a much more concise and eloquent way at [arcgis.com](http://pro.arcgis.com/en/pro-app/tool-reference/spatial-statistics/h-whyhexagons.htm).\nThere is also much more to hexagons with [this post by @redblobgames](www.redblobgames.com/grids/hexagons/) being the ultimate reference._}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5255,"value":"md ` ## Making a hexbin map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7000,"value":"md `_Note, that the following part has been updated [over here](https://beta.observablehq.com/@larsvers/hexgrid-maps-with-d3-hexgrid) and wrapped up as the **d3-hexgrid** plugin [over here](https://github.com/larsvers/d3-hexgrid)_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1637,"value":"\n\nmd `Let's bin some data with hexagons. As a plane, we'll take a map of mainland US. We'll get some data in a minute, but first we regularly tesselate the US with hexagons. There'll be four steps involved:\n\n1. Draw the shape we'd like to tesselate\n2. Cover it with dots\n3. Only keep dots in the shape\n4. Turn them to hexagons.\n\nLet's start by... \n\n### Drawing a map of the US`","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"{\n const svg = d3.select(DOM.svg(width, height));\n svg.append('path')\n .datum(usGeo)\n .attr('d', geoPath)\n .attr('stroke', '#093672')\n \t.attr('fill', 'none');\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"md `### Covering the map with a point grid`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5252,"value":"md `Next, we overlay our map with a point grid.:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"{\n const svg = d3.select(DOM.svg(width, height))\n svg.append('path')\n .datum(usGeo)\n .attr('d', geoPath)\n .attr('stroke', 'darkblue')\n \t.attr('fill', 'none');\n\n svg.append('g').attr('id', 'circles')\n .selectAll('.dot')\n .data(pointGrid)\n .enter().append('circle')\n .attr('cx', function(d) { return d.x; })\n .attr('cy', function(d) { return d.y; })\n .attr('r', 2)\n .attr('fill', 'lightsteelblue');\n\n return svg.node();\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":5226,"value":"md `Above light blue points are NOT _data points_, we shall call them _grid points_ or **_layout points_** as they help us laying out the hexagons. The plan is to turn these _layout points_ into hexagons. The distance between the points will determine the hexagon sizes. As it would be nice to play around with different sized hexagons later, we calculate the layout point positions by the distance between the points, which will be our hexagon's radius at ${hexRadius}px. You can change the radius with the following slider... maybe slide it all the way down to see a dense tesselation:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5626,"value":"viewof hexRadius = {\n const div = html ``;\n div.value = hexRadiusUpdate;\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5041,"value":"md `With a hexagon radius of ${hexRadius} we get around ${Math.round(cols)} columns and ${Math.ceil(height / hexDistance)} rows of layout points covering our canvas.\n\nThat makes a total of ${pointGrid.length} points, we store in an array with _x_ and _y_ properties as well as a _datapoint_ property set to 0. Why? Because we want to tell them apart from our _real datapoints_ soon.\nHere are our _layout points_ as an array:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"pointGrid = {\n let rows = Math.ceil(height / hexDistance);\n\n return d3.range(rows * cols).map(function(el, i) {\n return {\n x: Math.floor(i % cols) * hexDistance,\n y: Math.floor(i / cols) * hexDistance,\n datapoint: 0\n };\n });\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"md `### Keeping only the shape grid`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5055,"value":"md `Next, we're throwing away all points outside our shape we would like to tesselate. We're using [d3.polygonContains()](https://github.com/d3/d3-polygon#polygonContains) to focus our points on the US mainland:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"{\n const svg = d3.select(DOM.svg(width, height))\n svg.append('path')\n .datum(usGeo)\n .attr('d', geoPath)\n .attr('stroke', 'darkblue')\n \t.attr('fill', 'none');\n\n svg.append('g').attr('id', 'circles')\n .selectAll('.dot')\n .data(usPoints)\n .enter().append('circle')\n .attr('cx', function(d) { return d.x; })\n .attr('cy', function(d) { return d.y; })\n .attr('r', 2)\n .attr('fill', 'lightsteelblue');\n\n return svg.node();\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5057,"value":"md `We've reduced the number of _layout points_ from ${pointGrid.length} to ${usPoints.length}:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"usPoints = pointGrid.reduce(function(arr, el) {\n if(d3.polygonContains(polygonPoints, [el.x, el.y])) arr.push(el);\n return arr;\n},[])","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"md `### Turning points into hexagons`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5062,"value":"md `Now, we turn our points into hexagons. First, we construct a hexbin generator with [d3.hexbin()](https://github.com/d3/d3-hexbin#hexbin)...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"hexbin = d3.hexbin()\n .radius(hexRadius)\n .x(function(d) { return d.x; })\n .y(function(d) { return d.y; }) ","pinned":true,"hidden":false,"mode":"ojs"},{"id":5071,"value":"md `...then we feed it our US points to generate the hexagons:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"{\n const svg = d3.select(DOM.svg(width, height));\n const hexes = svg.append('g').attr('id', 'hexes')\n \t.selectAll('.hex')\n .data(hexPoints)\n .enter().append('path')\n .attr('class', 'hex')\n .attr('transform', function(d) { return 'translate(' + d.x + ', ' + d.y + ')'; })\n .attr('d', hexbin.hexagon())\n .style('fill', 'none')\n .style('stroke', '#aaa')\n .style('stroke-width', 1);\n\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"hexPoints = hexbin(usPoints)","pinned":true,"hidden":false,"mode":"ojs"},{"id":5077,"value":"md `Note, that we get fewer hexagons (${hexPoints.length}) than _layout points_ (${usPoints.length}) as our _layout points_ are laid out in a symetrical fashion, unlike the hexagon centroids, which are laid out in a regular but asymetrical fashion by the hexbin generator. As a result, some of the hexagons cover more than one _layout point_.\n\nBut that's fine, as we only need to make sure for our hexbins to cover one or more points to produce a hexagon.\n\n### One step back: showing real data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6936,"value":"md `Let's finally add some data to be binned by the hexagons. We need point location data; _lat long_ coordinates of things. We'll go with one thrilling point location dataset here: [Farmers Markets in the US](https://www.ams.usda.gov/local-food-directories/farmersmarkets).\n\nHere's our hexagon-free map showing both, our blue coloured _layout points_ and our hot pink, real _datapoints_:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"{\n const svg = d3.select(DOM.svg(width, height));\n // drawPointGrid(svg, usPoints, '#3FB8AF', 1.5);\n drawPointGrid(svg, usPoints, 'dodgerblue', 1.5);\n drawPointGrid(svg, markets, 'hotpink', 1);\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"md `### Drawing the hexbin map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5268,"value":"md `There are ${markets.length} markets, i.e. _datapoints_ and ${usPoints.length} _layout points_. Let's run through the steps to visualise the data on a coloured hexgrid:\n\n1. We simply concatentate the 2 datasets to get an array of ${mergedPoints.length} items.\n2. Next, we run our hexbin generator on these points. It returns an array of ${mergedHexPoints.length} arrays. Each inner array represents a hexagon containing as many items as there are _layout_ or _datapoints_ in it.\n3. In a next step, we count the number of farmers markets per hexagon. **This** is the measure we will visualize. We also remove the layout points (they have served their purpose by covering our plane with hexagons, even the areas without any farmer markets). \n4. We build a [viridis](https://cran.r-project.org/web/packages/viridis/vignettes/intro-to-viridis.html) colour-scale, which maps the number of points to colours.\n5. Finally, we draw our hexbin map:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":543,"value":"{\n const svg = d3.select(DOM.svg(width, height));\n drawHexbinMap(svg, hexagonsWithData);\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6360,"value":"md ` There we are. We've smothered our map in _layout points_, focussing only on points in the polygon, added _datapoints_ to the mix, ran it through the d3-hexbin() generator to draw hexagons, we finally coloured sequentially.\n\nPlay around with the hexagon radius (${hexRadius}px) and the color-scale exponent below (see **_Note 1_** below) to get different views...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5636,"value":"viewof hexRadiusUpdate = {\n const div = html ``\n div.value = 7;\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":532,"value":"viewof colorScaleExponent= {\n const div = html`\n \n \n `;\n const range = div.querySelector(\"[type=range]\");\n const number = div.querySelector(\"[type=number]\");\n div.value = range.value = number.value = 10;\n range.addEventListener(\"input\", () => number.value = div.value = range.valueAsNumber);\n number.addEventListener(\"input\", () => range.value = div.value = number.valueAsNumber);\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5554,"value":"md `You can also play with a more interactive version here, and certainly ping me for different or better ways to get here, or to just say hello. If you want to read the extended version, head over here for the book.\n\nps: this is being wrapped into a _d3-hexgrid_ plugin as we speak, for better or worse...\n\n
\n

\n\n### Two short notes...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5573,"value":"md `**Note 1**: our data has a few outliers. If we chose a hexagon radius of 5, the vast majority of hexagons encloses 20 or less markets. However a few hexagons (covering _Washington D.C._, _New York_ or _Chicago_) encloses up to almost 170 markets. \n\nIf we mapped our input values (# of markets per hexagon) linearly to our output range (color of hexagon), we would see a very yellow map. Hence, we don't use a linear but an exponential color scale, which effectively reaches the higher color ranges (darker purple) earlier. A great topic for another Observable notebook.\n\nYou can see the effect by changing the interpolator exponent above under the map. A value of 1 represents a linear mapping, the higher you slide, the higher the scale exponent becomes meaning the scale reaches darker colours at much lower inputs (in our example: at much lower number of markets per hexagons).\n\n
\n**Note 2**: I hope, I didn't, but if I lost you with above 5 points, here's the data and/or code for each step:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5388,"value":"html `1. merge layout with datapoints:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"mergedPoints = usPoints.concat(markets)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5407,"value":"html `2. Run the hexbin generator on the merged data:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":509,"value":"mergedHexPoints = hexbin(mergedPoints)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5410,"value":"html `3. Aggregate the number of markets in the property datapoints and remove the layout points:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"hexagonsWithData = {\n return mergedHexPoints.reduce(function(arr, el, i){\n\n // Remove layout points.\n for (var i = el.length - 1; i >= 0; --i) {\n if (el[i].datapoint === 0) {\n el.splice(i, 1);\n }\n }\n\n // Loop through all markets in the hexagon.\n var count = 0, markets = [];\n el.forEach(function(elt) {\n\n count++; // # of markets in hexagon\n var obj = {};\n obj.name = elt.name;\n markets.push(obj);\n\n });\n\n // Add to hexagon.\n el.datapoints = count;\n el.markets = markets;\n\n arr.push(el);\n \n return arr;\n \n }, []);\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5420,"value":"html `4. Build the colour scale:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":535,"value":"colorScale = d3.scaleSequential(function(t) {\n var tNew = Math.pow(t, colorScaleExponent);\n return d3.interpolateViridis(tNew);\n}).domain([maxCount, 1])\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":5488,"value":"html `5. Draw it:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"drawHexbinMap = function(svg, data){\n \n svg.append('g').attr('id', 'hexes')\n .selectAll('.hex')\n .data(data)\n .enter().append('path')\n .attr('class', 'hex')\n .attr('transform', function(d) { return 'translate(' + d.x + ', ' + d.y + ')'; })\n .attr('d', hexbin.hexagon())\n .style('fill', function(d) { return d.datapoints === 0 ? 'none' : colorScale(d.datapoints); })\n .style('stroke', '#eee')\n .style('stroke-width', 0.5);\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1457,"value":"md `

Appendix: Intro Code

\n\n### Increments`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1726,"value":"incrementSquare = {\n let i = nPoints;\n while(i > -1 && triggerSquares === 'true') {\n yield i -= nPoints/100;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2775,"value":"incrementCircleHex = {\n let i = nPoints;\n while(i > -1 && triggerNonSquares === 'true') {\n yield i -= nPoints/100;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3241,"value":"md `### Contexts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2264,"value":"ctxSquareAnim = await d3.select('#square-canvas-anim').node().getContext('2d')","pinned":false,"hidden":false,"mode":"ojs"},{"id":2360,"value":"ctxSquareAnno = await d3.select('#square-canvas-anno').node().getContext('2d')","pinned":false,"hidden":false,"mode":"ojs"},{"id":2300,"value":"circleCtxAn = await d3.select('#circle-canvas-anim').node().getContext('2d')","pinned":false,"hidden":false,"mode":"ojs"},{"id":2459,"value":"ctxCircleAnno = await d3.select('#circle-canvas-anno').node().getContext('2d')","pinned":false,"hidden":false,"mode":"ojs"},{"id":2308,"value":"hexCtxAn = await d3.select('#hex-canvas-anim').node().getContext('2d')","pinned":false,"hidden":false,"mode":"ojs"},{"id":2578,"value":"ctxHexAnno = await d3.select('#hex-canvas-anno').node().getContext('2d')","pinned":false,"hidden":false,"mode":"ojs"},{"id":3243,"value":"md `### Helper functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2617,"value":"function resizeCanvas(context) {\n\n const canvas = context.canvas;\n \n canvas.width = width * window.devicePixelRatio;\n canvas.height = h * window.devicePixelRatio;\n \n canvas.style.width = `${width}px`;\n canvas.style.height = `${h}px`;\n \n context.scale(window.devicePixelRatio, window.devicePixelRatio)\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2685,"value":"function addPoints(pointData, inc, ctx, barBase) {\n \n const barScaleX = d3.scaleBand().domain(d3.range(nPoints)).range([cxShape + edge, width - edge/2]);\n const barScaleY = d3.scaleLinear().domain([0, maxDist]).range([barBase, barBase-squareDiameter/2]);\n\n resizeCanvas(ctx);\n \n const pointDataDraw = pointData.filter((el, i) => i >= inc);\n\n ctx.clearRect(0, 0, width, h);\n\n pointDataDraw.forEach(el => {\n\n // Draw inner points.\n\tctx.beginPath();\n ctx.arc(el.x, el.y, 1, 0, 2*Math.PI);\n ctx.fillStyle = colScale(el.dist);\n ctx.fill();\n\t\n // Draw lines.\n ctx.beginPath();\n ctx.moveTo(barScaleX(el.index), barBase);\n ctx.lineTo(barScaleX(el.index), barScaleY(el.dist));\n ctx.lineWidth = 1;\n ctx.strokeStyle = colScale(el.dist);\n ctx.stroke();\n });\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2110,"value":"annotate = function(ctx, value, col, pos) {\n \n resizeCanvas(ctx);\n \n ctx.clearRect(0,0,width,h);\n \n ctx.save();\n \n // Quadratic line.\n ctx.strokeStyle = 'steelblue';\n ctx.beginPath();\n ctx.moveTo(pos[0], pos[1]*0.9);\n ctx.quadraticCurveTo(pos[2], pos[3], pos[4], pos[5]);\n ctx.stroke();\n \n // Line dot.\n ctx.beginPath();\n ctx.arc(pos[4], pos[5], 1.5, 0, 2*Math.PI);\n ctx.fillStyle = 'steelblue';\n ctx.fill();\n \n // Text.\n ctx.fillStyle = 'steelblue';\n ctx.font = \"12px Helvetica\";\n ctx.fillText(`${Math.round(value)} pixel = furthest point from center`, width / 3 + 7, top + 5)\n \n ctx.restore();\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3245,"value":"md `### Draw functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2144,"value":"drawSquare = {\n const can = await d3.select('#square-canvas-back').node();\n const ctx = await can.getContext('2d')\n \n resizeCanvas(ctx)\n \n ctx.clearRect(0, 0, width, h);\n \n // Draw rect.\n ctx.strokeStyle = 'steelblue';\n ctx.beginPath();\n ctx.strokeRect(cxShape-edge/2, top, edge, edge);\n ctx.stroke;\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2293,"value":"drawSquarePoints = { addPoints(pointsSquare, incrementSquare, ctxSquareAnim, bottom) }","pinned":false,"hidden":false,"mode":"ojs"},{"id":2362,"value":"annotateSquare = {\n (incrementSquare > 0 || !incrementSquare)\n\t? ctxSquareAnno.clearRect(0,0,width,h)\n : annotate(ctxSquareAnno, maxDist, '#ccc', [edge*2, bottom-squareDiameter/2,\n \t\t\tedge*2, top, width/3, top])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1761,"value":"drawCircle = {\n\n const ctx = await d3.select('#circle-canvas-back').node().getContext('2d');\n \n ctx.clearRect(0, 0, width, height)\n\n // Draw outer circle.\n ctx.beginPath();\n ctx.arc(cxShape, cyShape, radius, 0, 2*Math.PI);\n ctx.strokeStyle = 'steelblue';\n ctx.stroke();\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2297,"value":"drawCirclePoints = { addPoints(pointsCircle, incrementCircleHex, circleCtxAn, h/2 + radius) }","pinned":false,"hidden":false,"mode":"ojs"},{"id":2449,"value":"annotateCircle = {\n (incrementCircleHex > 0 || !incrementCircleHex)\n\t? ctxCircleAnno.clearRect(0,0,width,h)\n : annotate(ctxCircleAnno, radius, '#ccc', [edge*2, cyShape, \n \t\t edge*2, top, width/3, top])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1839,"value":"drawHexagon = {\n\n const ctx = await d3.select('#hex-canvas-back').node().getContext('2d');\n \n ctx.clearRect(0,0,width,h)\n\n // Draw the hexagon.\n ctx.strokeStyle = 'steelblue';\n ctx.lineWidth = 1;\n ctx.beginPath();\n\n polygon.forEach((el, i) => {\n !i \n ? ctx.moveTo(el[0], el[1])\n : ctx.lineTo(el[0], el[1]);\n });\n ctx.closePath();\n ctx.stroke();\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2305,"value":"drawHexagonPoints = { addPoints(pointsHexInCircle, incrementCircleHex, hexCtxAn, h/2 + hexSide) }","pinned":true,"hidden":false,"mode":"ojs"},{"id":2584,"value":"annotateHexagon = {\n (incrementCircleHex > 0 || !incrementCircleHex)\n\t? ctxHexAnno.clearRect(0,0,width,h)\n : annotate(ctxHexAnno, hexSide, '#ccc', [edge*2, cyShape, \n edge*2, top, width/3, top])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1630,"value":"md `### Drawing dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs"},{"id":1400,"value":"h = height/2","pinned":false,"hidden":false,"mode":"ojs"},{"id":1402,"value":"top = h*0.1","pinned":false,"hidden":false,"mode":"ojs"},{"id":1407,"value":"bottom = h*0.9","pinned":false,"hidden":false,"mode":"ojs"},{"id":1628,"value":"md `### Positions and Object dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1533,"value":"cxShape = edge","pinned":false,"hidden":false,"mode":"ojs"},{"id":1536,"value":"cyShape = h/2","pinned":false,"hidden":false,"mode":"ojs"},{"id":1034,"value":"edge = h*0.8","pinned":false,"hidden":false,"mode":"ojs"},{"id":1095,"value":"squareArea = edge**2","pinned":false,"hidden":false,"mode":"ojs"},{"id":1107,"value":"radius = Math.sqrt(squareArea/Math.PI)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1854,"value":"hexSide = (3**0.25) * Math.sqrt(2 * squareArea/9)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2281,"value":"squareDiameter = edge * Math.sqrt(2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1626,"value":"md `### Scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1620,"value":"xScale = d3.scaleLinear().domain([0, 1]).range([cxShape-edge/2, cxShape+edge/2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1622,"value":"yScale = d3.scaleLinear().domain([0, 1]).range([bottom, top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1784,"value":"maxDist = d3.max(pointsSquare, d => d.dist)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1141,"value":"getColScale = function(exp) {\n return d3.scaleSequential(function(t) {\n const tNew = Math.pow(t, exp);\n return d3.interpolateBlues(tNew);\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1714,"value":"// Shockingly not even considering the possibilty of \n// maximum circle or hex distances to be longer than square distances.\ncolScale = getColScale(3).domain([0, maxDist]) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1639,"value":"md `### Intro Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":862,"value":"function distance(pointA, pointB) {\n return Math.sqrt((pointA.x-pointB.x) ** 2 + (pointA.y-pointB.y) ** 2);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1812,"value":"randDiskPoints = function(n, r) {\n\n return d3.range(n).map(el => {\n \n const tRand = Math.random()*2*Math.PI;\n const rRand = Math.sqrt((Math.random()*r*r));\n const x = cxShape + rRand * Math.cos(tRand);\n const y = cyShape + rRand * Math.sin(tRand);\n \n return {\n x: x, y: y, dist: distance({x, y}, {x: cxShape, y: cyShape}) \n }\n\n })\n .sort((a,b) => b.dist - a.dist)\n .map((el, i) => ({ x: el.x, y: el.y, dist: el.dist, index: i }));\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1892,"value":"polygon = d3.range(6).map(el => {\n const deg = el * 60 + 30;\n const rad = Math.PI / 180 * deg;\n const x = cxShape + hexSide * Math.cos(rad);\n const y = cyShape + hexSide * Math.sin(rad);\n \treturn [x, y];\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1648,"value":"pointsSquare = d3.range(nPoints).map(el => { \n const x = xScale(Math.random()), y = yScale(Math.random());\n const dist = distance({x, y}, {x: cxShape, y: cyShape});\n return { x, y, dist };\n})\n.sort((a,b) => b.dist - a.dist)\n.map((el, i) => ({ x: el.x, y: el.y, dist: el.dist, index: i }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1845,"value":"pointsCircle = randDiskPoints(nPoints, radius)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1848,"value":"pointsHex = randDiskPoints(nPoints*1.2106, hexSide)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1906,"value":"pointsHexInCircle = pointsHex\n .filter(el => d3.polygonContains(polygon, [el.x, el.y]))\n .map((el, i) => ({ x: el.x, y: el.y, dist: el.dist, index: i })) // need to do this again.","pinned":false,"hidden":false,"mode":"ojs"},{"id":1324,"value":"html ` \n_css`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2794,"value":"html`\n_{button css}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6812,"value":"md ` `","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"md `## Appendix: Hexbin Map Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6535,"value":"md `### Dimensions and Elements`","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"cols = width / hexDistance","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"hexDistance = hexRadius * 1.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":522,"value":"maxCount = d3.max(hexagonsWithData.map(el => el.length))","pinned":false,"hidden":false,"mode":"ojs"},{"id":5697,"value":"hexSliderDep = d3.select('#hexSliderDep').node()","pinned":false,"hidden":false,"mode":"ojs"},{"id":5700,"value":"hexSliderIndep = d3.select('#hexSliderIndep').node()","pinned":false,"hidden":false,"mode":"ojs"},{"id":5694,"value":"{\n hexSliderDep.addEventListener(\"input\", () => hexSliderDep.value = hexSliderIndep.valueAsNumber);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6568,"value":"md `### Helper functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"projection = d3.geoAlbers().fitExtent([[0, height*0.05], [width, height*0.95]], usGeo)","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"geoPath = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"drawPointGrid = function(svg, data, colour, radius){\n\n svg.append('g').attr('id', 'circles')\n .selectAll('.dot')\n .data(data)\n .enter().append('circle')\n .attr('cx', function(d) { return d.x; })\n .attr('cy', function(d) { return d.y; })\n .attr('r', radius)\n .attr('fill', colour);\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6529,"value":"md `### Data\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"usTopo = d3.json('https://raw.githubusercontent.com/larsvers/learning-d3-mapping-11-1/master/data/us.json')","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"usGeo = {\n const us = (await topojson.feature(usTopo, usTopo.objects.us));\n us.features[0].geometry.coordinates = [us.features[0].geometry.coordinates[7]]\n return us\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"polygonPoints = {\n const features = usGeo.features[0].geometry.coordinates[0][0];\n return features.map(el => projection(el));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"markets = {\n const data = await d3.json('https://raw.githubusercontent.com/larsvers/Learning-D3.js-4-Mapping/master/chapter-11/data/markets_overall.json')\n\n return data.map(function(el) {\n var coords = projection([+el.lng, +el.lat]);\n return {\t\t\t\n x: coords[0],\n y: coords[1],\n datapoint: 1,\n name: el.MarketName,\n };\n });\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":6480,"value":"md `## General`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5143,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1593,"value":"d3 = require('d3-selection', 'd3-scale', 'd3-hexbin', 'd3-fetch', 'd3-geo', 'd3-array', 'd3-polygon', 'd3-scale-chromatic', 'd3-dispatch')","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}