43:["$","title",null,{"children":"Assignment 3 [Jack Hung (using starter code)] | Jjhung | Observable"}] 4b:T1551,{ /* Code below is taken from assignment 3 page for rendering the map */ // // Add an SVG element to the DOM var container = d3.create("div") .style("position", "relative"); var svg = container .append("svg") .attr("width", mapWidth) .attr("height", mapHeight) .style("border", "1px solid black"); // Add SVG map at correct size, assuming map is saved in a subdirectory called `data` svg .append("image") .attr("width", mapWidth) .attr("height", mapHeight) .attr("xlink:href", await FileAttachment("scc_map.png").url()); const rows = await FileAttachment("scc_restaurants.csv").csv({ typed: true }); const points = rows.map((d) => { const [x, y] = projection([d.Longitude, d.Latitude]); return { x, y, row: d }; }); const byAddress = d3.group(points, (p) => p.row.Address); const filters = []; const passesFilters = (d) => filters.every((f) => f.contains(d)); const mid = [mapWidth / 2, mapHeight / 2]; const milesPer100px = d3.geoDistance( projection.invert(mid), projection.invert([mid[0] + 100, mid[1]]) ) * 3958; const pxPerMile = 100 / milesPer100px; // ================ TOOLTIP ================ const tooltip = container.append("div") .style("position", "absolute") .style("pointer-events", "none") .style("background", "white") .style("border", "1px solid #999") .style("border-radius", "4px") .style("padding", "8px 10px") .style("font", "12px sans-serif") .style("max-width", "280px") .style("display", "none"); function tooltipHTML(d) { const restaurants = byAddress.get(d.row.Address).filter(passesFilters); const n = restaurants.length; const items = restaurants.slice(0, 8).map(({ row }) => `

${row["Facility Name"]}
Placard: ${row["Latest placard color"]} · Score: ${row["Latest Score"]} · Rating: ${row.Rating} · Reviews: ${row["Number of reviews"]}

`).join(""); const more = n > 8 ? `

+ ${n - 8} more

` : ""; return `${d.row.Address}
${n} restaurant${n === 1 ? "" : "s"} at this location

${items}${more}`; } function showTooltip(event, d) { d3.select(this).attr("r", 6).attr("fill-opacity", 1); tooltip.style("display", "block").html(tooltipHTML(d)); } function moveTooltip(event) { const [mx, my] = d3.pointer(event, container.node()); const left = mx > mapWidth - 300 ? mx - 290 : mx + 12; tooltip.style("left", `${left}px`).style("top", `${my + 12}px`); } function hideTooltip() { d3.select(this).attr("r", 3).attr("fill-opacity", 0.3); tooltip.style("display", "none"); } // ================ TOOLTIP ================ const circles = svg.append("g"); const dots = svg.append("g").selectAll("circle") .data(points) .join("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", 3) .attr("fill", "gray") .attr("fill-opacity", 0.3) .on("mouseover", showTooltip) .on("mousemove", moveTooltip) .on("mouseout", hideTooltip); function highlightDots() { dots .style("display", (d) => (passesFilters(d) ? null : "none")) .attr("fill", (d) => passesFilters(d) && circleA.contains(d) && circleB.contains(d) ? "green" : "gray" ); } const circleA = makeDraggableCircle(circles, { cx: mapWidth * 0.35, cy: mapHeight * 0.4, r: 3 * pxPerMile, color: "steelblue", onMove: highlightDots }); const circleB = makeDraggableCircle(circles, { cx: mapWidth * 0.5, cy: mapHeight * 0.45, r: 3 * pxPerMile, color: "steelblue", onMove: highlightDots }); // ================ SLIDERS ================ function makeRadiusSlider(parent, { label, circle, miles, color }) { const row = parent.append("div").style("margin-bottom", "16px"); const text = row.append("div") .style("font-weight", "bold") .style("color", color); const update = (m) => { text.text(`${label}: ${m.toFixed(1)} mi`); circle.setRadius(m * pxPerMile); highlightDots(); }; row.append("input") .attr("type", "range") .attr("min", 0.5) .attr("max", 15) .attr("step", 0.1) .attr("value", miles) .style("width", "100%") .on("input", function () { update(+this.value); }); update(miles); } const wrapper = d3.create("div") .style("display", "flex") .style("gap", "16px") .style("align-items", "flex-start"); wrapper.append(() => container.node()); const controls = wrapper.append("div") .style("font", "13px sans-serif") .style("min-width", "180px"); makeRadiusSlider(controls, { label: "Circle A radius", circle: circleA, miles: 3, color: "steelblue" }); makeRadiusSlider(controls, { label: "Circle B radius", circle: circleB, miles: 3, color: "steelblue" }); controls.append("hr"); filters.push(makeRangeFilter(controls, { label: "Yelp rating", field: "Rating", step: 0.1, data: points, onChange: highlightDots, format: (v) => v.toFixed(1) })); filters.push(makeRangeFilter(controls, { label: "Review count", field: "Number of reviews", step: 1, data: points, onChange: highlightDots, format: (v) => d3.format(",")(v) })); // ================ SLIDERS ================ highlightDots(); return wrapper.node(); }4c:T530,function makeRangeFilter(parent, { label, field, step, data, onChange, format = (v) => v }) { const [min, max] = d3.extent(data, (d) => d.row[field]); const filter = { low: min, high: max, contains: (d) => d.row[field] >= filter.low && d.row[field] <= filter.high }; const row = parent.append("div").style("margin-bottom", "16px"); row.append("div").style("font-weight", "bold").text(label); const makeInput = (name, start) => { const valueLabel = row.append("div").style("margin-top", "4px"); const input = row.append("input") .attr("type", "range") .attr("min", min) .attr("max", max) .attr("step", step) .attr("value", start) .style("width", "100%") .style("display", "block"); const setLabel = (v) => valueLabel.text(`${name}: ${format(v)}`); setLabel(start); return { input, setLabel }; }; const low = makeInput("Min", min); const high = makeInput("Max", max); low.input.on("input", function () { filter.low = Math.min(+this.value, filter.high); this.value = filter.low; low.setLabel(filter.low); onChange(); }); high.input.on("input", function () { filter.high = Math.max(+this.value, filter.low); this.value = filter.high; high.setLabel(filter.high); onChange(); }); return filter; }4d:T468,function makeDraggableCircle(parent, { cx, cy, r, color, onMove }) { const state = { x: cx, y: cy, r }; const c = parent .append("circle") .datum(state) .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .attr("r", r) .attr("fill", color) .attr("fill-opacity", 0.1) .attr("stroke", color) .attr("stroke-width", 2) .style("cursor", "grab") .call( d3.drag() .on("start", function () { d3.select(this).style("cursor", "grabbing"); }) .on("drag", function (event, d) { d.x = Math.max(0, Math.min(mapWidth, event.x)); d.y = Math.max(0, Math.min(mapHeight, event.y)); d3.select(this).attr("cx", d.x).attr("cy", d.y); onMove(); }) .on("end", function () { d3.select(this).style("cursor", "grab"); }) ); state.contains = (p) => (p.x - state.x) ** 2 + (p.y - state.y) ** 2 <= state.r ** 2; state.setRadius = (newRadius) => { state.r = newRadius; c.attr("r", newRadius); }; return state; }4e:[{"id":"2dccaf7a3e257438137f440de9fb712e55e6a95a6f9427bc042b061f1f7c026be0f758541913701fe985c19e1d2305e158e5e0190f31e490f5c0ed6dd6013796","href":"https://static.observableusercontent.com/files/2dccaf7a3e257438137f440de9fb712e55e6a95a6f9427bc042b061f1f7c026be0f758541913701fe985c19e1d2305e158e5e0190f31e490f5c0ed6dd6013796","name":"sf_map.png","type":"image/png","lastModified":1760293845215.455,"size":1245599},{"id":"47f0d07f2c23eeda524b000ed0c3a61dbda8badd38f20df1a4f2c834b1f47cce71ac0c018b95e39b832f026e403373aea216d7a988920e261f8e0c82325fd873","href":"https://static.observableusercontent.com/files/47f0d07f2c23eeda524b000ed0c3a61dbda8badd38f20df1a4f2c834b1f47cce71ac0c018b95e39b832f026e403373aea216d7a988920e261f8e0c82325fd873","name":"scc_map.png","type":"image/png","lastModified":1792815556314,"size":832847},{"id":"320ed26f21bec4e417e6f8f029d4a6aba43d4933a25e22d3ea59050a97750b640b9f7f4244d7ebecb7a862eb996280f062edd2f6387d1de978fe5c44e021216e","href":"https://static.observableusercontent.com/files/320ed26f21bec4e417e6f8f029d4a6aba43d4933a25e22d3ea59050a97750b640b9f7f4244d7ebecb7a862eb996280f062edd2f6387d1de978fe5c44e021216e","name":"scc_restaurants.csv","type":"text/csv","lastModified":1792814431400,"size":1051794}] 47:{"id":"b15475ce3eba0de2","slug":"assignment-3-jack-hung-using-starter-code","title":"Assignment 3 [Jack Hung (using starter code)]","thumbnail":"7053a375e6f725f442d375afc9e434004fb61fba73bebe7f8f91ac04ce4171ab","access_level":"public","create_time":"$D2026-10-24T04:14:34.896Z","update_time":"$D2026-10-24T06:42:32.295Z","view_time":null,"first_public_time":"$D2026-10-24T06:07:46.683Z","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":"9f1ebea8f7946b87","login":"jjhung","name":"Jjhung","avatar_url":null,"tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":228,"publish_version":228,"role":null,"authored":false,"authors":[{"type":"individual","id":"3f6ac75d073326fe","login":"jjhung","name":"Jjhung","avatar_url":null,"tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"9f1ebea8f7946b87","login":"jjhung","name":"Jjhung","avatar_url":null,"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":"Assignment 3 [Jack Hung (using starter code)]","cells":[{"id":0,"value":"# Assignment 3 [Jack Hung (using starter code)]","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":73,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","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":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":"mapWidth = 832","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"mapHeight = 696","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"longitudeRange = [-122.52876879101329, -122.34501499128038];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"latitudeRange = [37.69947941416328, 37.81633202723721];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"// Calculate Euclidean distance between two points\ndistance = (x1, y1, x2, y2) => Math.hypot(x2 - x1, y2 - y1)","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":"// GeoJSON frame for map bounds\nmapFrameGeoJSON = {\n const coords = `[[${longitudeRange[0]}, ${latitudeRange[0]}], [${longitudeRange[1]}, ${latitudeRange[1]}]]`;\n return JSON.parse(`{\"type\":\"Feature\",\"geometry\":{\"type\":\"LineString\",\"coordinates\": ${coords}}}`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"projection = d3.geoMercator()\n .center([-121.74, 37.228]) // lon/lat at the middle of the image\n .scale(104000 * mapWidth / 1664) // ≈104000 at native size\n .translate([mapWidth / 2, mapHeight / 2])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"## Features","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"### Slider filter definition","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"### Add Circles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 42:null