44:["$","title",null,{"children":"Company Finder | Amantina Rossi's Workspace | Observable"}] 4c:T4a1,My development process was mostly linear and straightforward, with the exception of getting stuck in a couple places. I started by rendering the map and the data points as circles. Then I worked on adding the reference circles. My initial approach didn't work out right to support drag and resize, so I more closely followed the D3 exercise notebook and from there was able to make it work. Then I struggled on properly filtering the points to change color when they were in the intersection of the two circles. However, with help from the TA I was able to figure out. Then I went on to add another filtering option. Initially, I wanted to use a slider for average rating, but I ran into trouble with getting the points to appear and disappear correctly. Rather than getting stuck, I transitioned to a text input to filter by first letter of company name instead. My last bug was ensuring that tooltips didn't show up for points that were not shown. I spent a long time on this bug, but eventually found a weird work around using custom attributes. In total, this project took me around 7 hours to complete, with the longest aspect being getting the filtering and conditionals to work.4d:T566,function drawCompaniesMO(companies, container) { container.selectAll('circle') .data(companies) .join('circle') .attr('r', 4) .attr('cx', d => projection([d.Longitude, d.Latitude])[0]) .attr('cy', d => projection([d.Longitude, d.Latitude])[1]) .attr('opacity', '0.5') .attr('onScreen', 'true') .attr('class', 'compCircle') .attr('id', d=> d.ID) .attr('fill', 'grey') .on('mouseover', function (event, d) { if(event.target.attributes['onScreen'].value == 'true') {container.append('g').attr('class', 'tooltip').style('display', 'block').append('text') .attr('class', 'ptLabel') .attr('x', 10 + projection([d.Longitude, d.Latitude])[0]) .attr('y', 10 + projection([d.Longitude, d.Latitude])[1]) .attr('font-weight', '900') .attr('font-family', 'Arial') .text(d.Name); if (d.Average_Rating) { d3.select('.tooltip').append('text') .attr('class', 'ptLabel') .attr('x', 10 + projection([d.Longitude, d.Latitude])[0]) .attr('y', 30 + projection([d.Longitude, d.Latitude])[1]) .attr('font-weight', '900') .attr('font-family', 'Arial') .text(`${d.Average_Rating} / 5`);}} }) .on('mouseout', function(event, d) { d3.selectAll('.tooltip').remove() }) } 4e:T5f7,function fakedrawCompaniesMO(companies, container) { container.selectAll('circle') .data(companies) .join('circle') .attr('r', 4) .attr('cx', d => projection([d.Longitude, d.Latitude])[0]) .attr('cy', d => projection([d.Longitude, d.Latitude])[1]) .attr('opacity', '0.5') .attr('class', 'compCircle') .attr('fill', 'grey') .on('mouseover', function (event, d) { d3.select('#tooltip') .style('left', 10 + projection([d.Longitude, d.Latitude])[0] + 'px') .style('top', 10 + projection([d.Longitude, d.Latitude])[1] + 'px') .style("opacity", '0.75') .style("background-color", "red") .html(d.Name); if (d.Average_Rating) {d3.select('#tooltip').append('text') .attr('class', 'ptLabel') .attr('x', 10 + projection([d.Longitude, d.Latitude])[0]) .attr('y', 30 + projection([d.Longitude, d.Latitude])[1]) .attr('font-weight', '900') .attr('font-family', 'Arial') .html(`${d.Average_Rating} / 5`);} ; }) .on('mouseout', function(event, d) { d3.selectAll('#tooltip').style("opacity", 1); }); container.append("div") .style("opacity", 0.8) .attr("id", "tooltip") .style("background-color", "white") .style("border", "solid") .style("border-width", "2px") .style("border-radius", "5px") .style("padding", "5px") .html("yahbahajkshdfkjashdkjashd"); }4f:Tae9,function drawAreaCircles(container) { // inspo from https://observablehq.com/@stanfordvis/d3-excercises const circleGroups = container.append('g').selectAll('circle') .data([pointA, pointB]) .join('g') // create outer stroke circle circleGroups.append('circle') .attr('class', 'outCircle') .attr("id", function(d) { return "outCircle" + d.id; }) .attr('r', d => d.r + 3) // Use d.size to set size attr. .attr('cx', d => projection([d.lon, d.lat])[0]) .attr('cy', d => projection([d.lon, d.lat])[1]) .attr('fill', 'white') .attr('opacity', '0.25') .attr('stroke-width', 4) .attr('stroke-opacity', 1) .attr('stroke', 'black') .call(d3.drag() .subject(function(event,d) { return {x: event.x, y: event.y}; }) .on('start',resizeDragStarted) .on('drag',resizeDragged) .on('end',resizeDragEnded) ) // create inner circle circleGroups.append('circle') .attr('class', 'inCircle') .attr("id", function(d) { return "inCircle" + d.id; }) .attr('r', d => d.r) .attr('cx', d => projection([d.lon, d.lat])[0]) .attr('cy', d => projection([d.lon, d.lat])[1]) .attr('fill', d => d.color) .attr('opacity', '0.25') .call(d3.drag() .subject(function(event,d) { return {}; }) .on('start',dragStarted) .on('drag',dragged) .on('end',dragEnded) ) function resizeDragStarted(event, d) { d3.select('#outCircle' + d.id).attr('stroke', 'blue'); } function resizeDragged(event, d) { const distFromCircleCenter = Math.sqrt(Math.pow(projection([d.lon, d.lat])[0] - event.x, 2)+ Math.pow(projection([d.lon, d.lat])[1] - event.y, 2)); d.r = distFromCircleCenter; d3.select('#outCircle' + d.id) .attr("r", d.r + 3); d3.select('#inCircle' + d.id) .attr("r", d.r); d3.selectAll('.compCircle').attr('fill', d => checkInsideCircles(d) ? 'blue' : 'grey'); } function resizeDragEnded(event, d) { d3.select('#outCircle' + d.id).attr('stroke', 'black'); } function dragStarted(event, d) { d3.select('#outCircle' + d.id) .attr("stroke", 'black'); } function dragged(event, d) { const [lon, lat] = projection.invert([event.x, event.y]); d.lon = lon; d.lat = lat; d3.select(this).attr("cx", event.x).attr("cy", event.y); d3.select('#outCircle' + d.id) .attr("cx", event.x).attr("cy", event.y); d3.selectAll('.compCircle').attr('fill', d => checkInsideCircles(d) ? 'blue' : 'grey'); } function dragEnded(event, d) { d3.select('#outCircle' + d.id) .attr("stroke", 'black'); } }50:[{"id":"c1da891f3f631ab40577ff241488f697e988e483403112cb9bcc67ecaa8e919ab17bb69cb7b904b4d97f23c6dd778087c508d99fd12868b09028e85a57447904","href":"https://static.observableusercontent.com/files/c1da891f3f631ab40577ff241488f697e988e483403112cb9bcc67ecaa8e919ab17bb69cb7b904b4d97f23c6dd778087c508d99fd12868b09028e85a57447904","name":"data.csv","type":"text/csv","lastModified":1698181608489.849,"size":380523},{"id":"de78cf105d13eb02c92d2fcd1d3ba6c6ef758e331b997feacaf16d3df2b075412a7bf4f67ac7772b268c933e1b20c717d5cf5945a817f213a2c82873f8d06e14","href":"https://static.observableusercontent.com/files/de78cf105d13eb02c92d2fcd1d3ba6c6ef758e331b997feacaf16d3df2b075412a7bf4f67ac7772b268c933e1b20c717d5cf5945a817f213a2c82873f8d06e14","name":"mappic.png","type":"image/png","lastModified":1698182030214.614,"size":640506}] 48:{"id":"1cdeffbe480fb98b","slug":"company-finder","title":"Company Finder","thumbnail":"6b3b849854a087d537aebd137686a54f68fff3cab96194bdacc8cec77f11690b","access_level":"public","create_time":"$D2023-10-24T21:05:14.898Z","update_time":"$D2023-10-30T05:04:39.770Z","view_time":null,"first_public_time":"$D2023-10-29T21:51:06.715Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"8a8af33dc34279e5","login":"amantina-rossi-ws","name":"Amantina Rossi's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/d72308d06a95236167c564b7ff0a2288c2c6bffaeb1abdce1730c2e518b5e729","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":385,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"708e4bbc95b629de","login":"amantina-rossi","name":"Amantina Rossi","avatar_url":"https://avatars-next.observableusercontent.com/addb841e1b409f750f494c2ac5e789fb3f68f712ad58f7b81a2b4ec25f9e71ff","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"708e4bbc95b629de","login":"amantina-rossi","name":"Amantina Rossi","avatar_url":"https://avatars-next.observableusercontent.com/addb841e1b409f750f494c2ac5e789fb3f68f712ad58f7b81a2b4ec25f9e71ff","tier":null,"role":"editor"},{"type":"team","id":"8a8af33dc34279e5","login":"amantina-rossi-ws","name":"Amantina Rossi's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/d72308d06a95236167c564b7ff0a2288c2c6bffaeb1abdce1730c2e518b5e729","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":"Company Finder","cells":[{"id":0,"value":"# Company Finder","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"html`\n\n\n\n\n\n Drag and resize your reference points\n
\n Filter by first letter of company name\n

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"$4c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"{\n let container = createMapSvg();\n addMap(container);\n drawAreaCircles(container);\n \n let companiesGroup = container.append('g').attr('id', 'companiesGroup');\n drawCompaniesMO(companies, companiesGroup);\n drawRating();\n \n d3.select('#map-vis').selectAll(\"*\").remove(); \n d3.select('#map-vis').append(() => container.node());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"function createMapSvg() {\n let container = d3.create('svg')\n .attr('width', mapWidth + 5 * margin)\n .attr('height', mapHeight + margin)\n .attr('id', 'mapContainer');\n\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"function addMap(container) {\n container.append('image')\n .attr('xlink:href', mapURL)\n .attr('width', mapWidth)\n .attr('height', mapHeight)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"function checkInsideCircles(datum) {\n const [dx, dy] = projection([datum.Longitude, datum.Latitude])\n const [ax, ay] = projection([pointA.lon, pointA.lat])\n const [bx, by] = projection([pointB.lon, pointB.lat])\n const distA2 = Math.pow(dx - ax, 2)+ Math.pow(dy - ay, 2);\n const distB2 = Math.pow(dx - bx, 2)+ Math.pow(dy - by, 2);\n return distA2 <= Math.pow(pointA.r, 2) && distB2 <= Math.pow(pointB.r, 2)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"function drawRating() {\n d3.select('#sliderCont')\n .append('input')\n .attr('type', 'text')\n .attr('id', 'nameBox')\n .attr('name', 'nameBox')\n .attr('value', '')\n .attr('maxLength', '1')\n .on('input', function (event, datum) {\n \n \n d3.selectAll('.compCircle').attr('opacity', d => this.value == '' ? 0.5 : d.Name[0].toLowerCase() == this.value.toLowerCase() ? 0.5 : 0);\n d3.selectAll('.compCircle').style('display', d => this.value == '' ? 'block' : d.Name[0].toLowerCase() == this.value.toLowerCase() ? 'block' : 'none');\n d3.selectAll('.compCircle').attr('onScreen', d => this.value == '' ? 'true' : d.Name[0].toLowerCase() == this.value.toLowerCase() ? 'true' : 'false');\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"function drawCircles(container) {\n container.append('g').selectAll('circle')\n .data([pointA, pointB])\n .join('circle')\n .attr('class', 'point')\n .attr('id', d => d.id)\n .attr('r', d => d.r)\n .attr('fill', d => d.color)\n .attr('cx', d => projection([d.lon, d.lat])[0])\n .attr('cy', d => projection([d.lon, d.lat])[1])\n .attr('stroke', '#333')\n .attr('stroke-width', 2)\n .attr('stroke-opacity', 1)\n .attr('opacity', '0.25')\n .attr('lonlat', d => [d.lon, d.lat])\n .call(\n d3\n .drag()\n .on(\"drag\", function (e, d) { \n d3.select(this).attr(\"cx\", e.x).attr(\"cy\", e.y);\n console.log(e);\n const [lon, lat] = projection.invert([e.x, e.y]);\n d.lon = lon;\n d.lat = lat;\n })\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"import {aq, op} from \"@uwdata/arquero\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"refRadius = 50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"pointA = ({lon: -122.256, lat: 37.539, r: refRadius, color: 'red', id: 'A'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"pointB = ({lon: -122.01, lat: 37.383, r: refRadius, color: 'yellow', id: 'B'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"mapURL = await (await FileAttachment(\"mappic.png\")).url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"mapWidth = 620;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"mapHeight = 800;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"margin = 50;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"mapFrameGeoJSON = JSON.parse(`{\"type\":\"Feature\",\"geometry\":{\"type\":\"LineString\",\"coordinates\":[[-122.54644297642132,37.989209933976475],[-121.74157680240731,37.19360698897229]]}}`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"projection = d3.geoConicConformal()\n .parallels([37 + 4 / 60, 38 + 26 / 60])\n .rotate([120 + 30 / 60], 0)\n .fitSize([mapWidth, mapHeight], mapFrameGeoJSON)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"Sources: https://gist.github.com/adry34160/abe0bda4ea2f7e8efbd63bd2d419ef15, https://observablehq.com/@stanfordvis/d3-excercises","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"companies = await FileAttachment(\"data.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"companies","database":"$undefined"}],"files":"$W50","stdlib":"1"}} 24:null