2e:null 2f:["$","title",null,{"children":"Cats of Great Britain - Grid Map with D3 | Rachael | Observable"}] 34:T50e,html `

1 10k 75k

25 km sq.

` 35:T93d, chart = { // create svg for basis of map const svg = d3.create("svg") .attr("viewBox", [0, 0, 975, 610]) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("height", height) .attr("width", width) // append and draw the map grid itself svg.append("g").selectAll("path") .data(geoGB.features) .enter() .append("path") .attr("d", path) // base the color on the estimated total cats per 25 km. .attr("fill", d => colorScale(d.properties.catsum)) // enable hover in and out .on("mouseover", (d,i,els) => { hoverOver(d,i,els); }) // hover is basically just the border showing, and opacity for this example .on("mouseout", (d,i,els) => { d3.selectAll("path").style("opacity", 1).style("stroke", "none"); }) // draw those labels const engWalesG = svg.append("g") .attr("class", "towns") engWalesG.selectAll("text") // only include label data for those I chose in this.major .data(gbLabels.features) .enter() .append("text") .attr("dy", "0") .style("fill", "#4819cb") .style("font-size", "15px") .style("pointer-events", "none") // manually shift labels around so they don't overlap .attr("x", d => d.properties.tcity15nm == "Liverpool" ? projection(d3.geoCentroid(d))[0]: projection(d3.geoCentroid(d))[0]) .attr("y", d => d.properties.tcity15nm == "Liverpool" || d.properties.tcity15nm == "Cardiff" ? projection(d3.geoCentroid(d))[1]+ 15 : projection(d3.geoCentroid(d))[1]) .text(d => d.properties.tcity15nm) .style("font-family", 'sans-serif'); // add a group for the scotland labels, since I couldn't get a geo with both of them together const scotlandG = svg.append("g") .attr("class", "scot") scotlandG.selectAll("text") .data( scotlandLabels.features) .enter() .append("text") .attr("dy", "0") .style("pointer-events", "none") .style("fill", "#4819cb") .style("font-size", "15px") .attr("x", d => d.properties.name == "Glasgow" ? projection(d3.geoCentroid(d))[0] - 60 : projection(d3.geoCentroid(d))[0]) .attr("y", d => projection(d3.geoCentroid(d))[1]+20) .text(d => d.properties.name) .style("font-family", 'sans-serif'); // show me the map, pls return svg.node(); }36:[{"id":"2d1b6c9395c826b68f20fd9daf37dbaf479b64cb3053b8e2d6a14dbc5e6be09191048f5b357c11055a8298e123d24f2f4c0f5f93be3bd2c3f3c4f065c83e0eda","href":"https://static.observableusercontent.com/files/2d1b6c9395c826b68f20fd9daf37dbaf479b64cb3053b8e2d6a14dbc5e6be09191048f5b357c11055a8298e123d24f2f4c0f5f93be3bd2c3f3c4f065c83e0eda","name":"towns.geojson.json","type":"application/json","lastModified":1581850486551.179,"size":1761129},{"id":"de386054c1f6808f51b670285bbaf29edf195ffd4b84b8c7f18ecae4ecd3d687a7ddb466b38729c8c3ede9980a55611afcb03a566a2ce75b7db8d9e09da64f94","href":"https://static.observableusercontent.com/files/de386054c1f6808f51b670285bbaf29edf195ffd4b84b8c7f18ecae4ecd3d687a7ddb466b38729c8c3ede9980a55611afcb03a566a2ce75b7db8d9e09da64f94","name":"scotlans.json","type":"application/json","lastModified":1581850462151.314,"size":324457},{"id":"7049c09dd83386d4c806ec60912cfc1f3435a4c6f3456ee746896d609d1f262bde07ad67cdee4952e62c876b3c3dff14c0e4ab3397d4f8dfa71d70d22219e572","href":"https://static.observableusercontent.com/files/7049c09dd83386d4c806ec60912cfc1f3435a4c6f3456ee746896d609d1f262bde07ad67cdee4952e62c876b3c3dff14c0e4ab3397d4f8dfa71d70d22219e572","name":"out.geojson.json","type":"application/json","lastModified":1581846352022.721,"size":1916557}] 32:{"id":"df09674f3f72f2e9","slug":"cats-of-great-britain-grid-map-with-d3","title":"Cats of Great Britain - Grid Map with D3","thumbnail":"d022f399e397e34608e4a172f1e749516ace43ee96c9933b3073f5ef385cd255","access_level":"public","create_time":"$D2020-02-16T09:35:28.681Z","update_time":"$D2020-02-19T14:36:30.671Z","view_time":null,"first_public_time":"$D2020-02-16T11:44:21.879Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"a8c8f77a94f5571b","login":"rdottle","name":"Rachael","avatar_url":"https://avatars-next.observableusercontent.com/e14ccbe77849680dacf2da22b9325eae1e4b6969b47e4279801d7e7d4e4f3e96","tier":"starter_2024"},"version":478,"publish_version":478,"role":null,"authored":false,"authors":[{"type":"individual","id":"abfb049081d72879","login":"rdottle","name":"Rachael","avatar_url":"https://avatars-next.observableusercontent.com/e14ccbe77849680dacf2da22b9325eae1e4b6969b47e4279801d7e7d4e4f3e96","tier":null}],"members":[{"type":"individual","id":"abfb049081d72879","login":"rdottle","name":"Rachael","avatar_url":"https://avatars-next.observableusercontent.com/e14ccbe77849680dacf2da22b9325eae1e4b6969b47e4279801d7e7d4e4f3e96","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Cats of Great Britain - Grid Map with D3","cells":[{"id":182,"value":"md`# Cats of Great Britain - Grid Map with D3\n\nThe basic D3 for the grid map [here](https://rachaeldottle.com/cats-per-square-km/). The map shows the estimated 2015 cat population per 25 sq. kilometer area in Great Britain. The final map includes a bit more functionality, but I wanted to at least show my work on the basics of it, and have the data up and around. You can see the full code [here](https://github.com/rdottle/catsPerKM/blob/master/src/js/components/catMap.js). `\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"\nhoverOver = (d, i, els) => {\n d3.select(els[i]).raise();\n\t \t// select hovered grid, and highlight it\n d3.selectAll(\"path\").style(\"opacity\", 0.5)\n\t \td3.select(els[i]).style(\"stroke\", \"#4819cb\").style(\"opacity\", 1)\n\n\t}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"// map colors\ncolorScale = d3.scaleLinear()\n \t\t.domain([0,1,75183])\n \t\t.range(['#c1c1c1','#fec770', '#ff1b9c']);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"width = 975","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"height = 910\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"path = d3.geoPath().projection(projection);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"\n// projection for Great Britain, area so squares be squares\nprojection = d3.geoAlbers()\n\t .rotate([0, 0.0])\n\t .center([-2.0, 53.5])\n\t .parallels([35.0, 65.0])\n\t .translate([700 / 2, 700 / 2])\n\t .scale(3500)\n\t .precision(.1);\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"geoGB.features","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"// map grid 25 km, with cat data already joined \n\ngeoGB = FileAttachment(\"out.geojson.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"\n// great britain minus scotland labels\ngbLabels = FileAttachment(\"towns.geojson.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"// scotland labels\n\n scotlandLabels = FileAttachment(\"scotlans.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"