2c:null 2d:["$","title",null,{"children":"A2 Data wrangling with JavaScript | Ayaan Kazerouni | Observable"}] 32:T665,${flag()} Same as you did with the array in Part 1, we'll now _derive_ a column for our data table. Add a new `firstDigit` column to the data table that is simply the first digit of the zip codes. **Instead of simply `view`ing the result, save it in a new variable.**
Use the `derive` method to do this. Put simply, the `derive` method takes in key-value pairs describing the name of the desired new column (key) and a function to compute the value for each given row (value). However, because of [how Arquero optimizes table operations](https://idl.uw.edu/arquero/api/expressions), you can't simply do something like this: ```js dt.derive({ firstDigit: d => d.zip_code.toString().charAt(0) }) ``` In the (imaginary) code above, we derive a new column called `firstDigit`. Each row's `firstDigit` value is that row's `zip_code`'s first character (`charAt(0)`). In Arquero, you can _only_ use operations defined in the `op` object when defining functions over columns values in a table. This gives Arquero free rein to reorganize your desired operations to optimize them once you've finished composing your pipeline. See the docs on [table expressions](https://idl.uw.edu/arquero/api/expressions) for more info. As a result, you need to use [`op.substring`](https://idl.uw.edu/arquero/api/op#substring) to compute the first digit of `d.zip_code`. I leave you to do that below. ${flag('note')} Instead of simply `view()`-ing the table once you're done, save your new table (with the newly derived column) in a new variable called **`newTable`**. The variable will be used in the following cells, so make sure it's spelled right.33:T4b8,{ const w = width - 100; // So that the legend doesn't get pushed out. const h = 700; const base = vl.markCircle({ opacity: 0.7 }) .transform( vl.order() ) .encode( vl.x().fieldQ('gdp') .sort({ field: population, order: 'desc' }) .scale({ type: 'log', domain: [100, 1000000] }) .axis({ grid: false }) .title('GDP per capita, log scale'), vl.y().fieldQ('co2') .sort({ field: population, order: 'desc' }) .scale({ type: 'log', domain: [0.001, 100] }) .axis({ grid: false }) .title('CO2 emissions (tonnes per capita), log scale'), vl.size().fieldQ('population') .scale({ type: 'log', range: [1, 1000] }) .legend({ title: 'Population (log scale)', orient: 'left', format: 's' }), vl.tooltip().fieldN('country') ) .width(w) .height(h) const year = vl.markText({ x: w / 2, y: h / 2 + 100, fontSize: 200, color: 'lightgrey', opacity: 0.6, text: selectedYear, }) return vl .data(cleaned.params({ year: selectedYear.toString() }).filter((d, $) => d.year === $.year)) .layer(year, base).render() }34:T2f01,populationWide = aq.from( [ { "0": 1483789, "5": 1411067, "10": 1260099, "15": 1077133, "20": 1017281, "25": 862547, "30": 730638, "35": 588487, "40": 475911, "45": 384211, "50": 321343, "55": 194080, "60": 174976, "65": 106827, "70": 73677, "75": 40834, "80": 23449, "85": 8186, "90": 5259, "year": 1850, "sex": "male" }, { "0": 1450376, "5": 1359668, "10": 1216114, "15": 1110619, "20": 1003841, "25": 799482, "30": 639636, "35": 505012, "40": 428185, "45": 341254, "50": 286580, "55": 187208, "60": 162236, "65": 105534, "70": 71762, "75": 40229, "80": 22949, "85": 10511, "90": 6569, "year": 1850, "sex": "female " }, { "0": 2120846, "5": 1804467, "10": 1612640, "15": 1438094, "20": 1351121, "25": 1217615, "30": 1043174, "35": 866910, "40": 699434, "45": 552404, "50": 456176, "55": 292417, "60": 260887, "65": 149331, "70": 98465, "75": 56699, "80": 29007, "85": 10434, "90": 7232, "year": 1860, "sex": "male" }, { "0": 2092162, "5": 1778772, "10": 1540350, "15": 1495999, "20": 1370462, "25": 1116373, "30": 936055, "35": 737136, "40": 616826, "45": 461739, "50": 407305, "55": 267224, "60": 249735, "65": 141405, "70": 101778, "75": 57597, "80": 29506, "85": 14053, "90": 6622, "year": 1860, "sex": "female " }, { "0": 2800083, "5": 2428469, "10": 2427341, "15": 1958390, "20": 1805303, "25": 1509059, "30": 1251534, "35": 1185336, "40": 968861, "45": 852672, "50": 736387, "55": 486036, "60": 399264, "65": 260829, "70": 173364, "75": 86929, "80": 47427, "85": 15891, "90": 8649, "year": 1870, "sex": "male" }, { "0": 2717102, "5": 2393680, "10": 2342670, "15": 2077248, "20": 1909382, "25": 1574285, "30": 1275629, "35": 1137490, "40": 944401, "45": 747916, "50": 637801, "55": 407819, "60": 374801, "65": 239080, "70": 165501, "75": 89540, "80": 54190, "85": 19302, "90": 13068, "year": 1870, "sex": "female " }, { "0": 3533662, "5": 3297503, "10": 2911924, "15": 2457734, "20": 2547780, "25": 2119393, "30": 1749107, "35": 1540772, "40": 1237347, "45": 1065973, "50": 964484, "55": 679147, "60": 580298, "65": 369398, "70": 255422, "75": 141628, "80": 67526, "85": 22437, "90": 10272, "year": 1880, "sex": "male" }, { "0": 3421597, "5": 3179142, "10": 2813550, "15": 2527818, "20": 2512803, "25": 1974241, "30": 1596772, "35": 1483717, "40": 1239435, "45": 1003711, "50": 863012, "55": 594843, "60": 526956, "65": 346303, "70": 251860, "75": 143513, "80": 77290, "85": 31227, "90": 15451, "year": 1880, "sex": "female " }, { "0": 4619544, "5": 4465783, "10": 4057669, "15": 3774846, "20": 3694038, "25": 3389280, "30": 2918964, "35": 2633883, "40": 2261070, "45": 1868413, "50": 1571038, "55": 1161908, "60": 916571, "65": 672663, "70": 454747, "75": 268211, "80": 127435, "85": 44008, "90": 15164, "year": 1900, "sex": "male" }, { "0": 4589196, "5": 4390483, "10": 4001749, "15": 3801743, "20": 3751061, "25": 3236056, "30": 2665174, "35": 2347737, "40": 2004987, "45": 1648025, "50": 1411981, "55": 1064632, "60": 887508, "65": 640212, "70": 440007, "75": 265879, "80": 132449, "85": 48614, "90": 20093, "year": 1900, "sex": "female " }, { "0": 5296823, "5": 4991803, "10": 4650747, "15": 4566154, "20": 4637632, "25": 4257755, "30": 3658125, "35": 3427518, "40": 2860229, "45": 2363801, "50": 2126516, "55": 1508358, "60": 1189421, "65": 850159, "70": 557936, "75": 322679, "80": 161715, "85": 59699, "90": 23929, "year": 1910, "sex": "male" }, { "0": 5287477, "5": 4866139, "10": 4471887, "15": 4592269, "20": 4447683, "25": 3946153, "30": 3295220, "35": 3088990, "40": 2471267, "45": 2114930, "50": 1773592, "55": 1317651, "60": 1090697, "65": 813868, "70": 547623, "75": 350900, "80": 174315, "85": 62725, "90": 28965, "year": 1910, "sex": "female " }, { "0": 5934792, "5": 5789008, "10": 5401156, "15": 4724365, "20": 4549411, "25": 4565066, "30": 4110771, "35": 4081543, "40": 3321923, "45": 3143891, "50": 2546035, "55": 1880975, "60": 1587549, "65": 1095956, "70": 714618, "75": 417292, "80": 187000, "85": 75991, "90": 22398, "year": 1920, "sex": "male" }, { "0": 5694244, "5": 5693960, "10": 5293057, "15": 4779936, "20": 4742632, "25": 4529382, "30": 3982426, "35": 3713810, "40": 3059757, "45": 2669089, "50": 2200491, "55": 1674672, "60": 1382877, "65": 989901, "70": 690097, "75": 439465, "80": 211110, "85": 92829, "90": 32085, "year": 1920, "sex": "female " }, { "0": 5875250, "5": 6542592, "10": 6064820, "15": 5709452, "20": 5305992, "25": 4929853, "30": 4424408, "35": 4576531, "40": 4075139, "45": 3633152, "50": 3128108, "55": 2434077, "60": 1927564, "65": 1397275, "70": 919045, "75": 536375, "80": 246708, "85": 88978, "90": 30338, "year": 1930, "sex": "male" }, { "0": 5662530, "5": 6129561, "10": 5986529, "15": 5769587, "20": 5565382, "25": 5050229, "30": 4455213, "35": 4593776, "40": 3754022, "45": 3396558, "50": 2809191, "55": 2298614, "60": 1783515, "65": 1307312, "70": 918509, "75": 522716, "80": 283579, "85": 109210, "90": 43483, "year": 1930, "sex": "female " }, { "0": 5294628, "5": 5468378, "10": 5960416, "15": 6165109, "20": 5682414, "25": 5438166, "30": 5040048, "35": 4724804, "40": 4437392, "45": 4190187, "50": 3785735, "55": 2972069, "60": 2370232, "65": 1897678, "70": 1280023, "75": 713875, "80": 359418, "85": 127303, "90": 42263, "year": 1940, "sex": "male" }, { "0": 5124653, "5": 5359099, "10": 5868532, "15": 6193701, "20": 5896002, "25": 5664244, "30": 5171522, "35": 4791809, "40": 4394061, "45": 4050290, "50": 3488396, "55": 2810000, "60": 2317790, "65": 1911117, "70": 1287711, "75": 764915, "80": 414761, "85": 152131, "90": 58119, "year": 1940, "sex": "female " }, { "0": 8211806, "5": 6706601, "10": 5629744, "15": 5264129, "20": 5573308, "25": 6007254, "30": 5676022, "35": 5511364, "40": 5076985, "45": 4533177, "50": 4199164, "55": 3667351, "60": 3035038, "65": 2421234, "70": 1627920, "75": 1006530, "80": 511727, "85": 182821, "90": 54836, "year": 1950, "sex": "male" }, { "0": 7862267, "5": 6450863, "10": 5430835, "15": 5288742, "20": 5854227, "25": 6317332, "30": 5895178, "35": 5696261, "40": 5199224, "45": 4595842, "50": 4147295, "55": 3595158, "60": 3009768, "65": 2548250, "70": 1786831, "75": 1148469, "80": 637717, "85": 242798, "90": 90766, "year": 1950, "sex": "female " }, { "0": 10374975, "5": 9495503, "10": 8563700, "15": 6620902, "20": 5268384, "25": 5311805, "30": 5801342, "35": 6063063, "40": 5657943, "45": 5345658, "50": 4763364, "55": 4170581, "60": 3405293, "65": 2859371, "70": 2115763, "75": 1308913, "80": 619923, "85": 253245, "90": 75908, "year": 1960, "sex": "male" }, { "0": 10146999, "5": 9250741, "10": 8310764, "15": 6617493, "20": 5513495, "25": 5548259, "30": 6090862, "35": 6431337, "40": 5940520, "45": 5516028, "50": 4928844, "55": 4402878, "60": 3723839, "65": 3268699, "70": 2516479, "75": 1641371, "80": 856952, "85": 384572, "90": 135774, "year": 1960, "sex": "female " }, { "0": 8685121, "5": 10411131, "10": 10756403, "15": 9605399, "20": 7729202, "25": 6539301, "30": 5519879, "35": 5396732, "40": 5718538, "45": 5794120, "50": 5298312, "55": 4762911, "60": 4037643, "65": 3142606, "70": 2340826, "75": 1599269, "80": 886155, "85": 371123, "90": 186502, "year": 1970, "sex": "male" }, { "0": 8326887, "5": 10003293, "10": 10343538, "15": 9414284, "20": 8341830, "25": 6903041, "30": 5851441, "35": 5708021, "40": 6129319, "45": 6198742, "50": 5783817, "55": 5222164, "60": 4577251, "65": 3894827, "70": 3138009, "75": 2293376, "80": 1417553, "85": 658511, "90": 314929, "year": 1970, "sex": "female " }, { "0": 8439366, "5": 8680730, "10": 9452338, "15": 10698856, "20": 10486776, "25": 9624053, "30": 8705835, "35": 6852069, "40": 5692148, "45": 5342469, "50": 5603709, "55": 5485098, "60": 4696140, "65": 3893510, "70": 2857774, "75": 1840438, "80": 1012886, "85": 472338, "90": 204148, "year": 1980, "sex": "male" }, { "0": 8081854, "5": 8275881, "10": 9048483, "15": 10410271, "20": 10614947, "25": 9827903, "30": 8955225, "35": 7134239, "40": 5953910, "45": 5697543, "50": 6110117, "55": 6160229, "60": 5456885, "65": 4896947, "70": 3963441, "75": 2951759, "80": 1919292, "85": 1023115, "90": 499046, "year": 1980, "sex": "female " }, { "0": 9307465, "5": 9274732, "10": 8782542, "15": 9020572, "20": 9436188, "25": 10658027, "30": 11028712, "35": 9853933, "40": 8712632, "45": 6848082, "50": 5553992, "55": 4981670, "60": 4953822, "65": 4538398, "70": 3429420, "75": 2344932, "80": 1342996, "85": 588790, "90": 238459, "year": 1990, "sex": "male" }, { "0": 8894007, "5": 8799955, "10": 8337284, "15": 8590991, "20": 9152644, "25": 10587292, "30": 11105750, "35": 10038644, "40": 8928252, "45": 7115129, "50": 5899925, "55": 5460506, "60": 5663205, "65": 5594108, "70": 4610222, "75": 3723980, "80": 2545730, "85": 1419494, "90": 745146, "year": 1990, "sex": "female " }, { "0": 9735380, "5": 10552146, "10": 10563233, "15": 10237419, "20": 9731315, "25": 9659493, "30": 10205879, "35": 11475182, "40": 11320252, "45": 9925006, "50": 8507934, "55": 6459082, "60": 5123399, "65": 4453623, "70": 3792145, "75": 2912655, "80": 1902638, "85": 970357, "90": 336303, "year": 2000, "sex": "male" }, { "0": 9310714, "5": 10069564, "10": 10022524, "15": 9692669, "20": 9324244, "25": 9518507, "30": 10119296, "35": 11635647, "40": 11488578, "45": 10261253, "50": 8911133, "55": 6921268, "60": 5668961, "65": 4804784, "70": 5184855, "75": 4355644, "80": 3221898, "85": 1981156, "90": 1064581, "year": 2000, "sex": "female " }] ).relocate(['sex', 'year'], { before: 0 })35:[{"id":"f3b28074ce6650e8946948c61bc0fad7e7662f18f5fad7aab80562d88fe85920e1398ff7021f5b2819c7b1b33795f773438098233f07af171f85740dd89e53cd","href":"https://static.observableusercontent.com/files/f3b28074ce6650e8946948c61bc0fad7e7662f18f5fad7aab80562d88fe85920e1398ff7021f5b2819c7b1b33795f773438098233f07af171f85740dd89e53cd","name":"co2_pcap_cons.csv","type":"text/csv","lastModified":1743703167040.026,"size":240334},{"id":"689b2dcfb0bc0956466e231aef67180ad0dfd670127b3cca50060eac420b0f4119ccc20d583efe75e06816860930ead1eb9f109b18665099d8ca33a65b868312","href":"https://static.observableusercontent.com/files/689b2dcfb0bc0956466e231aef67180ad0dfd670127b3cca50060eac420b0f4119ccc20d583efe75e06816860930ead1eb9f109b18665099d8ca33a65b868312","name":"pop@1.csv","type":"text/csv","lastModified":1743704443728.995,"size":308205},{"id":"2ff904519dc9ab291afde4b7bbbe2f3ca874d96fb3f36205e324b76174dd8e58db446c579eb89f91c76e28acfde8cf2909c862edccb609c7ea486c32bdc8e8fe","href":"https://static.observableusercontent.com/files/2ff904519dc9ab291afde4b7bbbe2f3ca874d96fb3f36205e324b76174dd8e58db446c579eb89f91c76e28acfde8cf2909c862edccb609c7ea486c32bdc8e8fe","name":"gdp_pcap@2.csv","type":"text/csv","lastModified":1743704862696.612,"size":212714}] 30:{"id":"a4eb76b26f34cd18","slug":"csc477-lab-data-wrangling","title":"A2 Data wrangling with JavaScript","thumbnail":"e3a59106bb958e34ae0e95ac7c19a5e716125328e37cee8f2ecd33cfde936ec6","access_level":"unlisted","create_time":"$D2025-03-24T21:56:47.686Z","update_time":"$D2026-03-30T23:15:30.040Z","view_time":null,"first_public_time":"$D2025-03-25T06:58:58.244Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"1d83bfce92a9c574","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/0e57571babb328d16b661fb3c0f94c9629fc275ae03e484ce19dbcf72fa1be0d","tier":"starter_2024"},"version":1545,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7a2aaf0dcd8f4999","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/d56bdf990c9be43beacbf55c7ca358b0aa7c36eb9211e9fc23f3b50bc80603bd","tier":null}],"members":[{"type":"team","id":"1d83bfce92a9c574","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/0e57571babb328d16b661fb3c0f94c9629fc275ae03e484ce19dbcf72fa1be0d","tier":"starter_2024","role":"editor"},{"type":"individual","id":"7a2aaf0dcd8f4999","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/d56bdf990c9be43beacbf55c7ca358b0aa7c36eb9211e9fc23f3b50bc80603bd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":60,"collection":{"id":"6c810503155b0a33","slug":"csc-477-cal-poly","title":"CSC 477","owner":{"id":"1d83bfce92a9c574","login":"ayaankazerouni","name":"Ayaan Kazerouni"}},"type":"notebook","body":{"titling":"auto","title":"A2 Data wrangling with JavaScript","cells":[{"id":0,"value":"# A2 Data wrangling with JavaScript","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"This assignment is meant to help you build familiarity with Observable Notebooks, JavaScript, and [Arquero](https://idl.uw.edu/arquero/), a data wrangling library created by some good folks at the University of Washington. If you are familiar with Python and [pandas](https://pandas.pydata.org/), a lot will be conceptually transferable.\n\n${flag('pause')} Before you. start, take some time to peruse _[A Minimal Introduction to JavaScript and Observable](https://observablehq.com/@uwdata/a-minimal-introduction-to-javascript-and-observable)_. Then come back to this assignment.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":813,"value":"toc(\"h2,h3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"## Deliverable \n\n- To complete this exercise, edit this notebook directly.\n- When you make your first edit, you will see an option to \"fork\" the notebook under your own account to save your changes. Do that. (I strongly recommend doing the fork early so that you don't lose your changes.)\n- Once you have your own copy and have finished the exercise, click the 🌐 `Share...` button at the top of the notebook.\n- **Make your notebook PUBLIC, but UNLISTED.** Then copy the notebook URL and submit it in Canvas.\n\nThis will be your standard method of submitting programming assignments in this course.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"## Part 1: Data wrangling with JavaScript Arrays","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"For the most part, JavaScript arrays behave like the lists you have seen in Python. This section covers the basics, but you will frequently refer to the MDN [Array documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array).\n\nFor this exercise, we'll use a dataset of US zipcodes. Cells marked with ${flag()} represent tasks that you need to complete.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":793,"value":"The dataset is available in the `zipcodes` array, which is an array of objects. As an example, here's what the first object looks like:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":990,"value":"zipcodes[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"If you expand the drop down below this line (by clicking the little arrow next to `Array (42049)`, you can inspect the objects in the array. Don't worry, it won't show all ~42000 records. Observable will only expand to show 20 records at a time.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":529,"value":"zipcodes","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"---\n${flag()} Use [`filter`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) to find the zipcodes associated with the city of San Luis Obispo.
\n_Expected answer is an array of `zipcode` objects._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":142,"value":"// Your code here.","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"$${flag()} How many zip codes are associated with the state of California?
\n_Expected answer is a `number`._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":153,"value":"// Your code here.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"$${flag()} Often in visualization, we want to display _derived_ fields, rather than only the fields in the original dataset.\n\nWe would like to compute, for each record, the first character of each zipcode. For example, for the zipcode object associated with `93405`, we want the following record:\n\n```js\n{\n zip_code: 93405,\n latitude: 35.363067,\n longitude: -120.703455,\n city: \"San Luis Obispo\",\n state: \"CA\",\n county: \"San Luis Obispo\",\n firstDigit: 9 // <------ New field added!\n}\n```\n\nUsing [`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map), produce a _new_ list of records that includes a new field called `firstDigit` that contains this value.
\n*Expected answer is an array of `zipcode` objects, with each object now also having a `firstDigit` key. The JavaScript [spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) may help you do this concisely.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":158,"value":"// Your code here.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1000,"value":"$${flag('todo')} Use [`reduce`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) to find the maximum zip code in the US. [Is this a meaningful value?](https://en.wikipedia.org/wiki/ZIP_Code#Geographic_hierarchy)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1002,"value":"// Your code here.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"---\n\n## Part 2: Data wrangling with Arquero\n\nWe can do quite a bit with arrays, especially with the many built-in functions like `map`, `filter`, `forEach`, `find`, etc.\nHowever, other common data wrangling operations are unavailable through arrays (like `group by` operations), or would be inefficient when working with large datasets.\n\nThat's where [**Arquero**](https://observablehq.com/@uwdata/introducing-arquero) comes in. Arquero is a library created by folks at the University of Washington for working with large in-memory tabular datasets in JavaScript.\n\nArquero is available by default in Observable notebooks through the `aq` object.\n\nBut we'll import and use the version from the `@uwdata/arquero` notebook, since it comes with some goodies that were especially made for Observable notebooks.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":261,"value":"import { aq, op } from '@uwdata/arquero'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":974,"value":"We'll see what \"`op`\" is used for in a little bit.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":259,"value":"$${flag('pause')} Peruse the [Introducing Arquero](https://observablehq.com/@uwdata/introducing-arquero) notebook before moving on with this section, and keep it handy as a reference. This lab assignment is intentionally light on direct instruction, partly because the linked notebook does it better, and partly because I want you to get used to reading documentation. You may also want to bookmark the [Arquero notebook collection](https://observablehq.com/collection/@uwdata/arquero) for the rest of the quarter.\n\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":449,"value":"$${flag('Pause')} Did you look at [Introducing Arquero](https://observablehq.com/@uwdata/introducing-arquero)? Seriously, go do that first. I'll wait.\n

\nDone? All right, let's move on.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":221,"value":"First, use [`aq.from`](https://idl.uw.edu/arquero/api/#from) to create a data table from our array of zipcodes.
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":223,"value":"// Your code here.\ndt = null // Replace this with a call to aq.from","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":841,"value":"_The error below will disappear once you complete this step._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":268,"value":"dt.view({ limit: 10 }) // The \"view\" method is only available if you import aq as shown above","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"The following exercises ask you to perform some data tasks on the data table `dt`. Use the [Arquero documentation](https://idl.uw.edu/arquero/) and the [Introducing Arquero](https://observablehq.com/@uwdata/introducing-arquero) notebook as guides in these tasks.\n\nAnswer these questions with a series of chained Arquero function calls.\nIf your final answer is a table, end your pipeline with `.view()` to display the table.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":275,"value":"$${flag()} How many zip codes are there in the US? (Or, how many rows are in your data table?)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":278,"value":"// Your code here.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"$${flag()} How many counties does each state have?
\n_Hint: you will want to look at `dt.groupby` (to group by `state`), `rollup` (to summarize per `state`), and `op.distinct` (to find the number of unique county names).
\nYou'll know your answer is right if you see that California has **58** counties._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":286,"value":"// Your code here.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":393,"value":"// Your code here.\nnewTable = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"### A sneak peak of what's to come\n\nSo how do we use this data in visualization? For most of this course, we're going to use a visualization library called [Vega-Lite](https://vega.github.io/vega-lite/) that allows us to create powerful interactive graphics using a relatively simple declarative syntax.\n\nExpand the source code for the cell below and see the comments, along with some nudges to experiment.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":465,"value":"// Layer two charts together (draw one on top of the other)\nvl.layer(\n // The first chart draws the US state boundaries\n vl.markGeoshape({ stroke: 'lightgrey', fill: 'white' })\n .data(\n vl.topojson(usa) // \n .feature('states')\n ),\n // The second chart draws circles for each zipcode\n vl.markCircle({ size: 20, opacity: 0.6 })\n .data(\n newTable\n )\n .encode(\n vl.latitude().field('latitude'),\n vl.longitude().field('longitude'),\n vl.tooltip().field('county'),\n vl.color().field('firstDigit')\n )\n)\n// The whole chart is projected (roughly, \"scaled\") using the Albers USA projection.\n// It takes certain liberties with the locations of Alaska and Hawaii to present the\n// map in a confined space.\n// Comment this out to see what happens without it.\n// Also try different projections, like \"albers\", \"equalEarth\", or \"mercator\".\n.project(vl.projection('albersUsa'))\n.width(width)\n.height(800)\n.render();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"## Part 3: Into the Tidyverse","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":503,"value":"In class we talked about [Tidy data](https://r4ds.hadley.nz/data-tidy.html). A _tidy_ dataset has three properties:\n\n- Each variable has its own column.\n- Each observation has its own row.\n- Each value has its own cell.\n\nConsider this table of US population counts from 1850 to 2000.\nIt is _tidy_, since each observation is a row, and each variable is a column.\n\nThe `age` column depicts an age _range_, i.e., when `age` is 0, it means people aged 0–4. When `age` is 5, it means people aged 5–9.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":769,"value":"population.view(10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":774,"value":"The same data could be represented in the following decidedly _un_-tidy table.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":780,"value":"populationWide.view(10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":782,"value":"Instead of having the different age groups be _values_ in the `age` column, the table spreads them across multiple rows.\nThis table can probably be made sense of by a human—for example, in 1850, there were 1,483,789 males in the US aged 0–4.\n\nHowever, it really doesn't lend itself to useful programmatic or visual analyses.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":659,"value":"### Part 3.1: Reshaping data tables","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":661,"value":"Arquero provides the [`fold`](https://idl.uw.edu/arquero/api/verbs.html#fold) and [`pivot`](https://idl.uw.edu/arquero/api/verbs.html#pivot) functions to help with reshaping data tables. Using the linked documentation as a guide, complete the following steps. Remember that you will have to use `groupby` along with `pivot` to \"freeze\" the columns that are not involved in the pivot operation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":665,"value":"$${flag()} Use `fold` or `pivot` on `population` to obtain a table that looks identical to `populationWide`. Don't forget to `.view()` the result!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":667,"value":"// Your code here.","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":670,"value":"$${flag()} Use `fold` or `pivot` on `populationWide` to obtain a table that looks identical to `population`. It's okay if the columns are not in the same order, as long as the same columns are present. Don't forget to `.view()` the result!
\n_Hint: You don't have to type out all the column names in an array. Take a look at Arquero's [selection helpers](https://idl.uw.edu/arquero/api/#selection-helpers), which let you select columns based on boolean conditions or index ranges._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":672,"value":"// Your code here.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1060,"value":"### Part 3.2: Folding and merging multiple datasets","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1118,"value":"Consider the following three SUPER UNTIDY tables. These were not loaded through a URL, but are file attachments attached to this notebook using Observable's `FileAttachment` function.\n\nFirst, we have data about countries' per-capita CO2 emissions (in tonnes). The table is very wide...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1150,"value":"co2untidy.view(6)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1162,"value":"Next, we have data about countries' populations from 1800–2022. (Not to be confused with the US population dataset we played with in Part 3.1.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1160,"value":"popUntidy.view(6)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1172,"value":"Finally, we have data about the countries' GDP per capita from 1800–2022.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1174,"value":"gdpUntidy.view(6)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1179,"value":"**Our goal in this part is to all of this data into one tidy dataset.** That is, we want a table that looks something like this.\n\n\n| country | year | co2 | gdp | population | \n| ------- | ---- | --- | --- | ---------- |\n| Afghanistan | 1800 | 0.001 | 481 | 3.28M |\n| Afghanistan | 1801 | 0.001 | 481 | 3.28M |\n| Afghanistan | 1803 | 0.001 | 481 | 3.28M |\n| Angola | 1800 | 0.009 | 373 | 1.57M |\n| Angola | 1801 | 0.009 | 374 | 1.57M |\n| Angola | 1802 | 0.009 | 376 | 1.57M |\n| | and | so | on | ... |\n\nEach row is an observation (a specific country's values in a specific year) and each column is an attribute.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1194,"value":"$${flag('todo')} Our first step is to make each table tidy.\n\nUse `fold` to make each table \"long\" instead of \"wide\". \nWe could type out a list of column names from `'1800'` to `'2022'` to name all the columns we want to fold, but Arquero's [column selector helpers](https://idl.uw.edu/arquero/api/#selection-helpers) can make our lives a bit easier. We use `aq.range` to select columns by index.\n\n```js\npop = popUntidy.fold(aq.range(1, popUntidy.numCols()), { as: ['year', 'population'] })\n```\n\nThe code above _folds_ all the columns in the table starting from index 1—we don't want to fold the `country` column. It takes all those columns and squishes them into two columns: `year` and `population`. Copy the code above into the cell below.\n\n_You can `.view()` the result to check your answer, but be sure that the cell's value is the table itself (and not the HTML output of viewing the table); we will need it later._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1202,"value":"// Your code here.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1209,"value":"$${flag()} Now do the same for the `gdpUntidy` and `co2Untidy` tables.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1211,"value":"// Your code here (for GDP).","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1213,"value":"// Your code here (for CO2).","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1232,"value":"#### Joining the data\n\n${flag('todo')} Now, use Arquero's `join` to merge all three tables. You will need to chain couple of `join` calls, for example, join `pop` with `gdp`, then join the result with `co2`. Since all three tables have `country` and `year` columns with the same values, the join should be as simple as\n\n```js\npop.join(gdp).join(co2)\n```\n\n${flag('note')} _Don't change the variable name below; we will use it to finish this assignment._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1259,"value":"// Your code here.\nmergedTable = null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1273,"value":"Arquero has [other join methods](https://idl.uw.edu/arquero/api/verbs#joins) to help handle cases where data might be missing from tables involved in a join. For example, what if one table had no CO2 data for a given year and country? Should that year be omitted _entirely_ from the merged table? Or should those cells be given empty values?\n\nSimilarly, what if the columns were _named_ different things, like `year` in one table and `emissionYear` in another table? The various join methods provide options for handling these cases. Please give them a brief look in case you encounter these situations in future assignments.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1288,"value":"#### Cleaning up the data\n\nFinally, you'll notice that the numerical fields don't really have _numbers_ in them. The original data source ([Gapminder](gapminder.org)) has provided the bigger numbers as _strings_, i.e., instead of the number `3280000`, the table contains the value `\"3.28M\"`.\n\nThis makes things easy for a human to read, but really isn't going to work for visualization.\n\n_The error below will disappear once you complete the `merge` step._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1291,"value":"mergedTable.filter(d => d.country === 'USA').orderby('gdp', { order: aq.desc() }).view(6)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1296,"value":"$${flag('todo')} (Okay, there's nothing for you to do in this step. I've done it for you, just make sure you understand what's happening in the code below.)\n\nI've imported for you a `reverseFormatNumber` function that you can use to get a number from a human-friendly string.\n\nFor example,\n\n```js\nreverseFormatNumber('2.3B') ==> ${reverseFormatNumber('2.3B')}\nreverseFormatNumber('1.4k') ==> ${reverseFormatNumber('1.4k')}\nreverseFormatNumber('481') ==> ${reverseFormatNumber('481')}\n```\n\nUse `.derive()` to derive _new_ `population`, `gdp`, and `co2` columns, formatted as numbers instead of strings. If you name your new columns `population`, `gdp`, and `co2`, they will simply replace the old columns.\n\n_If you're seeing an error below, make sure you're completed all previous steps._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1307,"value":"cleaned = mergedTable\n .derive({\n population: aq.escape(d => reverseFormatNumber(d.population).toFixed()),\n gdp: aq.escape(d => reverseFormatNumber(d.gdp).toFixed()),\n co2: aq.escape(d => reverseFormatNumber(d.co2))\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1379,"value":"The code above uses [`aq.escape`](https://idl.uw.edu/arquero/api/#escape) to allow me to use my `reverseFormatNumber` function in the table expression. This is an escape hatch from Arquero's optimized processing — it won't cause problems with this relatively small dataset, but might present issues if you're handling huge datasets.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1385,"value":"Hurray! We now have a nice cleaned dataset that's ready for visualization!\n\n_If you're seeing an error below, make sure you've completed all previous steps._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1352,"value":"cleaned.view(6)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1388,"value":"---\n\n## Payoff\n\nOk, that was quite a bit. Let's visualize the data just to get some payoff from all that data wrangling. If all has gone well thus far, a chart should appear below. It is a poor reproduction of the [popular visualization from Gapminder](https://www.gapminder.org/tools/#$chart-type=bubbles&url=v2).\n\nUse the slider below to slide through the years. Hover over circles to see the country (though some are obscured by circles drawn on top of them).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1278,"value":"viewof selectedYear = Inputs.range([1800, 2022], { step: 1, label: 'Select a year' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1276,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1257,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1497,"value":"#### Imports and addenda","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":358,"value":"usa = (await require('vega-datasets@2.11.0'))['us-10m.json']()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"import { flag, stylesheet, reverseFormatNumber } from '@ayaankazerouni/utils'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":816,"value":"import {toc} from \"@jonfroehlich/collapsible-toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1474,"value":"import {vl} from '@vega/vega-lite-api-v5'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":723,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1041,"value":"datasets = require('vega-datasets@3.1.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"zipcodes = datasets['zipcodes.csv']()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":756,"value":"population = aq.from((await datasets['population.json']())\n .map(p => ({...p, sex: p.sex === 1 ? 'male' : 'female'})))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":762,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1113,"value":"gdpUntidy = FileAttachment(\"gdp_pcap@2.csv\").csv().then(data => aq.from(data).relocate('country', { before: aq.all() }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1111,"value":"popUntidy = FileAttachment(\"pop@1.csv\").csv().then(\n data => aq.from(data)\n .relocate('country', { before: aq.all() })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1109,"value":"co2untidy = FileAttachment(\"co2_pcap_cons.csv\").csv().then(data => aq.from(data).relocate('country', { before: aq.all() }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 31:"$30:body"