25:["$","title",null,{"children":"A3: Interactive Visualization Software | Felicia Yan | Observable"}] 4b:T354d,{ // map setup const container = d3.create("div") .style("position", "relative") .style("display", "flex") .style("align-items", "flex-start") const svg = container .append("svg") .attr("width", mapWidth) .attr("height", mapHeight) .style("border", "2px solid black"); svg.append("image") .attr("width", mapWidth) .attr("height", mapHeight) .attr( "href", "http://magrawala.github.io/cs448b-fa26/assets/a3/sccRestaurantsMap2026.png" ); //=========================================================================== // filter using the circles const circleGroups = svg.selectAll('g.filter') // ADAPTED FROM CLASS D3 EXERCISES NOTEBOOK .data(circle_positions, d => d.id) .join('g') .attr('class', 'filter'); // drag filter circles to change position circleGroups.append('circle') .attr('class', 'location') .attr('id', d => 'location' + d.id) .attr('cx', d => xScale(d.long)) .attr('cy', d => yScale(d.lat)) .attr("r", d => d.size) .attr("fill", "powderblue") .attr("opacity", 0.15) .attr("stroke", "none") .call(d3.drag() .subject(function(event,d) { return { x: xScale(d.long), y: yScale(d.lat) }; }) .on('start', dragStarted) .on('drag', dragged) .on('end', dragEnded) ); function dragStarted(event, d) { d3.select('#size' + d.id) .attr('stroke', 'royalblue'); } function dragged(event, d) { //event.x is in pixel space, d.x need to be in data spce. d.long = xScale.invert(event.x); // convert the event.x to data space and set d.x d.lat = yScale.invert(event.y); // convert the event.y to data space and set d.y d3.select('#location' + d.id) .attr("cx", xScale(d.long)) // convert d.x back to pixel space .attr("cy", yScale(d.lat)); // convert d.y back to pixel space d3.select('#size' + d.id) .attr('cx', xScale(d.long)) .attr('cy', yScale(d.lat)); apply_circle_filter(); } function dragEnded(event, d) { d3.select('#size' + d.id) .attr('stroke', 'gray'); apply_circle_filter(); } // drag edge to change circle size circleGroups.append('circle') .attr('class', 'size') .attr('id', d => 'size' + d.id) .attr('cx', d => xScale(d.long)) .attr('cy', d => yScale(d.lat)) .attr("r", d => d.size + 3) .attr("fill", "none") .attr("stroke", "gray") .attr("stroke-width", 4.5) .call(d3.drag() .subject(function(event,d) { return {x: event.x, y: event.y}; }) .on('start', resizeDragStarted) .on('drag', resizeDragged) .on('end', resizeDragEnded) ) function resizeDragStarted(event, d) { d3.select('#size' + d.id) .attr('stroke', 'royalblue') apply_circle_filter(); } function resizeDragged(event, d) { const dx = event.x - xScale(d.long); const dy = event.y - yScale(d.lat); const distFromCircleCenter = Math.sqrt(dx * dx + dy * dy); d.size = distFromCircleCenter; d3.select("#size" + d.id) .attr("r", distFromCircleCenter + 3); d3.select("#location" + d.id) .attr("r", distFromCircleCenter) apply_circle_filter(); } function resizeDragEnded(event, d) { d3.select('#size' + d.id) .attr('stroke', 'gray') apply_circle_filter(); } //=========================================================================== // search bar to search by keyword in address const controls = container.append("div") .style("display", "flex") .style("width", "300px") .style("flex-direction", "column") .style("gap", "30px") .style("margin", "24px") .style("gap", "8px") controls.append('text') .text("Filters") .style("font-family", "'Libre Franklin', sans-serif") .style("font-weight", 700) // show # of search results const result_num_text = controls.append('text') .text("No results yet in intersection") .style("font-family", "'Libre Franklin', sans-serif") .style("font-weight", 400) .style("color", "gray") .style("font-size", "14px") //=========================================================================== function apply_circle_filter() { svg.selectAll("circle.restaurant") .attr("fill", d => check_in_intersection(d) && delete_filters(d) && (d.facility_name.toLowerCase().includes(search_query) || d.address.toLowerCase().includes(search_query)) ? "dodgerblue" : "lightgray"); // update count of blue dots const blue_count = svg.selectAll("circle.restaurant") .filter(d => check_in_intersection(d) && delete_filters(d) && (d.facility_name.toLowerCase().includes(search_query) || d.address.toLowerCase().includes(search_query))) .size(); result_num_text.text(`Showing ${blue_count} results in intersection`); } // functions + vars need to be up here to be declared before used // but these are for the sliders + search baar var score_range = [0, 100]; var distance_range = [0, Math.ceil(d3.max(data, d => d.distance))]; var rating_range = [0, 5]; var search_query = "" function delete_filters(d) { return ( d.score >= score_range[0] && d.score <= score_range[1] && d.distance >= distance_range[0] && d.distance <= distance_range[1] && d.rating >= rating_range[0] && d.rating <= rating_range[1] ); } function apply_delete_filters() { svg.selectAll("circle.restaurant") .style("display", d => delete_filters(d) && (d.facility_name.toLowerCase().includes(search_query) || d.address.toLowerCase().includes(search_query)) ? null : "none"); } //=========================================================================== // render restaurant data points // tooltip formatting // REFERENCING TOOLTIP GUIDE FOR D3: https://d3-graph-gallery.com/graph/interactivity_tooltip.html const tooltip = container.append("div") .style("position", "absolute") .style("visibility", "hidden") .style("pointer-events", "none") .style("background-color", "rgba(255, 255, 255, 0.85)") .style("border-radius", "8px") .style("padding", "8px") .style("z-index", 10) .style("font-family", "'Libre Franklin', sans-serif") .style("box-shadow", "0 4px 20px rgba(0,0,0,0.2)"); const restaurants = svg.selectAll('g.restaurants') .data(data, d => d.id) .join('g') .attr('class', 'restaurants'); const data_pts = restaurants.append('circle') .attr('class', 'restaurant') .attr('cx', d => xScale(d.longitude)) .attr('cy', d => yScale(d.latitude)) .attr("r", 4) .attr("fill", "lightgray") .attr("opacity", 0.5) .on("mouseover", function(event, d) { // show tooltips on hover d3.select(this) .attr("fill", "cyan") .attr("r", 10); const has_score = Number.isFinite(d.score); const has_reviews = Number.isFinite(d.num_reviews); const has_rating = Number.isFinite(d.rating); tooltip .style("visibility", "visible") .html(`

${d.facility_name}
${d.address}

${ has_score ? `

Health score

${d.score}

` : ""} ${ has_rating ? `

Rating

${d.rating} ${"★".repeat(Math.floor(d.rating))}

` : ""} ${ has_reviews ? `

Reviews

${d.num_reviews}

` : ""}

`); }) .on("mousemove", function(event, d) { const [x, y] = d3.pointer(event, container.node()); tooltip .style("left", (x + 16) + "px") .style("top", (y + 16) + "px"); }) .on("mouseout", function(event, d) { // hide tooltip tooltip.style('visibility', 'hidden'); d3.select(this) .attr("fill", d => check_in_intersection(d) ? "dodgerblue" : "lightgray") .attr("r", 4) }); function draw_restaurants() { apply_delete_filters(); apply_circle_filter(); } draw_restaurants(); //=========================================================================== // input search box, filter by keywords in address const search_bar = controls.append('input') .style('width', "240px") .style('height', "18px") .attr('transform', 'translate(8,40)') .attr("type", "text") .attr("placeholder", "Name, street, city, or ZIP code") .style("font-family", "'Libre Franklin', sans-serif") .on('input', function(event) { search_query = this.value.toLowerCase().trim(); draw_restaurants(); }); // filter sliders to filter by health score, distance from stanford, and rating out of 5 // deletes the data pt, not just graying it out const score_slider = sliderBottom() .min(0) .max(100) .width(220) .step(1) .fill('#000000') .default(score_range) .ticks(5) .handle(d3.symbol().type(d3.symbolCircle).size(150)()) const distance_slider = sliderBottom() .min(0) .max(Math.ceil(d3.max(data, d => d.distance))) .width(220) .step(1) .fill('#000000') .default(distance_range) .ticks(5) .handle(d3.symbol().type(d3.symbolCircle).size(150)()) const rating_slider = sliderBottom() .min(0) .max(5) .width(220) .step(0.5) .tickFormat(d3.format("1")) .fill('#000000') .default(rating_range) .ticks(5) .handle(d3.symbol().type(d3.symbolCircle).size(150)()) score_slider.on('onchange', slider_val => { score_range = slider_val; // filter data + remove points filtered out apply_delete_filters(); apply_circle_filter(); }) distance_slider.on('onchange', slider_val => { distance_range = slider_val; apply_delete_filters(); apply_circle_filter(); }) rating_slider.on('onchange', slider_val => { rating_range = slider_val; apply_delete_filters(); apply_circle_filter(); }) controls.append('svg') .attr('width', 280) .attr('height', 100) .append('g') .attr('transform', 'translate(8,40)') .call(score_slider) .append('text') .text('Health inspection score') .attr('x', 0) .attr('y', -20) .style("font-family", "'Libre Franklin', sans-serif") .style("font-weight", 600) .style("font-size", 12) controls.append('svg') .attr('width', 280) .attr('height', 100) .append('g') .attr('transform', 'translate(8,40)') .call(distance_slider) .append('text') .text('Distance to Stanford (mi)') .attr('x', 0) .attr('y', -20) .style("font-family", "'Libre Franklin', sans-serif") .style("font-weight", 600) .style("font-size", 12) controls.append('svg') .attr('width', 280) .attr('height', 100) .append('g') .attr('transform', 'translate(8,40)') .call(rating_slider) .append('text') .text('Rating') .attr('x', 0) .attr('y', -20) .style("font-family", "'Libre Franklin', sans-serif") .style("font-weight", 600) .style("font-size", 12) //=========================================================================== // button to reset all filters to defaults function reset_filters() { score_range = [0, 100]; distance_range = [0, Math.ceil(d3.max(data, d => d.distance))]; rating_range = [0, 5]; score_slider.value(score_range); distance_slider.value(distance_range); rating_slider.value(rating_range); // clear search bar search_query = ""; search_bar.property('value', ''); draw_restaurants(); } const reset_button = controls.append("button") .text("Reset filters") .style("max-width", "100px") .style("font-family", "'Libre Franklin', sans-serif") .style("font-weight", 600) .style("font-size", "12px") .style("padding", "8px 8px") .style("margin", "0px 8px") .style("border", "1px solid gray") .style("border-radius", "2px") .style("background", "white") .on("click", reset_filters); controls.append("text") .text("Drag circles to find restaurants within range of both locations, and drag outer edges to expand search range.") .style("width", "242px") .style("font-family", "'Libre Franklin', sans-serif") .style("font-weight", 400) .style("color", "gray") .style("font-size", "12px") .style("margin-left", "8px") .style("margin-top", "16px"); return container.node(); }4c:T4f8,# Reflection Overall, I spent around 6-8 hours developing the application. One of the most time-consuming tasks was debugging the map (it took me a while to realize that I couldn't see any points plotted because my map range was centered on SF, rather than Santa Clara County) and performing the correct conversions to scale to and from latitude and longitude to pixel space. Refining the logic required for highlighting data points in the circles' intersection and deleting points outside of the range of sliders also took a significant amount of time because my initial approach involved essentially redrawing all of the data points constantly by passing in a new filtered dataset each time a filter was updated, which was extremely laggy. I re-worked it to instead use the built-in d3 selection filtering to load all the points in once and simply update them in-place, which is now much faster! In addition to referencing the D3 Exercises and notebooks from class, I also referenced tutorials from the [D3.js Graph Gallery](https://d3-graph-gallery.com/index.html) for positioning and formatting nicer tooltips with HTML, and imported the [d3-simple-slider Library](https://github.com/johnwalley/d3-simple-slider) to more easily implement range sliders with 2 handles.4d:[{"id":"2dccaf7a3e257438137f440de9fb712e55e6a95a6f9427bc042b061f1f7c026be0f758541913701fe985c19e1d2305e158e5e0190f31e490f5c0ed6dd6013796","href":"https://static.observableusercontent.com/files/2dccaf7a3e257438137f440de9fb712e55e6a95a6f9427bc042b061f1f7c026be0f758541913701fe985c19e1d2305e158e5e0190f31e490f5c0ed6dd6013796","name":"sf_map.png","type":"image/png","lastModified":1760293845215.455,"size":1245599},{"id":"320ed26f21bec4e417e6f8f029d4a6aba43d4933a25e22d3ea59050a97750b640b9f7f4244d7ebecb7a862eb996280f062edd2f6387d1de978fe5c44e021216e","href":"https://static.observableusercontent.com/files/320ed26f21bec4e417e6f8f029d4a6aba43d4933a25e22d3ea59050a97750b640b9f7f4244d7ebecb7a862eb996280f062edd2f6387d1de978fe5c44e021216e","name":"sccRestaurantsSynth2026.csv","type":"text/csv","lastModified":1792610441858,"size":1051794}] 47:{"id":"0c484f5a926e5aa9","slug":"a3-felicia","title":"A3: Interactive Visualization Software","thumbnail":"5a22c2a9a6ea9d975d49cd24fb2c6b23c7698f362b92500c56301ed7be4e9a68","access_level":"public","create_time":"$D2026-10-21T20:35:40.642Z","update_time":"$D2026-10-23T21:43:46.600Z","view_time":null,"first_public_time":"$D2026-10-23T21:30:59.445Z","has_unpublished_edits":null,"fork":{"id":"acffc27512286e98","slug":null,"title":"Assignment 3 [STARTER CODE]","owner":{"id":"064c943ba6a07292","login":"stanfordvis","name":"Stanford Visualization"}},"stars":0,"starred":false,"owner":{"type":"team","id":"eb75f1e4588293e3","login":"felicia-yan","name":"Felicia Yan","avatar_url":"https://avatars-next.observableusercontent.com/862868dbaa639d16b12f451d763e1e0975eeedd96376b848a3b280f55906b5bf","tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":980,"publish_version":980,"role":null,"authored":false,"authors":[{"type":"individual","id":"e2a2a417aa4d97df","login":"felicia-yan","name":"Felicia Yan","avatar_url":"https://avatars-next.observableusercontent.com/862868dbaa639d16b12f451d763e1e0975eeedd96376b848a3b280f55906b5bf","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"eb75f1e4588293e3","login":"felicia-yan","name":"Felicia Yan","avatar_url":"https://avatars-next.observableusercontent.com/862868dbaa639d16b12f451d763e1e0975eeedd96376b848a3b280f55906b5bf","tier":"free_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"A3: Interactive Visualization Software","cells":[{"id":0,"value":"# A3: Interactive Visualization Software","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":78,"value":"### Felicia Yan, CS 448B","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"*importing dataset*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"const raw_csv = FileAttachment(\"sccRestaurantsSynth2026.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"var assign_id = 0;\nconst data = raw_csv.filter(d =>\n d[\"Latitude\"] != \"null\" &&\n d[\"Longitude\"] != \"null\"\n )\n .map(d => ({\n id: assign_id += 1,\n facility_name: d[\"Facility Name\"],\n address: d[\"Address\"],\n distance: d[\"Distance\"],\n placard: d[\"Latest placard color\"],\n score: +d[\"Latest Score\"],\n latitude: +d[\"Latitude\"],\n longitude: +d[\"Longitude\"],\n rating: +d[\"Rating\"],\n num_reviews: +d[\"Number of reviews\"]\n}));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"printTable(data.slice(0, 15))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"*scaling functions*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"const yScale = d3.scaleLinear().domain(latitudeRange).range([mapHeight, 0]);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"const xScale = d3.scaleLinear().domain(longitudeRange).range([0, mapWidth]);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"var circle_positions = [\n { id: 1, long: -121.868574, lat: 37.310731, size: 200 },\n { id: 2, long: -121.767177, lat: 37.224557, size: 100 }\n]","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"*filtering functions*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"function check_in_intersection(pt) {\n for (let i = 0; i <= 1; i++) {\n // check distance from circle center pos\n var dist = distance(\n xScale(pt.longitude),\n yScale(pt.latitude),\n xScale(circle_positions[i].long),\n yScale(circle_positions[i].lat));\n\n if (dist > circle_positions[i].size) {\n return false;\n }\n }\n return true;\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"*configuring slider*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"import {sliderBottom} from\n \"https://cdn.jsdelivr.net/npm/d3-simple-slider@1/+esm\";","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"// html styling for slider parts\nhtml``","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"d3 = require('d3@7')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"import {fromColumns, printTable} from '@uwdata/data-utilities'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"import {aq, op} from '@uwdata/arquero'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"import {graphic} from '@d3/margin-convention'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"### Definitions & Utility Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"const mapScale = 2;","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"const mapWidth = 1664 / mapScale;","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"const mapHeight = 1393 / mapScale;","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"const longitudeRange = [-122.20085766666666, -121.27442433333333];","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"const latitudeRange = [36.91311264279123, 37.53067882428926];","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"// Calculate Euclidean distance between two points\nfunction distance(x1, y1, x2, y2) {\n return Math.hypot(x2 - x1, y2 - y1);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"// Calculate distance in miles using Haversine formula\nhaversineMiles = (lat1, lon1, lat2, lon2) => {\n const R = 3958.8; // Earth radius in miles\n const toRad = d => (d * Math.PI) / 180;\n const dLat = toRad(lat2 - lat1);\n const dLon = toRad(lon2 - lon1);\n const a = Math.sin(dLat/2)**2 + \n Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLon/2)**2;\n return 2 * R * Math.asin(Math.sqrt(a));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"### Map Projection Setup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"const mapFrameGeoJSON = {\n type: \"Feature\",\n geometry: {\n type: \"LineString\",\n coordinates: [\n [longitudeRange[0], latitudeRange[0]],\n [longitudeRange[1], latitudeRange[1]]\n ]\n }\n};","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"const projection = d3.geoMercator()\n .fitExtent([[0, 0], [mapWidth, mapHeight]], mapFrameGeoJSON);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"$4c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null