25:["$","title",null,{"children":"Assignment 3 | Annabelle Wang's Workspace | Observable"}] 49:Tafc,{ var container = createWholeChartContainer(mapVars.mapWidth, mapVars.mapHeight); var svgContainer = d3.create('svg') .attr('id','svg_id') .attr('width', mapVars.mapWidth) .attr('height', mapVars.mapHeight); svgContainer.append('image') .attr('width', mapVars.mapWidth) .attr('height', mapVars.mapHeight) .attr('xlink:href', await FileAttachment("map.png").url()); updateValues(data, svgContainer); d3.select('#software-vis').selectAll("*").remove(); d3.select('#software-vis').append( () => container.node()); function dragHandler(event) { const draggedCircle = d3.select(this); const newX = event.x; const newY = event.y; draggedCircle.attr("cx", newX).attr("cy", newY); updateVisualization(svgContainer); } const dragA = d3.drag() .on("drag", dragHandler); const dragB = d3.drag() .on("drag", dragHandler); // Handle slider and radii const orangeRadiusSlider = document.getElementById('radius-slider-orange'); const greenRadiusSlider = document.getElementById('radius-slider-green'); const circleAradius = document.getElementById('orange-slider-value'); const circleBradius = document.getElementById('green-slider-value'); orangeRadiusSlider.addEventListener('input', function () { const sliderValue = +orangeRadiusSlider.value; updateCircleRadius(circleA, sliderValue); updateSliderValueDisplay(orangeRadiusSlider, circleAradius); updateVisualization(svgContainer); }); greenRadiusSlider.addEventListener('input', function () { const sliderValue = +greenRadiusSlider.value; updateCircleRadius(circleB, sliderValue); updateSliderValueDisplay(greenRadiusSlider, circleBradius); updateVisualization(svgContainer); }); // Draggable circles const circleA = svgContainer.append('circle') .attr("class", "draggable-circle") .attr('cx', 219.90060654722333) .attr('cy', 468.3054894439192) .attr('r', 170) .attr('stroke', 'black') .attr('stroke-width', 2) .attr('fill', 'rgba(240, 201, 152, 0.4)') .call(dragA); const circleB = svgContainer.append('circle') .attr("class", "draggable-circle") .attr('cx', 520.80060654722333) .attr('cy', 300.2054894439192) .attr('r', 170) .attr('stroke', 'black') .attr('stroke-width', 2) .attr('fill', 'rgba(0, 255, 0, 0.2)') .call(dragB); function updateVisualization() { svgContainer.selectAll(".data-circle") .attr("fill", function () { return (isInsideCircle(this, circleA) && isInsideCircle(this, circleB)) ? "black" : 'rgba(200, 200, 200, 1)'; }); } updateVisualization(); return svgContainer.node(); }4a:T453,function drawScatterPlot(data, svgContainer) { var toolTip = d3.select("body").append("div").attr("class", "toolTip") svgContainer.selectAll('circle') .data(data, d => d.id) .join( enter => enter.append('circle'), update => update, exit => exit.remove() ) .attr("class", "data-circle") .attr('r', mapVars.mapCircleRadius) .attr('cx', d => projection([+d.Longitude, +d.Latitude])[0]) .attr('cy', d => projection([+d.Longitude, +d.Latitude])[1]) .attr('fill', 'rgba(200, 200, 200, 1)') .on('mousemove', nodeMouseOver) .on('mouseout', nodeMouseOut); function nodeMouseOver(event, d){ toolTip.style("left", event.pageX + 14 + "px") .style("top", event.pageY + 14 + "px") .style("display", "block") if (d.Average_Rating) { toolTip.html(`${d.Name}
Avg Rating of ${d.Average_Rating}`); } else { toolTip.html(`${d.Name}`); } } function nodeMouseOut(event, d){ toolTip.style("display", "none"); } }4b:T589,**Collaboration:** Annabelle worked primarily on tooltips and filtering, and Ben on the data plotting and draggable circles. Both helped debug and check each other's work. **Write-Up:** Annabelle and Ben both spent roughly 15 hours each. Because we were both new to D3, it was really intimidating for us to get started. However, when we investigated the material more and found examples and documentation on Observable + D3, some of the harder parts of the development process became more digestible. For example, Annabelle was having a hard time with filtering while still displaying companies with null average ratings depending on what the user wants. Mouseover and mouseout logic for tooltips as also difficult to integrate into functions at first, but with more references (see above at mouseover logic), it became easier to parse through what was needed for the visualization to work. Ben spent the longest on updating the visualization after user input, such as adjusting the UI for draggable circle radius and position, and writing functions to automatically update point color based on the new positions. After playing around with multiple approaches, we found that using classes to differentiate the draggable circles from the points helped streamline the code. Overall, while creating the D3 visualization was challenging, it was also very rewarding in the flexibility it provides to data visualization.4c:[{"id":"c1da891f3f631ab40577ff241488f697e988e483403112cb9bcc67ecaa8e919ab17bb69cb7b904b4d97f23c6dd778087c508d99fd12868b09028e85a57447904","href":"https://static.observableusercontent.com/files/c1da891f3f631ab40577ff241488f697e988e483403112cb9bcc67ecaa8e919ab17bb69cb7b904b4d97f23c6dd778087c508d99fd12868b09028e85a57447904","name":"data.csv","type":"text/csv","lastModified":1699141840793.317,"size":380523},{"id":"de78cf105d13eb02c92d2fcd1d3ba6c6ef758e331b997feacaf16d3df2b075412a7bf4f67ac7772b268c933e1b20c717d5cf5945a817f213a2c82873f8d06e14","href":"https://static.observableusercontent.com/files/de78cf105d13eb02c92d2fcd1d3ba6c6ef758e331b997feacaf16d3df2b075412a7bf4f67ac7772b268c933e1b20c717d5cf5945a817f213a2c82873f8d06e14","name":"map.png","type":"image/png","lastModified":1699141840793.317,"size":640506}] 29:{"id":"70e8fb36c8c357e3","slug":null,"title":"Assignment 3","thumbnail":"a616fab593c1e8858f21e8473cf67ff36b309d16f19a93312f3893bcccdf51e0","access_level":"public","create_time":"$D2023-11-04T23:50:40.793Z","update_time":"$D2023-11-04T23:50:40.793Z","view_time":null,"first_public_time":"$D2023-11-04T23:50:40.793Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"c2a6531532ca20d6","login":"annabelle-wang-ws","name":"Annabelle Wang's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/dcae73509ad761761851ca2ea974f66b2b146de20a9f3b4f84407e6de5d5d642","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":673,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9883fbad4ed110b2","login":"annabelle-wang","name":"Annabelle Wang","avatar_url":"https://avatars-next.observableusercontent.com/82ccc0ced9e426d1dcb206b76a11ed8891f4f00ab2fe04d3c7197e1b5f1f24ed","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"9883fbad4ed110b2","login":"annabelle-wang","name":"Annabelle Wang","avatar_url":"https://avatars-next.observableusercontent.com/82ccc0ced9e426d1dcb206b76a11ed8891f4f00ab2fe04d3c7197e1b5f1f24ed","tier":null,"role":"editor"},{"type":"team","id":"c2a6531532ca20d6","login":"annabelle-wang-ws","name":"Annabelle Wang's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/dcae73509ad761761851ca2ea974f66b2b146de20a9f3b4f84407e6de5d5d642","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Assignment 3","cells":[{"id":0,"value":"# Assignment 3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":512,"value":"**Partners:**\nAnnabelle Wang and Ben Liao","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"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"},{"id":8,"value":"import {fromColumns, printTable} from \"@uwdata/data-utilities\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"data = FileAttachment(\"data.csv\").csv({typed: true});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":449,"value":"mapVars = (\n {mapWidth: 620, //Width of plot region\n mapHeight: 800, //Height of plot region\n mapMargin: 100,\n mapCircleRadius: 4 //Radius in pixels of circles in the plot\n }\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"mapFrameGeoJSON = JSON.parse(`{\"type\":\"Feature\",\"geometry\":{\"type\":\"LineString\",\"coordinates\":[[-122.54644297642132,37.989209933976475],[-121.74157680240731,37.19360698897229]]}}`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"projection = d3.geoConicConformal()\n .parallels([37 + 4 / 60, 38 + 26 / 60])\n .rotate([120 + 30 / 60], 0)\n .fitSize([mapVars.mapWidth, mapVars.mapHeight], mapFrameGeoJSON)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"import {interval} from '@mootari/range-slider'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"viewof ratings = interval([minRating, maxRating], {\n step: .1,\n value: [minRating, maxRating],\n label: 'Filter By Company Rating',\n}) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"viewof nullToggle = Inputs.toggle({label: \"Show Companies where Average Rating is NULL?\", value: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"

\n Orange Radius:\n \n 170\n \n\n Green Radius:\n \n 170\n

\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"d3.selectAll('circle')\n .on('click', function(d) { console.log(d); });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"function isInsideCircle(point, circle) {\n const circleCX = +circle.attr(\"cx\");\n const circleCY = +circle.attr(\"cy\");\n const circleRadius = +circle.attr(\"r\");\n const distance = Math.sqrt((point.cx.baseVal.value - circleCX) ** 2 + (point.cy.baseVal.value - circleCY) ** 2);\n return distance <= circleRadius;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"function updateCircleRadius(circle, radius) {\n circle.attr('r', radius);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"function updateSliderValueDisplay(slider, valueDisplay) {\n valueDisplay.textContent = slider.value;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"## TOOLTIPS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":488,"value":"TOOLTIP STYLING\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":486,"value":"function createWholeChartContainer(outerWidth, outerHeight) { // creates an outer svg\n var wholeChartContainer = d3.create('svg')\n .attr('width', outerWidth)\n .attr('height',outerHeight)\n .style('background-color', 'whitesmoke') \n \n return wholeChartContainer;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"## Filters","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":462,"value":"// Set the correct minimum rating here\nminRating = d3.min(data, d=> d.Average_Rating)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"// Set the correct maximum rating here\nmaxRating = d3.max(data, d=> d.Average_Rating)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"// Filters by slider and null toggle\nfunction updateValues(data, svgContainer){\n var value = nullToggle;\n if (value == true) {\n var filterData = data.filter(d => (d.Average_Rating >= ratings[0] && d.Average_Rating <= ratings[1]) || d.Average_Rating === null);\n } else {\n var filterData = data.filter(d => (d.Average_Rating >= ratings[0] && d.Average_Rating <= ratings[1]));\n }\n drawScatterPlot(filterData, svgContainer);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"**References:**\n* Slider -> https://observablehq.com/@mootari/range-slider\n * Used interval structure and display logic\n* Mouseover and Mouseout logic -> https://observablehq.com/@benoldenburg/patterns-tooltip\n * Helped realize how to get tooltip and change its position and style. Also put insight on how to stylize the cursor on tooltip, though not used\n* Toggle -> https://observablehq.com/@observablehq/input-toggle\n * How to use toggles for showing companies with null average ratings\n* Legend -> https://observablehq.com/@d3/color-legend\n * How to show colored legend ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":457,"value":"$4b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null