44:["$","title",null,{"children":"Assignment 3 for CS448B | Subhan Altaf | Observable"}] 4c:T624,function draw_pts_with_tooltip(pts_li) { let tooltip = d3.select(".tooltip"); // highlight the point when cursor comes above it and make tooltip visible let mouseover = function(d) { tooltip.style("display", "block"); tooltip.style("opacity", "1"); d3.select(this) .style("stroke", "white") .style("opacity", "1"); } // update location and text of tooltip let mousemove = function(event, d) { let selected = d3.select(this); let cx = Number(selected.attr("cx")) + 10; let cy = Number(selected.attr("cy")) - 50; let tt_text = "" + d.name + "
" + d.rating + " stars from " + d.review_count + " reviews"; tooltip.html(tt_text); tooltip.style("left", (cx) + "px"); tooltip.style("top", (cy) + "px"); } // make tooltip hidden when cursor leaves the point let mouseleave = function(d) { tooltip.style("opacity", "0"); tooltip.style("display", "none"); d3.select(this) .style("stroke", "none") .style("opacity", "0.8"); } let svg = d3.select("#map_svg"); // remove previous points if present svg.selectAll(".loc_pts").remove(); // draw points based on locations of shops svg.append("g") .selectAll(".loc_pts") .data(pts_li) .join("circle") .attr("r", 2.5) .attr("cx", d => projection([d.latitude,0])[0]) .attr("cy", d => projection([0, d.longitude])[1]) .attr("class", "loc_pts") .attr('fill', 'black') .on("mouseover", mouseover) .on("mousemove", mousemove) .on("mouseleave", mouseleave); return svg.node(); }4d:[{"id":"a22c2d797a9acda2c224bda17de72eec6d6d5097d29e04544ee025f2d1234d0cbaab9e2c8049861bbf9e96e700438a8035ce6eb2af6c8d8c6acc3646d6ee71b0","href":"https://static.observableusercontent.com/files/a22c2d797a9acda2c224bda17de72eec6d6d5097d29e04544ee025f2d1234d0cbaab9e2c8049861bbf9e96e700438a8035ce6eb2af6c8d8c6acc3646d6ee71b0","name":"Bay Area Counties.geojson","type":"application/geo+json","lastModified":1676146769642.105,"size":989795},{"id":"05f2f81f416c1a4a733c427c54f69474d0a484b600ccce8e0926f88f0298bef2d49e8520b13a9bbed75e19168e8276574e76f041fb07ac44010fd64318519154","href":"https://static.observableusercontent.com/files/05f2f81f416c1a4a733c427c54f69474d0a484b600ccce8e0926f88f0298bef2d49e8520b13a9bbed75e19168e8276574e76f041fb07ac44010fd64318519154","name":"asst3_yelp_edited.csv","type":"text/csv","lastModified":1676186910752.816,"size":3153280}] 48:{"id":"39ba6c42b68e8a15","slug":"assignment-3-for-cs448b","title":"Assignment 3 for CS448B","thumbnail":"0ddc2bf5e09353f19dbe8250d051b93dd0e1662e4c13c0426179c4392c81dbd3","access_level":"public","create_time":"$D2023-02-11T07:43:30.918Z","update_time":"$D2023-02-17T01:24:36.904Z","view_time":null,"first_public_time":"$D2023-02-11T07:43:30.918Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"21027fd4a2f55a3d","login":"ms3altaf","name":"Subhan Altaf","avatar_url":"https://avatars-next.observableusercontent.com/307560b62ea968415bd524149960e9006fbca962b5d52baddb63f47487efd3a2","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":779,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3ef7c20daa050c1b","login":"ms3altaf","name":"Subhan Altaf","avatar_url":"https://avatars-next.observableusercontent.com/307560b62ea968415bd524149960e9006fbca962b5d52baddb63f47487efd3a2","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"3ef7c20daa050c1b","login":"ms3altaf","name":"Subhan Altaf","avatar_url":"https://avatars-next.observableusercontent.com/307560b62ea968415bd524149960e9006fbca962b5d52baddb63f47487efd3a2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Assignment 3 for CS448B","cells":[{"id":0,"value":"# Assignment 3 for CS448B","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":433,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"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":5,"value":"bay_area_counties = FileAttachment(\"Bay Area Counties.geojson\").json() ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"viewof c0_radius = Scrubber(d3.range(50, 400 , 10),{ autoplay: false, delay: 1500, loop: false, format: r => \"Circle 1 radius: \" + r })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"viewof c1_radius = Scrubber(d3.range(50, 400, 10),{ autoplay: false, delay: 1500, loop: false, format: r => \"Circle 2 radius: \" + r })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":702,"value":"viewof num_pts = Scrubber(d3.range(10, 6803, 20), {autoplay: false, delay: 1500, loop: false, format: num => \"Show Top \" + num + \" Shops Based on Ratings\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"\n

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":74,"value":"projection = d3.geoMercator().fitSize([1100, 1500], bay_area_counties)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"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":296,"value":"// draw map of the bay area counties\n\ndraw_map = {\n let svg = d3.select(\"#map_svg\");\n\n // remove previous map if present\n svg.selectAll(\".map_outline\").remove();\n \n svg.append(\"g\")\n .selectAll(\"path\")\n .data(bay_area_counties.features)\n .join('path')\n .attr('d', path)\n .attr('class', 'map_outline')\n .attr('fill', 'green')\n .attr(\"fill-opacity\",0.75)\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-opacity\",0.5)\n .attr(\"stroke-width\",0.75)\n .attr(\"class\", \"map_outline\");\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"yelp_data = FileAttachment('asst3_yelp_edited.csv').csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":748,"value":"// sort based on rating followed by number of reviews\nyelp_data_sorted = yelp_data.sort((x,y) => (d3.descending(x.rating, y.rating)) || (d3.descending(x.review_count, y.review_count)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":707,"value":"// update map based on number of top shops requested\nupdate_number_of_shops = {\n function update_num (num){\n draw_pts_with_tooltip(yelp_data_sorted.slice(0,num))\n }\n\n update_num(num_pts);\n return 1;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"// array that contains location and id of draggable circles\nc_pos = d3.range(2).map(i => ({\n x: 100 + i*200,\n y: 100,\n r: 50,\n id: \"circle\" + \"_\" + i\n}));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"// draw two circles that can be dragged\ndraw_drag_circles = {\n let svg = d3.select(\"#map_svg\");\n\n // remove previous circles if present\n d3.selectAll(\".drag_circles\").remove();\n \n let circles = svg.append(\"g\")\n .selectAll(\".drag_circles\")\n .data(c_pos)\n .join(\"circle\")\n .attr(\"cx\", d => d.x)\n .attr(\"cy\", d => d.y)\n .attr('r', d => d.r)\n .attr(\"id\", d => d.id)\n .attr(\"class\", \"drag_circles\")\n .style(\"fill\", \"blue\")\n .style(\"opacity\", \"0.5\")\n .call(drag);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"drag = {\n // highlight the circle when drag started\n function dragstarted(event, d) {\n d3.select(this).raise().attr(\"stroke\", \"black\").style(\"opacity\", \"1\");\n }\n\n // update location of circle as it is being dragged\n function dragged(event, d) {\n d3.select(this).attr(\"cx\", d.x = event.x).attr(\"cy\", d.y = event.y);\n }\n\n // update colors of points on the map once drag is done\n function dragended(event, d) {\n d3.select(this).attr(\"stroke\", null).style(\"opacity\", \"0.5\");\n update_pt_color();\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":479,"value":"update_drag_circles = {\n // update radius on circle 0 based on Scrubber and change color of points if needed\n function update_c0_radius(new_radius) {\n d3.select(\"#circle_0\")\n .attr(\"r\", new_radius);\n c_pos[0].r = new_radius;\n update_pt_color();\n }\n\n // update radius on circle 1 based on Scrubber and change color of points if needed\n function update_c1_radius(new_radius) {\n d3.select(\"#circle_1\")\n .attr(\"r\", new_radius);\n c_pos[1].r = new_radius;\n update_pt_color();\n }\n\n update_c0_radius(c0_radius);\n update_c1_radius(c1_radius);\n\n return 1;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"// check if a given point lies within a given circle on the map\nfunction pt_lies_in_circle(pt, c) {\n let pt_x = pt.latitude;\n let pt_y = pt.longitude;\n \n // get distance between center of pt and center of c\n let dy = projection([0,pt_y])[1] - c.y;\n let dx = projection([pt_x,0])[0] - c.x;\n let dist = Math.sqrt((dy*dy) + (dx*dx));\n\n // return true if pt is within circle\n return dist <= c.r;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"// get color of points based on whether they are in the intersection of draggable circles or not\nfunction get_pt_color(pt){\n if (pt_lies_in_circle(pt, c_pos[0]) && pt_lies_in_circle(pt, c_pos[1])) {\n return \"yellow\";\n } else {\n return \"black\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"// update color of points as needed\nfunction update_pt_color(){\n d3.selectAll(\".loc_pts\")\n .attr(\"fill\", d => get_pt_color(d));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":720,"value":"// draw top 10 shops to begin with\ndraw_pts_with_tooltip(yelp_data_sorted.slice(0,10))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null