2e:null 2f:["$","title",null,{"children":"Vega-Lite Assignment : | Sophia Huang | Observable"}] 34:T546,md`Regarding colors and shape, we want to make them correspond to the colors and shapes of the image below. To do this, we need to find a way to match the order of the colors to the order of the Problem Type attributes. This will require that you define some of variables, as shown in the [Multi-View Tutorial](https://observablehq.com/@uwdata/multi-view-composition?collection=@uwdata/visualization-curriculum) . It's best to do the ordering manually since there isn't an algorithmic way to state the order in the original image. You can eyeball the original colors and match them against the color names [here](https://www.w3schools.com/tags/ref_colornames.asp) Hint: Check out this [resource](https://observablehq.com/@uwdata/data-types-graphical-marks-and-visual-encoding-channels?collection=@uwdata/visualization-curriculum) for changing line properties Hint: for both colors and shapes, use *scale* as shown in the [Multi-View Tutorial](https://observablehq.com/@uwdata/multi-view-composition?collection=@uwdata/visualization-curriculum) Hint: if you use the same variable for the year names across both shapes and colors, the two will combine into one legend as shown in the image. If you have trouble getting the colors and shapes to overlap in the legend, you can alternatively just show the color legend and hide the shape legend.`35:T47a,md` As a final step, let's put together plot you created above with a pedestrian data. Using a layer and concat functionality, modify exercise 3 above to following. - define a constant variable that layers line graph of bike data with the markRule line - you can remove the x axis of this diagram by adding *axis(null)* at *vl.x()* - add title called "Bike Riders" - add tool tip for the lines to display "bikes_14counters", "year", "week", "starting_from" when hover on the line - define another constant variable that layers line graph of pedestrian data with the markRule line - add title called "Pedestrians" - add tool tip for the lines to display "pedestrians_14counters", "year", "week", "starting_from" when hover on the line - return by using **vconcat** to vertically concaternate the two layers created above Hint: tool tip instructions can be found from [Introduction to Vega-Lite](https://observablehq.com/@uwdata/introduction-to-vega-lite?collection=@uwdata/visualization-curriculum) This part could be a challenging! Spend time looking at the resources provided and let me know if you have additional questions :) `36:T760,{ const graph1 = vl .markLine({opacity: 0.3, strokeWidth:3, interpolate: "monotone", point:{size:70}}) .data(df) .encode( vl.x().fieldQ('week').title('Week').axis(null), vl.y().fieldQ('bikes_14counters').title('# of Bike Riders').axis({labelAngle: 0, fontSize:12}), vl.color().fieldN('year').scale(colorMapping).legend({orient: 'top-right'}), vl.shape().fieldN('year').scale(shapeMapping).legend({orient: 'top-right'}), vl.opacity().value(0.6), vl.tooltip(["bikes_14counters", "year", "week", "starting_from"]) ) .width(900) .height(300) .title({text: 'Biker Riders', anchor: 'middle', offset: 6, fontSize: 14}) .resolve({legend: {orient: 'independent'}}) const graph2 = vl .markLine({opacity: 0.3, strokeWidth:3, interpolate: "monotone", point:{size:70}}) .data(df) .encode( vl.x().fieldQ('week').title('Week').axis({labelAngle: 0, grid:false}), vl.y().fieldQ('pedestrians_14counters').title('# of Pedestrians').axis({labelAngle: 0, fontSize:12}), vl.color().fieldN('year').scale(colorMapping).legend({orient: 'top-right'}), vl.shape().fieldN('year').scale(shapeMapping).legend({orient: 'top-right'}), vl.opacity().value(0.6), vl.tooltip(["pedestrians_14counters", "year", "week", "starting_from"]) ) .width(900) .height(300) .title({text: 'Pedestrians', anchor: 'middle', offset: 6, fontSize: 14}) .resolve({legend: {orient: 'independent'}}) const graph3 = vl .markRule({stroke: 'firebrick', strokeWidth:4}) .data([{'week': 12}]) .encode( vl.x().fieldQ('week') ) const graph4 = vl.layer(graph1,graph3); const graph5 = vl.layer(graph2,graph3); return vl .vconcat(graph4, graph5) .title({ text: 'Comparison of Number of Bike Riders/Pedestrians on Trails in 2009/2020)', dx: 150, dy: -10,fontSize: 20, font: "Tahoma"}) //.layer(graph3) .render() } 37:[{"id":"5d9257419ec48ac76a0ff39068a0989334bcb5bb2d25dda604c028978f1b61b860c6f07757410579d64d947b1ae924b7a1d871e1bab406f83f1b1fe1557d7afd","href":"https://static.observableusercontent.com/files/5d9257419ec48ac76a0ff39068a0989334bcb5bb2d25dda604c028978f1b61b860c6f07757410579d64d947b1ae924b7a1d871e1bab406f83f1b1fe1557d7afd","name":"8.png","type":"image/png","lastModified":1613144080429.721,"size":66219},{"id":"02502d0d9a8ef9aa17f5dadedd77bc50da85536a0a31f97f798497d884448b37ffacc51d78d540d2a031ef9659eb47bff3dfb1a2c93e4e73c530c4aa8d5d0c8f","href":"https://static.observableusercontent.com/files/02502d0d9a8ef9aa17f5dadedd77bc50da85536a0a31f97f798497d884448b37ffacc51d78d540d2a031ef9659eb47bff3dfb1a2c93e4e73c530c4aa8d5d0c8f","name":"infoviz_vega2.csv","type":"text/csv","lastModified":1613144080429.721,"size":1145},{"id":"e2f7114abfcfc170a0fd6c09b60bf41c0978996e0957bdb1bfbca169723639e4d47d9cf9e398adf98dacc69d2a724c70feb95ab920c1b4956c20532caa8415fb","href":"https://static.observableusercontent.com/files/e2f7114abfcfc170a0fd6c09b60bf41c0978996e0957bdb1bfbca169723639e4d47d9cf9e398adf98dacc69d2a724c70feb95ab920c1b4956c20532caa8415fb","name":"6.png","type":"image/png","lastModified":1613144080429.721,"size":114158},{"id":"669d189e55afc085eb79b2a28d77bf1ed7a68c97a1b1881885ac779c02a9f1aea477639c2edbd3d7946ca37373e1ac785cac62468aa595275b537793c9349c51","href":"https://static.observableusercontent.com/files/669d189e55afc085eb79b2a28d77bf1ed7a68c97a1b1881885ac779c02a9f1aea477639c2edbd3d7946ca37373e1ac785cac62468aa595275b537793c9349c51","name":"5.png","type":"image/png","lastModified":1613144080429.721,"size":124940},{"id":"445548de704c6105e091e205c31abcf4cea05f7a4139298625fa2e1c11c9b08e23bd221f1e9b65d0e99c3602a40a2456b57c4bd6a8ff990e089f10d010d9c07f","href":"https://static.observableusercontent.com/files/445548de704c6105e091e205c31abcf4cea05f7a4139298625fa2e1c11c9b08e23bd221f1e9b65d0e99c3602a40a2456b57c4bd6a8ff990e089f10d010d9c07f","name":"4.png","type":"image/png","lastModified":1613144080429.721,"size":142768},{"id":"cf4bf3e03c68cf73803a22cf539c7c5cec2689a193168eb86a8497a0c6bb119cf61a4a33a35c5304d93098fae10edda21dcdf1040a550f7b4e8b5641cd75ecc8","href":"https://static.observableusercontent.com/files/cf4bf3e03c68cf73803a22cf539c7c5cec2689a193168eb86a8497a0c6bb119cf61a4a33a35c5304d93098fae10edda21dcdf1040a550f7b4e8b5641cd75ecc8","name":"infoviz_vega.csv","type":"text/csv","lastModified":1613144080429.721,"size":2931},{"id":"2c2a00fe2c4cec73a37cc3e57e59a44b4a18ab44e5a41798e5d388ee5c5484094b3db783ade812461c30f83da311bc4b13ae13ecbb56536152a842b26574aad8","href":"https://static.observableusercontent.com/files/2c2a00fe2c4cec73a37cc3e57e59a44b4a18ab44e5a41798e5d388ee5c5484094b3db783ade812461c30f83da311bc4b13ae13ecbb56536152a842b26574aad8","name":"last.png","type":"image/png","lastModified":1613144080429.721,"size":40441},{"id":"5d9257419ec48ac76a0ff39068a0989334bcb5bb2d25dda604c028978f1b61b860c6f07757410579d64d947b1ae924b7a1d871e1bab406f83f1b1fe1557d7afd","href":"https://static.observableusercontent.com/files/5d9257419ec48ac76a0ff39068a0989334bcb5bb2d25dda604c028978f1b61b860c6f07757410579d64d947b1ae924b7a1d871e1bab406f83f1b1fe1557d7afd","name":"2.png","type":"image/png","lastModified":1613144080429.721,"size":66219},{"id":"1f194637fdec980d689dde48b224badfe56a59360d8b9316098647a0c4014ee209d7671efb071b47716f28e0f71502685d95fcbe79dcfd4b8fefd79d7bd32da2","href":"https://static.observableusercontent.com/files/1f194637fdec980d689dde48b224badfe56a59360d8b9316098647a0c4014ee209d7671efb071b47716f28e0f71502685d95fcbe79dcfd4b8fefd79d7bd32da2","name":"7@1.png","type":"image/png","lastModified":1613144080429.721,"size":224357}] 32:{"id":"9d10c5c37e3e1b8a","slug":"vega-lite-assignment","title":"Vega-Lite Assignment :","thumbnail":"0f3a47f228ea181d95a1b4fa9405e7d540c222c67754afa760e1d314707b1c77","access_level":"public","create_time":"$D2021-02-12T15:34:40.429Z","update_time":"$D2021-02-13T12:23:00.045Z","view_time":null,"first_public_time":"$D2021-02-13T08:00:34.719Z","fork":{"id":"61d24e1b06f8bdf5","slug":"vega-lite-assignment","title":"Vega-Lite Assignment :","owner":{"id":"741ae1fc36a7b823","login":"info247-spring21","name":"InfoViz Spring 2021"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f8689702ff687293","login":"sophiahhuang","name":"Sophia Huang","avatar_url":"https://avatars-next.observableusercontent.com/1936c2398284ca5bd63275101f8237321e5cbc0ce2cdb010aeb7962a57f166b3","tier":"starter_2024"},"version":1042,"publish_version":1042,"role":null,"authored":false,"authors":[{"type":"individual","id":"5b6549950934f04a","login":"sophiahhuang","name":"Sophia Huang","avatar_url":"https://avatars-next.observableusercontent.com/1936c2398284ca5bd63275101f8237321e5cbc0ce2cdb010aeb7962a57f166b3","tier":null}],"members":[{"type":"individual","id":"5b6549950934f04a","login":"sophiahhuang","name":"Sophia Huang","avatar_url":"https://avatars-next.observableusercontent.com/1936c2398284ca5bd63275101f8237321e5cbc0ce2cdb010aeb7962a57f166b3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Vega-Lite Assignment :","cells":[{"id":0,"value":"md`# Vega-Lite Assignment : \n## Reproduce a chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md `\nHello everyone! In this assignment you will work on replicating a chart using Vega-Lite. You will definitely want to go through the labs and required readings for Vega-Lite as this assignment assumes that you have already done so.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`\nIn this assignment, we'll be using a dataset from Makeover Monday published on week 1 of 2021 called \"The Great Bicycle Boom\". The [BBC article](https://www.bbc.com/future/bespoke/made-on-earth/the-great-bicycle-boom-of-2020.html) discusses about a recent surge in bike sales and usage due to the pandemic. The data provided for the project is a weekly trail count data provided from RTC's Eco-Counter dashboard that shows bicycle and pedestrian counts of trails on a weekly basis.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`\nHere are few things to keep in mind for the dataset. \n- Each week was compared across years, from 2019 to 2020, with a focus starting on week 12 or March 16.\n- The week of March 16, 2020 was selected for analysis as beginning of the covid period as this was the timeframe when many organizations in the U.S. began encouraging or mandating telework policies, and states imposed travel restrictions and encouraged social distancing to slow the spread of the pandemic. The analysis was intended to determine how changes in social behavior would affect trail counts nationwide.\n- The data contains results collected from 14 trails.\n- Some weeks are omitted for data cleaning purposes.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"md`\nAt the end of the exercise you will be able to recreate the following three visualizations. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"FileAttachment(\"7@1.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"FileAttachment(\"2.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"FileAttachment(\"last.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"md `\n### Import Libraries and data\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"import {vl} from '@vega/vega-lite-api'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"import {printTable} from '@uwdata/data-utilities'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":699,"value":"fileContents = FileAttachment(\"infoviz_vega.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":700,"value":"df = d3.csvParse(await fileContents.text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"md`\nThis is our dataframe defined as \"df\" which contains aggregated information from the trail dataset. Following are the column names and information of df. \n- **year**: year that the data was recorded \n- **week**: the week number that the data was recorded \n- **starting_from**: the starting day (Sunday) of the week \n- **covid_period**: whether or not the timeframe was within the pandemic period (Y- yes, N- no) \n- **pedestrians_14counters**: the number of pedestrians who visited the selected 14 trails during the defined timeframe\n- **bikes_14counters**: the number of bike riders who visited the selected 14 trains during the defined timeframe\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"printTable(df.slice(0, 15))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"md`\n# Part 1: Create layered line graphs\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"html`\n\n\n

\n1. Create a basic line graph\n

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"md`\nIn this exercise, please create a line graph of bike counters using vega-lite with following specifications. \n- x-axis should be \"week\" column \n- the two years should be lines of different color \n\nYour graph should look something like below. They don't need to match perfectly, feel free to modify as long as you keep the three requirements above met.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"FileAttachment(\"4.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":639,"value":"vl.markLine()\n .data(df)\n .encode(\n vl.x().fieldO('week'),\n vl.y().fieldQ('bikes_14counters'),\n vl.color().fieldN('year').legend('year'),\n )\n .width(750)\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"html`\n\n\n

\n2. Modify the line graph\n

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"md`\nNow, let's make the following modifications:\n - give this a width (700) and a height (200) to get a better aspect ratio.\n - make the lines curved\n - make the lines thicker \n - make the points a larger size\n - add some translucency to the lines\n - change color and shape of each line \n - add title to the graph \n - modify x and y axis title names to legible format\n - rotate label angle for the x axis (week) to be horizontal\n - you can change the angle by appending *.axis({labelAngle: **[angle number goes here]** })* to *vl.x()* for x axis and *vl.y()* for y axis\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":570,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"md`\nYour graph should look something like below. They don't need to match perfectly, feel free to modify as long as you keep the above requirements above met.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"FileAttachment(\"5.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":738,"value":"// give this a width (700) and a height (200) to get a better aspect ratio.\n//make the lines curved\n//make the lines thicker\n//make the points a larger size\n//add some translucency to the lines\n//change color and shape of each line\n//add title to the graph\n//modify x and y axis title names to legible format\n//rotate label angle for the x axis (week) to be horizontal\n//you can change the angle by appending .axis({labelAngle: [angle number goes here] }) to vl.x() for x axis and //vl.y() for y axis","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":636,"value":"// I added color and shape mapping in part 3\nvl.markLine({opacity: 0.3, strokeWidth:3, interpolate: \"monotone\", point:{size:70}})\n .data(df)\n .encode(\n vl.x().fieldQ('week').title('Week').axis({labelAngle: 0, fontSize:12, grid: false}),\n vl.y().fieldQ('bikes_14counters').title('Number of Bike Riders').axis({labelAngle: 0, fontSize:12}),\n vl.color().fieldN('year').scale(colorMapping).legend('year'),\n vl.shape().fieldN('year').scale(shapeMapping).legend('year'),\n vl.opacity().value(0.6) \n )\n .title({\n text: 'Biker Rider Count Comparison',\n anchor: 'middle', \n offset: 6, \n fontSize: 14\n \n})\n .width(700)\n .height(200)\n .render();\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"html`\n\n\n

\n3. Modify the line graph again\n

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"md`\nNow, let's make the following modifications:\n- using layer properties learned in the lab section, layer a line with markRule() that shows a red line at week 12 where covid lockdown has initiated in the United States. \n- change the location of the legend to \"top-right\" of the visualization.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"md`\nYour graph should look something like below. They don't need to match perfectly, feel free to modify as long as you keep the above requirements above met.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"FileAttachment(\"6.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":924,"value":"yearsInOrder = ['2019','2020']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":929,"value":"shapesInOrder = ['circle', 'triangle']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":931,"value":"colorsInOrder = ['#FFA500', '#9400D3']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":935,"value":"colorMapping = ({domain: yearsInOrder, range: colorsInOrder})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":937,"value":"shapeMapping = ({domain: yearsInOrder, range: shapesInOrder})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":897,"value":"{ const graph1 = vl.markLine({opacity: 0.3, strokeWidth:3, interpolate: \"monotone\", point:{size:70}})\n .data(df)\n .encode(\n vl.x().fieldQ('week').title('Week').axis({labelAngle: 0, fontSize:12, grid:false}),\n vl.y().fieldQ('bikes_14counters').title('Number of Bike Riders').axis({labelAngle: 0, fontSize:12}),\n vl.color().fieldN('year').scale(colorMapping).legend({orient: 'top-right'}),\n vl.shape().fieldN('year').scale(shapeMapping).legend({orient: 'top-right'}),\n vl.opacity().value(0.6) \n )\n .title({\n text: 'Biker Rider Count Comparison',\n anchor: 'middle', \n offset: 6, \n fontSize: 14\n \n})\n .width(width-200)\n .height(200)\n \n const graph2 = vl.markRule({stroke: 'firebrick', strokeWidth:4})\n .data([{'week': 12}])\n .encode(\n vl.x().fieldQ('week')\n );\n\n return vl.layer(graph1, graph2).render()\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"html`\n\n\n

\n4. Add interaction \n

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"md`\nYour graph should look something like below. They don't need to match perfectly, feel free to modify as long as you keep the above requirements above met.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"FileAttachment(\"7@1.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":829,"value":"//define a constant variable that layers line graph of bike data with the markRule line\n//you can remove the x axis of this diagram by adding axis(null) at vl.x()\n//add title called \"Bike Riders\"\n//add tool tip for the lines to display \"bikes_14counters\", \"year\", \"week\", \"starting_from\" when hover on the //line\n//define another constant variable that layers line graph of pedestrian data with the markRule line\n//add title called \"Pedestrians\"\n//add tool tip for the lines to display \"pedestrians_14counters\", \"year\", \"week\", \"starting_from\" when hover on //the line\n//return by using vconcat to vertically concaternate the two layers created above","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":632,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"md`\nWhat kind of insights do you get from the above visualization? \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"md`\nGenerally, there are more bike riders in 2020 overall than in 2019 except for first half of winter weeks (week 0 to week 6). Notably, the increasing growth of biker ridership is higher during months of warmer climate (or non-winter months) and mirrors seasonality of outdoors activities. For pedestrains, there are more pedestrains in 2020 overall than in 2019 except for the mid-year spike aroun week 20-23 of summer. By contrast, the growth of pederstrains in 2020 is smaller and at times remain similar to numbers of 2019. In conclusion, although both the traffic of trails from bikers and pedestrains follow seasonality in 2019-2020, the change of bike ridership year-to-year is higher than the relatively stagnant trend of pedestrain's foot traffic. One underlying factor to explore futher may be to look into the effect of COVID, and perhaps look at difference-in-difference estimates between 2018 to 2019 vs 2019-2020, if there is available data.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"md`\n# Part 2: Create a bar plot\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"md`\nIn this exercise, we would like to find out how the numbers of bikeriders have changed in 2020 compared to 2019.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"fileContents2 = FileAttachment(\"infoviz_vega2.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":712,"value":"df2 = d3.csvParse(await fileContents2.text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"printTable(df2.slice(0, 10))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"html`\n\n\n

\n1. Create a function to calculate values\n

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"md`\nRecall forEach function from Lab2 that allows you to add new key to arrays of objects. Here is the snippet of the code from the exercise. Should throw an error. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"df.forEach(function (element) {\n element.co2_per_min = element.EcoPassengerCO2 / element.RawTravelTime;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"md`\nUsing forEach function, create a column called \"percentages\" that calculates percentage difference between 2019 and 2020 bike riders count. For example the value in \"percentages\" for \"week12\" should be 349.66, since the number of bike riders have risen 349.66% from 2019 to 2020. Don't worry about the number of decimal points when you calculate this value.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"df2.forEach(function (element) {\n element.percentages = ((element.bikers_20 - element.bikers_19) / element.bikers_19) * 100;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"html`\n\n\n

\n2. Create a bar graph with percentages\n

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"md`\nUsing the percentages you calculated above, create a barchart that meets following requirements\n- create a markRule line at week 12\n- create a tool tip that displays \"starting_from\", \"bikers_19\", \"bikers_20\", \"percentages\" \n- add title and change axis titles relevant to the data \n- set colors to represent \"percentages\"\n- remove the legend \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"md`\nYour graph should look something like below. They don't need to match perfectly, feel free to modify as long as you keep the above requirements above met.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":614,"value":"FileAttachment(\"8.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":784,"value":"//create a markRule line at week 12\n//create a tool tip that displays \"starting_from\", \"bikers_19\", \"bikers_20\", \"percentages\"\n//add title and change axis titles relevant to the data\n//set colors to represent \"percentages\"\n//remove the legend","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"{\n const graph1 = vl.markBar()\n .data(df2)\n .encode(\n vl.x().fieldQ('week').title('Week').bin({maxbins: 47}), \n vl.y().fieldQ('percentages').title('Change of Bikers in 2020 from 2019 (%)').axis({labelAngle: 0, fontsize:18}),\n vl.opacity().value(0.9),\n vl.color().fieldQ('percentages').legend(null),\n vl.tooltip([\"starting_from\", \"bikers_19\", \"bikers_20\", \"percentages\"])\n )\n\n .title({\n text: 'Change in Bike Riders Percentages in 2019/2020',\n anchor: 'middle', \n offset: 6, \n fontSize: 16\n \n})\n .width(900)\n .height(200)\n \n const graph2 = vl.markRule({stroke: 'firebrick', strokeWidth: 3})\n .data([{'week': 12.5}])\n .encode(\n vl.x().fieldQ('week')\n );\n\n return vl.layer(graph1, graph2).render()\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"md`\nWhat kind of insights do you get from the above visualization?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"md`\nIn week 12 of 2020 vs 2019, it is the week of largest increase of biker ridership. Moreover, it appears that starting from week 8 to 20, there are more than 6 weeks that experienced more than 100% increase. This shows bike ridership may be correlated with seasonality or sudden activity arising from people's turn to outdoors activity as public health experts advised against socialization indoors.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"md`\n# Part 3: Create visualization through faceting\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":497,"value":"md`\nWith the bar graph on part 2, we can see a high spark in bike riders on weeks 10 to 14 when lockdown started to happen through US. What about pedestrians? Let's focus on these five weeks and compare pedestrians numbers on these five weeks in 2020 using \"facet\" properties of vega-lite. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"html`\n\n\n

\n1. Filter data\n

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"md`\nOn Lab 2, we learned out to filter only the data we're interested in looking at through a function called \"filter\". Create an array of objects called **df3** that filters from **df** (data from Part 1) only on weeks 10-14. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":643,"value":"// filter by weeks 10-14\ndf3 = df.filter( d => d.week >= 10 && d.week < 15)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"html`\n\n\n

\n2. Facet data based on week\n

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":"md`\nUsing the new dataframe you created above, create a barchart that meets following requirements\n- facet the data by row using \"year\" \n- have the opacity of color of the graph match values of \"pedestrians_14counters\"\n- remove the legend \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":620,"value":"md`\nYour graph should look something like below. They don't need to match perfectly, feel free to modify as long as you keep the above requirements above met.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"FileAttachment(\"last.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"{\n const new1 = vl.markBar()\n .encode(\n vl.y().fieldO('week'),\n vl.x().fieldQ('pedestrians_14counters'),\n vl.color().fieldQ('pedestrians_14counters').legend(null)\n \n )\n .width(900)\n .height(200)\n \n \n return vl.layer(new1)\n .facet({row: vl.fieldQ('year')})\n .data(df3)\n .render()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":691,"value":"md`\nWhat kind of insights do you get from the above visualization?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"md`\nIn the year of 2020, the number of pedestrians hitting the trails roughly doubled during week 11-14 while remaining at similar levels in week 10. It appears that Pedestrians are excited to hit outdoors after winter hibernation or pandemic lockdown policies and fatigue.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"md`\n# Part 4(Optional): Additional visualizations\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":672,"value":"md`\nBe creative! Add any additional visualizations you have created that provides a different insights from the ones above. Please explain briefly what insights your visualization provides. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"//Your code here**********************************************************","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"md`\n## References\nhttps://data.world/makeovermonday/2021w1/discuss/2021w1/nkpl7c4a\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"