2c:null 2d:["$","title",null,{"children":"CS 448B A3 - Amber Patrick and Maxwell Fite (18Feb23) | Maxwell Fite | Observable"}] 32:T4c3,The goal of this assignment was to: - Filter restaurants that intersect at two circles - Create a tooltip to highlight restaurant attributes - At least one additional filtering tool to refine the markers on the map - Reasonable (~0.1s update rate) refresh rates If you experience any issues, please refresh the page. Although these constraints did not initially seem difficult, the assignment was both frustrating and rewarding, as learning should be. Hours (time estimated to complete annotated by each code block) were spent making design decisions, debugging code, and experimenting with various capabilities as a team. - What should we filter? - How should we format the data? - What style should the background map be? These are a few of the questions we sought to answer in ways that align with good visualization practice. Below, our code is annotated to demonstrate the decision-making process underwent for various aspects of the assignment. **Amber Patrick** focused on the intersecting circles functionality (e.g., size, scale, interaction with other components) and associated highlighting whereas **Maxwell Fite** focused on formatting the data, filtering the data, and plotting the markers/tooltips.33:T48a,function render() { update_dots .attr("cx", function (d) { return project(d.geometry[1], d.geometry[0]).x; }) .attr("cy", function (d) { return project(d.geometry[1], d.geometry[0]).y; }) .on('mouseover', function(event, d) { d3.select('#tooltip').html(d.name + "
Rating: " + d.rating).transition().duration(200).style('opacity', 1); d3.select(this) .style("fill", "black") .style("opacity", 1); if (d.rating >= 4.8) { d3.select(this) .style("fill","green"); } if (d.rating < 4) { d3.select(this) .style("fill","red"); } }) .on('mouseout', function(event, d) { map.getCanvasContainer().style.cursor = ''; d3.select('#tooltip').style('opacity', 0); d3.select(this) .style("stroke", "black") .style("stroke-width", "0.5") .style("opacity", 1) .style("fill", update_intersection()); }) .on('mousemove', function(event, d) { map.getCanvasContainer().style.cursor = 'pointer'; d3.select('#tooltip').style("top", (event.pageY+25)+"px").style("left", (event.pageX)+"px"); }); d3.selectAll("#dot").raise() }34:[{"id":"7371f72c093bde3e618aa90be4d9b49f2e2aec03381fc9161853aa3fe9c3df76ee77120f497c5963373f1b4d76c6aac83e77dfbcbfa60e0cd29000488bb27799","href":"https://static.observableusercontent.com/files/7371f72c093bde3e618aa90be4d9b49f2e2aec03381fc9161853aa3fe9c3df76ee77120f497c5963373f1b4d76c6aac83e77dfbcbfa60e0cd29000488bb27799","name":"asst3_google.csv","type":"text/csv","lastModified":1676158786852.045,"size":5661101}] 30:{"id":"9d1f3de03dad8ea8","slug":"cs-448b-a3-amber-patrick-and-maxwell-fite-18feb23","title":"CS 448B A3 - Amber Patrick and Maxwell Fite (18Feb23)","thumbnail":"dca42eb61864f360cecbe56a430fa4b0918d88d070052ef1d565058e4bd423a2","access_level":"public","create_time":"$D2023-02-11T23:39:46.852Z","update_time":"$D2023-02-18T19:05:01.324Z","view_time":null,"first_public_time":"$D2023-02-11T23:39:46.852Z","fork":{"id":"4f2362f85719af4a","slug":null,"title":"Test Bed","owner":{"id":"d51befe96cbd0cba","login":"mfite","name":"Maxwell Fite"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d51befe96cbd0cba","login":"mfite","name":"Maxwell Fite","avatar_url":"https://avatars-next.observableusercontent.com/cb9cee362ad5adf84f56e22eb40d86bfd9c592564ec31708950e229c8d3f9284","tier":"starter_2024"},"version":1426,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b186612a55113383","login":"mfite","name":"Maxwell Fite","avatar_url":"https://avatars-next.observableusercontent.com/cb9cee362ad5adf84f56e22eb40d86bfd9c592564ec31708950e229c8d3f9284","tier":null}],"members":[{"type":"individual","id":"7fdbede0654713c6","login":"amberpat","name":"Amber Pat","avatar_url":"https://avatars-next.observableusercontent.com/dfe54cc52cdc5f7e5204083048e55f8c49188c24bd858dfcc660b5ba8f8ab8f3","tier":null,"role":"editor"},{"type":"individual","id":"b186612a55113383","login":"mfite","name":"Maxwell Fite","avatar_url":"https://avatars-next.observableusercontent.com/cb9cee362ad5adf84f56e22eb40d86bfd9c592564ec31708950e229c8d3f9284","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"CS 448B A3 - Amber Patrick and Maxwell Fite (18Feb23)","cells":[{"id":28,"value":"md`# CS 448B A3 - Amber Patrick and Maxwell Fite (18Feb23)`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1081,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":75,"value":"restaurant_data = FileAttachment(\"asst3_google.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1104,"value":"(~15 min) Above, we import the source data attached to the Observable.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":80,"value":"function formatData(restaurant_data) {\nlet restaurant_locations = [];\nlet full_location = [];\nlet location_JSON = [];\nlet ALL_LAT_LONG = [];\nlet data = [];\nfor (let i = 0; i < restaurant_data.length; i++) {\n full_location = restaurant_data[i][\"geometry\"];\n location_JSON = full_location.replace(/[']+/g, '\"');\n restaurant_locations = JSON.parse(location_JSON);\n ALL_LAT_LONG.push(restaurant_locations.location);\n data.push([ALL_LAT_LONG[i].lat,ALL_LAT_LONG[i].lng]);\n restaurant_data[i][\"geometry\"] = data[i]\n }\n return restaurant_data\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1106,"value":"(~1 hour) The function _formatData_ takes the string value of the geometry key and converts it into a 1-D array with two indices representing the lat and long of each restaurant. The _render_ and _project_ functions take advantage of this particular data structure.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":552,"value":"formattedData = formatData(restaurant_data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":924,"value":"filterAttributes = [\"Takeout\", \"Serves Breakfast\", \"Serves Lunch\", \"Serves Dinner\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1109,"value":"The four additional filter attributes that we decided to implement revolve around the types of questions our families would frequently ask on trips... \n\n- WHERE CAN WE GET TAKEOUT?\n- WHERE SHOULD WE GO FOR BREAKFAST/LUNCH/DINNER?\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1421,"value":"The map below highlights locations that intersect two draggable circles in purple, highlights the selected location in black with a tooltip (green highlight if the rating is above 4.5 and red highlight if the rating is below 4, all based on a statistical analysis of the given population). The Filters below allow the user to toggle between different filters.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":348,"value":"

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":921,"value":"viewof filteredAspects = checkbox({\n title: \"Filters\",\n options: _.map(filterAttributes, x => {\n return {value: x, label: x}\n }),\n value: filterAttributes,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":944,"value":"filteredData = _.filter(formattedData, d => {\n // either the genre is in the filtered genres\n return ((_.includes(filteredAspects, \"Takeout\")) && d.takeout == \"True\" || !_.includes(filteredAspects, \"Takeout\"))\n && \n ((_.includes(filteredAspects, \"Serves Breakfast\") && d.serves_breakfast == \"True\" || !_.includes(filteredAspects, \"Serves Breakfast\"))) \n &&\n ((_.includes(filteredAspects, \"Serves Lunch\") && d.serves_lunch == \"True\" || !_.includes(filteredAspects, \"Serves Lunch\"))) \n &&\n ((_.includes(filteredAspects, \"Serves Dinner\") && d.serves_dinner == \"True\" || !_.includes(filteredAspects, \"Serves Dinner\")))\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1125,"value":"(~6 hours) The filtering above took much longer than expected. Our goal was to have a checkbox indicate that restaurants present **must** have that attribute, and if it wasn't checked then it could have it or not. \n\nWe wanted to have all fours filters, but given the data structures, the problem was difficult to solve and not readily available on the internet. The first problem encountered revolved around the _.filter()_ method. Using conventional filtering in series would have worked, but the code was longer than we would have liked, so we leveraged _lodash_ to filter each restaurant object at the same time given the checkbox attributes.\n\nIf all were checked, display restaurants that meet at least all four criteria. If non are selected, display all of the restaurants. This was a design intention because this corresponds with conventional user interfaces and prevents choice overload bias on load up.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1052,"value":"viewof radius = Inputs.range([1, 10], {value: 3, step: 1, label: \"Zone Radius 1 (in Miles)\"});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1060,"value":"viewof radius1 = Inputs.range([1, 10], {value: 3, step: 1, label: \"Zone Radius 2 (in Miles)\"});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1269,"value":"updateZones = function (radius, radius1) {\n d3.select(\"#intersectionCircles0\").attr(\"r\", radius * 11.22)\n d3.select(\"#intersectionCircles1\").attr(\"r\", radius1 * 11.22)\n update_intersection();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1273,"value":"updateZones(radius, radius1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1354,"value":"// determine pixel to mile conversion\n// formattedData[0]\n// formattedData[1]\n// get distance by plugging lat/long into https://www.nhc.noaa.gov/gccalc.shtml\n// check cx and cy for pixel locations and use distance formula\n// convert","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1225,"value":"(~3.5 hours) The above series of cells is responsible for adjusting the radius of the zone circles. This took longer than expected, as the initial set up of the zone circles made it difficult to independently adjust the radii and have the update_intersection function called upon a change. The slider is to scale, where the initial radius is 1 mile and each step increases the radius by a mile. This was calculated by finding the mile and pixel distance between the first two locations and using that relationship for the scales (1 mile =~11.22 pixels).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":350,"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"},{"id":1189,"value":"The above instantiation grabs necessary map data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":353,"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.596235], \n zoom: 8.5,\n interactive: false\n });\n //map.addControl(new maplibregl.NavigationControl(), 'bottom-left'); // adds the controls\n map.scrollZoom.disable();\n return map\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1193,"value":"(~10 min) Map initialization. If we had more time, we would have incorporated a side toolbar for more extensive filtering and enabled zooming/panning. These features were difficult to perfect in the allotted time, and we prioritized other features in their place. Taken from https://observablehq.com/d/79cca1e93c856ac9","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1236,"value":"(~4.5 hours) Originally, we wanted to include a toolbar to accompany the map. Ideally, the toolbar would have hosted the filtering checkboxes and radii sliders. However, we were unable to get the full implementation in place. This highlights one of the deficiencies with our visualization. While we are familiar creating a toolbar in other languages (e.g., Python), it was much more difficult to accomplish in D3. In our first implementation attempts, there was significant conflict with our existing map and overall div layout. As a pivot, we next tried to implement a side bar, as triggered by an icon on the map. This also proved difficult to implement, as problems arose with the layering of components. Given more time, we would have liked to fully add this feature.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":355,"value":"svg = {\n var container = map.getCanvasContainer();\n var svg = d3\n .select(container)\n .append(\"svg\")\n .attr(\"width\", \"100%\")\n .attr(\"height\", \"100%\")\n .style(\"position\", \"absolute\")\n .style(\"z-index\", 2); // make this appear above the mapbox backing layer\n return svg\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1198,"value":"(~10 min) Map container initialization. Taken from https://observablehq.com/d/79cca1e93c856ac9","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1033,"value":"function update_intersection() {\n update_dots.attr(\"fill\", function(d) {\n var locX = d3.select(this).attr(\"cx\");\n var locY = d3.select(this).attr(\"cy\");\n return withinIntersection(locX, locY) ? \"purple\" : \"gray\";\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1035,"value":"function withinIntersection (xdot, ydot) {\n let first_x = d3.select(\"#intersectionCircles0\").attr(\"cx\");\n let first_y = d3.select(\"#intersectionCircles0\").attr(\"cy\");\n let first_r = d3.select(\"#intersectionCircles0\").attr(\"r\");\n let second_x = d3.select(\"#intersectionCircles1\").attr(\"cx\");\n let second_y = d3.select(\"#intersectionCircles1\").attr(\"cy\");\n let second_r = d3.select(\"#intersectionCircles1\").attr(\"r\");\n let withinFirst = (Math.abs(first_x - xdot) <= first_r) && (Math.abs(first_y - ydot) <= first_r);\n let withinSecond = (Math.abs(second_x - xdot) <= second_r) && (Math.abs(second_y - ydot) <= second_r);\n return withinFirst && withinSecond;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1234,"value":"(~5 hours) A few different methods were attempted to get the intersection feature working, including treating the location points and zone circles as objects to determine when there's overlap. Eventually, we decided to use pixel arithmetic to determine if locations are within range of both zones. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":475,"value":"circles = {\n const circles = d3.range(2).map(i => ({\n x: 100,\n y: 100,\n id: i,\n }));\n\n let locators = svg\n .selectAll(\"circle.zone\")\n .data(circles)\n .join(\"circle\")\n .attr(\"id\", d => \"intersectionCircles\" + d.id)\n .attr(\"class\", \"zone\")\n .attr(\"cx\", d => d.x)\n .attr(\"cy\", d => d.y)\n .attr(\"r\", 11.22)\n .style(\"opacity\", .3)\n .attr(\"fill\", (d, i) => d3.schemeCategory10[i % 10])\n .call(drag);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1241,"value":"(~1.5 hours) The above definition for the zone circles was largely sourced from https://observablehq.com/@d3/circle-dragging-i. Customizations were made as necessary throughout the progression of the project.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":733,"value":"dots = {\n let dots = svg.selectAll(\"circle\")\n .data(filteredData)\n .join(\"circle\")\n .attr(\"id\",\"dot\")\n .attr(\"r\", 4)\n .attr(\"fill\", \"gray\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", \"0.5\")\n //.attr(\"r\", Math.max(map.getZoom()**2/25, 3))\n return dots;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1370,"value":"update_dots = {\n let update_dots = svg.selectAll(\"#dot\")\n .data(filteredData)\n .join(\"circle\")\n .attr(\"id\",\"dot\")\n .attr(\"r\", 4)\n .attr(\"fill\", \"gray\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", \"0.5\")\n return update_dots\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1203,"value":"(~2 hours) This part took time determining the particular radius that works, where to input the data, how data will enter and exit, and different marker attributes. Taken from https://observablehq.com/d/79cca1e93c856ac9","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":477,"value":"drag = {\n function dragstarted(event, d) {\n d3.select(this).raise().attr(\"stroke\", \"black\");\n }\n\n function dragged(event, d) {\n d3.select(this).attr(\"cx\", d.x = event.x).attr(\"cy\", d.y = event.y);\n update_intersection();\n }\n\n function dragended(event, d) {\n d3.select(this).attr(\"stroke\", \"black\");\n d3.selectAll(\"#dot\").raise()\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"},{"id":1247,"value":"(~15 mins) The above code for making the zone circles draggable was sourced from https://observablehq.com/@d3/circle-dragging-i. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":359,"value":"function project(lng,lat) {\n return map.project(new maplibregl.LngLat(lng, lat));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":361,"value":"function unproject(x,y) {\n return map.unproject([x,y]);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1209,"value":"(~10 hours) This part also took more time than expected. This is because I (Max) am new to D3. I had to identify how to properly employ the hover feature with the correct style, how to change the color of the marker based on whether the restaurant is highly rated or not (green vs red), and how to properly render everything once filtered. This was a challenging task for me, but I learned a lot in the meantime. If I had more time, I would investigate implementing a static tool to reside in the upper left of the canvas in order to display more information in a more organized way.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":363,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":446,"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"},{"id":1207,"value":"(~15 min) Map rendering rules. Taken from https://observablehq.com/d/79cca1e93c856ac9","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":540,"value":"theToolTip = {\nd3.select(\"body\")\n .append(\"div\")\n .attr('id', 'tooltip')\n .attr('style', 'position: absolute; opacity: 0;')\n .attr(\"class\", \"tooltip\")\n .style(\"background-color\", \"white\")\n .style(\"border\", \"solid\")\n .style(\"border-width\", \"2px\")\n .style(\"border-radius\", \"5px\")\n .style(\"padding\", \"5px\")\n .style('font-size', '10px')\n .style(\"z-index\", 2);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1212,"value":"(~2 hours) Tooltip features. Adapted from \nhttps://d3-graph-gallery.com/graph/interactivity_tooltip.html","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":927,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1217,"value":"Used the checkbox function from https://observablehq.com/@jashkenas/inputs in order to clean up our checkboxes. I also imported _Lodash_ below to make the functions work.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":919,"value":"_ = require('lodash')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 31:"$30:body"