25:["$","title",null,{"children":"CS448 Data Visualization A3 (Yelp Dataset) | Mei Tan | Observable"}] 49:T753,#### Breakdown of how the work was split among the group members (Mei Tan (mxtan) & Jiner Zheng (jzheng16)): For the initial rendering of the map, data points, hover tooltips and filters, we pair programmed. Jiner coded the filter circles, and Mei debugged them. We pair programmed the final touches and wrote this writeup together. #### Referenced pre-existing code resources: - [Plotting on maps with d3 and mapbox](https://franksh.com/posts/d3-mapboxgl/) - [d3-Drag & Click](https://observablehq.com/@d3/click-vs-drag) - [d3-Tooltip Tutorial](https://d3-graph-gallery.com/graph/interactivity_tooltip.html) - Stackoverflow for various syntax reminders about D3 and JS #### Commentary on the development process, including answers to the following questions: Roughly how much time did you spend developing your application? What aspects took the most time? The development process involved roughly ~8 hours of pair programming time and ~3 hours each of individual programming time. The draggable filter circles were the element that took the longest time to implement, followed by the initial setup and load of data. #### Briefly detail a shortcoming or design deficiency with your visualization. What would you improve your visualization given more time? - An issue we couldn't fix with Mapbox is that every time we change the filtering (e.g., filter by costs, radius, or high ratings), the entire map re-renders. - Given more time, we would design a more user-friendly interface for filtering. We would make the filter circles optional, with a better selection to indicate that selecting none of the cost filters shows all restaurants $including those without price information$. - Given more time, we would add additional visual features, including a panel of restaurants represented in the filter, and a more comprehensive set of information in the hover tooltip.4a:T11a9,{ let container = html`

`; yield container; let map = new mapboxgl.Map({ container, center: [-122.22, 37.62], zoom: 10, style: "mapbox://styles/mapbox/light-v10", scrollZoom: false }); map.addControl(new mapboxgl.NavigationControl(), 'bottom-left'); // adds the controls invalidation.then(() => map.remove()); container = map.getCanvasContainer(); var svg = d3 .select(container) .append("svg") .attr("width", "100%") .attr("height", "800") .style("position", "absolute") .style("z-index", 2); var draggableCircle1 = svg .append('circle') .attr('cx', map.project(new mapboxgl.LngLat(-122.3255, 37.5630)).x) .attr('cy', map.project(new mapboxgl.LngLat(-122.3255, 37.5630)).y) .attr('r', radius1) .attr('id', 'circle1') .style("fill", '#006064') .style("opacity", 0.15) .style("z-index", 1) .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); var draggableCircle2 = svg .append('circle') .attr('cx', map.project(new mapboxgl.LngLat(-122.2281, 37.5630)).x) .attr('cy', map.project(new mapboxgl.LngLat(-122.2281, 37.5630)).y) .attr('r', radius2) .attr('id', 'circle2') .style("fill", '#263238') .style("opacity", 0.15) .style("z-index", 1) .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); function dragstarted(event) { d3.select(this).attr("stroke","black"); } function dragged(event) { // get current dragged circle var currCircle = d3.select(this); var currId = currCircle.attr('id'); currCircle .raise() .attr("cx", event.x) .attr("cy", event.y) render(); } function dragended(event) { d3.select(this).attr("stroke", null); } var dots = svg .selectAll("circle") .data(data_filtered) .enter() .append("circle") .attr("r", Math.max(map.getZoom()**2/20, 3)) .style("fill", "silver") .attr('opacity', 0.5) .style("z-index", 20) .on('mousemove', nodeMouseOver) .on('mouseout', nodeMouseOut ); // tooltips var toolTip = d3 .select("body") .append("div") .attr("class", "toolTip") function nodeMouseOver(event, d){ // Get the toolTip, update the position, and append the inner html toolTip .style("left", event.pageX + 10 + "px") .style("top", event.pageY + 10 + "px") .style("display", "block") .html(`

${d.name}

${'#'.concat(d.categories.split(',').join(' #'))}

