31:T450,canvasCities = { const pr = window.devicePixelRatio || 1; const canvas = DOM.canvas(w * pr, h * pr); const context = canvas.getContext('2d'); // Crispify. canvas.setAttribute('style', `width: ${w}px`); context.scale(pr, pr) // Colour scale. const counts = hexCities.grid.layout.map(el => el.datapointsWt).filter(el => el > 0); const ckBreaks = ss.ckmeans(counts, 4).map(clusters => clusters[0]); const colour = d3.scaleThreshold().domain(ckBreaks).range(['#293e5a','#5e6d7c','#929b9f','#c7cac1','#fbf8e3']); // Background. const gradient = context.createRadialGradient(w/2,h/2,5,w/2,h/2,w/2); gradient.addColorStop(0, '#0C2648'); gradient.addColorStop(1, '#091426'); context.fillStyle = gradient; context.fillRect(0,0,w,h); // Draw prep. const hexagon = new Path2D(hexCities.hexagon()); pathCities.context(context); // Draw. hexCities.grid.layout.forEach(hex => { context.save(); context.translate(hex.x, hex.y); context.fillStyle = colour(hex.datapointsWt); context.fill(hexagon); context.restore() }); return canvas }32:[] 2f:{"title":"d3-hexgrid examples","cells":[{"id":0,"value":"md`# d3-hexgrid examples\n\nA series of examples building regularly tessellated hexbin maps with [d3-hexgrid](https://github.com/larsvers/d3-hexgrid). All examples follow the same logic:\n\n1. Configure the hexgrid generator\n2. Call the generator with point location data\n3. Draw it\n\nEach example also adds some additional, potentially useful technique—as specified under the header...\n\n_See used data, projections and path generators in the appendix._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"md `\n
\n## Farmers Markets in the US\n_SVG with an exponential colour scale_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"hexgridMarkets = d3.hexgrid()\n .extent([w, h])\n .geography(us)\n .pathGenerator(pathMarkets)\n .projection(projectMarkets)","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"hexMarkets = hexgridMarkets(markets)","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"colour = d3.scaleSequential(function(t) {\n var tNew = Math.pow(t, 10);\n return d3.interpolateViridis(tNew);\n }).domain(hexMarkets.grid.extentPointDensity.reverse())","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"svgMarkets = {\n\tconst svg = DOM.svg(w, h)\n\n d3.select(svg).selectAll('.hex')\n\t\t.data(hexMarkets.grid.layout)\n\t\t.enter()\n\t\t.append('path')\n\t\t.attr('class', 'hex')\n\t\t.attr('transform', d => `translate(${d.x} ${d.y})`)\n\t\t.attr('d', hexMarkets.hexagon())\n .style('fill', d => !d.pointDensity ? '#fff' : colour(d.pointDensity))\n\t\t.style('stroke', '#ccc')\n\t\t.style('stroke-width', 1);\n \n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"html `_{See it also as a simple block or as a block with some interaction.}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"md `\n
\n## Militarised Disputes in Europe\n_SVG clipping the geography using a [1D clustering](https://simplestatistics.org/docs/#ckmeans) colour scale_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"disputesEurope = {\n const europePolygon = d3.geoPolygon(europe, projectDisputes);\n const disputesEurope = d3.polygonPoints(disputes, europePolygon);\n return disputesEurope;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"hexgridDisputes = d3.hexgrid()\n .extent([w, h])\n .geography(europe)\n .projection(projectDisputes)\n .pathGenerator(pathDisputes)\n .hexRadius(7)","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"hexDisputes = hexgridDisputes(disputesEurope)","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"svgDisputes = {\n const svg = d3.select(DOM.svg(w, h));\n svg.append('defs').append('clipPath').attr('id', 'clip-europe')\n .append('path').attr('d', pathDisputes(europe));\n\n const counts = hexDisputes.grid.layout.map(el => el.pointDensity).filter(el => el > 0);\n\tconst ckBreaks = ss.ckmeans(counts, 4).map(clusters => clusters[0]);\n\tconst colour = d3.scaleThreshold().domain(ckBreaks).range(['#fff','#e7e7e7','#aaa','#777','#555']);\n\n svg.append('g').append('path').attr('d', pathDisputes(europe)).style('fill', 'none').style('stroke', '#000');\n\n const g = svg.append('g').attr('clip-path', 'url(#clip-europe)');\n\n g.selectAll('.hex')\n .data(hexDisputes.grid.layout)\n .enter().append('path')\n .attr('class', 'hex')\n .attr('transform', d => `translate(${d.x}, ${d.y})`)\n .attr('d', hexDisputes.hexagon())\n .style('fill', d => d.datapoints ? colour(d.pointDensity) : '#fff')\n .style('stroke', '#999').style('stroke-opacity', 0.4)\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"html `_{As a block.}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"md `\n
\n## Top 10,000 cities of the world\n_Drawing on Canvas_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"hexgridCities = d3.hexgrid()\n .extent([w, h])\n .geography(world)\n .projection(projectCities)\n .pathGenerator(pathCities)\n .hexRadius(1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"hexCities = hexgridCities(cities)","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"html `_{As a block.}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"md `\n
\n## Post boxes in the UK\n_Canvas again. And a load of post boxes._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"hexgridPost = d3.hexgrid()\n .extent(extentPost)\n .geography(uk)\n .projection(projectPost)\n .pathGenerator(pathPost)\n .hexRadius(3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"hexPost = hexgridPost(postUk)","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"canvasPost = {\n\n const pr = window.devicePixelRatio || 1;\n const canvas = DOM.canvas(w * pr, h * pr);\n const context = canvas.getContext('2d');\n \n canvas.setAttribute('style', `width:${w}px`);\n context.scale(pr, pr);\n \n context.fillStyle = '#02154e';\n context.fillRect(0,0,w,h);\n \n const counts = hexPost.grid.layout.map(el => el.datapointsWt).filter(el => el > 0);\n\tconst ckBreaks = ss.ckmeans(counts, 5).map(clusters => clusters[0]);\n const colour = d3.scaleThreshold().domain(ckBreaks)\n .range(['#fff9f9','#fbb1b0','#fc8584','#fd5958','#fe2c2c','crimson']);\n \n const hexagon = new Path2D(hexPost.hexagon());\n pathPost.context(context);\n \n hexPost.grid.layout.forEach(box => {\n \n context.save();\n context.translate(box.x, box.y);\n context.fillStyle = colour(box.datapointsWt)\n context.fill(hexagon);\n context.restore();\n\n });\n\n return canvas; \n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"html `_{As a block.}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"md `---------------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"md `#### Dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"w = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"h = w/2","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"md `#### Conflict data and projection`","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"europe = await d3.json('https://raw.githubusercontent.com/larsvers/map-store/master/europe_geo.json')","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"disputes = {\n \n const disputes = await d3.csv('https://raw.githubusercontent.com/larsvers/data-store/master/military_disputes_world.csv');\n return disputes.map(dispute => {\n const coords = projectDisputes([+dispute.lng, +dispute.lat]);\n return Object.assign({x: coords[0], y: coords[1]}, dispute);\n });\n\n return disputes;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"projectDisputes = d3.geoConicEqualArea()\n .fitSize([w, h], europe)\n .parallels([36, 66])","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"pathDisputes = d3.geoPath().projection(projectDisputes)","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"md `#### Cities data and projection`","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"world = await d3.json('https://raw.githubusercontent.com/larsvers/map-store/master/earth-lands-10km.json')","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"cities = {\n const cities = await d3.csv('https://raw.githubusercontent.com/larsvers/data-store/master/cities_top_10000_world.csv');\n return cities.map(city => {\n const coords = projectCities([+city.lng, +city.lat]);\n return Object.assign({x: coords[0], y: coords[1]}, city);\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"projectCities = d3.geoRobinson().fitSize([w, h], world)","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"pathCities = d3.geoPath().projection(projectCities)","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"md `#### Farmers Markets data and projection`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"us = await d3.json('https://raw.githubusercontent.com/larsvers/map-store/master/us_mainland_geo.json')","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"markets = {\n const markets = await d3.json('https://raw.githubusercontent.com/larsvers/data-store/master/farmers_markets_us.json');\n return markets.map(market => {\n const coords = projectMarkets([+market.lng, +market.lat]);\n return Object.assign({x: coords[0], y: coords[1]}, market);\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"projectMarkets = d3.geoAlbers().fitSize([w, h], us)","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"pathMarkets = d3.geoPath().projection(projectMarkets)","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"md `#### Post boxes data and projection`","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"post = {\n const markets = await d3.csv('https://raw.githubusercontent.com/larsvers/data-store/master/postbox_locations_uk.csv');\n return markets.map(market => {\n const coords = projectPost([+market.lng, +market.lat]);\n return Object.assign({x: coords[0], y: coords[1]}, market);\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"postUk = {\n const poly = d3.geoPolygon(uk, projectPost);\n return d3.polygonPoints(post, poly);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"uk = {\n const topo = await d3.json('https://raw.githubusercontent.com/larsvers/map-store/master/GBR_adm0_topo.json');\n return topojson.feature(topo, topo.objects.GBR_adm0)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"extentPost = [[0, h * 0.05],[w, h * 0.95]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"projectPost = d3.geoConicEqualArea().parallels([50,61]).fitExtent(extentPost, uk)","pinned":false,"hidden":false,"mode":"ojs"},{"id":359,"value":"pathPost = d3.geoPath().projection(projectPost)","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"md `#### Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\n 'd3-fetch',\n 'd3-geo',\n 'd3-geo-projection',\n 'd3-hexbin',\n 'd3-hexgrid',\n 'd3-selection',\n 'd3-scale',\n 'd3-scale-chromatic'\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"topojson = require('topojson')","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"ss = require('simple-statistics')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}