25:["$","title",null,{"children":"A Review of Californian Restaurants | Chloe B | Observable"}] 49:T70c,function renderBaseMap(map) { var container = map.getCanvasContainer(); if (!d3.select(container).select("svg").empty()) return d3.select(container).select("svg"); var svg = d3 .select(container) .append("svg") .attr("id", "baseMap") .attr("width", "100%") .attr("height", "100%") .style("position", "absolute") .style("z-index", 1) // keep above mapbox layer const circles = d3.range(2).map(i => ({ x: Math.random() * 0.5 * (width), y: Math.random() * 0.5 * (800), })); svg.selectAll(".selectCircle") .data(circles) .join("circle") .attr("cx", d => d.x) .attr("class", "selectCircle") .attr("id", (d,i )=> "selectCircle" + i) .attr("cy", d => d.y) .attr("r", radius) .attr("fill", "DarkCyan") .attr('opacity', 0.3) .call(drag) const dots = createDots(svg, filterShops(), map); updateIntersection(); //Tooltip code below. Added at the end to appear above map. const tooltipGroup = svg.append("g") .attr("id", "tooltip") .style("display", "none"); tooltipGroup.append("image") .attr("id", "business-image") .attr("x", 40) .attr("y", 0) .attr("height", 80) .attr("max-width", 80) .attr("preserveAspectRatio", "xMidYMid slice") tooltipGroup.append("text") .attr("id", "name-text") .attr("x", 40) .attr("y", 100) .attr("font-size", "18px") .attr("font-weight", "bolder") .attr("fill", "black") tooltipGroup.append("text") .attr("id", "rating-text") .attr("x", 40) .attr("y", 120) .attr("font-size", "18px") .attr("font-weight", "bolder") .attr("fill", "black") map.on("viewreset", render); map.on("move", render); map.on("moveend", render); render(); return svg }4a:T5b5,function createDots(svg, data, map) { const dots = svg .selectAll(".shopCircle") .data(data, d => d.id) .enter() .append("circle") .attr("class", "shopCircle") .attr('opacity', 0.4) .attr('fill', 'Black') // call helper function to get fill color .attr("r", Math.max(map.getZoom()**2/25, 3)) .on("mouseover", function (event, d) { const tooltip = svg.select("#tooltip"); tooltip.select("#name-text").text(d.name); tooltip.select("#rating-text").text("Rating: " + d.rating+"/5" + " ("+d.review_count+" reviews)"); tooltip.select("#business-image").attr("xlink:href", d.image_url); const positionOffset = 8; const [x, y] = d3.pointer(event); tooltip.attr("transform", `translate(${x + positionOffset},${y + positionOffset})`); tooltip.style("display", "block"); d3.select(this) .attr("stroke", "#333333") .attr("stroke-width", 2); }) .on("mousemove", function (event) { const tooltip = svg.select("#tooltip"); const positionOffset = 8; const [x, y] = d3.pointer(event); tooltip.attr("transform", `translate(${x + positionOffset},${y + positionOffset})`); }) .on("mouseout", function () { const tooltip = svg.select("#tooltip"); tooltip.style("display", "none"); d3.select(this).attr("stroke", "none"); }); return dots; }4b:[{"id":"ad2b119ab6178cd26de19c6b89cd4386725135ebbe4ebb4ba1ecf02aaf449f109ee83ab37297c812a525eb7a7a2982a7e283fa9506fda3d878a929662453679e","href":"https://static.observableusercontent.com/files/ad2b119ab6178cd26de19c6b89cd4386725135ebbe4ebb4ba1ecf02aaf449f109ee83ab37297c812a525eb7a7a2982a7e283fa9506fda3d878a929662453679e","name":"asst3_yelp_clean@1.csv","type":"text/csv","lastModified":1676692369350.551,"size":1096612}] 29:{"id":"ee5a6e7edcc6092e","slug":null,"title":"A Review of Californian Restaurants","thumbnail":"ee5d6db8fca243fed055f9c7ae78038b467f802073beaa9ef615ff846c26fb6b","access_level":"public","create_time":"$D2023-02-18T03:52:49.350Z","update_time":"$D2023-02-20T02:11:56.942Z","view_time":null,"first_public_time":"$D2023-02-18T03:52:49.350Z","has_unpublished_edits":null,"fork":{"id":"e07bfe6bc6fd364d","slug":null,"title":"Assignment 3: Bay Area Food & Drink","owner":{"id":"baae33e5e806d979","login":"chloekbarreau","name":"Chloe B"}},"stars":0,"starred":false,"owner":{"type":"team","id":"baae33e5e806d979","login":"chloekbarreau","name":"Chloe B","avatar_url":"https://avatars-next.observableusercontent.com/1b3fdaee7f16e27bd44873d78f473dce16647afab191cd798f15883a6e10cfce","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":514,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3ecf6e1fb152c7dd","login":"chloekbarreau","name":"Chloe B","avatar_url":"https://avatars-next.observableusercontent.com/1b3fdaee7f16e27bd44873d78f473dce16647afab191cd798f15883a6e10cfce","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"3ecf6e1fb152c7dd","login":"chloekbarreau","name":"Chloe B","avatar_url":"https://avatars-next.observableusercontent.com/1b3fdaee7f16e27bd44873d78f473dce16647afab191cd798f15883a6e10cfce","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"A Review of Californian Restaurants","cells":[{"id":0,"value":"# A Review of Californian Restaurants","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":446,"value":"viewof shopRating = html`Filter by Minimum Rating\n \n`;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":247,"value":"- [D3 Drag](https://observablehq.com/@d3/circle-dragging-i)\n- [D3 Map Guide](https://observablehq.com/@edhschen/mapbox-d3-guide)\n- [D3 and Map binding understanding](https://franksh.com/posts/d3-mapboxgl/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":176,"value":"### Data\n- id, alias and website urls were removed because they were not attributes I chose to visualize. \n- yelp listings with null values were filtered out because missing values would make those entries invalid","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":178,"value":"yelp_data = d3.csvParse(await FileAttachment(\"asst3_yelp_clean@1.csv\").text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"### Set Up\nImporting dependencies.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"maplibregl = {\n const gl = await require(\"maplibre-gl@2.4.0\");\n const href = await require.resolve(\"maplibre-gl@2.4.0/dist/maplibre-gl.css\");\n document.head.appendChild(html``);\n return gl;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"// reference: https://observablehq.com/@tmcw/using-mapbox-gl-js \nmap = {\n var map = new maplibregl.Map({\n container: 'map',\n style: 'https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',\n center: [-122.169961, 37.429491], \n zoom: 10,\n pitch: 45,\n maxBounds: [\n [-122.8, 36.8],\n [-121.8, 38.3]\n ] // restrict the view to a certain area (southwest and northeast coords)\n });\n map.addControl(new maplibregl.NavigationControl(), 'bottom-left'); // adds the controls\n return map\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"radius = 80","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":497,"value":"function filterShops(){\n d3.selectAll(\".shopCircle\")\n .data( function(event, d) {\n if (shopRating === \"\") {\n return yelp_data;\n } else {\n // filter \n return yelp_data.filter(d => Number(d.rating) >= shopRating);\n }} )\n .attr(\"cx\", d => render([d.longitude, d.latitude])[0])\n .attr(\"cy\", d => render([d.longitude, d.latitude])[1])\n .attr(\"fill\", d => updateIntersection(render([d.longitude, d.latitude])[0], render([d.longitude, d.latitude])[1])) // initialize the colors and they'll update when the point of interests start moving\n .attr(\"r\", \"3\")\n .attr(\"opacity\", 0.5);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"updateRadius(radius)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"updateRadius = function(new_r) {\n svg.select(\"#selectCircle0\")\n .attr(\"r\", new_r) \n svg.select(\"#selectCircle1\")\n .attr(\"r\", new_r) \n updateIntersection();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"renderBaseMap(map)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"### Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":271,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"function updateIntersection() {\n let circle1 = d3.select(\"#selectCircle0\")\n let circle2 = d3.select(\"#selectCircle1\")\n d3.selectAll(\".shopCircle\")\n .attr(\"fill\", function(d){ return intersectHelper(circle1, circle2, d3.select(this)) ? \"orchid\" : \"darksalmon\"})\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"function intersectHelper(circle1, circle2, shop) {\n let smallerCircle = circle1\n let largerCircle = circle2\n\n if (circle1.attr(\"r\") > circle2.attr(\"r\")) {\n largerCircle = circle1\n smallerCircle = circle2\n }\n // within smaller circle\n if (Math.sqrt((shop.attr(\"cx\") - smallerCircle.attr(\"cx\"))**2 + (shop.attr(\"cy\") - smallerCircle.attr(\"cy\"))**2) > smallerCircle.attr(\"r\")) {\n return false\n }\n // within larger circle\n if (Math.sqrt((shop.attr(\"cx\") - largerCircle.attr(\"cx\"))**2 + (shop.attr(\"cy\") - largerCircle.attr(\"cy\"))**2) > largerCircle.attr(\"r\")) {\n return false\n }\n return true\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"drag = { //from https://observablehq.com/@d3/circle-dragging-i\n\n function dragstarted(event, d) {\n d3.select(this).attr(\"stroke\", \"white\")\n d3.select(this).attr(\"stroke-width\", \"10\");\n }\n\n function dragged(event, d) {\n d3.select(this).attr(\"cx\", d.x = event.x).attr(\"cy\", d.y = event.y)\n updateIntersection();\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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"function listing_coordinates (listing) {\n let data = [];\n listing.forEach(function (listing) { //forEach takes in function, can also pass in index which we have access to automatically\n var location = listing_coordinate(listing)\n data.push(location);\n });\n return data;\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"function listing_coordinate(listing) {\n return listing.coordinates.split(\",\").map(Number);\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"listing_coordinates(yelp_data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":111,"value":"function project(lng,lat) { //project to synchronize SVG with map \n return map.project(new maplibregl.LngLat(lng, lat));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"function unproject(x,y) {\n return map.unproject([x,y]);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"We introduce a function to update these attributes for the dot elements in D3. This is called everytime the mapbox view is changed. Note we can also introduce other attribute modifications here, for instance here we scale the radius by some metric related to the zoom level, such that it is not too small when it is zoomed in and not too big when it is zoomed out.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":126,"value":"function render() {\n d3.selectAll(\".shopCircle\")\n .attr(\"cx\", function (d) {\n return project(listing_coordinate(d)[1], listing_coordinate(d)[0]).x;\n })\n .attr(\"cy\", function (d) {\n return project(listing_coordinate(d)[1], listing_coordinate(d)[0]).y;\n })\n .attr(\"r\", Math.max(map.getZoom()**2/25, 3))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"{\n map.on(\"viewreset\", render);\n map.on(\"move\", render);\n map.on(\"moveend\", render);\n render(); \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"d3 = require('d3@7')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 24:null