30:T4d4,map = { let div = d3 .create('div') .style("width", `${map_width}px`) .style("height", `${height}px`) .style('overflow', 'hidden'); let svg = div .append('svg') .style('overflow', 'hidden') .attr("viewBox", [0, 0, map_width, height]); let path = d3.geoPath().projection(proj); let map = svg.append('g'); map .selectAll("path") .data(states.features) .join("path") .attr('class', 'state') .attr('d', path) .style("fill", function(d) { return d3.interpolateBlues( (state_total_map.get(d.properties.fips) / state_total_map.max) ** 0.4 ); }) .attr("stroke-width", '1.5px') .attr("stroke", "#ddd") .attr("stroke-linejoin", "round"); let hexes = map .append("g") .selectAll("path") .data(city_info_hex) .join("path") .attr('class', 'hex') .attr("transform", d => `translate(${d.x}, ${d.y})`) .attr("d", hexbin.hexagon()) .style("fill", o => d3.interpolateReds((d3.sum(o.map(d => d.cnt)) / hex_max) ** 0.25) ) .style("opacity", 0.7) .style("stroke", "#fff") .attr("stroke-width", 0.4) .attr('title', title_table); hexes.nodes().forEach(d => tippy(d, {})); return div.node(); }31:[{"id":"6d6cd6bbf0d4608ab3830c4247decaff06d7f989a96623a08fa4308df60c21365aeb740b63446adc1e5b31f0d6afdc7217929c8ba4b550d50d2187fa6dce7649","href":"https://static.observableusercontent.com/files/6d6cd6bbf0d4608ab3830c4247decaff06d7f989a96623a08fa4308df60c21365aeb740b63446adc1e5b31f0d6afdc7217929c8ba4b550d50d2187fa6dce7649","name":"city_counts@4.csv","type":"text/csv","lastModified":1593735744245.068,"size":381262},{"id":"f65ef23ced08949032e5783fba9b20fd295aa275bafd2a83794bdbb9d0d17d63e022919f584da4a81ed8f727011f59691cf1fe60acf95caeb292b6207b9a4344","href":"https://static.observableusercontent.com/files/f65ef23ced08949032e5783fba9b20fd295aa275bafd2a83794bdbb9d0d17d63e022919f584da4a81ed8f727011f59691cf1fe60acf95caeb292b6207b9a4344","name":"states.json","type":"application/json","lastModified":1593735744245.068,"size":116814}] 2e:{"title":"Admetrics hexbin map","cells":[{"id":0,"value":"md`# Admetrics hexbin map\n\nThe hexbin map below illustrates sample locations of page hits obtained from admetrics. [Here's a bubble map](https://observablehq.com/@ccnlog/admetrics-bubble-map) for this same data.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":526,"value":"hex_opacity = {\n let div = d3.create('div');\n div\n .append('div')\n .text('Hex Opacity')\n .style('font-weight', 'bold');\n let slider_container = div.append('div');\n let o = slider_container\n .append('input')\n .style('width', '300px')\n .attr('type', 'range')\n .attr('min', 0)\n .attr('max', 1)\n .attr('step', 0.01)\n .attr('value', 0.7)\n .on('input', function() {\n d3.select(map)\n .selectAll('path.hex')\n .style('opacity', o.property('value'));\n });\n\n return div.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":582,"value":"md`## Hexbinning`","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"hexbin = d3\n .hexbin()\n .extent([[0, 0], [map_width, height]])\n .x(x => x.x)\n .y(y => y.y)\n .radius(map_width / 80)","pinned":true,"hidden":false,"mode":"ojs"},{"id":585,"value":"// Need the max to shade the hexes\nhex_max = d3.max(city_info_hex.map(o => d3.sum(o.map(d => d.cnt))))","pinned":true,"hidden":false,"mode":"ojs"},{"id":588,"value":"// Best to do this just once\ncity_info_hex = hexbin(city_info)","pinned":true,"hidden":false,"mode":"ojs"},{"id":597,"value":"// Tooltip titles for the hexes\nfunction title_table(ci) {\n let html = `\n \n \n \n \n \n`;\n ci.slice(0, 10).forEach(function(o) {\n let this_html = ` \n \n \n`;\n html = html + this_html;\n });\n html = html + '

City	State	Hits
${o.city}	${o.state}	${o.cnt}

';\n return html;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":576,"value":"md`## Data manipulation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":558,"value":"// Cities and count data file\ncity_info = d3\n .csvParse(await FileAttachment(\"city_counts@4.csv\").text(), d3.autoType)\n .sort((a, b) => d3.descending(a.cnt, b.cnt))\n .slice(0, N)\n .map(function(o) {\n let [x, y] = proj([o.x, o.y]);\n o.x = x;\n o.y = y;\n return o;\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":607,"value":"// Map and city data are pre-projected to Albers USA.\n// Just need to scale to fit the extent.\nproj = d3\n .geoIdentity()\n .reflectY(true)\n .fitSize([map_width, height], states)","pinned":true,"hidden":false,"mode":"ojs"},{"id":610,"value":"// State totals for shading\nstate_total_map = {\n let state_total_map = new Map();\n city_info.forEach(function(c) {\n let key = c.state;\n if (typeof state_total_map.get(key) == 'undefined') {\n state_total_map.set(key, c.cnt);\n } else {\n state_total_map.set(key, state_total_map.get(key) + c.cnt);\n }\n });\n state_total_map.max = d3.max(Array.from(state_total_map.values()));\n return state_total_map;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"// The states\nstates = {\n let map_file = await FileAttachment(\"states.json\").json();\n let states = topojson.feature(map_file, map_file.objects.states);\n return states;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":564,"value":"md`## Parameters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":567,"value":"// Number of cities\n// (there's almost 6000 but the map is awfully busy with all of them)\nN = 2500","pinned":true,"hidden":false,"mode":"ojs"},{"id":639,"value":"map_width = 0.9 * width","pinned":true,"hidden":false,"mode":"ojs"},{"id":570,"value":"height = 0.625 * map_width","pinned":true,"hidden":false,"mode":"ojs"},{"id":561,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@5\", \"d3-hexbin@0.2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":152,"value":"tippy = require(\"https://unpkg.com/tippy.js@2.5.4/dist/tippy.all.min.js\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}