2c:null 2d:["$","title",null,{"children":"9. Geographical Data, Part 2: Visualizing Locations of Performers and Revues | Kalle Westerling | Observable"}] 32:T664,viewof form = { const selectedPerformers = ["selectedPerformers", Inputs.select(available.performers.sort(), {multiple: true, value: ["Billie Davis", "Gene Casali", "Jack Mason",, "George Hayes", "Jackie Starr", "Titanic Kit Russell"], disabled: displaySettings !== "Performers"})] const selectedRevues = ["selectedRevues", Inputs.select(available.revues.sort(), {multiple: true, value: ["Fay Norman's Gay Boy Revue", "Jack Mason's Playboy Revue"], disabled: displaySettings !== "Revues"})] const performersHeader = displaySettings === "Performers" ? html`Performers` : html`Performers`; const revuesHeader = displaySettings === "Revues" ? html`Revues` : html`Revues`; const dispExtra = displaySettings === "Revues" ? "block" : "none"; const shownamesHeader = displaySettings === "Revues" ? html`Display Visually` : html``; const showNames = ["showNames", Inputs.select(["Display performer travels", "Display revue travels"], {value: "Display revue travels", disabled: displaySettings !== "Revues"})] const _view = view`

${performersHeader} ${selectedPerformers}

${revuesHeader} ${selectedRevues}

${shownamesHeader} ${showNames}

`; return _view; }33:T8e3,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})}`; }34:T73b,geoPerformers = { const preFilter = d => { const isNormalized = d['Normalized performer'] !== '—' && !d['Normalized performer'].includes('Unnamed'); const hasGeo = (d.lat && d.lon) && !(+d.lat == 0 || +d.lon ==0); const exclude = d['Unsure whether drag artist'] || d['Exclude from visualization']; return isNormalized && hasGeo && !exclude; } const x = data.filter(preFilter).map(d => { // console.log(d['City'], d.lat, d.lon); return { performer: d['Normalized performer'], lat: +d.lat, lon: +d.lon } }); const grouped = d3.group(x, d => d.performer) const performers = []; const geo = []; for (var [key, value] of grouped) { const [latMin, latMax] = d3.extent(value.map(d=>d.lat)); const [lonMin, lonMax] = d3.extent(value.map(d=>d.lon)); if (value.length > 1 && latMin !== latMax && lonMin !== lonMax) { performers.push(key); geo.push({ type: "Feature", properties: { performer: key, locations: value, latMin, latMax, lonMin, lonMax, projectedCorners: { sw: projection([lonMin, latMin]), se: projection([lonMax, latMin]), nw: projection([lonMin, latMax]), ne: projection([lonMax, latMax]), } }, geometry: { type: "Polygon", "coordinates": [ [ [lonMin, latMin], // south-west corner = lonMin, latMin [lonMax, latMin], // south-east corner = lonMax, latMin [lonMax, latMax], // north-east corner = lonMax, latMax [lonMin, latMax], // north-west corner = lonMin, latMax [lonMin, latMin], // south-west corner = lonMin, latMin ] ] }}) } } return { grouped, performers, geo }; }35:T60e,revues = { const _filteredData = data.map(d=>d['Normalized Revue Name']).filter(d=>d !== '—' && d !== ''); const allRevues = [...new Set(_filteredData)] .map(revue => { const rData = data.filter(d => d['Normalized Revue Name'] === revue); const associatedActs = [...new Set(rData.map(d => d['Normalized performer']) .filter(d => d !== '—' && d !== '' && !d.includes('Unnamed')))]; if (!associatedActs.length > 0) return false; const slug = slugify(revue, slugSettings); return { revue, count: rData.length, countPerformers: associatedActs.length, performers: associatedActs, slug } }) .filter(d=>d); allRevues.sort((a, b) => b.count - a.count); return Object.assign(allRevues, { getPerformers: (array) => { let ret = []; array.forEach(revue => { ret = [...ret, ...allRevues.find(d=>d.revue === revue).performers] }) return [...new Set(ret)]; } }); }36:T89a,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 {\n const exclude = d['Unsure whether drag artist'] || d['Exclude from visualization'];\n const hasData = d['Normalized performer'] !== '—' && !d['Normalized performer'].includes('Unnamed') && d['Normalized Revue Name'] !== '—';\n const hasGeo = (d.lat && d.lon) && !(+d.lat == 0 || +d.lon ==0);\n const year = +d.Date.slice(0,4);\n const dateInRange = years.includes(year);\n return hasData && hasGeo && !exclude && dateInRange;\n }\n \n return Object.assign(\n data\n .filter(filtering)\n .map(d => ({ lat: +d.lat, lon: +d.lon, performer: d['Normalized performer'], revue: d['Normalized Revue Name'] })),\n {\n filtering\n }\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1812,"value":"coordinatedRevues = {\n const groupedData = d3.group(filteredData, d=>d.revue)\n let d = {};\n for (var [key, value] of groupedData) {\n if (!key) {\n console.warn(`Revue ${key} could not be found`);\n continue\n }\n if (!revues.find(d => d.revue === key))\n throw new Error(`Revue ${key} could not be found`);\n const {slug} = revues.find(d => d.revue === key);\n \n const uniqueCoords = [...new Set(value.map(d=>`${d.lon}, ${d.lat}`))].map(d=>d.split(\", \"));\n let hull = d3.polygonHull(uniqueCoords) ? d3.polygonHull(uniqueCoords) : [];\n \n const hullPx = hull\n .map(d => projection(d))\n .filter(d => d);\n \n const points = hullPx;\n \n hull = d3.polygonHull(hullPx);\n const centroid = d3.polygonCentroid(hullPx);\n\n if (hull && key)\n d[key] = { uniqueCoords, hull, hullPx, centroid, points, slug, label: key }\n }\n return d;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1832,"value":"available = ({\n revues: Object.keys(coordinatedRevues),\n performers: Object.keys(coordinatedPerformers),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":425,"value":"coordinatedPerformers = {\n const groupedData = d3.group(filteredData, d=>d.performer)\n \n let d = {};\n for (var [key, value] of groupedData) {\n const uniqueCoords = [...new Set(value.map(d=>`${d.lon}, ${d.lat}`))].map(d=>d.split(\", \"));\n let hull = d3.polygonHull(uniqueCoords) ? d3.polygonHull(uniqueCoords) : [];\n \n const hullPx = hull\n .map(d => projection(d))\n .filter(d => d);\n \n const points = hullPx;\n const {slug} = performers.find(d => d.name === key);\n \n hull = d3.polygonHull(hullPx);\n const centroid = d3.polygonCentroid(hullPx);\n\n if (hull)\n d[key] = { uniqueCoords, hull, hullPx, centroid, points, slug, label: key }\n }\n\n // if (form.showNames) {\n // console.log('generate the coherent hull of all performers in revue')\n // }\n\n return d;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":240,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":805,"value":"years = d3.range(1930,1941);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":574,"value":"allPerformers = {\n const d = [];\n Object.keys(coordinatedPerformers).forEach(performer => {\n if (!coordinatedPerformers[performer] || !coordinatedPerformers[performer].hullPx.length) {\n return\n }\n d.push(performer);\n })\n return d;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1226,"value":"dataByPerformer = allPerformers.map(performer => ({\n performer: performer,\n slug: slugify(performer, slugSettings),\n data: data.filter(d=>d['Normalized performer'] === performer)\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1937,"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)\n throw new Error(`City with coordinates not found.`)\n \n d3.selectAll('.nodes circle').attr('opacity', node => node === d ? 1 : 0.3)\n d3.select('#tooltip').text(city.city).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"},{"id":740,"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"},{"id":1318,"value":"rects = {\n let rects = [],\n performers = [];\n\n if (displaySettings === \"Performers\")\n performers = form.selectedPerformers;\n else\n performers = revues.getPerformers(form.selectedRevues);\n \n if (displaySettings === \"Revues\" && form.showNames === \"Display revue travels\") {\n // here we want to generate the rects for the revues...\n\n return form.selectedRevues.map(d=>coordinatedRevues[d]);\n }\n\n performers = performers\n .filter(d => coordinatedPerformers[d])\n .map(performer => Object.assign(coordinatedPerformers[performer], {performer}))\n .filter(d=>d && d.hull);\n\n return performers;\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1244,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":617,"value":"selectedData = {\n // Used to display table above\n\n const _data = [];\n let included = undefined;\n \n if (displaySettings === \"Performers\") {\n included = d => rects.map(d=>d.label).includes(d['Normalized performer']);\n } else if (displaySettings === \"Revues\") {\n included = d => rects.map(d=>d.label).includes(d['Normalized Revue Name']);\n }\n \n const strippedData = d => ({\n \"Performer\": d[\"Normalized performer\"],\n \"Revue\": d[\"Normalized Revue Name\"] !== \"—\" ? d[\"Normalized Revue Name\"] : \"\",\n \"Venue\": d[\"Normalized Venue\"] !== \"—\" ? d[\"Normalized Venue\"] : \"\",\n \"City\": d[\"City\"]\n })\n \n let _filteredData = data\n .filter(filteredData.filtering)\n .filter(included)\n\n if (displaySettings === \"Revues\") {\n _filteredData = _filteredData.filter(d => form.selectedRevues.includes(d['Normalized Revue Name']))\n }\n \n _filteredData.map(d => strippedData(d))\n .forEach(d=>{\n if (!JSON.stringify(_data).includes(JSON.stringify(d)))\n _data.push(d)\n });\n \n return _data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":681,"value":"performers = {\n const performers = [];\n \n data.forEach(d=>{\n const name = d[\"Normalized performer\"];\n const slug = slugify(d[\"Normalized performer\"], slugSettings)\n if (!performers.find(n=>n.name === name))\n performers.push({name, slug})\n })\n return performers;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1622,"value":"svgHelpers = {\n const path = d3.geoPath();\n \n return {\n setupMap: (svg) => {\n const mapG = svg.append(\"g\").attr(\"id\", \"map\")\n \n mapG.append(\"path\")\n .attr(\"stroke-width\", \"0.5\")\n .attr(\"d\", path(topojson.mesh(us, us.objects.states, (a, b) => a !== b)))\n \n mapG.append(\"path\")\n .attr(\"d\", path(topojson.feature(us, us.objects.nation)))\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"},{"id":1950,"value":"cityCoordinates = {\n const ret = [];\n for (var [city, value] of d3.group(data, d=>d['City'])) {\n if (!city || city === \"—\")\n continue\n\n let x = undefined, 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, y\n })\n }\n return ret;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":728,"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,pts=poly.points,len=pts.numberOfItems;\n for(var i=0;i ix), d3.interpolateTurbo),\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"},{"id":1585,"value":"### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":690,"value":"slugify = require('slugify')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"us = FileAttachment(\"counties-albers-10m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":248,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"import { scriptDisclaimer, rawData as data, ga, nav, smallNav, tachyons } from \"@kallewesterling/drag-dataset\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":211,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1222,"value":"import { view } from '@tomlarkworthy/view'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1589,"value":"### Styles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2071,"value":"tachyons","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":607,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1939,"value":"tooltip.style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1288,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 31:"$30:body"