3e:null 3f:["$","title",null,{"children":"Adopting a Pet | IXD Sheridan | Observable"}] 45:T49f,{ const container = yield htl.html`

`; const map = L.map(container,{ }); const layer = L.geoJSON(states, { style: (feature) =>{ return{ stroke: 0, fillColor: colorPicker, fillOpacity: 0.5 } } }).addTo(map); for (var i = 0; i < locationMarks.length; i++) { L.marker([locationMarks[i][1],locationMarks[i][0]]) .bindPopup("

" + locationMarks[i][2] + "

" + "📍 " + locationMarks[i][3] + ", " + locationMarks[i][4] + ", " + locationMarks[i][8] + "
" + "📞 " + locationMarks[i][9] + "
" + "✉️ " + locationMarks[i][5] + "
" + "🖥️ " + "" + "Click here" + "") .addTo(map); } map.fitBounds(layer.getBounds(), {maxZoom: 12}); L.tileLayer("https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png", { attribution: '© OpenStreetMap contributors, Tiles style by Humanitarian OpenStreetMap Team hosted by OpenStreetMap France' }).addTo(map); }46:T78a,chart = { const links = data.links.map(d => Object.create(d)); const nodes = data.nodes.map(d => Object.create(d)); const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody().strength(-400)) .force("x", d3.forceX()) .force("y", d3.forceY()); const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]) .style("font", "12px sans-serif"); // Per-type markers, as they don't inherit styles. svg.append("defs").selectAll("marker") .data(types) .join("marker") .attr("id", d => `arrow-${d}`) .attr("viewBox", "0 -5 10 10") .attr("refX", 15) .attr("refY", -0.5) .attr("markerWidth", 6) .attr("markerHeight", 6) .attr("orient", "auto") .append("path") .attr("fill", "#70c2ba") .attr("d", "M0,-5L10,0L0,5"); const link = svg.append("g") .attr("fill", "none") .attr("stroke-width", 1.5) .selectAll("path") .data(links) .join("path") .attr("stroke", "#70c2ba") .attr("marker-end", d => `url(${new URL(`#arrow-${d.type}`, location)})`); const node = svg.append("g") .attr("fill", "currentColor") .attr("stroke-linecap", "round") .attr("stroke-linejoin", "round") .selectAll("g") .data(nodes) .join("g") .call(drag(simulation)); node.append("circle") .attr("stroke", "white") .attr("stroke-width", 1.5) .attr("r", 4); node.append("text") .attr("x", 8) .attr("y", "0.31em") .text(d => d.id) .clone(true).lower() .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width", 3); simulation.on("tick", () => { link.attr("d", linkArc); node.attr("transform", d => `translate(${d.x},${d.y})`); }); invalidation.then(() => simulation.stop()); return svg.node(); }47:T414,- The following four arrays are selected based on the checkbox. Since the following filters are boolean in the dataset, I think they are more suitable for checkboxes. I will first use **if loop** to restrict the checked and unchecked filtering of the data in two different situations of the check box. - Then in if loop, spayed neutered is taken as an example. I first use **`d3.group()`** to divide data into two categories of right and wrong according to the boolean of *attributes_spayed_neutered*, and name it *sortedAnimals2*. Logically, in the case of checked, the case of spayed neutered should be true, and then I return the value of *attributes_spayed_neutered* that is true to the previous step. The remaining unchecked case returns all the values of the previous step back to the previous data. - The purpose of going back to the previous step is to ensure that the filtered data meets the filtering conditions of both steps. And so on, the remaining three checkboxes all follow this scrip, finally achieving the purpose of screening48:[{"id":"16e022e28bd2ce13ec90deadd451b8f896150838a4b368756b15a11d44ac8e33d64f11ce51bc6b6acd13736c907f6d95d382c685dbc6cee5aef185496ed7af69","href":"https://static.observableusercontent.com/files/16e022e28bd2ce13ec90deadd451b8f896150838a4b368756b15a11d44ac8e33d64f11ce51bc6b6acd13736c907f6d95d382c685dbc6cee5aef185496ed7af69","name":"petTree@1.csv","type":"text/csv","lastModified":1679946306765.936,"size":5125},{"id":"783cf2bf259e16d662d92c9f59ec97e564c50841c5984f2bb6f65a6d31f8c1b80846bffb65cb654dc2b587ac96f0007ab68c24bacce33655fd785e46020aff74","href":"https://static.observableusercontent.com/files/783cf2bf259e16d662d92c9f59ec97e564c50841c5984f2bb6f65a6d31f8c1b80846bffb65cb654dc2b587ac96f0007ab68c24bacce33655fd785e46020aff74","name":"us-counties-10m.json","type":"application/json","lastModified":1679533993802.273,"size":842177},{"id":"297fb31ca3c7d9320be00111b66d5637a992e42e0b2166c0eef3d878e745160532b8aa1b4920279185b0fc447de014a2e6a14229c020495a7a9dee4e7de9fa74","href":"https://static.observableusercontent.com/files/297fb31ca3c7d9320be00111b66d5637a992e42e0b2166c0eef3d878e745160532b8aa1b4920279185b0fc447de014a2e6a14229c020495a7a9dee4e7de9fa74","name":"zipcodes@2.csv","type":"text/csv","lastModified":1679522961439.703,"size":2018388}] 43:{"id":"79503336ecf10e88","slug":null,"title":"Adopting a Pet","thumbnail":"2f50fe94cdc054625054ad19cd34d83432f30e276c41b10eb00841d235ea36cd","access_level":"public","create_time":"$D2023-03-17T00:55:45.405Z","update_time":"$D2023-04-05T18:28:06.864Z","view_time":null,"first_public_time":"$D2023-03-30T01:58:58.299Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"0a8b950203491c0f","login":"ixd-sheridan","name":"IXD Sheridan","avatar_url":"https://avatars-next.observableusercontent.com/5d0881196900a7350c64d546dd5099a2532e7060f4150f97c1375dae8cb92d45","tier":"education_2026","bio":"Interaction Design at Sheridan College","following":false},"version":1554,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cc12a38db89b0dcc","login":"liruito","name":"Ruitong Li","avatar_url":"https://avatars-next.observableusercontent.com/f4bd60aa6c61ac1135f76b1703403bcc67fb67cea319dae9a696d4b4c39402da","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"0a8b950203491c0f","login":"ixd-sheridan","name":"IXD Sheridan","avatar_url":"https://avatars-next.observableusercontent.com/5d0881196900a7350c64d546dd5099a2532e7060f4150f97c1375dae8cb92d45","tier":"education_2026","role":"editor"},{"type":"individual","id":"cc12a38db89b0dcc","login":"liruito","name":"Ruitong Li","avatar_url":"https://avatars-next.observableusercontent.com/f4bd60aa6c61ac1135f76b1703403bcc67fb67cea319dae9a696d4b4c39402da","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Adopting a Pet","cells":[{"id":990,"value":"# Adopting a Pet","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":993,"value":"Have you ever wanted to own a pet? Now the earth stray more and more small animals, their living conditions often make people feel very worried. So World Animal Protection advocates adopting instead of buying. So if you want to own a pet, consider adopting one from an animal organization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":995,"value":"In fact, there are many small animals adopted by animal organizations. You can use the filter below to filter the pet you want to adopt.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":997,"value":"Based on your criteria, the filter will initially select some animals that meet your criteria, and the relevant pet information and adoption contact information will be included below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1156,"value":"🐕 🐈 🐇 🐎 🦜 ...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":986,"value":"## Begin to choose a pet!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":969,"value":"viewof selectedAnimals = Inputs.select([\"Dog\", \"Cat\", \"Rabbit\"], {attr: (d) => d.name })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":974,"value":"viewof animalFilter = Inputs.checkbox([\"spayed neutered\", \"house trained\",\"special needs\", \"shots current\"], {value: [\"A\"]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":967,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":0,"value":"## Do you want to know more about animal organization?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1412,"value":"If you want to learn more about animal organizations, you can view detailed animal tissue information by viewing the map below. Click on the location marks on the map and a pop-up will show you more relevant contact information for the organization, including email, phone, address and website.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1419,"value":"viewof colorPicker = Inputs.color({label: \"Select a background color\", value: \"#70c2ba\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1409,"value":"## Pets Types Map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":353,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1427,"value":"This is an additional tree map attached. It shows the species of the pet, including the coat, color, and some of the common breeds recommended as pets. You can drag any of the components of the diagram to see how it belongs.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1406,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1433,"value":"## postscript","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1431,"value":"The purpose of this project is not only to appeal and recommend people to claim their pets, so that the animals collected by animal organizations can be taken good care of. On the other hand, I also hope that, whether adopting a pet or buying a pet, people should carefully consider their own situation and the situation of the pet, so as to avoid more abandonment or second abandonment. This is undoubtedly a kind of harm to animals.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1499,"value":"In addition, the API key of this dataset was stored in node.js, but the connection in replit was unstable, with frequent disconnections. Please let me know as soon as the dataset failed to fetch.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":825,"value":"## Data Process","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1029,"value":"#### Attach pets organizations data from node.js","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1009,"value":"petfinder = fetch(\"https://Petfinder-Web-Data-Connector.liruito.repl.co/data\").then((response) => response.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1033,"value":"#### Attach zipcode file","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1037,"value":"The goal is to convert the zipcode in the api to the corresponding latitude and longitude in the next step","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1015,"value":"zipcode = FileAttachment(\"zipcodes@2.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1040,"value":"#### Attach json data of the map of US","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1020,"value":"us = FileAttachment(\"us-counties-10m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1025,"value":"states = topojson.feature(us, us.objects.states)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1063,"value":"#### Map \"Petfinder\" data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1065,"value":"Because the data imported directly from the original api contains a lot of information that I don't need, I need to filter it out. So I used the map function to save only the data I needed","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1048,"value":"stateName = petfinder.map(ognizations => {\n return {\n State: ognizations.address_state,\n address: ognizations.address_country,\n email: ognizations.email,\n zipcode: ognizations.address_postcode,\n logo: ognizations.url,\n website: ognizations.website,\n name: ognizations.name,\n city: ognizations.address_city,\n phone: ognizations.phone\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1067,"value":"#### Map zipcode data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1069,"value":"Only by converting the array of zipcode into this group form can the two databases be combined with the same zipcode of the two databases in subsequent processing","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1043,"value":"Data = d3.index(zipcode, d => d.zip_code)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1071,"value":"#### Use zipcode to locate the organizations' longitude and latitude","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1053,"value":"geoData = stateName.map(({zipcode: zip_code, name, email, logo, website, phone}) => ({...Data.get(zip_code), name, email, logo, website, phone}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1073,"value":"#### Convert the form of geoData","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1075,"value":"Since I use **for loop** to display all location marks on the leaflet map, I need to convert the data into an array that the for loop can recognize","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1058,"value":"locationMarks = geoData.map(axis => [axis.longitude , axis.latitude, axis.name, axis.city, axis.state, axis.email, axis.logo, axis.website, axis.zip_code, axis.phone])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1128,"value":"#### Attach adoptable pets data from node.js","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1078,"value":"animal = fetch(\"https://PetType-Web-Data-Connector.liruito.repl.co/data\").then((response) => response.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1131,"value":"#### Map \"Animal\" data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1133,"value":"The goal is also to filter out information I don't need","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1083,"value":"animals = animal.map(animal => {\n return {\n id: animal.id,\n name: animal.name,\n type: animal.type,\n breeds: animal.breeds_primary,\n age: animal.age,\n gender: animal.gender,\n size: animal.size,\n organization_id: animal.organization_id,\n zipcode: animal.contact_address_postcode,\n attributes_spayed_neutered: animal.attributes_spayed_neutered,\n attributes_house_trained: animal.attributes_house_trained,\n attributes_special_needs: animal.attributes_special_needs,\n attributes_shots_current: animal.attributes_shots_current,\n contact_phone: animal.contact_phone,\n contact_email: animal.contact_email,\n photo: animal.photos_0_small,\n description: animal.description\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1139,"value":"#### Manage the data to what I need","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1141,"value":"I use **`d3.group()`** to classify the data in *animals* as I want, it is to fit the dropdown options.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1088,"value":"sortedAnimals1 = d3.group(animals, d => d.type)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1435,"value":"#### Script for data interaction","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1437,"value":"In the previous step I had sorted the data into the classes I needed, and in this step I let the data make some changes and filters on the input based on the sorted classes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1439,"value":"- This section is for data to be selected successfully through drop down. `data.get()` function in JS is you can fetch a class from the map's data based on the string of the type name. I've already set up a string that I might use in the dropdown. So when you select the type of animal you want to view, the array displays all the animals of that type ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":685,"value":"catOrDog = sortedAnimals1.get(selectedAnimals)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1451,"value":"$47","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":725,"value":"spayedNeutered = {\n if(animalFilter.includes('spayed neutered')){\n let sortedAnimals2 = d3.group(animals, d => d.attributes_spayed_neutered)\n return catOrDog.filter(animals => animals.attributes_spayed_neutered == true)\n } \n return catOrDog\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":748,"value":"houseTrained = {\n if(animalFilter.includes('house trained')){\n let sortedAnimals3 = d3.group(animals, d => d.attributes_house_trained)\n let a2 = sortedAnimals3.get(true)\n return spayedNeutered.filter(animals => animals.attributes_house_trained == true)\n } \n return spayedNeutered\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":772,"value":"specialNeeds = {\n if(animalFilter.includes('special needs')){\n let sortedAnimals4 = d3.group(animals, d => d.attributes_special_needs)\n return houseTrained.filter(animals => animals.attributes_special_needs == true)\n } \n return houseTrained\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1115,"value":"finalData = {\n if(animalFilter.includes('shots current')){\n let sortedAnimals5 = d3.group(animals, d => d.attributes_shots_current)\n return specialNeeds.filter(animals => animals.attributes_shots_current == true)\n } \n return specialNeeds\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1468,"value":"#### Convert the form of finalData","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1474,"value":"I converted the array to [\"A\", \"B\", \"C\"] to make it easier to fetch data in the following for loop","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1120,"value":"finalDataForLoop = finalData.map(d => [d.name, d.type, d.breeds, d.age, d.gender, d.size, d.organization_id, d.zipcode, d.contact_phone, d.contact_email, d.photo, d.description])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1478,"value":"#### JavaScript for running the result of the filter","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1481,"value":"I used for loop to make the final sifted data arrangement appear in the search results. And I've found that the html format works just as well when it comes to referencing. When you add the html format as a string to the reference, it automatically recognizes it. I did this to make the animal's name into a title and to make the image appear in the result via the url","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":625,"value":"{\nlet text1 = \"\";\nfor (let i = 0; i < finalDataForLoop.length; i++) {\n\n finalDataForLoop[i][10] = (finalDataForLoop[i][10] == undefined) ? \"https://ixd678.phoenix.sheridanc.on.ca/image%20holder/noImg.png\" : finalDataForLoop[i][10]\n \n text1 += \"

\" + \"

\" + (finalDataForLoop[i][1]) + \" \" + (finalDataForLoop[i][0]) + \"

\" + \"👥 \" + \"gender: \" + (finalDataForLoop[i][4]) + \"
\" + \"📆 \" + \"age: \" + (finalDataForLoop[i][3]) + \"
\" + \"🔶 \" + \" breeds: \" + (finalDataForLoop[i][2]) + \"
\" + \"📏 \" + \"size: \" + (finalDataForLoop[i][5]) + \"
\" + \"💬 \" + \"Discription: \" + (finalDataForLoop[i][11]) + \"
\" + \"If you want to adopt him/her, please contact its organization \" + (finalDataForLoop[i][6]) + \" by \" + \"
\" + \"📩 \" + (finalDataForLoop[i][9]) + \"
\"+ \"
\" + \"
\";\n}\ndocument.getElementById(\"id\").innerHTML = text1;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1484,"value":"#### Attach links file for tree map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1338,"value":"links = d3.csvParse(await FileAttachment(\"petTree@1.csv\").text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1470,"value":"#### Tools and settings for tree map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1341,"value":"types = Array.from(new Set(links.map(d => d.type)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1344,"value":"data = ({nodes: Array.from(new Set(links.flatMap(l => [l.source, l.target])), id => ({id})), links})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1347,"value":"height = 1300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1350,"value":"color = d3.scaleOrdinal(types, d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1355,"value":"function linkArc(d) {\n const r = Math.hypot(d.target.x - d.source.x, d.target.y - d.source.y);\n return `\n M${d.source.x},${d.source.y}\n A${r},${r} 0 0,1 ${d.target.x},${d.target.y}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1358,"value":"drag = simulation => {\n \n function dragstarted(event, d) {\n if (!event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n \n function dragged(event, d) {\n d.fx = event.x;\n d.fy = event.y;\n }\n \n function dragended(event, d) {\n if (!event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\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":1361,"value":"import {Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1486,"value":"#### Reference","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1496,"value":"[Zip Code csv](https://observablehq.com/@uwdata/cartographic-visualization)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1488,"value":"[Tree Map](https://observablehq.com/d/037c247204e97483)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1493,"value":"[Leaflet Map Styles](https://leaflet-extras.github.io/leaflet-providers/preview/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 44:"$43:body"