2d:null 2e:["$","title",null,{"children":"Coverage Map | Maeve Kane | Observable"}] 33:Ta68,map = { // make the map with the defined width and height const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); //use a mercator projection map with some adjustment for curvature of the earth const projection = d3 .geoMercator() .scale(1 / (2 * Math.PI)) .translate([0, 0]); // reference the mercator projection to pixels const render = d3.geoPath(projection); // use the tiles sublibrary to draw the image tiles of the map const tile = d3 .tile() .extent([ [0, 0], [width, height] ]) .tileSize(512); // define how much the viewer can zoom in and out const zoom = d3 .zoom() .scaleExtent([1 << 10, 1 << 150]) .extent([ [0, 0], [width, height] ]) .on("zoom", ({ transform }) => zoomed(transform)); // let d3 draw on the map tiles let image = svg.append("g").attr("pointer-events", "none").selectAll("image"); // use the d3 geoPath function to draw the dots in reference to the mercator projection const geoGenerator = d3.geoPath().projection(projection); const circle = svg .append("g") .selectAll("circle") .data(data) // use the data file to locate the dots .enter() .append("path") .join("circle") .attr("r", 2) .style("fill", "rgba(211,211,211, 0.5)") .style("stroke", denomcolor) .style("stroke-width", 2) .on("mouseover", (event, d) => tooltip_in(event, d)) .on("mouseout", tooltip_out); // start the zoom level at the initial zoom level and centered in the middle of the points svg.call(zoom).call( zoom.transform, d3.zoomIdentity .translate(width / 2, height / 2) .scale(-initialScale) .translate(...projection(initialCenter)) .scale(-1) ); // handle zooming and panning function zoomed(transform) { const tiles = tile(transform); // zoom and pan the image tiles of the map image = image .data(tiles, (d) => d) .join("image") .attr("xlink:href", (d) => url(...d)) .attr("x", ([x]) => (x + tiles.translate[0]) * tiles.scale) .attr("y", ([, y]) => (y + tiles.translate[1]) * tiles.scale) .attr("width", tiles.scale) .attr("height", tiles.scale); projection .scale(transform.k / (2 * Math.PI)) .translate([transform.x, transform.y]); // draw the actual network lines using the column names source_lon, source_lat, etc circle.attr("d", (d) => geoGenerator({ type: "Feature", geometry: { type: "Point", coordinates: [d.longitude, d.latitude] } }) ); } // draw the whole network return svg.node(); }34:[{"id":"348e216086b7f6c6b9f17d35fdaca1666f72aac21b61d0fc72266ffd1dcacf9725491a1662f7f845362acbb73e32706649738eade203d32882949d3ad8856447","href":"https://static.observableusercontent.com/files/348e216086b7f6c6b9f17d35fdaca1666f72aac21b61d0fc72266ffd1dcacf9725491a1662f7f845362acbb73e32706649738eade203d32882949d3ad8856447","name":"network_stats_expanded@2.json","type":"application/json","lastModified":1676515097871.185,"size":15990},{"id":"6aaa25a29e68f5d10c3a8fb9eb9a2be9277ddb5dfc1cc4fc6db435a16261dd36a43ba8a1fa0d35739cf9c8e4cf3b97de6a5d22e503ce8fdc95b42663ecc140d4","href":"https://static.observableusercontent.com/files/6aaa25a29e68f5d10c3a8fb9eb9a2be9277ddb5dfc1cc4fc6db435a16261dd36a43ba8a1fa0d35739cf9c8e4cf3b97de6a5d22e503ce8fdc95b42663ecc140d4","name":"network_stats_expanded@3.json","type":"application/json","lastModified":1676515216982.369,"size":15840},{"id":"93df51f1b6874a823083a57494612632273ce0fd6db59d107d443827416dccafbe429b0f92ca17ec56e0d28e3145663964a5bf00290c5cff16bb6c56b5fa87ba","href":"https://static.observableusercontent.com/files/93df51f1b6874a823083a57494612632273ce0fd6db59d107d443827416dccafbe429b0f92ca17ec56e0d28e3145663964a5bf00290c5cff16bb6c56b5fa87ba","name":"network_stats_expanded.json","type":"application/json","lastModified":1676513921424.599,"size":13359},{"id":"9893a5e3094146db1fefa7b8378dd1080ea223a0c1d73404f68e512c3f4fbada1b2ecbb0081ab2be1df70261784d78903005c53996ff7d697891668d525e05f0","href":"https://static.observableusercontent.com/files/9893a5e3094146db1fefa7b8378dd1080ea223a0c1d73404f68e512c3f4fbada1b2ecbb0081ab2be1df70261784d78903005c53996ff7d697891668d525e05f0","name":"remote_files.json","type":"application/json","lastModified":1676511424665.971,"size":7090},{"id":"e474979c4691bfe06989bdcd437f62c97731930263bc08b5532fe6426c61655ba7310a59c0e0f5f8f3d2031b3b8715b750906eb0e5b55fbb99376f52719430a8","href":"https://static.observableusercontent.com/files/e474979c4691bfe06989bdcd437f62c97731930263bc08b5532fe6426c61655ba7310a59c0e0f5f8f3d2031b3b8715b750906eb0e5b55fbb99376f52719430a8","name":"network_stats.json","type":"application/json","lastModified":1676511466598.295,"size":24909},{"id":"a1da14e9fbb1078d7839244a7cece1813d4e1faeb09dfc0c86da9ec29d076d1290dcbebac937aef2e1c35520f6fbb9c25c780ee022c75f3c94ea01bb8d629989","href":"https://static.observableusercontent.com/files/a1da14e9fbb1078d7839244a7cece1813d4e1faeb09dfc0c86da9ec29d076d1290dcbebac937aef2e1c35520f6fbb9c25c780ee022c75f3c94ea01bb8d629989","name":"network_stats_expanded@1.json","type":"application/json","lastModified":1676514158095.054,"size":13360}] 31:{"id":"4760fceccd0bbd3b","slug":"coverage-map","title":"Coverage Map","thumbnail":"d4dabce6b7f8b33a0b661d56545a8c17df7a941ec84eea0f78e9655220d6b733","access_level":"public","create_time":"$D2023-02-16T01:33:10.330Z","update_time":"$D2023-02-26T18:27:11.904Z","view_time":null,"first_public_time":"$D2023-02-16T01:33:10.330Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"aa9e7a8a29012c93","login":"mkane2","name":"Maeve Kane","avatar_url":"https://avatars-next.observableusercontent.com/10f27e44a96d5e36afe9f72cf1af8b5efa3b0f668929d6850e6e7d05867b630c","tier":"starter_2024"},"version":168,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c33c0c6945323f32","login":"mkane2","name":"Maeve Kane","avatar_url":"https://avatars-next.observableusercontent.com/10f27e44a96d5e36afe9f72cf1af8b5efa3b0f668929d6850e6e7d05867b630c","tier":null}],"members":[{"type":"individual","id":"c33c0c6945323f32","login":"mkane2","name":"Maeve Kane","avatar_url":"https://avatars-next.observableusercontent.com/10f27e44a96d5e36afe9f72cf1af8b5efa3b0f668929d6850e6e7d05867b630c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Coverage Map","cells":[{"id":6,"value":"# Coverage Map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"viewof collection = Inputs.radio(\n new Map([\n [\"currently included\", \"existing\"],\n [\"in process\", [\"existing\", \"OCR\", \"APS\"]]\n ]),\n { value: \"existing\", label: \"Congregations included\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"maplegend = Swatches(\n d3.scaleOrdinal(\n alldenom,\n d3.quantize(d3.interpolateRainbow, alldenom.length + 1)\n )\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"data = alldata\n .sort((a, b) => d3.ascending(a.denomination, b.denomination))\n .filter((d) => collection.includes(d.collection))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"// using mapbox third party url fulcrum\nurl = (x, y, z) =>\n `https://api.mapbox.com/styles/v1/maevekane/cknt3v7j10icq17pbml5cje7z/tiles/256/${z}/${x}/${y}${\n devicePixelRatio > 1 ? \"@2x\" : \"\"\n }?access_token=pk.eyJ1IjoibWFldmVrYW5lIiwiYSI6ImNra29hZG4yeDJieTUyb29kb3djdng1NjgifQ.qPMhwmvnHtErpzfZjU2x-g`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"// this sets how zoomed in the map will be. Leave the first number as 1 and adjust the second number; the larger the second number is, the more zoomed in it will be to start\ninitialScale = 1 << 14","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"calc_lon = d3.median(alldata, (d) => d.longitude)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"calc_lat = d3.median(alldata, (d) => d.latitude)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"// the longitude and latitude you want the map centered on.\ninitialCenter = [calc_lon, calc_lat]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"height = 450 //- margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"// margin = ({ top: 20, right: 30, bottom: 60, left: 40 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"alldata = json.sort((a, b) => d3.ascending(a.denomination, b.denomination))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"json = d3.json(\n \"https://raw.githubusercontent.com/mkane2/baptisms/main/remote_files.json\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"denomcolor = {\n const scale = d3.scaleOrdinal(\n d3.quantize(d3.interpolateRainbow, alldenom.length + 1)\n );\n return (d) => scale(d.denomination + 1);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"alldenom = {\n return [...new Set(alldata.map((d) => titleCase(d.denomination)))];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"function titleCase(s) {\n return s.replace(/\\w\\S*/g, function (t) {\n return t.charAt(0).toUpperCase() + t.substr(1).toLowerCase();\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"#### Tooltip","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":108,"value":"tooltip = d3\n .select(\"body\")\n .append(\"div\")\n .style(\"position\", \"absolute\")\n .style(\"visibility\", \"hidden\")\n .style(\"background-color\", \"white\")\n .style(\"border-radius\", \"5px\")\n .style(\"box-shadow\", \"0 0 10px rgba(0,0,0,.25)\")\n .style(\"padding\", \"10px\")\n .style(\"line-height\", \"1.3\")\n .style(\"font\", \"0.75rem sans-serif\")\n .attr(\"class\", \"tooltip\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"tooltip_in = function (event, d) {\n return tooltip\n .html(\n \"

\" +\n d.name +\n \"

\" +\n d.start +\n \"-\" +\n d.end +\n \"

\" +\n d.duration +\n \" years

\" +\n d.nodes +\n \" nodes, \" +\n d.av_nodes +\n \" per year

\"\n )\n .style(\"visibility\", \"visible\")\n .style(\"top\", event.pageY + \"px\")\n .style(\"left\", event.pageX + \"px\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"tooltip_out = function () {\n return tooltip.transition().duration(50).style(\"visibility\", \"hidden\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"format = d3.timeFormat(\"%Y\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"d3 = require(\"d3@6\", \"d3-tile@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"import { Legend, Swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"