{"id":"33fefd8d7234ca58","slug":"hexbin-map","first_public_version":295,"paused_version":null,"likes":115,"publish_level":"live","forks":134,"fork_of":null,"has_importers":true,"thumbnail":"15fff0529c42229156ea3e0847e59fd7e362afc6dd87a1d06f6cf06cb5a11ed9","default_thumbnail":"15fff0529c42229156ea3e0847e59fd7e362afc6dd87a1d06f6cf06cb5a11ed9","update_time":"2020-08-26T22:59:11.159Z","publish_time":"2023-07-17T08:01:02.375Z","publish_version":310,"latest_version":310,"roles":[],"sharing":null,"owner":{"id":"863951e3ebe4c0ae","avatar_url":"https://avatars.observableusercontent.com/avatar/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","login":"d3","name":"D3","bio":"Bring your data to life.","home_url":"https://d3js.org","type":"team","tier":"pro_2024"},"creator":{"id":"074c414ad1d825f5","avatar_url":"https://avatars.observableusercontent.com/avatar/82811927da99f8938001b2ef1f552ad2c47083e46ebc55a3a146a5a5848c4519","login":"mbostock","name":"Mike Bostock","bio":"Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.","home_url":"https://bost.ocks.org/mike/","tier":"pro"},"authors":[{"id":"074c414ad1d825f5","avatar_url":"https://avatars.observableusercontent.com/avatar/82811927da99f8938001b2ef1f552ad2c47083e46ebc55a3a146a5a5848c4519","name":"Mike Bostock","login":"mbostock","bio":"Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.","home_url":"https://bost.ocks.org/mike/","tier":"pro","approved":true,"description":""}],"files":[{"id":"101496fd1e9e68bac678fc336a89c4a5345fb46ce51263dffae00a4ee5c41ef3792ab8e4fbb35db8448b5721fe7a74dedac982d35fddd40329d098c8a9df1cd4","url":"https://static.observableusercontent.com/files/101496fd1e9e68bac678fc336a89c4a5345fb46ce51263dffae00a4ee5c41ef3792ab8e4fbb35db8448b5721fe7a74dedac982d35fddd40329d098c8a9df1cd4","download_url":"https://static.observableusercontent.com/files/101496fd1e9e68bac678fc336a89c4a5345fb46ce51263dffae00a4ee5c41ef3792ab8e4fbb35db8448b5721fe7a74dedac982d35fddd40329d098c8a9df1cd4?response-content-disposition=attachment%3Bfilename*%3DUTF-8%27%2710m.json","name":"10m.json","create_time":"2019-10-29T21:08:52.931Z","mime_type":"application/json","status":"public","size":689794,"content_encoding":"gzip","private_bucket_id":null},{"id":"584765eba3dde077d5e14795a23179b06f32e3d8acdb624972812fffb82c232b3222dd85724740394d9f76a73b4fc340ccc4db8015b7995b7562e5d2fa9577ca","url":"https://static.observableusercontent.com/files/584765eba3dde077d5e14795a23179b06f32e3d8acdb624972812fffb82c232b3222dd85724740394d9f76a73b4fc340ccc4db8015b7995b7562e5d2fa9577ca","download_url":"https://static.observableusercontent.com/files/584765eba3dde077d5e14795a23179b06f32e3d8acdb624972812fffb82c232b3222dd85724740394d9f76a73b4fc340ccc4db8015b7995b7562e5d2fa9577ca?response-content-disposition=attachment%3Bfilename*%3DUTF-8%27%27walmart.tsv","name":"walmart.tsv","create_time":"2019-10-31T17:28:35.420Z","mime_type":"text/tab-separated-values","status":"public","size":99253,"content_encoding":"gzip","private_bucket_id":null},{"id":"0d8fa65dce2397df03b75fb4fabbc7d79e2794ef64f018bdd1dd43460bc3795743e69dbf1d7456791cbef424e272d5cd33f49e3e445ce78f9a53ef5e5755e16e","url":"https://static.observableusercontent.com/files/0d8fa65dce2397df03b75fb4fabbc7d79e2794ef64f018bdd1dd43460bc3795743e69dbf1d7456791cbef424e272d5cd33f49e3e445ce78f9a53ef5e5755e16e","download_url":"https://static.observableusercontent.com/files/0d8fa65dce2397df03b75fb4fabbc7d79e2794ef64f018bdd1dd43460bc3795743e69dbf1d7456791cbef424e272d5cd33f49e3e445ce78f9a53ef5e5755e16e?response-content-disposition=attachment%3Bfilename*%3DUTF-8%27%27states-albers-10m.json","name":"states-albers-10m.json","create_time":"2020-02-15T20:55:41.376Z","mime_type":"application/json","status":"public","size":82031,"content_encoding":"gzip","private_bucket_id":null},{"id":"ff73290f3fccc5db55f09031bb845e639a07e444ca9fbcf83f2dbb4600a38bf4baccb2a85df3c24dba57a4ed64c230dcf1a87604453969495db835c5f3cbebf2","url":"https://static.observableusercontent.com/files/ff73290f3fccc5db55f09031bb845e639a07e444ca9fbcf83f2dbb4600a38bf4baccb2a85df3c24dba57a4ed64c230dcf1a87604453969495db835c5f3cbebf2","download_url":"https://static.observableusercontent.com/files/ff73290f3fccc5db55f09031bb845e639a07e444ca9fbcf83f2dbb4600a38bf4baccb2a85df3c24dba57a4ed64c230dcf1a87604453969495db835c5f3cbebf2?response-content-disposition=attachment%3Bfilename*%3DUTF-8%27%27us-counties-10m.json","name":"us-counties-10m.json","create_time":"2023-07-17T07:49:49.143Z","mime_type":"application/json","status":"public","size":842177,"content_encoding":"gzip","private_bucket_id":null}],"comments":[],"commenting_lock":null,"suggestions_to":[],"suggestion_from":null,"collections":[{"id":"1b0fbc3b1939d7fa","type":"public","slug":"gallery","title":"Gallery","description":"Examples featured in the D3 gallery","update_time":"2023-04-10T02:28:10.124Z","pinned":false,"ordered":false,"custom_thumbnail":null,"default_thumbnail":"6953adf7aec9d29339751fa68d9c9dc67169a0ffd7469f9a4055eda920bdd2a4","thumbnail":"6953adf7aec9d29339751fa68d9c9dc67169a0ffd7469f9a4055eda920bdd2a4","listing_count":147,"parent_collection_count":0,"owner":{"id":"863951e3ebe4c0ae","avatar_url":"https://avatars.observableusercontent.com/avatar/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","login":"d3","name":"D3","bio":"Bring your data to life.","home_url":"https://d3js.org","type":"team","tier":"pro_2024"}},{"id":"cabc4d5681f3b2dc","type":"public","slug":"d3-geo","title":"d3-geo","description":"Geographic projections, spherical shapes and spherical trigonometry.","update_time":"2019-03-07T07:26:08.286Z","pinned":true,"ordered":false,"custom_thumbnail":null,"default_thumbnail":"12259210d72471a2e245b6b67dcc591f91395915751de8cc4aa008b14c52e601","thumbnail":"12259210d72471a2e245b6b67dcc591f91395915751de8cc4aa008b14c52e601","listing_count":73,"parent_collection_count":1,"owner":{"id":"863951e3ebe4c0ae","avatar_url":"https://avatars.observableusercontent.com/avatar/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","login":"d3","name":"D3","bio":"Bring your data to life.","home_url":"https://d3js.org","type":"team","tier":"pro_2024"}},{"id":"81d4c799552e3acc","type":"public","slug":"d3-hexbin","title":"d3-hexbin","description":"Group two-dimensional points into hexagonal bins.","update_time":"2019-02-26T22:50:02.498Z","pinned":false,"ordered":false,"custom_thumbnail":null,"default_thumbnail":"7852cf8416b06512b014002a8377ccab5ddbc0af352d214dae0c9175ed4f3f2e","thumbnail":"7852cf8416b06512b014002a8377ccab5ddbc0af352d214dae0c9175ed4f3f2e","listing_count":4,"parent_collection_count":1,"owner":{"id":"863951e3ebe4c0ae","avatar_url":"https://avatars.observableusercontent.com/avatar/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","login":"d3","name":"D3","bio":"Bring your data to life.","home_url":"https://d3js.org","type":"team","tier":"pro_2024"}},{"id":"9cbebc0d45eec1ae","type":"public","slug":"maps","title":"Maps","description":"Embrace your inner shapefile. Or GeoJSON or TopoJSON. 🌍","update_time":"2018-11-13T23:08:46.395Z","pinned":true,"ordered":false,"custom_thumbnail":"731383d6e26988b24804bbe587cfde54620becf89d421a1d23c51903a8cf5e17","default_thumbnail":"970f477c509f8ebe4677acf5d708b9bf4b0c53f3d222e553ac7b3bdc063b1bc7","thumbnail":"731383d6e26988b24804bbe587cfde54620becf89d421a1d23c51903a8cf5e17","listing_count":67,"parent_collection_count":1,"owner":{"id":"f35c755083683fe5","avatar_url":"https://avatars.observableusercontent.com/avatar/5a51c3b908225a581d20577e488e2aba8cbc9541c52982c638638c370c3e5e8e","login":"observablehq","name":"Observable","bio":"The end-to-end solution for building and hosting better data apps, dashboards, and reports.","home_url":"https://observablehq.com","type":"team","tier":"enterprise_2024"}}],"version":190,"title":"Hexbin Map","license":"isc","copyright":"Copyright 2019–2020 Observable, Inc.","nodes":[{"id":0,"value":"md`# Hexbin Map\n\nThis map shows approximately 3,000 locations of Walmart stores. The hexagon area represents the number of stores in the vicinity, while the color represents the median age of these stores. Older stores are red, and newer stores are blue.`","pinned":false,"mode":"js","data":null,"name":null},{"id":16,"value":"chart = {\n  const svg = d3.create(\"svg\")\n      .attr(\"viewBox\", [0, 0, width, height]);\n\n  svg.append(\"g\")\n      .attr(\"transform\", \"translate(610,20)\")\n      .append(() => legend({\n        color, \n        title: data.title, \n        width: 260, \n        tickValues: d3.utcYear.every(5).range(...color.domain()),\n        tickFormat: d3.utcFormat(\"%Y\")\n      }));\n\n  svg.append(\"path\")\n      .datum(topojson.mesh(us, us.objects.states))\n      .attr(\"fill\", \"none\")\n      .attr(\"stroke\", \"#777\")\n      .attr(\"stroke-width\", 0.5)\n      .attr(\"stroke-linejoin\", \"round\")\n      .attr(\"d\", d3.geoPath());\n\n  svg.append(\"g\")\n    .selectAll(\"path\")\n    .data(data)\n    .join(\"path\")\n      .attr(\"transform\", d => `translate(${d.x},${d.y})`)\n      .attr(\"d\", d => hexbin.hexagon(radius(d.length)))\n      .attr(\"fill\", d => color(d.date))\n      .attr(\"stroke\", d => d3.lab(color(d.date)).darker())\n    .append(\"title\")\n      .text(d => `${d.length.toLocaleString()} stores\n${d.date.getFullYear()} median opening`);\n\n  return svg.node();\n}","pinned":true,"mode":"js","data":null,"name":null},{"id":22,"value":"data = {\n  const data = d3.tsvParse(await FileAttachment(\"walmart.tsv\").text(), d => {\n    const p = projection(d);\n    p.date = parseDate(d.date);\n    return p;\n  });\n  return Object.assign(\n    hexbin(data)\n      .map(d => (d.date = new Date(d3.median(d, d => d.date)), d))\n      .sort((a, b) => b.length - a.length),\n    {title: \"Median opening year\"}\n  );\n}","pinned":true,"mode":"js","data":null,"name":null},{"id":171,"value":"projection = d3.geoAlbersUsa().scale(1300).translate([487.5, 305])","pinned":true,"mode":"js","data":null,"name":null},{"id":145,"value":"parseDate = d3.utcParse(\"%m/%d/%Y\")","pinned":true,"mode":"js","data":null,"name":null},{"id":53,"value":"color = d3.scaleSequential(d3.extent(data, d => d.date), d3.interpolateSpectral)","pinned":true,"mode":"js","data":null,"name":null},{"id":31,"value":"radius = d3.scaleSqrt([0, d3.max(data, d => d.length)], [0, hexbin.radius() * Math.SQRT2])","pinned":true,"mode":"js","data":null,"name":null},{"id":42,"value":"hexbin = d3.hexbin().extent([[0, 0], [width, height]]).radius(10)","pinned":true,"mode":"js","data":null,"name":null},{"id":167,"value":"width = 975","pinned":true,"mode":"js","data":null,"name":null},{"id":7,"value":"height = 610","pinned":true,"mode":"js","data":null,"name":null},{"id":13,"value":"us = FileAttachment(\"states-albers-10m.json\").json()","pinned":true,"mode":"js","data":null,"name":null},{"id":10,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"mode":"js","data":null,"name":null},{"id":4,"value":"d3 = require(\"d3@6\", \"d3-hexbin@0.2\")","pinned":true,"mode":"js","data":null,"name":null},{"id":140,"value":"import {legend} from \"@d3/color-legend\"","pinned":true,"mode":"js","data":null,"name":null}],"resolutions":[],"schedule":null,"last_view_time":null}