28:null 29:["$","title",null,{"children":"Untitled | Yuanpei Zhuang | Observable"}] 2e:T4d6,{ const DEFAULT_MESSAGE = md`_Mouse over chart for details_

` // If no date is selected, return a default message if (!selectedDate) return DEFAULT_MESSAGE const d = getPointByDate(compile_data_items, selectedDate) // If there is no data at that point, return a default message if (!d) return DEFAULT_MESSAGE return html` ${d3.timeFormat('%a %b')(d[0])}
${[breedarr[0]]}: ${d3.format(',d')(d[1][breedarr[0]])} ${d3.timeFormat('%a %b')(d[0])}
${[breedarr[1]]}: ${d3.format(',d')(d[1][breedarr[1]])} ${d3.timeFormat('%a %b')(d[0])}
${[breedarr[2]]}: ${d3.format(',d')(d[1][breedarr[2]])} ${d3.timeFormat('%a %b')(d[0])}
${[breedarr[3]]}: ${d3.format(',d')(d[1][breedarr[3]])} ${d3.timeFormat('%a %b')(d[0])}
${[breedarr[4]]}: ${d3.format(',d')(d[1][breedarr[4]])} ` }2f:T5c1,addInteractivity = ( xScale, // d3 scale yScale, // d3 scale g // d3 svg ) => { const line = g.append('g') .append('line') .attr('stroke', 'rgba(0, 0, 0, 0.5)') .attr('stroke-width', 1) .attr('x1', 100) .attr('y1', yScale.range()[0]) .attr('x2', 100) .attr('y2', yScale.range()[1]) .attr('opacity', 0) // We're "cheat" a little at interactivity by leveraging Obervable's views functionality // We start by setting the value of the DOM node to null and then update it according to mouse events const node = g.node() const inputEvent = new CustomEvent("input") node.value = null g.on('mouseover', function() { line.attr('opacity', 1) }) g.on('mouseout', function() { line.attr('opacity', 0) node.value = null node.dispatchEvent(inputEvent) }) g.on('mousemove', function() { const mouse = d3.mouse(this) const xDomainVal = xScale.invert(mouse[0]) // Add 12 hours and clip off the time to round to the nearest midnight var xDomainValRounded = (new Date(xDomainVal.getTime() + 43200000)).setDate(1) xDomainValRounded = new Date((new Date(xDomainValRounded)).setHours(0,0,0,0)); const xRangeVal = xScale.clamp(true)(xDomainValRounded) // Offset position by 0.5 to get a pixel aligned line line.attr('x1', xRangeVal + 0.5) .attr('x2', xRangeVal + 0.5) node.value = xDomainValRounded node.dispatchEvent(inputEvent) }) }30:[{"id":"233c46393475b67b0630d89479e8a6f530b229c957256144c4b9c2b4dedcd84d25c856dcf807ba5c55cdc3526b9b56c6255d73a4075efa2a383fca4be82d5cdc","href":"https://static.observableusercontent.com/files/233c46393475b67b0630d89479e8a6f530b229c957256144c4b9c2b4dedcd84d25c856dcf807ba5c55cdc3526b9b56c6255d73a4075efa2a383fca4be82d5cdc","name":"graph1_intake_swipe@1.csv","type":"text/csv","lastModified":1588597215019.75,"size":3133026},{"id":"b9a1cf302b2b8a241d81fb09f223fb33835f3cb489ddca7207400ef8dfd6109260d86c935ec7c6583cba4bec136ea44e9efc37677ca06efe2df858ac55bfb31e","href":"https://static.observableusercontent.com/files/b9a1cf302b2b8a241d81fb09f223fb33835f3cb489ddca7207400ef8dfd6109260d86c935ec7c6583cba4bec136ea44e9efc37677ca06efe2df858ac55bfb31e","name":"graph6.png","type":"image/png","lastModified":1588607821134.75,"size":140514},{"id":"1397c9194cb7c3945a9ccd61b94ff4f322536a29cc9e8abbd0f69ae56e315ed620e8069c0d25ac452f01cbdfb9e6c057b7904db588c361a6fc73d0850ba078ab","href":"https://static.observableusercontent.com/files/1397c9194cb7c3945a9ccd61b94ff4f322536a29cc9e8abbd0f69ae56e315ed620e8069c0d25ac452f01cbdfb9e6c057b7904db588c361a6fc73d0850ba078ab","name":"banner副本.png","type":"image/png","lastModified":1588612209615.982,"size":283360},{"id":"5cc60f1a8aed53d30389273810d72f7cb305ed3c1df4d56816bfd0a7cadb890fde5025dfe05be6b069fa29cb9f7ec98b341b59187f09a1fe6b625b3f842a0b1a","href":"https://static.observableusercontent.com/files/5cc60f1a8aed53d30389273810d72f7cb305ed3c1df4d56816bfd0a7cadb890fde5025dfe05be6b069fa29cb9f7ec98b341b59187f09a1fe6b625b3f842a0b1a","name":"graph7.png","type":"image/png","lastModified":1588607820996.586,"size":88817},{"id":"eab960d375400800a3b04bf79664c90441df319618c39bb9590b54c1ef295453867f63025f84fdc9371eeeb1b342e02dc9e7ea7c4c6166f5ab31b4ceaec6aac4","href":"https://static.observableusercontent.com/files/eab960d375400800a3b04bf79664c90441df319618c39bb9590b54c1ef295453867f63025f84fdc9371eeeb1b342e02dc9e7ea7c4c6166f5ab31b4ceaec6aac4","name":"graph5@1.png","type":"image/png","lastModified":1588607820789.968,"size":38533},{"id":"a13b58dd661a25bf177a4ec4f86b2782c1433257d5c46ce566482e61017f1a838fb5ca77825c8ab0cbe85cf940719c27dd9d7401a5c8beb5dff0f2099c6230d3","href":"https://static.observableusercontent.com/files/a13b58dd661a25bf177a4ec4f86b2782c1433257d5c46ce566482e61017f1a838fb5ca77825c8ab0cbe85cf940719c27dd9d7401a5c8beb5dff0f2099c6230d3","name":"graph3-02.png","type":"image/png","lastModified":1588625507402.671,"size":1099230}] 2c:{"id":"3f2e23a864f79690","slug":"untitled","title":"","thumbnail":"7f28aafec586145ad34757669b90e6d4dc77a714f34204c33b616bebc24f488e","access_level":"public","create_time":"$D2020-05-04T04:10:46.606Z","update_time":"$D2020-05-04T20:55:16.311Z","view_time":null,"first_public_time":"$D2020-05-04T18:43:59.986Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"7e51b8e6f343ea35","login":"yuanpei","name":"Yuanpei Zhuang","avatar_url":"https://avatars-next.observableusercontent.com/c92f8a501829ac8b1c8cb62dcb6f99e524e42651d4e417fced3d5cb2ae6ca47f","tier":"starter_2024"},"version":371,"publish_version":371,"role":null,"authored":false,"authors":[{"type":"individual","id":"7ce3f88b60ce2051","login":"yuanpei","name":"Yuanpei Zhuang","avatar_url":"https://avatars-next.observableusercontent.com/c92f8a501829ac8b1c8cb62dcb6f99e524e42651d4e417fced3d5cb2ae6ca47f","tier":null}],"members":[{"type":"individual","id":"7ce3f88b60ce2051","login":"yuanpei","name":"Yuanpei Zhuang","avatar_url":"https://avatars-next.observableusercontent.com/c92f8a501829ac8b1c8cb62dcb6f99e524e42651d4e417fced3d5cb2ae6ca47f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"","cells":[{"id":348,"value":"md ` Animal Shelter Data Visualization`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"banner=FileAttachment(\"banner副本.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"md`\n

\nPet Overpopulation in animal shelters in US: \nAccording to the ASPCA, about 1.5 million shelter pets (670,000 dogs and 860,000 cats) are EUTHANIZED each year due to overcrowding, and that's in the United States alone.\n\nOnly 1 out of every 10 dogs born will find a permanent home.\nCertain breeds have harder time finding homes and are most likely to be euthanized. (e.g. pitbulls)\n\nThis visualization is trying to focus on the case of Austin, Texas, to find out some reasons behind the situation.\n`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`##

Top4 Breed Overall Intake Change `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"viewof selectedDate = testChart.node() ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"md`##

Top 10 Euthanasia Breed in Shelter `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"image5 = FileAttachment(\"graph5@1.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"md`##

Enthuasia: Top 3 intake conditions `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"image3 = FileAttachment(\"graph3-02.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"md`##

Top & Least 10 Adopted Breed in Shelter `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"image6 = FileAttachment(\"graph6.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"md`\nPitbull, Chow Chow Mix and Cocker Spaniel have the least adopted rate.\n\nHowever, Blue Lacy Mix, Black Mouth Cur Mix and Manchester Terrier Mix have the highest adopted rate.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"md`##

Outcome condition: Overall vs. Pitbull `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"image7 = FileAttachment(\"graph7.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"md`\nTake Pitbull for example, the euthanized one were aggressive counting 223\ncompared to the overall condition : 586 of them are suffering and 269 were aggressive.\n\n

223 outof 269 aggressive ones were pitbull.

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"FileAttachment(\"graph5@1.png\"), FileAttachment(\"graph7.png\"), FileAttachment(\"graph6.png\")FileAttachment(\"banner.png\")FileAttachment(\"graph3-02.png\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"import {printTable} from '@uwdata/data-utilities'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"d3 = require(\"d3@^5.8\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"dogdata = d3.csvParse(await FileAttachment(\"graph1_intake_swipe@1.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"dateRange={\n return {minDate: d3.min(dogdata, (d)=>d.intake_monthyear),\n maxDate: d3.max(dogdata, (d)=>d.intake_monthyear)}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"compiledata = {\n var data = {};\n dogdata.forEach(element=>{\n if(data[element.intake_monthyear]==null)\n data[element.intake_monthyear] = {};\n var entry = data[element.intake_monthyear];\n if(entry[element.breed_]==null)\n entry[element.breed_] = 1;\n else\n entry[element.breed_] += 1;\n });\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"breedarr = [\n \"other\", \n \"Labrador Retriever Mix\",\n \"Pit Bull Mix\",\n \"Chihuahua Shorthair Mix\",\n \"German Shepherd Mix\"\n];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"compile_data_items = {\n var items = Object.keys(compiledata).map(key=>{\n var datetmp = new Date(new Date(key).getTime() + 3600000*12) //+12 hours\n \n //var xDomainValRounded = (new Date(xDomainVal + 43200000)).setDate(1)\n //xDomainValRounded = new Date((new Date(xDomainValRounded)).setHours(0,0,0,0));\n \n datetmp = new Date(datetmp.setHours(0))\n return [datetmp,compiledata[key]]\n })\n return items.sort((first,second)=>{return first[0]-second[0]});\n}\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"`compile_data_items = {\n var items = Object.keys(compiledata).map(key=>{\n var datetmp = new Date(key)\n datetmp = new Date(datetmp.setHours(0))\n return [datetmp,compiledata[key]]\n })\n return items.sort((first,second)=>{return first[0]-second[0]});\n}\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"height = width * 0.618\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"margin = ({ top: 20, right: 20, bottom: 40, left: 60 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"md`
Axes:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"xScale = d3.scaleTime()\n .domain([dateRange.minDate, dateRange.maxDate])\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"maxNum = {\n var num = 0;\n for(var key in compiledata){\n for(var key_ in compiledata[key]){\n if(compiledata[key][key_] > num)\n num = compiledata[key][key_]\n }\n }\n return num;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"yScale = d3.scaleLinear()\n .domain([0, maxNum])\n .range([height - margin.bottom, margin.top])\n .nice()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"xAxis = g => g.attr('transform', `translate(0, ${height - margin.bottom})`)\n .call(\n d3.axisBottom(xScale)\n .ticks(100) // Fewer ticks for smaller screen\n .tickFormat(d3.timeFormat('%y/%m')) // Concise dates for smaller screen\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"yAxis = g => g.attr('transform', `translate(${margin.left}, 0)`)\n .attr('class', 'grid')\n .call(\n d3.axisLeft(yScale)\n .ticks(5)\n .tickSize(-width + margin.left + margin.right)\n )\n .call(g => g.select('.domain').remove())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"color=[\"#D2B48C\",\"#666\",\"#820\",\"#9B7\",\"#B8860B\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"lineConfig={\n var test = [];\n test = breedarr.map((ele,index)=>{\n return {\n d: lineFunc[index],\n fill: 'none',\n stroke: color[index],\n 'stroke-width': 4,\n 'stroke-dasharray': \"0\",\n }\n })\n return test\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"testChart = {\n const svg = d3.select(DOM.svg(width, height))\n \n svg.append('g').call(yAxis)\n \n //const sourceDataLineWidth = highlight === 'source' ? FOREGROUND_WIDTH : BACKGROUND_WIDTH\n //const avgDataLineWidth = highlight === 'average' ? FOREGROUND_WIDTH : BACKGROUND_WIDTH\n //const sourceDataDashArray = highlight === 'source' ? FOREGROUND_DASH : BACKGROUND_DASH\n //const avgDataDashArray = highlight === 'average' ? FOREGROUND_DASH : BACKGROUND_DASH\n \n \n lineConfig.forEach(conf => {\n const line = svg.append('path').datum(compile_data_items)\n Object.entries(conf).forEach(([k, v]) => line.attr(k, v))\n })\n \n // x-axis has to go after lines so it stacks on top of them\n svg.append('g').call(xAxis)\n .style('text-anchor', 'end')\n .selectAll('text')\n .attr('y', 8)\n .attr('x', -6)\n .attr('transform', 'rotate(-45)')\n \n svg.call(\n addInteractivity.bind(\n this,\n xScale,\n yScale,\n )\n )\n \n return svg\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"//test\notherline = d3.line()\n//.defined(d=> getTestCount(d))\n.x(d=>xScale(d[0]))\n.y(d=>yScale(d[1]['other']))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"lineFunc = breedarr.map((ele,index)=>{\n return d3.line()\n //.defined(d=> getTestCount(d))\n .x(d=>xScale(d[0]))\n .y(d=>yScale(d[1][breedarr[index]]))\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"`otherline(compile_data_items)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"//mouse move\ngetPointByDate = (data, date) => data.filter(d => date.getTime() == d[0].getTime())[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2d:"$2c:body"