2d:null 2e:["$","title",null,{"children":"Clergy of the Middle Colonies 1577-1844 | Maeve Kane | Observable"}] 33:T6be,viewof form = { const selectedNames = [ "selectedNames", Inputs.select(available.names.sort(), { multiple: true, value: [ "Henry Barclay", "Johannes Megapolensis", "Pierre Joseph Chaumonot", "Thomas Barclay", "Boniface" ], disabled: displaySettings !== "Clergy" }) ]; const selectedPlaces = [ "selectedPlaces", Inputs.select(available.places.sort(), { multiple: true, value: ["Sweden"], disabled: displaySettings !== "Places" }) ]; const clergyHeader = displaySettings === "Clergy" ? html`Clergy` : html`Clergy`; const locationsHeader = displaySettings === "Places" ? html`Places` : html`Places`; const dispExtra = displaySettings === "Places" ? "block" : "none"; const shownamesHeader = displaySettings === "Places" ? html`Display Visually` : html``; const showNames = [ "showNames", Inputs.select(["Display clergy travels", "Display places"], { value: "Display places", disabled: displaySettings !== "Places" }) ]; const _view = view`

${clergyHeader} ${selectedNames}

${locationsHeader} ${selectedPlaces}

${shownamesHeader} ${showNames}

`; return _view; }34:T8f0,map = { const svg = d3.create("svg").attr("viewBox", "0 0 975 610"); const mapG = svgHelpers.setupMap(svg); // draw the map // now do the important stuff const performers = svg.append("g").attr("id", "performers"); let polygons = []; rects.forEach((rect) => { const { points, hull, centroid, slug, label } = rect; // console.log(performer.performer, performer) const ix = rects.findIndex((d) => d.label === label); const color = helperFunctions.color(ix); const group = performers.append("g").attr("id", slug); const h = group .append("g") .attr("class", "hull") .attr("stroke", d3.color(color).darker()) .attr("fill", color) .append("path"); const txt = group .append("text") .text(rect.label) .attr("x", centroid[0]) .attr("y", centroid[1]) .attr("display", "none") .attr("id", slug); for (let i = 2; i <= hull.length; i++) { const visible = hull.slice(0, i); h.attr("d", `M${visible.join("L")}Z`); // p.style("fill", d => (visible.includes(d) ? "orange" : "lightorange")); } const area = +polyArea(pathToPolygonViaSubdivision(h.node())).toFixed(0); h.attr("data-area", area); group.attr("data-area", area); // h.transition(2000).style("fill", ""); const p = group .append("g") .attr("class", "located") .selectAll("circle") .data(points) .join("circle") .attr("r", (d) => { // console.log(d[0], d[1]); //TODO return 4; }) .attr("cx", (d) => d[0]) .attr("cy", (d) => d[1]) .style("fill", "orange"); h.on("mouseover", hullHover); p.on("mouseover", (evt, d) => tooltip.show(evt, d)); p.on("mouseleave", (evt, d) => tooltip.hide(evt, d)); polygons.push({ performer: rect.label, h, area }); }); // smallest polygon on bottom // console.log('raising in order of largest to smallest:') polygons .sort((a, b) => b.area - a.area) .forEach((d) => { // console.log('--> raising', d.performer); d.h.raise(); }); d3.selectAll("circle").each((d) => d3.select(d).raise()); return html`${Object.assign(svg.node(), { polygons })}`; }35:T8c4,function pathToPolygonViaSubdivision(path, threshold = 0.0001, segments = 3) { // see https://stackoverflow.com/questions/10039679/how-can-i-calculate-the-area-of-a-bezier-curve // path: an SVG element // threshold: a 'close-enough' limit (ignore subdivisions with area less than this) // if (!threshold) threshold = 0.0001; // Get really, really close // segments: (optional) how many segments to subdivisions to create at each level // if (!segments) segments = 3; // 2 segments creates 0-area triangles // returns: a new SVG element var points = subdivide(ptWithLength(0), ptWithLength(path.getTotalLength())); for (var i = points.length; i--; ) points[i] = [points[i].x, points[i].y]; var doc = path.ownerDocument; var poly = doc.createElementNS("http://www.w3.org/2000/svg", "polygon"); poly.setAttribute("points", points.join(" ")); return poly; // Record the distance along the path with the point for later reference function ptWithLength(d) { var pt = path.getPointAtLength(d); pt.d = d; return pt; } // Create segments evenly spaced between two points on the path. // If the area of the result is less than the threshold return the endpoints. // Otherwise, keep the intermediary points and subdivide each consecutive pair. function subdivide(p1, p2) { var pts = [p1]; for (var i = 1, step = (p2.d - p1.d) / segments; i < segments; i++) { pts[i] = ptWithLength(p1.d + step * i); } pts.push(p2); if (polyArea(pts) <= threshold) return [p1, p2]; else { var result = []; for (var i = 1; i < pts.length; ++i) { var mids = subdivide(pts[i - 1], pts[i]); mids.pop(); // We'll get the last point as the start of the next pair result = result.concat(mids); } result.push(p2); return result; } } // Calculate the area of an polygon represented by an array of points function polyArea(points) { var p1, p2; for (var area = 0, len = points.length, i = 0; i < len; ++i) { p1 = points[i]; p2 = points[(i - 1 + len) % len]; // Previous point, with wraparound area += (p2.x + p1.x) * (p2.y - p1.y); } return Math.abs(area / 2); } }36:T41e,coordinatedPlaces = { const groupedData = d3.group(filteredData, (d) => d.place); let d = {}; for (var [key, value] of groupedData) { // if (!key) { // console.warn(`Place ${key} could not be found`); // continue; // } // if (!places.find((d) => d.place === key)) // throw new Error(`Place ${key} could not be found`); const { slug } = places.find((d) => d.place === key); const uniqueCoords = [ ...new Set(value.map((d) => `${d.lon}, ${d.lat}`)) ].map((d) => d.split(", ")); console.log("coords", uniqueCoords); let hull = d3.polygonHull(uniqueCoords) ? d3.polygonHull(uniqueCoords) : []; const hullPx = hull.map((d) => projection(d)).filter((d) => d); const points = hullPx; hull = d3.polygonHull(hullPx); const centroid = d3.polygonCentroid(hullPx); console.log("hull", hull, key); if (hull && key) d[key] = { uniqueCoords, hull, hullPx, centroid, points, slug, label: key }; } return d; }37:[{"id":"0f975c08647813ed6e5617d9890d2d61507ad818414aea61e3cde62347cf99140e7862ead80d1e22883e8cc2fe464fb457f277f26bbc21c5554d60ffe8475947","href":"https://static.observableusercontent.com/files/0f975c08647813ed6e5617d9890d2d61507ad818414aea61e3cde62347cf99140e7862ead80d1e22883e8cc2fe464fb457f277f26bbc21c5554d60ffe8475947","name":"countries-10m.json","type":"application/json","lastModified":1657550097096.999,"size":3661071}] 31:{"id":"1b5a6edaecc2cf98","slug":"clergy-of-the-middle-colonies","title":"Clergy of the Middle Colonies 1577-1844","thumbnail":"b1d811709a607a898c5aa32bee5c401d2492d1c78e784d66f94babe813870e29","access_level":"public","create_time":"$D2022-07-11T14:33:00.216Z","update_time":"$D2022-07-18T16:33:44.110Z","view_time":null,"first_public_time":"$D2022-07-12T20:41:01.777Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"aa9e7a8a29012c93","login":"mkane2","name":"Maeve Kane","avatar_url":"https://avatars-next.observableusercontent.com/10f27e44a96d5e36afe9f72cf1af8b5efa3b0f668929d6850e6e7d05867b630c","tier":"starter_2024"},"version":293,"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":"Clergy of the Middle Colonies 1577-1844","cells":[{"id":0,"value":"# Clergy of the Middle Colonies ${d3.min(dates)}-${d3.max(dates)}\n\nBased on [@KalleWesterling's code](https://observablehq.com/@kallewesterling/geographical-data-visualizing-locations)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":177,"value":"viewof date = interval([d3.min(dates), d3.max(dates)], {\n step: 1,\n value: [d3.min(dates), d3.max(dates)],\n label: \"Date range\",\n format: ([start, end]) => `${start} - ${end}`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"viewof displaySettings = Inputs.select([\"Clergy\", \"Places\"], {\n label: \"Visualize category\",\n value: \"Clergy\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"svgHelpers.legend()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"## Tooltip and styling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":120,"value":"tooltip = ({\n style: html``,\n show: (evt, d) => {\n const [x, y] = d;\n const city = cityCoordinates.find((d) => d.x === x && d.y === y);\n if (!city) throw new Error(`City with coordinates not found.`);\n\n d3.selectAll(\".nodes circle\").attr(\"opacity\", (node) =>\n node === d ? 1 : 0.3\n );\n d3.select(\"#tooltip\")\n .text(city.city)\n .attr(\"style\", `top: ${evt.offsetY + 5}px; left: ${evt.offsetX + 5}px;`);\n },\n hide: (evt, d) => {\n d3.selectAll(\".nodes circle\").attr(\"opacity\", 1);\n d3.select(\"#tooltip\").attr(\"style\", \"display:none;\");\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"## Draw selections","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":122,"value":"cityCoordinates = {\n const ret = [];\n for (var [city, value] of d3.group(data, (d) => d[\"City\"])) {\n if (!city || city === \"—\") continue;\n\n let x = undefined,\n y = undefined;\n\n if (projection([+value[0].lon, +value[0].lat]))\n [x, y] = projection([+value[0].lon, +value[0].lat]);\n\n ret.push({\n city,\n lat: +value[0].lat,\n lon: +value[0].lon,\n x,\n y\n });\n }\n return ret;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"rects = {\n let rects = [],\n getnames = [];\n\n if (displaySettings === \"Clergy\") getnames = form.selectedNames;\n else getnames = places.getNames(form.selectedPlaces);\n\n if (displaySettings === \"Places\" && form.showNames === \"Display places\") {\n return form.selectedPlaces.map((d) => coordinatedPlaces[d]);\n }\n\n getnames = getnames\n .filter((d) => coordinatedNames[d])\n .map((performer) =>\n Object.assign(coordinatedNames[performer], { performer })\n )\n .filter((d) => d && d.hull);\n\n return getnames;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"helperFunctions = ({\n color: d3.scaleSequential(\n d3.extent(rects, (d, ix) => ix),\n d3.interpolateTurbo\n ),\n hideAllText: () => {\n d3.selectAll(`g#performers text`).attr(\"display\", \"none\");\n },\n dimAllHulls: () => {\n d3.selectAll(`g#performers .hull`).attr(\"opacity\", 0.5);\n },\n dimAllCircles: () => {\n d3.selectAll(`g#performers circle`).attr(\"opacity\", 0.5);\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"function polyArea(poly) {\n // see https://stackoverflow.com/questions/10039679/how-can-i-calculate-the-area-of-a-bezier-curve\n // Return the area for an SVG or \n // Self-crossing polys reduce the effective 'area'\n var area = 0,\n pts = poly.points,\n len = pts.numberOfItems;\n for (var i = 0; i < len; ++i) {\n var p1 = pts.getItem(i),\n p2 = pts.getItem((i + -1 + len) % len);\n area += (p2.x + p1.x) * (p2.y - p1.y);\n }\n return Math.abs(area / 2);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"hullHover = (evt) => {\n const slug = evt.target.parentElement.parentElement.id;\n\n d3.selectAll(`g#performers .hull`).attr(\"opacity\", 0.5);\n d3.selectAll(`g#performers text`).attr(\"display\", \"none\");\n d3.select(`g#performers text#${slug}`).attr(\"display\", \"block\");\n d3.select(`g#performers g#${slug} .hull`).attr(\"opacity\", 1).raise();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":109,"value":"data = d3.json(\n \"https://raw.githubusercontent.com/mkane2/clery/main/clergy.json\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"filteredData = {\n const filtering = (d) => {\n // const exclude =\n // d[\"Unsure whether drag artist\"] || d[\"Exclude from visualization\"];\n const hasData =\n d.name !== \"—\" && !d.name.includes(\"Unnamed\") && d.place !== \"—\";\n const hasGeo = d.lat && d.lon && !(+d.lat == 0 || +d.lon == 0);\n const year = +d.year;\n const dateInRange = years.includes(year);\n return hasData && hasGeo && dateInRange;\n };\n\n return Object.assign(\n data.filter(filtering).map((d) => ({\n lat: +d.lat,\n lon: +d.lon,\n name: d.name,\n place: d.place\n })),\n {\n filtering\n }\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"dates = {\n return [...new Set(data.map((d) => d.year).sort())];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"available = ({\n places: Object.keys(coordinatedPlaces),\n names: Object.keys(coordinatedNames)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"coordinatedNames = {\n const groupedData = d3.group(filteredData, (d) => d.name);\n\n let d = {};\n for (var [key, value] of groupedData) {\n const uniqueCoords = [\n ...new Set(value.map((d) => `${d.lon}, ${d.lat}`))\n ].map((d) => d.split(\", \"));\n let hull = d3.polygonHull(uniqueCoords) ? d3.polygonHull(uniqueCoords) : [];\n\n const hullPx = hull.map((d) => projection(d)).filter((d) => d);\n\n const points = hullPx;\n const { slug } = names.find((d) => d.name === key);\n\n hull = d3.polygonHull(hullPx);\n const centroid = d3.polygonCentroid(hullPx);\n\n if (hull)\n d[key] = {\n uniqueCoords,\n hull,\n hullPx,\n centroid,\n points,\n slug,\n label: key\n };\n }\n\n return d;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"years = d3.range(date[0], date[1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"names = {\n const names = [];\n\n data.forEach((d) => {\n const name = d.name;\n const slug = slugify(d.name, slugSettings);\n if (!names.find((n) => n.name === name)) names.push({ name, slug });\n });\n return names;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"places = {\n const _filteredData = data\n .map((d) => d.place)\n .filter((d) => d !== \"—\" && d !== \"\");\n\n const allPlaces = [...new Set(_filteredData)]\n .map((place) => {\n const rData = data.filter((d) => d.place === place);\n const associatedActs = [\n ...new Set(\n rData\n .map((d) => d.name)\n .filter((d) => d !== \"—\" && d !== \"\" && !d.includes(\"Unnamed\"))\n )\n ];\n\n if (!associatedActs.length > 0) return false;\n\n const slug = slugify(place, slugSettings);\n\n return {\n place,\n count: rData.length,\n countNames: associatedActs.length,\n names: associatedActs,\n slug\n };\n })\n .filter((d) => d);\n\n allPlaces.sort((a, b) => b.count - a.count);\n\n return Object.assign(allPlaces, {\n getNames: (array) => {\n let ret = [];\n array.forEach((loc) => {\n ret = [...ret, ...allPlaces.find((d) => d.place === loc).names];\n });\n return [...new Set(ret)];\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"## Slug","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":103,"value":"slugSettings = ({lower: true, replacement: '', remove: /[*+~.()'\"!:@]/g})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"slugify = require(\"slugify\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"## Maps","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"projection = d3.geoEqualEarth() //.scale(650).translate([800, 850])\n// projection = d3.geoAlbersUsa().scale(1300).translate([487.5, 305])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"svgHelpers = {\n const path = d3.geoPath(projection);\n\n return {\n setupMap: (svg) => {\n const mapG = svg.append(\"g\").attr(\"id\", \"map\");\n\n mapG\n .append(\"path\")\n .attr(\"stroke-width\", \"0.5\")\n .attr(\n \"d\",\n path(topojson.mesh(us, us.objects.countries, (a, b) => a !== b))\n );\n\n mapG\n .append(\"path\")\n .attr(\"d\", path(topojson.feature(us, us.objects.land)));\n\n return mapG;\n },\n\n legend: () => {\n return html`\n

\n ${rects.map(({ label }, ix) => {\n return html`

${label}

`;\n })}\n

`;\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"us = FileAttachment(\"countries-10m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"import { view } from \"@tomlarkworthy/view\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":173,"value":"import { interval } from \"@mootari/range-slider@1781\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"