31:[] 2f:{"title":"Activity: Marks and Channels","cells":[{"id":0,"value":"# Activity: Marks and Channels","pinned":false,"hidden":false,"mode":"md"},{"id":20,"value":"In this activity, we will recreate a popular historical chart using Vega-Lite.\nThe goal is to analyze an existing graphic that was decidedly _not_ made with Vega-Lite, using the vocabulary of the grammar of graphics (i.e., marks, channels, and encodings), and then use Vega-Lite to implement our own version of the chart.\n\nFork this notebook to work on this activity, and turn in a URL to the Canvas assignment.\nDon't forget to make your notebook public and unlisted.","pinned":false,"hidden":false,"mode":"md"},{"id":90,"value":"---\n## Background \n\nThe visualization we'll analyze is one of [William Playfair](https://en.wikipedia.org/wiki/William_Playfair)'s time series charts depicting England's trade relationships with other countries in the 1800s.\nPlayfair was a pioneer in data visualization: he authored the first published instances of the line, area, and bar charts.\n\n[Wikipedia's page about him](https://en.wikipedia.org/wiki/William_Playfair) has the following remarkable sentence:\n\n> He was, in turn, a millwright, engineer, draftsman, accountant, inventor, silversmith, merchant, investment broker, economist, statistician, pamphleteer, translator, publicist, land speculator, banker, ardent royalist, _de facto_ intelligence officer, convict, editor, blackmailer and journalist.\n","pinned":false,"hidden":false,"mode":"md"},{"id":107,"value":"The chart below depicts **England's trade with North America** from 1770 to 1782.\nIt was published in 1786 in [_The Commercial and Political Atlas_](https://archive.org/details/PLAYFAIRWilliam1801TheCommercialandPoliticalAtlas).\nIn the second edition published the following year, [Playfair also included his data](https://dataxdesign.io/chapters/playfair#fig-table-1787).","pinned":false,"hidden":false,"mode":"md"},{"id":110,"value":"

Image from [Wikimedia Commons](https://commons.wikimedia.org/wiki/Category:The_Commercial_and_Political_Atlas,_1786)

Image from [_What Visualization Reveals_](https://dataxdesign.io/chapters/playfair), courtesy of the Library Company of Philadelpha.

","pinned":false,"hidden":false,"mode":"md"},{"id":134,"value":"Let's recreate it in Vega-Lite!\n\n---","pinned":false,"hidden":false,"mode":"md"},{"id":243,"value":"## Analyzing the visualization ","pinned":false,"hidden":false,"mode":"md"},{"id":207,"value":"$${flag()} Answer the following questions about the chart. Edit this cell and place your answers below each question.\n Your answers need not be very long, just a sentence or two.\n\n* What **data** is depicted in the figure? I.e., what are the variables you see?\n* What **marks** do you see? You can see possible mark types at the [Vega-Lite documentation on Marks](https://vega.github.io/vega-lite/docs/mark.html).\n* Which **visual channels** are employed? E.g., color, position, size, etc. What data are **encoded** or mapped to those visual channels? You can see possible encodings at the [Vega-Lite documentation on Encodings](https://vega.github.io/vega-lite/docs/encoding.html).","pinned":false,"hidden":false,"mode":"md"},{"id":251,"value":"---\n\n## Recreating the visualization\n\nUsing what you've learned about the marks and encodings used, work on recreating the visualization (or a version of it). We'll get started as a whole-class group, then you'll continue in smaller groups with your tablemates.\n\n**Some suggestions**:\n\n- Get the major elements down (like the two lines) before working on the other design elements (like the text annotations). Indeed, some elements would require an unproductive amount of finagling, as we'll talk about in class.\n- You may need to reorganize data table to get it into the form you want. See [Arquero's table verbs](https://idl.uw.edu/arquero/api/) as a reference.\n- _Work with your tablemates._ Each person will make their own submission, but you should still feel free to discuss the activity with your classmates as you go.\n- Details about how to do this are intentionally left sparse; we'll work with each other as a class, consult the documentation, and use other resources.","pinned":false,"hidden":false,"mode":"md"},{"id":182,"value":"We have the data in the `data` variable.","pinned":false,"hidden":false,"mode":"md"},{"id":259,"value":"chart = {\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":239,"value":"---\n\n## Imports and data preparation","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"data = aq.from([\n {\"year\": \"1770\", \"imports\": 1480000, \"exports\": 4550000 },\n {\"year\": \"1771\", \"imports\": 1430000, \"exports\": 4630000 },\n {\"year\": \"1772\", \"imports\": 1445000, \"exports\": 3600000 },\n {\"year\": \"1773\", \"imports\": 1465000, \"exports\": 2465000 },\n {\"year\": \"1774\", \"imports\": 1435000, \"exports\": 3840000 },\n {\"year\": \"1775\", \"imports\": 2065000, \"exports\": 985000 },\n {\"year\": \"1776\", \"imports\": 245000, \"exports\": 1190000 },\n {\"year\": \"1777\", \"imports\": 230000, \"exports\": 1880000 },\n {\"year\": \"1778\", \"imports\": 265000, \"exports\": 1150000 },\n {\"year\": \"1779\", \"imports\": 295000, \"exports\": 1370000 },\n {\"year\": \"1780\", \"imports\": 300000, \"exports\": 1805000 },\n {\"year\": \"1781\", \"imports\": 385000, \"exports\": 1545000 },\n {\"year\": \"1782\", \"imports\": 295000, \"exports\": 905000 }\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"import { aq, op } from '@uwdata/arquero'","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"import { vl } from \"@vega/vega-lite-api-v6\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"import { stylesheet, flag } from '@ayaankazerouni/utils'","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W31","stdlib":"1","titling":"auto"}