2d:null 2e:["$","title",null,{"children":"LVN Conversations since 2018 | Allison King | Observable"}] 33:Tb99,chart = { const circleRadius = 4; const zipRadius = 3; const hoverRadius = 6; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); // draw the U.S svg.append('g') .append("path") .datum(topojson.mesh(us, us.objects.states)) .attr("fill", "none") .attr("stroke", "#777") .attr("stroke-width", 0.5) .attr("stroke-linejoin", "round") .attr("d", d3.geoPath()); // draw the standard longitude + latitudes svg.append('g') .selectAll('circle') .data(dataLngLat) .enter() .append('circle') .attr('cx', d => d[0]) .attr('cy', d => d[1]) .attr('r', circleRadius) .attr('stroke', '#777') .attr('fill', lvnPurple) // make a group for postal code work const convoZip = svg.append('g') .selectAll('.conv-zips') .data(dataZipsLngLat) .enter() .append('g') .attr('class', 'conv-zips'); // first draw out all of the zips const zips = convoZip.selectAll('.zip') .data((d,i) => { const transformed = d.zipLngLats.map(z => { return {'lng': z[0], 'lat': z[1], 'id': i} }) return transformed; }) // draw out the teal circles for zips zips .enter() .append('circle') .attr('class', 'zip') .attr('cx', d => d.lng) .attr('cy', d => d.lat) .attr('r', zipRadius) .attr('stroke', '#777') .attr('fill', teal) // draw an invisible circle for padding the mouseover event // (otherwise the mouseover is kind of hard to trigger) zips .enter() .append('circle') .attr('class', 'bbox') .attr('cx', d => d.lng) .attr('cy', d => d.lat) .attr('r', hoverRadius) .attr('opacity', '0') .attr('stroke', 'black') .on('mouseover', (evt, d) => { console.log(d) d3.select(`#poly-${d.id}`) .style('visibility', 'visible') }) .on('mouseout', (evt, d) => { d3.select(`#poly-${d.id}`) .style('visibility', 'hidden') }) // then draw out the polygon that connects zips by conversation // set to visibility hidden until hover since otherwise it's too messy to look at convoZip.append('polygon') .attr('class', 'convo-polygon') .attr('points', d => { let pts = d.zipLngLats if (d.length > 3) { pts = sortPolygonPoints(d.zipLngLats) } return pts.join(" ") }) // TODO: should probably use the convo id here instead .attr('id', (d,i) => `poly-${i}`) .attr('stroke', 'darkslategrey') .attr('stroke-width', 1) .attr('stroke-dasharray', 4) .style('visibility', 'hidden') .attr('fill', 'none') return svg.node(); }34:T443,sortPolygonPoints = (points) => { // when drawing a polygon, if there are more than 3 points, we risk drawing a weirdo looking // polygon that crosses over itself. we want to instead sort the points so that the polygon // never crosses over itself. // reference: https://stackoverflow.com/questions/59287928/algorithm-to-create-a-polygon-from-points // 1. get a center of mass / average of the points const center = [ points.reduce((sum, p) => sum + p[0], 0) / points.length, points.reduce((sum, p) => sum + p[1], 0) / points.length ] // 2. for each point, find the distance from the center in polar coordinates for (let point of points) { const theta = Math.atan2(point[1] - center[1], point[0] - center[0]); // good ol' pythagorean theorem to get rSquared const rSquared = (point[0] - center[0])**2 + (point[1] - center[1])**2; point.push(theta, rSquared) } // 3. sort by polar coordinates points.sort((a,b) => a[2] - b[2] || a[3] - b[3]) // slice to remove the polar coordinates we added return points.map(p => p.slice(0,2)) }35:[{"id":"7655dced65d4a92098273e197ae091762b269a3663a3f8c54bec923a6bdb46f6e62bfd19ac8eed3c515a8f802c0f55fc9baeb7e90cd9259026ed7fd1e2453456","href":"https://static.observableusercontent.com/files/7655dced65d4a92098273e197ae091762b269a3663a3f8c54bec923a6bdb46f6e62bfd19ac8eed3c515a8f802c0f55fc9baeb7e90cd9259026ed7fd1e2453456","name":"wantedZipGeoJSONFormatted.json","type":"application/json","lastModified":1610732997898.001,"size":902955}] 31:{"id":"34fec09642e7aed8","slug":"lvn-conversations-since-2018","title":"LVN Conversations since 2018","thumbnail":"5c09141c0b2f8d12d549a3065fff38c6d0929c5a839b5ed79c716542406fdc05","access_level":"public","create_time":"$D2021-01-15T17:49:57.898Z","update_time":"$D2021-01-15T21:52:27.871Z","view_time":null,"first_public_time":"$D2021-01-15T21:51:21.364Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"d852d4c6702399fb","login":"allisonking","name":"Allison King","avatar_url":"https://avatars-next.observableusercontent.com/b561a854d30b8f574ece314e5ceaa5dc7b83896cd2e7bd21dc5d24487fd750c3","tier":"starter_2024"},"version":554,"publish_version":554,"role":null,"authored":false,"authors":[{"type":"individual","id":"3f766bc4787a5914","login":"allisonking","name":"Allison King","avatar_url":"https://avatars-next.observableusercontent.com/b561a854d30b8f574ece314e5ceaa5dc7b83896cd2e7bd21dc5d24487fd750c3","tier":null}],"members":[{"type":"individual","id":"3f766bc4787a5914","login":"allisonking","name":"Allison King","avatar_url":"https://avatars-next.observableusercontent.com/b561a854d30b8f574ece314e5ceaa5dc7b83896cd2e7bd21dc5d24487fd750c3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"LVN Conversations since 2018","cells":[{"id":0,"value":"md`# LVN Conversations since 2018\n## now with participant locations visualized separately!\n\nExplore a map of LVN Conversations since the Local Voices Network was launched. Slide the slider to hop through time and watch conversations pop up on the map.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"html`

