3e:null 3f:["$","title",null,{"children":"CS 448B HW3: Exploring Bay Area Cafes | Patricia Wei | Observable"}] 45:T1a1f,map = { const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto") .call(zoom) // background svg.append("rect") .attr("width", width) .attr("height", height) .attr("x", 0) .attr("y", 0) .attr("fill", greys[1]) // NOTE: the excessive use of id attributes is for making the output svg more friendly for use in vector editing software such as Adobe Illustrator // group for all map layers const g = svg.append("g").attr("id", "map-layers") // "land" from merged counties const land = g.append("g") .attr("id", "land") .append("path") .datum(landArea) .attr("fill", "#fff") .attr("stroke-width", 0.25) .attr("stroke", greys[3]) .attr("stroke-line-join", "round") .attr("d", path) // county boundaries const countiesGroup = g.append("g").attr("id", "county-boundaries") // county boundaries – bottom countiesGroup.append("path") .attr("id", "county-boundaries-bottom") .datum(countyBoundaries) .attr("fill", "none") .attr("stroke-width", 1.25) .attr("stroke", greys[0]) .attr("stroke-linejoin", "bevel") .attr("d", path) // county boundaries – top countiesGroup.append("path") .attr("id", "county-boundaries-top") .datum(countyBoundaries) .attr("fill", "none") .attr("stroke-width", 0.75) .attr("stroke", greys[5]) .attr("stroke-linejoin", "bevel") .attr("stroke-dasharray", "6 2 2 2") .attr("d", path) // osm major roads g.append("g") .attr("id", "major-roads") .selectAll(".road") .data(roads.features) .enter().append("path") .classed("road", true) .attr("fill", "none") .attr("stroke-width", d => d.properties.type === "motorway" ? 0.5 : 0.3) .attr("stroke", greys[3]) .attr("stroke-linejoin", "round") .attr("d", path) // osm railways g.append("g") .attr("id", "railways") .selectAll(".rail") .data(rail.features) .enter().append("path") .classed("rail", true) .attr("fill", "none") .attr("stroke-width", 0.3) .attr("stroke", greys[3]) .attr("stroke-linejoin", "round") .attr("stroke-dasharray", "1 1") .attr("d", path) // osm places g.append("g") .attr("id", "places") .selectAll(".place") .data(places.features) .enter().append("circle") .classed("place", true) .attr("cx", d => path.centroid(d)[0]) .attr("cy", d => path.centroid(d)[1]) .attr("r", 1.5) .attr("fill", "white") .attr("stroke", greys[5]) .attr("stroke-width", 0.5) // labels const labelsGroup = g.append("g").attr("id", "labels") // county labels labelsGroup.append("g").attr("id", "county-labels") .selectAll(".county-label") .data(countyCentroids.features) .enter().append("text") .classed("county-label", true) .attr("x", d => path.centroid(d)[0]) .attr("y", d => path.centroid(d)[1]) .attr("text-anchor", "middle") .attr("fill", greys[7]) .style("font", "9px sans-serif") .style("text-transform", "uppercase") .style("text-shadow", textShadow) .text(d => d.properties.name) // places labels labelsGroup.append("g").attr("id", "place-labels") .selectAll(".place-label") .data(places.features) .enter().append("text") .classed("place-label", true) .attr("x", d => path.centroid(d)[0]) .attr("y", d => path.centroid(d)[1] - textOffset.y) .attr("text-anchor", "end") .attr("fill", greys[7]) .style("font", "7px sans-serif") .style("text-shadow", textShadow) .text(d => d.properties.name) let locationCircles1 = d3.range(1).map(i => ({ x: width / 2 , y: height / 2, })); let locationCircles2 = d3.range(1).map(i => ({ x: width / 2 + 50, y: height / 2 + 50, })); svg.append("g") .attr("id", "loc1") .selectAll("circle") .data(locationCircles1) .join("circle") .attr("id", "loc1-circ1") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", 80) .attr("fill", "purple") .attr('opacity', 0.5) .call(drag) .call(updateCircles); svg.append("g") .attr("id", "loc2") .selectAll("circle") .data(locationCircles2) .join("circle") .attr("id", "loc2-circ2") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", 50) .attr("fill", "green") .attr('opacity', 0.5) .call(drag) .call(updateCircles); let filteredData = data; //console.log(filter); if (filter === 1) { filteredData = data.filter(d => d.rating >= 4.5); } if (filter === 2) { filteredData = data.filter(d => d.rating < 4.5 && d.rating > 3.5); } if (filter === 3) { filteredData = data.filter(d => d.rating < 3.0); } // if (filter.includes(0)) { // filteredData = data.filter(d => d.rating >= 4.5); // } // if (filter.includes(1)) { // filteredData = data.filter(d => d.rating < 4.5 && d.rating > 3.5); // } // if (filter.includes(2)) { // filteredData = data.filter(d => d.rating < 3.0); // } const shops = svg.append("g") .attr("id", "shopGroup") .selectAll('circle') .data(filteredData, d => d.alias) .join('circle') .attr("class", "shopCircles") .attr('opacity', 0.75) .attr('fill', 'blue') .attr('cx', d => d.x) .attr('cy', d => d.y) .attr('r', 2) .call(updateCircles) /****** show tooltip and border when hovered over ******/ .on("mouseover", function (event, d) { // <-- need to use the regular function definition to have access to "this" svg.select("#tooltip-text") .text(d.name); let positionOffest = 8; svg.select("#tooltip") // move the tooltip to where the cursor is .attr("transform", `translate(${d.x + positionOffest}, ${d.y + positionOffest})`) .style("display", "block"); // make tooltip visible d3.select(this) .attr("stroke", "#333333") .attr("stroke-width", 2); }) .on("mouseout", function (event, d) { svg.select("#tooltip").style("display", "none"); // hide tooltip d3.select(this).attr("stroke", "none"); // undo the stroke }); const tooltipGroup = svg.append("g") .attr("id", "tooltip") .style("display", "none") .append("text") .attr("id", "tooltip-text") .attr("x", 5) .attr("y", 15) .attr("font-size", "8px") .attr("font-weight", "bold") .attr("fill", "black"); return svg.node() }46:T5cc,function updateCircles() { // Check if circles intersect console.log("here"); d3.selectAll(".shopCircles") .attr("fill", function(d) { let shopCircle = d3.select(this); let shop_cx = shopCircle.attr("cx"); let shop_cy = shopCircle.attr("cy"); let loc1_x = d3.select("#loc1-circ1").attr("cx"); let loc1_y = d3.select("#loc1-circ1").attr("cy"); let loc1_r = d3.select("#loc1-circ1").attr("r"); let loc2_x = d3.select("#loc2-circ2").attr("cx"); let loc2_y = d3.select("#loc2-circ2").attr("cy"); let loc2_r = d3.select("#loc2-circ2").attr("r"); // Check if loc circles intersect let dist_loccircs = Math.sqrt((loc1_x - loc2_x) * (loc1_x - loc2_x) + (loc1_y - loc2_y) * (loc1_y - loc2_y)); // console.log(loc1_x); // console.log(dist_loccircs > loc1_r); // if (dist_loccircs > loc1_r && dist_loccircs > loc2_r) { // don't intersect // return "blue"; // } // Check if shop is in intersection let dist_shop1 = Math.sqrt((loc1_x - shop_cx) * (loc1_x - shop_cx) + (loc1_y - shop_cy) * (loc1_y - shop_cy)); let dist_shop2 = Math.sqrt((loc2_x - shop_cx) * (loc2_x - shop_cx) + (loc2_y - shop_cy) * (loc2_y - shop_cy)); // console.log(dist_shop < loc1_r); if (dist_shop1 < loc1_r && dist_shop2 < loc2_r) { return "red"; } else { return "blue"; } //return "red" ? dist_shop < loc1_r : "blue"; }) }47:[{"id":"58091ba96cf489438d2089a31decf06f0a16ea4fc10fa51e5fc068cb2564397d12581f7f2e265b59a81e690d6f34afa69ff2bff45a0da7be295fcc41044aa429","href":"https://static.observableusercontent.com/files/58091ba96cf489438d2089a31decf06f0a16ea4fc10fa51e5fc068cb2564397d12581f7f2e265b59a81e690d6f34afa69ff2bff45a0da7be295fcc41044aa429","name":"asst3_yelp.csv","type":"text/csv","lastModified":1676675446316.995,"size":3027302}] 43:{"id":"b50ebc6e0218db07","slug":null,"title":"CS 448B HW3: Exploring Bay Area Cafes","thumbnail":"bfa815be146d6ae5e67b105513767f4bef3d41f115bc347f6e5ae4cae0a97c14","access_level":"public","create_time":"$D2023-02-17T22:53:35.898Z","update_time":"$D2023-02-22T19:56:08.528Z","view_time":null,"first_public_time":"$D2023-02-17T22:53:35.898Z","has_unpublished_edits":null,"fork":{"id":"745d44e88d517102","slug":"sf-bay-area-basemap-cropped","title":"SF Bay Area Basemap – Cropped","owner":{"id":"38569aaf9cf67d70","login":"clhenrick","name":"Chris Henrick"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b0f6dfc9af2c5930","login":"patwei","name":"Patricia Wei","avatar_url":"https://avatars-next.observableusercontent.com/5f13dd670aa34cbd0b4cce90b65b4a66138af9d0d8652251ad39fc6189142f19","tier":"starter_2024","bio":"","following":false},"version":441,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6b7382ee17c14d02","login":"patwei","name":"Patricia Wei","avatar_url":"https://avatars-next.observableusercontent.com/5f13dd670aa34cbd0b4cce90b65b4a66138af9d0d8652251ad39fc6189142f19","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"6b7382ee17c14d02","login":"patwei","name":"Patricia Wei","avatar_url":"https://avatars-next.observableusercontent.com/5f13dd670aa34cbd0b4cce90b65b4a66138af9d0d8652251ad39fc6189142f19","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"CS 448B HW3: Exploring Bay Area Cafes","cells":[{"id":0,"value":"md`# CS 448B HW3: Exploring Bay Area Cafes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"A big thank you to TAs Ed Chen, Jasmine Shih, Ryan Cooper, and Professor Hari Subramonyam for their support on this project.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":427,"value":"Sources Cited: \nSlider: https://observablehq.com/@isabellelang/intro-to-d3-and-sliders\nDragging circles: https://observablehq.com/@d3/circle-dragging-i\nBay Area Map and Projection Function: https://observablehq.com/@clhenrick/sf-bay-area-basemap-cropped","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":198,"value":"viewof circ1_r = slider({title: \"Location1\", min : 1, max: 100, value : 50, step:1});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"viewof circ2_r = slider({title: \"Location2\", min : 1, max: 100, value : 30, step:1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"viewof filter = Inputs.radio(new Map([[\"All shops\", 0], [\"4.5+\", 1], [\"3.5-4.5\", 2], [\"3.0 and below\", 3]]), {label: \"Filter by rating\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"{\n const loc1circ1 = d3.select(\"#loc1-circ1\")\n .attr(\"r\", circ1_r)\n .call(updateCircles);\n const loc2circ2 = d3.select(\"#loc2-circ2\")\n .attr(\"r\", circ2_r)\n .call(updateCircles);\n}\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"updateCircles();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"data = FileAttachment(\"asst3_yelp.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"groupByCoord = d3.groups(data, d => d.coordinates);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"{\n for (let i = 0; i < data.length; i++) {\n let coords = data[i].coordinates.split(\",\"); \n let x = parseFloat(coords[0]);\n let y = parseFloat(coords[1]);\n let pix_coords = projection([y, x]);\n data[i].x = pix_coords[0];\n data[i].y = pix_coords[1]; \n data[i].rating = parseFloat(data[i].rating)\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"// Drag code adapted from: https://observablehq.com/@d3/circle-dragging-i\n\ndrag = {\n\n function dragstarted(event, d) {\n d3.select(this).raise().attr(\"stroke\", \"black\");\n }\n\n function dragged(event, d) {\n this.x = event.x; \n this.y = event.y;\n d.x = event.x; \n d.y = event.y; \n d3.select(this).attr(\"cx\", d.x = event.x).attr(\"cy\", d.y = event.y);\n updateCircles();\n }\n\n function dragended(event, d) {\n d3.select(this).attr(\"stroke\", null);\n }\n\n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"updateCircles();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"import {slider, button, select, text, radio, checkbox, number} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`### data\n\nThe \\`basemapTopoJSON\\` layer contains objects for counties, places, roads, and railways. Land areas are derived from the counties using \\`topojson.merge()\\`, county boundaries are derived using \\`topojson.mesh()\\`, and county centroids used for labeling are derived using \\`d3.geoCentroid\\`.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"basemapTopoJSON = await d3.json(\"https://gist.githubusercontent.com/clhenrick/4ebb009378a9ede30d3db672caeb9ff5/raw/bda4918592ff5e089ee4deb6650c4e5d70adb994/basemap_layers.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"landArea = topojson.merge(basemapTopoJSON, basemapTopoJSON.objects[\"county_boundaries\"].geometries)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"countyBoundaries = topojson.mesh(basemapTopoJSON, basemapTopoJSON.objects[\"county_boundaries\"], boundaryFilter)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"places = topojson.feature(basemapTopoJSON, basemapTopoJSON.objects.osm_cities_towns)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"roads = topojson.feature(basemapTopoJSON, basemapTopoJSON.objects.osm_major_roads)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"rail = topojson.feature(basemapTopoJSON, basemapTopoJSON.objects.osm_railways)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"countyCentroids = {\n const counties = topojson.feature(basemapTopoJSON, basemapTopoJSON.objects.county_boundaries)\n counties.features.forEach(d => { \n d.geometry = {\n type: \"Point\",\n coordinates: d3.geoCentroid(d)\n }\n })\n return counties\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"md`### map cropping / bounding box`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"md`I determined the coordinates for cropping the map as follows. Using d3-geo's \\`projection.fitSize\\` with the GeoJSON \\`landArea\\` object above, I exported an svg file of the map. The exported SVG was brought into Adobe Illustrator where I drew a rectangle to the area I wished to crop the map to. The x & y upper left coords, width, and height were taken from that rectangle in the \\`mapFrameSpec\\` below. Using d3-geo's \\`projection.invert\\` I created a GeoJSON object from the rectangle for use with \\`projection.fitSize\\` to crop the map area.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"mapFrameSpec = {\n const spec = {\n width: 334,\n height: 432,\n upperLeft: [403, 561]\n }\n \n spec.bottomRight = [spec.upperLeft[0] + spec.width, spec.upperLeft[1] + spec.height]\n\n return spec\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"md`get the lon, lat coords for the map frame / bbox`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"mapFrameCoords = [\n projection.invert(mapFrameSpec.upperLeft),\n projection.invert(mapFrameSpec.bottomRight)\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"md`this geojson is used with d3-geo's projection to fit the map to a desired extent.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"mapFrameGeoJSON = JSON.parse(`{\"type\":\"Feature\",\"geometry\":{\"type\":\"LineString\",\"coordinates\":[[-122.54644297642132,37.989209933976475],[-121.74157680240731,37.19360698897229]]}}`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`### misc`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"// california state plane 3 | https://github.com/veltman/d3-stateplane\nprojection = d3.geoConicConformal()\n .parallels([37 + 4 / 60, 38 + 26 / 60])\n .rotate([120 + 30 / 60], 0)\n .fitSize([width, height], mapFrameGeoJSON)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"projection([33, -122])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"function zoom (s) {\n s.call(d3.zoom()\n .on(\"zoom\", () => s.select(\"#map-layers\").attr(\"transform\", d3.event.transform))\n .scaleExtent([1, 18])\n .translateExtent([[0, 0], [width, height]]))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"md`width and height set to match an 8.5 x 11 size paper for print.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"width = 612","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"height = 792","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"greys = d3.schemeGreys[9]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"textShadow = \"-1.5px -1.5px white, -1.5px 1.5px white, 1.5px 1.5px white, 1.5px -1.5px white, -1.5px 0 white, 0 1.5px white, 1.5px 0 white, 0 -1.5px white\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"textOffset = ({ x: 0, y: 3 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"boundaryFilter = (a, b) => a !== b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`### dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"topojson = require(\"topojson\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 44:"$43:body"