`); // cursor change on target d3.select(event.target).style("cursor", "pointer"); // highlight effect on target d3.select(event.target) .transition() .duration(50) //.style("fill", "orange") .attr("stroke","#333333") .attr("stroke-width",2); } function nodeMouseOut(event, d){ // Hide tooltip on mouse out toolTip.style("display", "none"); // Hide toolTip //console.log(d3.select(event.target)) // Optional cursor change removed d3.select(event.target).style("cursor", "default"); // Optional highlight removed d3.select(event.target) .transition() .duration(50) //.style("fill", "silver") .attr('opacity', 0.5) .attr("stroke","none"); } function project(d) { var coords = d.coordinates.split(',').map(Number).reverse() return map.project(new mapboxgl.LngLat(coords[0], coords[1])); } function updateDots() { dots.style("fill", function(d) { var dist1 = Math.sqrt((project(d).x - draggableCircle1.attr("cx")) ** 2 + (project(d).y - draggableCircle1.attr("cy")) ** 2); var dist2 = Math.sqrt((project(d).x - draggableCircle2.attr("cx")) ** 2 + (project(d).y - draggableCircle2.attr("cy")) ** 2); if (dist1 <= draggableCircle1.attr("r") && dist2 <= draggableCircle2.attr("r")) { return "orange"; } else { return "silver"; } }); dots.raise(); } function render() { updateDots(); dots .attr("cx", function (d) { return project(d).x; }) .attr("cy", function (d) { return project(d).y; }); } map.on("viewreset", render); map.on("move", render); map.on("moveend", render); render(); // Call once to render }4b:[{"id":"58091ba96cf489438d2089a31decf06f0a16ea4fc10fa51e5fc068cb2564397d12581f7f2e265b59a81e690d6f34afa69ff2bff45a0da7be295fcc41044aa429","href":"https://static.observableusercontent.com/files/58091ba96cf489438d2089a31decf06f0a16ea4fc10fa51e5fc068cb2564397d12581f7f2e265b59a81e690d6f34afa69ff2bff45a0da7be295fcc41044aa429","name":"asst3_yelp.csv","type":"text/csv","lastModified":1676084143929.675,"size":3027302},{"id":"d91a84de8357340b5703fe5db34b70da73b6fffc0eedbfb0b6f6aee82be3975db26f81bc7c617aba09eb5020be32d527c50ef5ae2a058cdf82331985115857cc","href":"https://static.observableusercontent.com/files/d91a84de8357340b5703fe5db34b70da73b6fffc0eedbfb0b6f6aee82be3975db26f81bc7c617aba09eb5020be32d527c50ef5ae2a058cdf82331985115857cc","name":"asst3_yelp@1.csv","type":"text/csv","lastModified":1676084943625.719,"size":2475857}] 29:{"id":"9db6b3e5731580ca","slug":null,"title":"CS448 Data Visualization A3 (Yelp Dataset)","thumbnail":"1eba859c61955863db4c387d382753cc0b21679a5361695e74772ac3c74fd5fb","access_level":"public","create_time":"$D2023-02-11T01:48:37.164Z","update_time":"$D2023-02-19T23:20:06.859Z","view_time":null,"first_public_time":"$D2023-02-11T01:48:37.164Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"73dd007890176453","login":"mxtan","name":"Mei Tan","avatar_url":"https://avatars-next.observableusercontent.com/898295f04f1eff00214cbf5ee60ad5363399efdc6b5d8e5f4d45798f05858110","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":636,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c9b53e9f2aaf015d","login":"mxtan","name":"Mei Tan","avatar_url":"https://avatars-next.observableusercontent.com/898295f04f1eff00214cbf5ee60ad5363399efdc6b5d8e5f4d45798f05858110","tier":null,"bio":"","followed_by_you":false,"follows_you":false},{"type":"individual","id":"83dbc1a62414f05a","login":"cyanjiner","name":"cyanjiner","avatar_url":"https://avatars-next.observableusercontent.com/8e2d5b386539ed23f6b998518e8bb56b7424376639edeb7b4abfcf53a59a3339","tier":null,"bio":"M.S. Ed Data Science @StanfordU\nB.A. CS & Psych @ WesleyanU","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"83dbc1a62414f05a","login":"cyanjiner","name":"cyanjiner","avatar_url":"https://avatars-next.observableusercontent.com/8e2d5b386539ed23f6b998518e8bb56b7424376639edeb7b4abfcf53a59a3339","tier":null,"role":"editor"},{"type":"individual","id":"c9b53e9f2aaf015d","login":"mxtan","name":"Mei Tan","avatar_url":"https://avatars-next.observableusercontent.com/898295f04f1eff00214cbf5ee60ad5363399efdc6b5d8e5f4d45798f05858110","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"CS448 Data Visualization A3 (Yelp Dataset)","cells":[{"id":0,"value":"# CS448 Data Visualization A3 (Yelp Dataset)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":611,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":623,"value":"### How to use this map:\nMove the filter circles to highlight the restaurants and cafes in the intersection. Hover over any dot for more information about that restaurant/cafe.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":140,"value":"viewof radius1 = Inputs.range([0, 255], {step: 1, label: \"Filter #1 Radius\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"viewof radius2 = Inputs.range([0, 255], {step: 1, label: \"Filter #2 Radius\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"#### Filters:\nSelect no filters to show all restaurants and cafes. Check boxes below to filter down to only those that match the specified criteria.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":137,"value":"viewof expense = Inputs.checkbox([\"$\", \"$$\", \"$$$\"], {label: \"Cost\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"viewof rating = Inputs.toggle({label: \"Highly Rated\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":324,"value":"## Utility","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":72,"value":"data = FileAttachment(\"asst3_yelp@1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"data_filtered = data\n .filter(d => expense.length > 0 ? expense.includes(d.price) : true)\n .filter(d => rating ? parseInt(d.rating) > 4 : true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@0.49\");\n if (!gl.accessToken) {\n gl.accessToken =\n \"pk.eyJ1IjoidG1jdyIsImEiOiJja3FmbGJoNXMxNmx5Mm9uejIxcmpiNjh2In0.2F8HR-8J859J7frYE6DG9g\";\n const href = await require.resolve(\"mapbox-gl@0.49/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"ns = Inputs.text().classList[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"