\nPurple circles are conversations plotted based on longitude/latitude.\nTeal circles are conversations plotted based on participant postal codes. If you hover over a teal circle, you may see dashed lines connecting the points to other points. This indicates the conversation had participants from these locations in it.\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"viewof dateSlider = slider({\n min: 0, \n max: numberOfDays, \n step: 1, \n value: startDay,\n title: \"Date Slider\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"md`Showing map of LVN Conversations as of ${d3.timeFormat(\"%B %d, %Y\")(date)} (${numConvosBeforeDate} conversations)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"rawData = {\n return d3.csv(\"https://gist.githubusercontent.com/allisonking/5beceaa4d216c4b461eb8c94307f43c1/raw/bc16c7e6cb648547bc8da1244e38d03856ff42a9/convo_locations.csv\").then(function(data) {\n return data.map(d => {\n d.date = parseDate(d.start_time);\n return d;\n })\n return data;\n});\n \n}\n \n \n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"numConvosBeforeDate = rawData.filter(d => d.date < date).length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"md`We filter out conversations that have neither longitude/latitude data nor zip codes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"data = rawData.filter(d => {\n const hasLngLat = d.lng !== \"\" && d.lat !== \"\";\n const hasZips = d.zips != \"{}\"\n return hasLngLat || hasZips;\n}).map(d => {\n d.zips = d.zips.replace(\"{\", \"\").replace(\"}\", \"\").split(\",\");\n return d\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"dataLngLat = {\n const points = []\n for (let i =0; i < data.length; i++ ) {\n const d = data[i];\n const hasLngLat = d.lng !== \"\" && d.lat !== \"\"\n if (hasLngLat && d.date < date) {\n points.push(projection([d.lng, d.lat]))\n }\n }\n return points;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"zipsOnly = {\n const zips = [];\n for (let i = 0; i < data.length; i++) {\n const d = data[i];\n const codes = d.zips.filter(z => z !== \"\\\"\\\"\" && z !== \"\")\n if (codes.length > 0) {\n d.zips = codes;\n zips.push(d)\n }\n }\n return zips;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"md `I used [this gist](https://gist.github.com/erichurst/7882666) which consolidates zip codes down to just a lng lat coordinate.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"dataZipsLngLat = {\n const transformed = zipsOnly.filter(d => d.date < date).map(d => {\n d.zipLngLats = d.zips.filter(z => zipLngLat[z] != null).map(z => {\n const lngLat = zipLngLat[z]\n return projection(lngLat)\n })\n return d;\n })\n return transformed;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"zipLngLat = {\n const zipDict = {}\n d3.csv(\"https://gist.githubusercontent.com/erichurst/7882666/raw/5bdc46db47d9515269ab12ed6fb2850377fd869e/US%2520Zip%2520Codes%2520from%25202013%2520Government%2520Data\").then(function(zipdata) { \n for (let i = 0; i < zipdata.length; i++) {\n const d = zipdata[i];\n zipDict[d['ZIP']] = [d['LNG'].trim(), d['LAT'].trim()];\n }\n })\n return zipDict; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"md`\n## Helper Functions and Constants\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":540,"value":"testSortPolygon = sortPolygonPoints([[1,2], [2,5], [6,1], [5,2]])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"teal = \"#18D8C6\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"lvnPurple = \"#6351d9\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"timeScale = d3.scaleTime()\n .domain([data[0].date, data[data.length-1].date])\n\t.range([0, numberOfDays])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"numberOfDays = d3.timeDay.count(data[0].date, data[data.length-1].date)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"md`Start day indicates which day the viz should start. By default, it's the first date we have data for`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"startDate = {\n // for default start date\n return data[0].date\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"startDay = d3.timeDay.count(data[0].date, startDate)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"date = {\n // to just automatically increment\n // if (autoIncrement) {\n // let i = 0;\n // let newDate = d3.timeDay.offset(startDate, i)\n // while (newDate < new Date()) {\n // newDate = d3.timeDay.offset(startDate, ++i);\n // yield Promises.delay(100, newDate);\n // }\n // }\n // to use the date slider\n return timeScale.invert(dateSlider)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"height = 610","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"parseDate = d3.utcParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"projection = d3.geoAlbersUsa().scale(1300).translate([487.5, 305])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"import {slider, checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"import {us} from \"@d3/u-s-map\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"html`Just some CSS, don't mind me!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"md `## Implementation notes\n\nTo get the initial gist with locations, run this query:\n\\`\\`\\`\n\\\\copy (SELECT ST_X(lng_lat) as lng, ST_Y(lng_lat) as lat, participant_postal_codes as zips, start_time::date FROM conversations WHERE collection_id != 0 ORDER BY start_time) TO '/scratch/locations.csv' CSV HEADER;\n\\`\\`\\`\n\nI also experimented with using zip geojsons, but that didn't look great. The code is here though, for posterity.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"md`For zipcodes, I used the zipcode data from [here](https://github.com/jgoodall/us-maps) which is from the 2010 Census. Zip codes are a bit hard to work with since they aren't really meant to represent geographic areas. Getting each zip code's geojson is also a bit of a pain, since there are so many zip codes. To avoid loading a huge file (>1gb), I did some processing in Python to just get the geojson of the zip codes we had data for. That data is then loaded in via a File Attachment to \\`\\`zipGeoJSON\\`\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"uniqueZips = {\n const zips = new Set();\n for (let i = 0; i < zipsOnly.length; i++) {\n const zipEntry = zipsOnly[i].zips;\n for (let j = 0; j < zipEntry.length; j++) {\n zips.add(zipEntry[j]) \n }\n }\n return zips;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"zipGeoJson = {\n const zipGeoObj = {}\n return FileAttachment(\"wantedZipGeoJSONFormatted.json\").json().then(zipData => {\n for (let i = 0; i < zipData.length; i++) {\n const z = zipData[i].properties.ZCTA5CE10;\n zipGeoObj[z] = zipData[i];\n }\n\n return zipGeoObj;\n })\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"dataZips = {\n // filter by current date\n const transformed = zipsOnly.filter(d => d.date < date).map(d => {\n d.features = d.zips.filter(z => z !== \"\").map(z => zipGeoJson[z])\n return d;\n })\n return transformed.filter(d => d.features.length >0)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"