31:T9db,chart = { const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto") // clipping mask for voronois svg .append("g") .append("clipPath") .attr("id", "clipo") .selectAll("path") .data(wards.features) .enter().append("path") .attr("d", path) .style("stroke", "#000") // streets svg.append("g") .selectAll("path") .data(mapData.features) .enter().append("path") .attr("d", path) .style("stroke", d3.hcl(0,0,95)) .style("fill", "none") // stores svg.append("g").selectAll("circle") .data(gstores) .enter().append("circle") .attr("cx", d => projection([d.X, d.Y])[0]) .attr("cy", d => projection([d.X, d.Y])[1]) .attr("r", 2) .style("fill", siteColor) // voronois svg.append("g").attr("clip-path", "url(#clipo)") .selectAll("path.polys") .data(v.geoVoronoi(gstores.map(store => [store.X, store.Y])).polygons().features) .enter().append("path") .attr("d", path) .style("stroke", borderColor) .style("stroke-width", 1) .style("fill", "none") // stroke around dc boundaries svg .append("g") .selectAll("path") .data(basemap.features) .enter().append("path") .attr("d", path) .style("stroke", borderColor) .style("fill", "none") // neighborhood labels const text = svg.append("g") .selectAll("text") .data(labelsEdit.filter(hood => labelsToDisplay.includes(hood.name))) // .data(labelsAll) .enter() text.append("text") .attr("x", d => projection([d.Longitude,d.Latitude])[0]) .attr("y", d => projection([d.Longitude,d.Latitude])[1]) .text(d => d.name) .style("text-anchor", "middle") .style("font", ".5em sans-serif") .style("fill", "white") .style("stroke", "white") .style("stroke-width", 4) .style("font-variant", "all-small-caps") .style("font-weight", 800) .style("opacity", .75) text.append("text") .attr("x", d => projection([d.Longitude,d.Latitude])[0]) .attr("y", d => projection([d.Longitude,d.Latitude])[1]) .text(d => d.name) .style("text-anchor", "middle") .style("font", ".5em sans-serif") .style("fill", "#666") .style("font-variant", "all-small-caps") .style("font-weight", 600) // .style("mix-blend-mode", "multiply") const legend = svg.append("g") .attr("transform", `translate(${width-225},${height - 125})`) return svg.node(); }32:[{"id":"077bab7a54badc0dc241249e78c2827d5899a66a6dc5091b7a0c9eaa1da239911f085f9c3952cbfe47a626c3d63fd381b3d13e3e9b219c6e9e179f5e44a3fd55","href":"https://static.observableusercontent.com/files/077bab7a54badc0dc241249e78c2827d5899a66a6dc5091b7a0c9eaa1da239911f085f9c3952cbfe47a626c3d63fd381b3d13e3e9b219c6e9e179f5e44a3fd55","name":"Grocery_Store_Locations.csv","type":"text/csv","lastModified":1627496687568.384,"size":15974},{"id":"6dc6c22913bba7b3661bb35a9852db34c89751367c3e0aca3c95ec8797c5b470488da753a69df79f802049bbd60b80fabb7b14816531d957b78a319bc28198db","href":"https://static.observableusercontent.com/files/6dc6c22913bba7b3661bb35a9852db34c89751367c3e0aca3c95ec8797c5b470488da753a69df79f802049bbd60b80fabb7b14816531d957b78a319bc28198db","name":"Washington_DC_Boundary2.json","type":"application/json","lastModified":1627567129851.437,"size":472602},{"id":"07acbf7b3f47a981439129e8fa1d9572db762732da4168a5b5818dd8e04d45212d788fefc95ab9a34e0e845c661f4336b56acfe839ad068a33b886fb36e0487b","href":"https://static.observableusercontent.com/files/07acbf7b3f47a981439129e8fa1d9572db762732da4168a5b5818dd8e04d45212d788fefc95ab9a34e0e845c661f4336b56acfe839ad068a33b886fb36e0487b","name":"Ward_from_2012.geojson","type":"application/geo+json","lastModified":1627567281328.926,"size":1036435}] 2f:{"title":"Availability of Real Grocery Stores in D.C.","cells":[{"id":0,"value":"html`\n

Availability of Real Grocery Stores in D.C.

Each dot () is a full-service grocery store recently operating in the District of Columbia. Each dot has a polygon () around it which is the area where that grocery store is the closest option.

Large polygons therefore are large areas with only a single store. They show how some areas of the city are underserved when it comes to real food options.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":724,"value":"md`Grocery store data from [Open Data DC](https://opendata.dc.gov/datasets/DCGIS::grocery-store-locations/about).\n\n---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1383,"value":"wards = FileAttachment(\"Ward_from_2012.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1326,"value":"basemap = FileAttachment(\"Washington_DC_Boundary2.json\").json()\n//FileAttachment(\"Basemap_of_DC_in_Dark_Gray.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1271,"value":"gstores = FileAttachment(\"Grocery_Store_Locations.csv\").csv({typed: true}) // https://opendata.dc.gov/datasets/DCGIS::grocery-store-locations/about","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"mapData = d3.json(\"https://gist.githubusercontent.com/caseylabrack/198d95d29e8f7f00955adb51adf681ef/raw/ae40ae0c8313f1068587f27e738da214b79f5f1a/street-segments.geojson\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"labelsToDisplay = [\"Congress Heights\", \"Hillcrest\", \"Dupont Park\", \"Waterfront\", \"Lincoln Heights\", \"Cathedral Heights\", \"Chevy Chase\", \"Petworth\", \"Fort Lincoln\", \"Edgewood\", \"Columbia Heights\", \"Fort Totten\", \"Woodridge\", \"Petworth\", \"Downtown\", \"Brightwood\", \"Takoma\", \"Capitol Hill\", \"Georgetown\", \"Trinidad\", \"Palisades\", \"Colonial Village\", \"West End\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"labelsAll = d3.csv(\"https://gist.githubusercontent.com/caseylabrack/bacd6941807ba6aad29d243f1ac73d0f/raw/a48334caa911841965620c60be5f91adb288c747/neighborhood-labels.csv\", \n d => {\n d.Longitude = +d.x\n d.Latitude = +d.y\n delete d.x\n delete d.y\n return d\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1479,"value":"// rename a neighborhood and move two labels\nlabelsEdit = {\n let clone = JSON.parse(JSON.stringify(labelsAll))\n const wf = clone.find(neighborhood => neighborhood.name==\"Southwest/Waterfront\")\n wf.name = \"Waterfront\"\n wf.Latitude += .001\n clone.find(neighborhood => neighborhood.name==\"Capitol Hill\").Latitude += .0025\n clone.find(neighborhood => neighborhood.name==\"Dupont Park\").Latitude -= .001\n clone.find(neighborhood => neighborhood.name==\"Chevy Chase\").Latitude -= .0015\n clone.find(neighborhood => neighborhood.name==\"Fort Totten\").Latitude -= .0015\n clone.find(neighborhood => neighborhood.name==\"Cathedral Heights\").Latitude += .0025\n //Cathedral Heights\n return clone\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1501,"value":"borderColor = d3.hcl(50,70,90)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1503,"value":"siteColor = d3.hcl(50,70,70)","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"width = 700","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"projection = d3.geoConicConformal()\n .parallels([38 + 18 / 60, 39 + 27 / 60])\n .rotate([77, 0]).fitSize([width,height], wards)","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1291,"value":"v = require(\"d3-geo-voronoi@1\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}