2b:null 2c:["$","title",null,{"children":"CS7295 HW2 - City Hall uses most of the electricity in the morning during the day | LilyLi | Observable"}] 31:Teee,### 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. #### How Abstraction - Marks: Line - Channels: - Color Hue: Identity channel, represents Type (Categorical) - Vertical Position: Magnitude channel, represents Electricity usage(quantitative) - Horizontal 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:[{"id":"1ee98b6d56abbe93c5259e15adee7daf426daf10b54da6ec7c5ad153ed74990cb889dcbfc5bc870e76e21d6bf575fc894291640f4f9d7620a9094bb93e3cdcbc","href":"https://static.observableusercontent.com/files/1ee98b6d56abbe93c5259e15adee7daf426daf10b54da6ec7c5ad153ed74990cb889dcbfc5bc870e76e21d6bf575fc894291640f4f9d7620a9094bb93e3cdcbc","name":"tmpq6k6kydy.csv","type":"text/csv","lastModified":1678729792638.228,"size":2638455}] 2f:{"id":"3f5405298b4df1aa","slug":null,"title":"CS7295 HW2 - City Hall uses most of the electricity in the morning during the day","thumbnail":"cb125bd24cc31acf05161c06f7602a131903860821ca35e67dcbf750bf4a60cc","access_level":"public","create_time":"$D2023-03-13T17:49:52.638Z","update_time":"$D2023-03-13T17:52:11.845Z","view_time":null,"first_public_time":"$D2023-03-13T17:49:52.638Z","has_unpublished_edits":null,"fork":{"id":"d29be3d2765866e7","slug":null,"title":"CS7295 HW2 - City Hall uses most of the electricity in the morning during the day","owner":{"id":"132517a03a3dd931","login":"lilyneu","name":"LilyLi"}},"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":282,"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":0,"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\n\nYoutube: https://youtu.be/qvZLvdJY5JI","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:\n - Date(sequential ordering, ordinal);\n - ElectricityUsage(quantitative, sequential);\n- Derived Data Attributes:\n - Type(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":266,"value":"import {navio} from \"@john-guerra/navio\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"viewof selected = navio(df)","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":259,"value":"## Data Process","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":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":"### First Visualization Analysis\n\nIn 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.\n\nThough 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.","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":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":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"