28:null 29:["$","title",null,{"children":"Vega-Lite Assignment: | Yuanpei Zhuang | Observable"}] 2e:T45b,md`Next, we want to make the colors and shapes correspond to the colors and shapes of the original image. 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 this tutorial. 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 The shapes will have to repeat as Vega-Lite supplies only five by default. 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 repair 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.` 2f:T709,lineGraphs = { const colors = { domain: [ 'IllegalDumping', 'BuildingMaintenance', 'Electrical', 'StreetSweeping', 'Graffiti', 'RoadRepair', 'Drainage', 'StreetLights', 'VegetationControl', 'Survey' ], range: [ 'darkred', 'green', 'dodgerblue', 'orange', 'purple', 'gold', 'tomato', 'forestgreen', 'hotpink', 'grey' ] }; const shapes = { domain: [ 'IllegalDumping', 'BuildingMaintenance', 'Electrical', 'StreetSweeping', 'Graffiti', 'RoadRepair', 'Drainage', 'StreetLights', 'VegetationControl', 'Survey' ], range: [ 'circle', 'diamond', 'square', 'triangle', 'triangle-up', 'circle', 'diamond', 'square', 'triangle', 'triangle-up' ] }; return vl .markLine({ strokeWidth: 3, opacity: 0.6, interpolate: 'monotone', point: { size: 100 } }) .data(stats) .encode( vl .x() .fieldO('Year') .axis({ labelAngle: 0, tickColor: 'white', axisColor: 'white', }), vl .y() .fieldQ('NumRequests') .title('Number of Requests') .axis({ tickColor: 'white', axisColor: 'white', gridOpacity: 0.5 }), vl .shape() .fieldN('ProblemType') .legend(null) .scale(shapes), vl .color() .fieldN('ProblemType') .legend({ orient: "top-left" }) .scale(colors) ) .title({ text: 'By Year', anchor: 'center', offset: 5, fontSize: 16, font: "Tahoma" }) .height(600) .width(300); }30:[{"id":"390326a7c72596a381fb18f4973a1ffce04a1caf87eaa33078bb4d507c2f6746f5b079a8477c1ef39392f131c854bfb1ae48ee4893ac6f76b02b4299e4d09c32","href":"https://static.observableusercontent.com/files/390326a7c72596a381fb18f4973a1ffce04a1caf87eaa33078bb4d507c2f6746f5b079a8477c1ef39392f131c854bfb1ae48ee4893ac6f76b02b4299e4d09c32","name":"combined_withclickfix@1.png","type":"image/png","lastModified":1580934952646.344,"size":93440},{"id":"08303b2767df7e37ad6a23cd758e2ef0c040eb09e2a57e9890f825da26c772f9397bade7bcd1ee052e77044c51d6d4c6853beda645c6a820f702a5a766165993","href":"https://static.observableusercontent.com/files/08303b2767df7e37ad6a23cd758e2ef0c040eb09e2a57e9890f825da26c772f9397bade7bcd1ee052e77044c51d6d4c6853beda645c6a820f702a5a766165993","name":"combined_chart1.png","type":"image/png","lastModified":1580934952646.344,"size":93812},{"id":"f06feb063f7fb39162181b1cad2255fd1e695c9c189d08324db988f78db284ee77b299e2cc710e1952fcdbefa1c46ec29a2331f8513f9cdf32d5dcfa3b2e008d","href":"https://static.observableusercontent.com/files/f06feb063f7fb39162181b1cad2255fd1e695c9c189d08324db988f78db284ee77b299e2cc710e1952fcdbefa1c46ec29a2331f8513f9cdf32d5dcfa3b2e008d","name":"barchart5.png","type":"image/png","lastModified":1580934952646.344,"size":40618},{"id":"aa741671842eaefeb0832653a0412af1a8f59eab24fa5d78e81fd95a6fece1e2737f56a01129adbf78290b19ddf2d35a8f67e7d02998fb4816dae19f7bee1dda","href":"https://static.observableusercontent.com/files/aa741671842eaefeb0832653a0412af1a8f59eab24fa5d78e81fd95a6fece1e2737f56a01129adbf78290b19ddf2d35a8f67e7d02998fb4816dae19f7bee1dda","name":"barchart4.png","type":"image/png","lastModified":1580934952646.344,"size":32835},{"id":"82de8c1a9289599a92bdcc48fcfe2723a831e0c7b7005922db45255fa9ca8e0d795608cd79c145f6ec5aa6232ca6a47c043dd6e6d0362c6c8170ba35767b2a62","href":"https://static.observableusercontent.com/files/82de8c1a9289599a92bdcc48fcfe2723a831e0c7b7005922db45255fa9ca8e0d795608cd79c145f6ec5aa6232ca6a47c043dd6e6d0362c6c8170ba35767b2a62","name":"barchart3.png","type":"image/png","lastModified":1580934952646.344,"size":35554},{"id":"33c9e0591d4780a6f0184ef5fbb569d23b62b0b5ea983544b5fa3142af1a1c6b4a5a56d778d8fb72fdc72ed670d769d07bb7b44c835b3408a9c2343ef22e29ad","href":"https://static.observableusercontent.com/files/33c9e0591d4780a6f0184ef5fbb569d23b62b0b5ea983544b5fa3142af1a1c6b4a5a56d778d8fb72fdc72ed670d769d07bb7b44c835b3408a9c2343ef22e29ad","name":"linechart5.png","type":"image/png","lastModified":1580934952646.344,"size":41434},{"id":"8b52024634107505d606bde75ec491e89576443088c8bec66ddb78563bb72e6dcaabc46dac5a4e26e5c2b9e213d3281edd9483b0ae57d135305d768fccba8fac","href":"https://static.observableusercontent.com/files/8b52024634107505d606bde75ec491e89576443088c8bec66ddb78563bb72e6dcaabc46dac5a4e26e5c2b9e213d3281edd9483b0ae57d135305d768fccba8fac","name":"linechart4.png","type":"image/png","lastModified":1580934952646.344,"size":43215},{"id":"3eae1859d2c1197853cb712e0cd6334a3c15a98f3956c63c637ba79999afbb419eb8d589bd4e450fd011967e02e6c2874d117fb709533d4ab52f0ed1bf7415ed","href":"https://static.observableusercontent.com/files/3eae1859d2c1197853cb712e0cd6334a3c15a98f3956c63c637ba79999afbb419eb8d589bd4e450fd011967e02e6c2874d117fb709533d4ab52f0ed1bf7415ed","name":"linechart3.png","type":"image/png","lastModified":1580934952646.344,"size":54095},{"id":"a99e90891faba71a9cec589742982587cd606bbfca0feef514f4837267cf7a8a0278aae00a92f1d96c879b8a383c9f56a5e7f65f7c496f1f74b491a2b4e01a46","href":"https://static.observableusercontent.com/files/a99e90891faba71a9cec589742982587cd606bbfca0feef514f4837267cf7a8a0278aae00a92f1d96c879b8a383c9f56a5e7f65f7c496f1f74b491a2b4e01a46","name":"linechart2.png","type":"image/png","lastModified":1580934952646.344,"size":47617},{"id":"d49c8c4566635b76c665496466179d5ef9d826a4a4c3dd51d2c18e91c8fbd1fe5eca4b8491222127216f7bd02adab5265e9e8a4d5a8165523357cc8deddf876c","href":"https://static.observableusercontent.com/files/d49c8c4566635b76c665496466179d5ef9d826a4a4c3dd51d2c18e91c8fbd1fe5eca4b8491222127216f7bd02adab5265e9e8a4d5a8165523357cc8deddf876c","name":"linechart1@1.png","type":"image/png","lastModified":1580934952646.344,"size":19594},{"id":"a54df760e5aa79c1bcbd18872384133f1156fed93bc6c903e340fd92c6426a01214e0f443dcc18d4f41ae47bd53d110a5bdb316b059df4183a5a5cbbfb24d057","href":"https://static.observableusercontent.com/files/a54df760e5aa79c1bcbd18872384133f1156fed93bc6c903e340fd92c6426a01214e0f443dcc18d4f41ae47bd53d110a5bdb316b059df4183a5a5cbbfb24d057","name":"cityfixitdata@2.csv","type":"text/csv","lastModified":1580934952646.344,"size":1140},{"id":"d574fa838d99399891150960241a6f16634855954cdffe6ebc6d8b0538413775450492cb1e18ddc6ee571fc97fed7250f3bb53f2b82678d1c21890fa438eb095","href":"https://static.observableusercontent.com/files/d574fa838d99399891150960241a6f16634855954cdffe6ebc6d8b0538413775450492cb1e18ddc6ee571fc97fed7250f3bb53f2b82678d1c21890fa438eb095","name":"side_by_side.jpg","type":"image/jpeg","lastModified":1580934952646.344,"size":249122}] 2c:{"id":"9c1ca3fc3c138be5","slug":"vega-lite-assignment","title":"Vega-Lite Assignment:","thumbnail":"1489ae61a64bcf39b25668f3840d3c6a211803c4feb390a878bae0c8c6403754","access_level":"public","create_time":"$D2020-02-05T20:35:52.646Z","update_time":"$D2020-02-05T20:35:52.646Z","view_time":null,"first_public_time":"$D2020-02-05T20:35:56.425Z","has_unpublished_edits":null,"fork":true,"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":1083,"publish_version":1083,"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":0,"collection":null,"type":"notebook","body":{"title":"Vega-Lite Assignment:","cells":[{"id":13,"value":"md`# Vega-Lite Assignment: \n## Reproduce a chart. \n\nAuthor: Marti Hearst\nCourse: I247, Spring 2020\n\nIn this assignment you will work on replicating a chart that was created in a different tool. I walk you through the steps and give you hints along the way. This exercise assumes you read the assigned background reading on Vega-Lite.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"md`Our goal is to reproduce this image, which was created in Highcharts along with a bunch of javascript code, by former MIMS students Andrew Lambert and Carlos Lasa. However, not all aspects can be easily reproduced in Vega-Lite. This notebook will show you images that you should create step-by-step on the pat to making an almost full version of the chart.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1069,"value":"md`\n\nWe'll first build the line chart, then the bar chart, and then do a horizontal concatenation into one chart with the title.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"html`

\n ${await FileAttachment(\"side_by_side.jpg\").image()}\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1071,"value":"md`## **Instructions, including how to turn this assignment in:**\n\nPut your code after each image. If you want to remove the image after you have written the code that creates it, that is fine. Please leave the rest of the text in place. If you need to deviate from the instructions, just wrote some markdown explaining what you are doing.\n\nSave your code using the Download Code menu item. You can find it in the upper right corner of the notebook, to the left of your login ID and the New button. It is hidden under the very faint three dot menu ...\n\nSave the code into a zip file and upload that to bcourses.\n\nThe purpose of this assignment is to help you learn Vega-Lite, and to make sure you learn it yourself rather than relying on someone else. You'll need the concepts here to help you learn d3 later. You can discuss problems and concepts with other students and the TA, but do your own work.\n\nSome parts of this assignment are optional. Do them to enhance your learning!`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1004,"value":"md`## Load libraries, look at data`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"md`Load in libraries`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"import {vl} from '@vega/vega-lite-api'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"import {printTable} from '@uwdata/data-utilities'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"md`Attach the data set from a local file.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"stats = d3.csvParse(await FileAttachment(\"cityfixitdata@2.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"md`Take a look at the first five records, using a nice formatter`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"printTable(stats.slice(0,5))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"md`Look at the end of the table with negative indexing`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"printTable(stats.slice(-5, stats.length))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"md`Print out some statistics about this dataset. For instance, how many records are there, and how many columns?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"md`${stats.length} rows, ${Object.keys(stats[0]).length} columns.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"md`We'll first build the line chart, then the bar chart, and then do a horizontal concatenation into one chart with the title.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"md`## Line Chart\n\nFirst, just build the line chart mainly using defaults.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":941,"value":"\n\nhtml`

\n ${await FileAttachment(\"linechart1@1.png\").image()}\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":665,"value":"md`Next, let's make the following modifications:\n - give this a width (300) and a height (600) 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","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":946,"value":"html`

\n ${await FileAttachment(\"linechart2.png\").image()}\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"md`Now let's make some more adjustments:\n - Rotate the labels for the years (hint: set axis labelAngle to 0)\n - Give the y axis title a more readable name (Number of Requests)\n - Add shapes to the points` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":948,"value":"html`

\n ${await FileAttachment(\"linechart3.png\").image()}\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":950,"value":"html`

\n ${await FileAttachment(\"linechart4.png\").image()}\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":732,"value":"md`Finally, let's \n - move the legend inward so it is next to the left axis (hint: use \"orient\")\n - give the chart a title, By Year (font size 20, font type Tahoma) \n`\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":952,"value":"html`

\n ${await FileAttachment(\"linechart5.png\").image()}\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"md`## Grouped bar charts\n\nLet's work on the stacked bar chart now. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":789,"value":"md`We'll use faceting to break this out by problem type and year. Let's use a grey scale {scheme: 'greys'} to color code across the years from light to dark. Notice that you do not need to use an aggregator for this view, because there is only one value for each (Year,ProblemType) combination in the dataset. If you did not facet out the data, you would need an aggregator.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":958,"value":"html`

\n ${await FileAttachment(\"barchart3.png\").image()}\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":801,"value":"md`Let's do some formatting:\n - Remove the color legend for the year (since it is redundantly coded)\n - Hide the Year title from each axis\n - Add a chart title, By Problem Type\n - Hide the ProblemType axis label and rotate the labels for the Problem Types on the y axis. \n - Make the labels bold faced, larger, and a different font (Tahoma)\n - Sort the facets in the same order as we did in the line chart.\n\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":960,"value":"html`

\n ${await FileAttachment(\"barchart4.png\").image()}\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":834,"value":"md`Next, we need to add text labels to the ends of the bars. This requires that you create a layer for the text labels, separate from the bar charts. (hint: use *dx* to tweak the location of the text a bit if needed)\n\nI recommend that you rework the code, and place it in a code block consisting of three parts:\n- the code for the bars; place the results in a const\n- the code for the layers; place the results in a const\n- the code that combines the layers, does the faceting, and binds it all to the data.\n\nRemember that when you place the code into a variable, you are creating a selection to be used elsewhere in the code. You only call render() once on the final chart that you've built, and since you've put this in a code block, you need to *return* it to Observable to execute its render() function.\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":962,"value":"html`

\n ${await FileAttachment(\"barchart5.png\").image()}\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":852,"value":"md`## Put it all together\n\nNow put the two charts side-by-side. I suggest that you output the code from each chart into a variable and then combine those in a new chart. (Note that the combined legend doesn't look right in the line chart; there is probably a way to fix this, but I haven't figured it out. I also haven't found a way to make a colored background for the title of the chart.)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":964,"value":"html`

\n ${await FileAttachment(\"combined_chart1.png\").image()}\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"md`## Optional extra\n\nAs an optional (somewhat tricky) challenge, can you make the green stacked portions for the values for SeeClickFix appear? This requires that you do two additional things:\n- Use a data transformation to compute a percent for SeeClickFix\n- Figure out how to lay out two different values to create the stacks. Be aware that the data is not laid out in a way that lets you use the stacked bar chart that is built into Vega-Lite.\n\nNote that here I went with the simpler legend for the line chart.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":892,"value":"html`

\n ${await FileAttachment(\"combined_withclickfix@1.png\").image()}\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2d:"$2c:body"