2b:null 2c:["$","title",null,{"children":"CS7295 HW2 - City Hall uses most of the electricity in the morning during the day | LilyLi | Observable"}] 31:T10e6,### 2. define the users and the tasks #### Three example made-up insights with consideration 1. #### City Hall uses 10% more electricity in July and December compared to other months. #### Consideration For me to test this, I need to have enough data from City Hall electricity consumption all year round. I need each month's electricity consumption (quant) for at least 3 years. Then I need to calculate the average usage of electricity in each month and after that I need to calculate the average usage of electricity in the whole year. After that, I can see if this insight is correct. In terms of the visualization, I would need to display the average electricity usage in the whole year and provide a way of comparing July and Dec electricity usage again the overall average. I can use bar chart to display each month's electricity usage, a line chart to display the overall average and July & Dec's average. - User: Data Scientist / City Hall managers - T1: Compare the average electricity usage of July and Dec to the overall average electricity in a year.(**Compare, distribution**) 2. #### City Hall use more and more electricity every year. #### Consideration For me to test this, I need to have enough data from City Hall electricity consumption for at least 3 years. Then I need to calculate the total usage of electricity in each year (quant) and see if the usage of electricity increased in each year. In terms of the visualization, I would need to display the each year's electricity usage and provide a way of comparing electricity usage in each year. I can use a line chart to display the electricity usage in different years and see how the line goes. - User: Data Scientist / City Hall managers - T1: Compare the each year's total electricity usage.(**Compare, trends**) 3. #### City Hall consumes most of the electricity in the afternoon. #### Consideration For me to test this, I need to have enough data from City Hall electricity consumption in different time for at least 1 year. For each month, I need to calculate the electricity usage(quant) in the morning (4-12pm), in the afternoon (12 - 8pm) and at night (8-4am). After that, I need to see if the afternoon electricity usage is the most of 3 time periods. In terms of the visualization, I would need to display the different time periods' electricity usage in each month and provide a way of comparing electricity usage in different time period. I can use bar chart to display each month's electricity usage, with different colors occupying the percentage of different time period. - User: Data Scientist / City Hall managers - T1: Compare different time period's electricity usage in each month throughout the whole year(**Compare, distribution**) - T2: Identify the time period that burns the most of electricity(**Identify, features**) #### Conclusion I will choose the third insight to implement. #### Main Task Abstraction - Visualize each month's electricity usage in bar chart - Differentiate different time period's electricity usage in different color - See which time period burns most of the electricity in a day #### Secondary Task Abstraction - See if there is always a month that use most of the electricity in a year - If so, which month it is #### Target Audience City Hall's managers who are interested in city hall's expenses or those who are in charge of making budget for the coming year. #### How Abstraction - Marks: Line - Channels: - Color: Identity channel, represents Time Period (Categorical) - length: Magnitude channel, represents Electricity usage(quantitative) - Position: Magnitude channel, represents Date(sequential ordering)) - Expressive: - My visualization express all the information in the dataset including date, time period and electricity usage. Sequential ordering attributes like date is represented by position channel. Quantitative attributes like length is represented by length channel. And categorical attributes like time period is represented by color. The channel and the data characteristics are well matched. - Effective: I chose the highest ranked channel for the most important attributes: electricity usage and time period are the most important and date is the second important. Position, color and length are among the highest ranked channels.32:T428,### First Visualization Analysis My tasks: #### Main Task - Visualize each month's electricity usage in bar chart ✅ - Differentiate different time period's electricity usage in different color ✅ - See which time period burns most of the electricity in a day #### Secondary Task - See if there is always a month that use most of the electricity in a year ✅ - If so, which month it is ✅ In this visualization, I successfully visualized each month's electricity usage in bar chart and use different colors represent different time period. After see the bar chart, I can't really find a month that always burns more electricity than other months. So we can come to the conclusion that there is not always a month that use more electricity than others. Though we can see each month's electricity usage pretty well, it is still hard to compare the electricity usage in different time period since there is no significant difference between different-color bar. Hence, I need to use a new model to find out which time period uses more electricity.33:T564,### Second Visualization Analysis I choose the grouped bar chart for the second visualization. In this chart, blue represents afternoon, orange represents morning and red represents night. It is very obvious that afternoon bar is almost always the highest with few exceptions. Therefore, I can say that city hall normally burns more electricity in the afternoon. ### Describe what are marks and channels, linking them to the tasks and data attributes you abstracted before. Explain why these marks and channels are the most expressive and effective choices. - Marks: Bar Lines; - Channels: Color, length; - Dataset type: table, temporal, static; - Dataset Attribute: Date(sequential ordering, ordinal); Electricity usage(quantitative); Time Period(Categorical); Link marks and channels to data attributes: Color represents time period; Length represents electricity usage; Different bar lines represents different dates. Why these marks and channels are good: Because I need to compare the electricity usage, I need a size channel to visualize that. I prefer the height channel because it is easier to observe. There are also three different time periods, so I need color or shape channel to visualize that. Since I chose the height channel, color works better in this case. And for date, different bar means different date. 34:[{"id":"1ee98b6d56abbe93c5259e15adee7daf426daf10b54da6ec7c5ad153ed74990cb889dcbfc5bc870e76e21d6bf575fc894291640f4f9d7620a9094bb93e3cdcbc","href":"https://static.observableusercontent.com/files/1ee98b6d56abbe93c5259e15adee7daf426daf10b54da6ec7c5ad153ed74990cb889dcbfc5bc870e76e21d6bf575fc894291640f4f9d7620a9094bb93e3cdcbc","name":"tmpq6k6kydy.csv","type":"text/csv","lastModified":1674418993402.617,"size":2638455}] 2f:{"id":"d29be3d2765866e7","slug":null,"title":"CS7295 HW2 - City Hall uses most of the electricity in the morning during the day","thumbnail":"a11b46f28ef3307f1f1b8ff36d24d1c9c3bcb06f99710f784575dad1500c0ff9","access_level":"public","create_time":"$D2023-01-22T20:22:23.351Z","update_time":"$D2023-03-13T17:26:41.061Z","view_time":null,"first_public_time":"$D2023-01-22T20:22:23.351Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"132517a03a3dd931","login":"lilyneu","name":"LilyLi","avatar_url":"https://avatars-next.observableusercontent.com/57d00e99e7bd16a222a22f6669c9ce03fafca3705a95350ea5f4e3608b1f0ec9","tier":"starter_2024"},"version":258,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d06cccb760acb8c3","login":"lilyneu","name":"LilyLi","avatar_url":"https://avatars-next.observableusercontent.com/57d00e99e7bd16a222a22f6669c9ce03fafca3705a95350ea5f4e3608b1f0ec9","tier":null}],"members":[{"type":"individual","id":"d06cccb760acb8c3","login":"lilyneu","name":"LilyLi","avatar_url":"https://avatars-next.observableusercontent.com/57d00e99e7bd16a222a22f6669c9ce03fafca3705a95350ea5f4e3608b1f0ec9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"CS7295 HW2 - City Hall uses most of the electricity in the morning during the day","cells":[{"id":0,"value":"# CS7295 HW2 - City Hall uses most of the electricity in the morning during the day\n\nJiangyan Li\n\nClass Link: https://johnguerra.co/classes/data_visualization_spring_2023/\n\ntweet: https://twitter.com/neu7295/status/1620544295186083840?s=20&t=ql05A01pc67Zrh8HndjWQg","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":175,"value":"## 1. Find data\n\nI got dataset of City Hall electricity usage. [Dataset Link](https://data.boston.gov/dataset/city-hall-electricity-usage)\n\n### Data abstraction\n- Dataset type: table, temporal, static; \n- Data Attributes: Date(sequential ordering, ordinal); Electricity usage(quantitative);\n- Derived Data Attributes: TimePeriod(Categorical)\n- Data Availability: static;\n\n### Original dataset analysis\nThe dataset contains lots of data points which has date time and total demand value. In order to make the dataset fit into my model, I need to convert it to a dataframe which has date as the key and the value needs to be an object which contains time period and electricity usage. I define morning is from 4am to 12pm, afternoon is from 12pm to 8pm and night is from 8pm to 4am.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"tmpq6k6kydy = await FileAttachment(\"tmpq6k6kydy.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"tmpq6k6kydy","database":"$undefined"},{"id":8,"value":"rawData = FileAttachment(\"tmpq6k6kydy.csv\").csv({typed: true});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"rawData","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"// Import the vega-lite api\nimport {vl} from '@vega/vega-lite-api-v5'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"import {printTable} from '@uwdata/data-utilities'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"// have a look at the first 10 rows of data\nprintTable(rawData.slice(0,10));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"// reformat data to {year/Month: {morning: number, afternoon: number, night: number}}\ncombinedData = {\n const dateSet = new Set()\n \n const data = rawData.map(d => {\n const timeStamp = d[\"DateTime_Measured\"];\n const electricityUsage = d[\"Total_Demand_KW\"];\n \n const year = timeStamp.slice(0, 4);\n const month = timeStamp.slice(5, 7);\n const hour = parseInt(timeStamp.slice(11, 13));\n let timePeriod = null;\n \n // check if it is morning[4-12pm), afternoon[12-8pm) or night[8-4am)\n if (hour >= 4 && hour <12 ){\n timePeriod = 'morning';\n }else if (hour >= 12 && hour < 20){\n timePeriod = 'afternoon';\n }else{\n timePeriod = 'night';\n }\n \n const date = new Date(year, month);\n dateSet.add(date);\n \n return {date, timePeriod, electricityUsage}\n })\n\n return {data, dateSet}\n \n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"// group the objects together with the same date and timePeriod in data\ngroupData = {\n const data = {}\n combinedData.dateSet.forEach(date => data[date] = {morning: 0, afternoon: 0, night: 0});\n\n combinedData.data.forEach(d =>{\n data[d['date']][d['timePeriod']] += d['electricityUsage'];\n});\n return data\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"df = {\n const data = []\n Object.entries(groupData).forEach(([key, value])=>{\n // df.push({date: key, ...value, total: value['morning']+value['afternoon']+value['night']})\n data.push({date: key, type: 'morning', electricityUsage: value['morning']});\n data.push({date: key, type: 'afternoon', electricityUsage: value['afternoon']});\n data.push({date: key, type: 'night', electricityUsage: value['night']});\n})\n return data\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"// visualiza the data using vega-lite stacked bar chart\nvl.markBar().width(900).height(600).data(df).encode(\n vl.y().aggregate('sum').title('KW').field('electricityUsage'),\n vl.x().timeUnit('yearmonth').field('date').title('Date'),\n vl.color().field('type')\n).render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":153,"value":"// visualize the data using vega-lite grouped bar chart\nvl.markBar().data(df).encode(\n vl.column().field(\"date\").timeUnit('yearmonth').header({'orient': 'bottom'}),\n vl.y().field('electricityUsage').type('quantitative'),\n vl.x().field('type').axis(null),\n vl.color().field('type')\n).render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":170,"value":"#### What is the real insight?\n\nIn my second visualization chart, we can see from November 2016 to April 2020, electricity usage in the afternoon (blue bar) is always the highest compared to the morning(orange bar) and night(red bar). So the real insight is that City Hall consumes more electricity in the afternoon. And in the first visualization chart, I thought City Hall will need more electricity in July and December because of the extreme heat and coldness. But unfortunately, we can't see that in the first chart. It seems the electricity usage is not related to the month.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"