2b:null 2c:["$","title",null,{"children":"Primary Street Trees | Spring of 2016, the greenest time for the city of Boston | Parthivi Varshney | Observable"}] 31:T811,*** Dataset Type : Table ***
*** Data Availability : Static ***
The raw data is an array of objects with each object containing certain information about the trees that were planted. I processed this raw data to a tree structure that complies by the data format required by the chart to display the information.
To process the data I have used two columns from the raw data :
1) *** Season - Nominal Categorical Datatype ***
2) *** Species - Nominal Categorical Datatype ***
And one abstract derived attribute called *** values - quantitative datatype *** which is the number of respective species planted in a particular season.
The total number of trees in a season determine the size of outer circles and the value attribute determine the size of the circles within the Season circles.
Since the processed data is in the form of nested objects, I first filtered out all the unique Seasons. Then I iterated over the list of unique seasons to get all the trees that were planted in that season in form of an object where name was the name of the tree and value was 1, for the time it was encountered. While I was extracting the trees, I figured out that for Spring of 2018, the name of the tree was missing for all records in the raw data, so I updated my unique season array to remove Spring 2018.
Next I summed the the value attribute of all the identical names and stored them in an array as an object containing name and the total count. Lastly I deleted the initially formed array of objects which contained duplicate Species of trees.
The resultant data is in the form of an object containing objects which in turn is also a collection of objects. The top level object contains two keys, name to denote the collection, and children which is an array of Season object. The Seasons object also contains two keys, name denoting the season, and children being an array of Tree object. The Tree object again contains two keys, name denoting the Tree name and value identifying the number of plantations.32:T640,newData = { let answer = { name:"Street Trees", children:[] } let seasonArray = data.map(item=>item.Season).filter((value, index, self) => { if(value !== " " && self.indexOf(value) === index && value !== "Spring 2018") { return value; }}); var seasonObjectArray = seasonArray.map((season)=>{ let trees = []; return { name:season, childrenObjectArray:[], children:[] } }); let treeObject = {}; for(let i = 0; i < seasonObjectArray.length; i++) { let currentSeason = seasonObjectArray[i].name; treeObject = {}; for(let j = 0; j < data.length; j++) { if(data[j].Season === currentSeason) { if(treeObject.hasOwnProperty(data[j].Species)){ treeObject[data[j].Species] += 1; } else { treeObject[data[j].Species] = 1; } } } seasonObjectArray[i].childrenObjectArray.push(treeObject); } for(let i = 0; i < seasonObjectArray.length; i++) { let currentSeason = seasonObjectArray[i].name; let currentChildrenObject = seasonObjectArray[i].childrenObjectArray[0]; let childrenArray = []; for(let j = 0; j < Object.keys(currentChildrenObject).length; j++) { let newEntry = {name: Object.keys(currentChildrenObject)[j], value:currentChildrenObject[Object.keys(currentChildrenObject)[j]]} childrenArray.push(newEntry) } seasonObjectArray[i].children = childrenArray; delete seasonObjectArray[i].childrenObjectArray; } answer.children = seasonObjectArray; return answer; } 33:[{"id":"c9db6493e70c87f4f6b0c952639ff79079dd454177c8876da4ef32a535d4dbef43fd0f76da41c80d2acf474b5bab85d4c2c6f8d80bc0758a7eb5a193e9d6c20b","href":"https://static.observableusercontent.com/files/c9db6493e70c87f4f6b0c952639ff79079dd454177c8876da4ef32a535d4dbef43fd0f76da41c80d2acf474b5bab85d4c2c6f8d80bc0758a7eb5a193e9d6c20b","name":"Primary_Street_Trees_Public.csv","type":"text/csv","lastModified":1673815897755.052,"size":2674967}] 2f:{"id":"84a133ff0d364da4","slug":null,"title":"Primary Street Trees | Spring of 2016, the greenest time for the city of Boston","thumbnail":"51356c586e9482e3bbeb1629af696ef4c009fbba08300579d08ae19c99456d5d","access_level":"public","create_time":"$D2023-01-15T20:19:30.184Z","update_time":"$D2023-02-08T00:57:16.285Z","view_time":null,"first_public_time":"$D2023-01-15T20:19:30.184Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e470caefff50f651","login":"1a3cca2d89cd5bdb","name":"Parthivi Varshney","avatar_url":"https://avatars-next.observableusercontent.com/99887609c7f6918c0b83c8a4a5766c43c15349fc20cbdae2bbdbe8d031c6dd93","tier":"starter_2024"},"version":259,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1a3cca2d89cd5bdb","login":"1a3cca2d89cd5bdb","name":"Parthivi Varshney","avatar_url":"https://avatars-next.observableusercontent.com/99887609c7f6918c0b83c8a4a5766c43c15349fc20cbdae2bbdbe8d031c6dd93","tier":null}],"members":[{"type":"individual","id":"1a3cca2d89cd5bdb","login":"1a3cca2d89cd5bdb","name":"Parthivi Varshney","avatar_url":"https://avatars-next.observableusercontent.com/99887609c7f6918c0b83c8a4a5766c43c15349fc20cbdae2bbdbe8d031c6dd93","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"aaa46a368b0f2d1b","slug":"datavis","title":"DataVis","owner":{"id":"e470caefff50f651","login":"1a3cca2d89cd5bdb","name":"Parthivi Varshney"}},"type":"notebook","body":{"title":"Primary Street Trees | Spring of 2016, the greenest time for the city of Boston","cells":[{"id":0,"value":"# Primary Street Trees | Spring of 2016, the greenest time for the city of Boston ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":200,"value":"Author : Parthivi Varshney
\nCourse : [CS7295 - Data Visualization](https://johnguerra.co/classes/data_visualization_spring_2023/)
Instructor : John Alexis Guerra Gómez\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":183,"value":"### Introduction:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":180,"value":"*** Data: *** The [Primary Street Trees](https://data.boston.gov/dataset/primary-street-trees-public) is a static table that gives a list of tress that were planted by the Boston government across different seasons from Year 2016 to Year 2022.
\n*** Users: *** This data analysis could be used by the Boston Public Works Department (PWD) to effectively plan out how they can keep the streets of the city green.
\n*** Tasks: *** The task was to identify which was the greenest season and year for the city of Boston and also to figure out which species of the tree was most sought after.
\n** The chart below displays the trees packed with respect to Year and Season, with the size of the circles representing the count.
\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"chart","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"### Insight:\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":195,"value":"1) From the chart below it can easily be identified that Spring of 2016 was the greenest time in the duration of 6 years, as maximum number of trees were planted during this time followed by Spring 2017.
\n2) If we zoom into Spring of 2016, it is clear by the size of the circle (which depends upon the number of plantations) that Gleditsia Tri. Inermis Halka was the most sought after tree for the purpose of plantation on the streets of Boston.
\n3) The least number of trees were planted in the Fall of 2015.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":189,"value":"### Data Processing:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":191,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":242,"value":"### Video Explanation:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":244,"value":"Here's a link to the [youtube video](https://www.youtube.com/watch?v=grMo_qGQGWs) explaining the project ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":257,"value":"### Tweet","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":252,"value":"[Link to Tweet](https://twitter.com/parthivivarshn1/status/1615799261609988096?s=21)","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":132,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"data = FileAttachment(\"Primary_Street_Trees_Public.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"import {chart} with {newData as data} from \"@d3/zoomable-circle-packing\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"