32:T675,visual = { const div = d3 .create("div") .style("width", width + "px") .style("height", dms.height + "px") .attr("id", "visual"); const svg = div .append("svg") .attr("viewBox", [0, 0, dms.width, dms.height]) .attr("width", dms.width) .attr("height", dms.height); // Setting up the base map // const roads = svg // .append("g") // .selectAll("path") // .data(vectors["roads"]["features"]) // .join("path") // .attr("d", path) // .attr("fill", d => "none") // .attr("stroke", "lightgray") // .style("pointer-events", "none"); const sidewalks = svg .append("g") .selectAll("path") .data(vectors["sidewalks"]["features"]) .join("path") .attr("d", path) .attr("fill", d => "none") .attr("stroke", "lightgray") .style("pointer-events", "none"); const buildings = svg .append("g") .selectAll("path") .data(vectors["buildings"]["features"]) .join("path") .attr("d", path) .attr("fill", d => "none") .attr("stroke", "black") .style("pointer-events", "none"); // Add in the vantage points const dots = svg .append("g") .selectAll("circle") .data(data.filter(e => Math.abs(+e["Lat"]) > 0)) .join("circle") .attr("cx", d => projection([+d["Long"], +d["Lat"]])[0]) .attr("cy", d => projection([+d["Long"], +d["Lat"]])[1]) .attr("r", 10) .attr("fill", colors.blue) .attr("stroke", "white") .attr("stroke-width", 1) .attr("opacity", 1) .attr("class", d => "video " + d["ID"]) .on("mouseenter", mouseenter) .on("mouseleave", mouseleave); return div.node(); }33:[{"id":"e2c9b8877dec74bf3930b76a2b00958789e2df42d04a2be298826df26f54e5b8d2f2c65d771bbcf9502f04eb7b9ac34e2dc0a055833ae8eef5d240e5f7e16336","href":"https://static.observableusercontent.com/files/e2c9b8877dec74bf3930b76a2b00958789e2df42d04a2be298826df26f54e5b8d2f2c65d771bbcf9502f04eb7b9ac34e2dc0a055833ae8eef5d240e5f7e16336","name":"Zoom.geojson","type":"application/geo+json","lastModified":1613756541619.222,"size":721},{"id":"2e710ed60343bba42c8eaaa847dbbf8adc2fe2a95573a0f918e895cd105810fd50ae51064ed65d76c4e8eac4b90bb48697068d34969628c2831335e49ec38ab2","href":"https://static.observableusercontent.com/files/2e710ed60343bba42c8eaaa847dbbf8adc2fe2a95573a0f918e895cd105810fd50ae51064ed65d76c4e8eac4b90bb48697068d34969628c2831335e49ec38ab2","name":"Sidewalks@2.geojson","type":"application/geo+json","lastModified":1613756541619.222,"size":1875024},{"id":"6387e704817aeabec12833070520251f4d57f47037ef967b50693cc6527f52fba76479d6eaad3c23224358520849f40d14271e1d7813ad890e3a13af5abd6b33","href":"https://static.observableusercontent.com/files/6387e704817aeabec12833070520251f4d57f47037ef967b50693cc6527f52fba76479d6eaad3c23224358520849f40d14271e1d7813ad890e3a13af5abd6b33","name":"Roads@2.geojson","type":"application/geo+json","lastModified":1613756541619.222,"size":370573},{"id":"7dca0777816fed618dea09dd413f268a473346ce299524c945e2f156651f1049980af61aa8a963cc07c01d87aa372a42b03eee8212b25905cae23ca82551d77b","href":"https://static.observableusercontent.com/files/7dca0777816fed618dea09dd413f268a473346ce299524c945e2f156651f1049980af61aa8a963cc07c01d87aa372a42b03eee8212b25905cae23ca82551d77b","name":"Buildings@2.geojson","type":"application/geo+json","lastModified":1613756541619.222,"size":1026830},{"id":"0f4c4b28195477643db6163af3a679c4eadbd3d5a63efb24d425b562485e66e551829e232f1f462b0c59c9ef31918a464b88272e2e7f140b54ef3333bdeed955","href":"https://static.observableusercontent.com/files/0f4c4b28195477643db6163af3a679c4eadbd3d5a63efb24d425b562485e66e551829e232f1f462b0c59c9ef31918a464b88272e2e7f140b54ef3333bdeed955","name":"DEMO@3.csv","type":"text/csv","lastModified":1614100724460.012,"size":755},{"id":"8546888913c9c06d84bd9abf134be3c5acd5ef56e2385acb00238d5f1706dfd4886b7a55e2ed3d19b9b5cdc3897dbbd878cffb9abc64d8839ab220aee124f5f1","href":"https://static.observableusercontent.com/files/8546888913c9c06d84bd9abf134be3c5acd5ef56e2385acb00238d5f1706dfd4886b7a55e2ed3d19b9b5cdc3897dbbd878cffb9abc64d8839ab220aee124f5f1","name":"DEMO@4.csv","type":"text/csv","lastModified":1614102633575.307,"size":623}] 30:{"title":"Mapping vantage points during an open source investigation","cells":[{"id":0,"value":"md`# Mapping vantage points during an open source investigation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"md`It is unreasonable to expect reporters to keep all geospatial information about an investigation in their heads. An easily visualizable data structure can help guide reporters as the story is structured, and then serve as a starting point for final graphics. \n\nThis project was an attempt at setting up a framework to bridge that gap between graphics and reporting. It was originally built as a research tool for \"41 minutes of fear.\" You can see the full story [here](https://www.washingtonpost.com/investigations/2021/01/16/video-timeline-capitol-siege/?arc404=true).\n\nThe graphic below shows fictional videos mapped by **starting point**. In theory, these would be geolocated over the course of a project. Information about a specific **vantage point** is shown above the chart.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"html`

Hover over a vantage point for additional info.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"md`*Data for demonstration purposes only, not accurate. Last updated Feb. 19, 2020*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`\n---\n## Configuring graphic containers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"dms = {\n let dimensions = {\n width: width,\n height: width * 0.6,\n marginTop: 175\n };\n\n dimensions.marginLeft = dimensions.marginTop;\n dimensions.marginBottom = dimensions.marginTop;\n dimensions.marginRight = dimensions.marginTop;\n\n dimensions.chartWidth =\n dimensions.width - dimensions.marginLeft - dimensions.marginRight;\n dimensions.chartHeight =\n dimensions.height - dimensions.marginTop - dimensions.marginBottom;\n\n return dimensions;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":246,"value":"colors = {\n return { blue: \"#0A9CE5\", orange: \"#FF7121\" };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"md`## Loading and transforming data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"data = {\n const attached = await FileAttachment(\"DEMO@4.csv\").text();\n\n return d3.csvParse(attached);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"dataByID = d3.group(data, d => d[\"ID\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"dataGeoJSON = {\n const features = [];\n\n data\n .filter(e => Math.abs(+e[\"Lat\"]) > 0 && e[\"Start\"].length > 0)\n .map(d => {\n features.push({\n type: \"Feature\",\n geometry: {\n type: \"Point\",\n coordinates: [+d[\"Long\"], +d[\"Lat\"]]\n },\n properties: {}\n });\n\n return d;\n });\n\n const output = {\n type: \"FeatureCollection\",\n features: features\n };\n\n return output;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"md`## Building base map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"vectors = {\n const buildings = await FileAttachment(\"Buildings@2.geojson\").json();\n const roads = await FileAttachment(\"Roads@2.geojson\").json();\n const sidewalks = await FileAttachment(\"Sidewalks@2.geojson\").json();\n\n return { buildings: buildings, roads: roads, sidewalks: sidewalks };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":236,"value":"extent = await FileAttachment(\"Zoom.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"projection = d3\n .geoMercator()\n .fitExtent(\n [\n [dms.marginLeft, dms.marginTop],\n [dms.width - dms.marginRight, dms.height - dms.marginBottom]\n ],\n dataGeoJSON\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":256,"value":"md`## Adding interactivity`","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"mouseenter = function(event, d) {\n d3.select(\".tooltip\").text(\n `Video ID: ${d[\"ID\"]}, Start Time: ${d[\"Start\"]}, Licensed: ${\n d[\"Licensed\"] ? \"Yes\" : \"No\"\n }`\n );\n\n d3.selectAll(\".video\").attr(\"fill\", colors.blue);\n\n d3.select(this)\n .attr(\"fill\", colors.orange)\n .raise();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":367,"value":"md`I created a function below for when the mouse stopped hovering over a vantage point. However, I later realized that it was actually more useful to leave the selection information up until it was replaced by another vantage point. So this is just a shell now in case I want to add more functionality later.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"mouseleave = function(event, d) {\n // d3.select(\".tooltip\").text(\n // \"Hover over a vantage point for additional info.\"\n // );\n \n // d3.select(this)\n // .attr(\"fill\", colors.blue)\n // .raise();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`\n---\n## Libraries and packages`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"commafy = function(str) {\n return str.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"import {time} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"import { select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}