2d:null 2e:["$","title",null,{"children":"Part1: Using Vega-Lite API | Nabil Kashyap | Observable"}] 33:T2446,data = `Province_State,Country_Region,Last_Update,Lat,Long_,Confirmed,Deaths,Recovered,Active,FIPS,Incident_Rate,People_Tested,People_Hospitalized,Mortality_Rate,UID,ISO3,Testing_Rate,Hospitalization_Rate Alabama,US,2020-10-05 04:30:35,32.3182,-86.9023,159169,2558,67948.0,88663.0,1.0,3246.23688480039,1162518.0,,1.6070968593130572,84000001,USA,23709.44600295522, Alaska,US,2020-10-05 04:30:35,61.3707,-152.4044,8405,58,5281.0,3066.0,2.0,1148.938206125392,476818.0,,0.6900654372397382,84000002,USA,65179.585671421446, American Samoa,US,2020-10-05 04:30:35,-14.271,-170.132,0,0,,0.0,60.0,0.0,1616.0,,,16,ASM,2904.3331356373897, Arizona,US,2020-10-05 04:30:35,33.7298,-111.4312,220754,5706,35838.0,179210.0,4.0,3032.8696664535796,1496131.0,,2.5847776257734854,84000004,USA,20554.87251393343, Arkansas,US,2020-10-05 04:30:35,34.9697,-92.3731,87013,1425,78358.0,7230.0,5.0,2883.3217796782037,1072343.0,,1.6376863227333849,84000005,USA,35533.88490438743, California,US,2020-10-05 04:30:35,36.1162,-119.6816,832713,16147,,816566.0,6.0,2107.482031572863,15160287.0,,1.9390834537229515,84000006,USA,38368.60052141333, Colorado,US,2020-10-05 04:30:35,39.0598,-105.3111,73054,2068,6609.0,64377.0,8.0,1268.5769932846374,1414336.0,,2.8307827086812494,84000008,USA,24559.833963564222, Connecticut,US,2020-10-05 04:30:35,41.5978,-72.7554,58297,4513,9408.0,44376.0,9.0,1635.1278312236857,1676410.0,,7.741393210628334,84000009,USA,47020.338054131396, Delaware,US,2020-10-05 04:30:35,39.3185,-75.5071,21243,645,10806.0,9792.0,10.0,2181.5347455851725,294089.0,,3.036294308713458,84000010,USA,30201.26026429402, Diamond Princess,US,2020-10-05 04:30:35,,,49,0,,49.0,88888.0,,,,0.0,84088888,USA,, District of Columbia,US,2020-10-05 04:30:35,38.8974,-77.0268,15519,631,12299.0,2589.0,11.0,2198.9404164936827,399825.0,,4.0659836329660415,84000011,USA,56652.57761612131, Florida,US,2020-10-05 04:30:35,27.7663,-81.6868,716459,14671,,701788.0,12.0,3335.8216463866747,5396874.0,,2.047709638653433,84000012,USA,25127.75903718348, Georgia,US,2020-10-05 04:30:35,33.0406,-83.6431,322925,7162,,315763.0,13.0,3041.463074420224,3018618.0,,2.2178524425176125,84000013,USA,28430.797190617726, Grand Princess,US,2020-10-05 04:30:35,,,103,3,,100.0,99999.0,,,,2.9126213592233015,84099999,USA,, Guam,US,2020-10-05 04:30:35,13.4443,144.7937,2617,49,1887.0,681.0,66.0,1593.5066279402542,51756.0,,1.8723729461215133,316,GUM,31514.53153827886, Hawaii,US,2020-10-05 04:30:35,21.0943,-157.4983,12804,156,10415.0,2233.0,15.0,904.3190344889932,304149.0,,1.218369259606373,84000015,USA,21481.39097319532, Idaho,US,2020-10-05 04:30:35,44.2405,-114.4788,43964,482,22744.0,20738.0,16.0,2460.123162839628,316370.0,,1.0963515603675735,84000016,USA,17703.329201791767, Illinois,US,2020-10-05 04:30:35,40.3495,-88.9861,304235,9040,,295195.0,17.0,2400.878295234757,5889157.0,,2.9713872499876737,84000017,USA,46474.433311518536, Indiana,US,2020-10-05 04:30:35,39.8494,-86.2583,125146,3674,96845.0,24627.0,18.0,1858.911601063483,1418063.0,,2.9357710194492834,84000018,USA,21063.827543340463, Iowa,US,2020-10-05 04:30:35,42.0115,-93.2105,92744,1387,71600.0,19757.0,19.0,2939.522736421062,785567.0,,1.495514534632968,84000019,USA,24898.560095338613, Kansas,US,2020-10-05 04:30:35,38.5266,-96.7265,60980,690,2136.0,58154.0,20.0,2093.148901903468,531117.0,,1.131518530665792,84000020,USA,18230.681622372318, Kentucky,US,2020-10-05 04:30:35,37.6681,-84.6701,72617,1209,12121.0,59287.0,21.0,1625.3875339578344,1434524.0,,1.6648994037208915,84000021,USA,32108.97485111377, Louisiana,US,2020-10-05 04:30:35,31.1695,-91.8678,168294,5577,154163.0,8554.0,22.0,3620.1647136870342,2383670.0,,3.3138436307889765,84000022,USA,51275.01885435233, Maine,US,2020-10-05 04:30:35,44.6939,-69.3819,5519,142,4782.0,595.0,23.0,410.5751176153762,449341.0,,2.5729298786011956,84000023,USA,33427.83727566783, Maryland,US,2020-10-05 04:30:35,39.0639,-76.8021,127290,3958,7653.0,115679.0,24.0,2105.470352383851,1659847.0,,3.109435148087045,84000024,USA,27455.09190033214, Massachusetts,US,2020-10-05 04:30:35,42.2302,-71.5301,134947,9510,113768.0,11669.0,25.0,1957.880903352527,4334501.0,,7.0472111273314715,84000025,USA,62887.183364301774, Michigan,US,2020-10-05 04:30:35,43.3266,-84.5361,141271,7124,99521.0,34626.0,26.0,1414.5691682578413,3764274.0,,5.042790098463239,84000026,USA,37692.27896224008, Minnesota,US,2020-10-05 04:30:35,45.6945,-93.9002,103826,2133,93148.0,8545.0,27.0,1841.0066472422313,2146411.0,,2.054398705526554,84000027,USA,38059.4159335219, Mississippi,US,2020-10-05 04:30:35,32.7416,-89.6787,100488,3013,89737.0,7738.0,28.0,3376.443854121551,739331.0,,2.99836796433405,84000028,USA,24841.86779626961, Missouri,US,2020-10-05 04:30:35,38.4561,-92.2884,134079,2186,,131893.0,29.0,2235.545573813656,1350745.0,,1.6464414562151526,84000029,USA,22008.32335629844, Montana,US,2020-10-05 04:30:35,46.9219,-110.4544,14635,187,9597.0,4851.0,30.0,1369.3208505414595,357413.0,,1.2777587974034847,84000030,USA,33441.27592446701, Nebraska,US,2020-10-05 04:30:35,41.1254,-98.2681,47807,501,34395.0,12911.0,31.0,2471.402103382533,473353.0,,1.0479636873261238,84000031,USA,24470.17382062109, Nevada,US,2020-10-05 04:30:35,38.3135,-117.0554,82100,1623,2231.0,78246.0,32.0,2665.449412302494,713389.0,,1.9768574908647991,84000032,USA,23160.80743962319, New Hampshire,US,2020-10-05 04:30:35,43.4525,-71.5639,8645,443,7655.0,547.0,33.0,635.7968715410848,461049.0,,5.12434933487565,84000033,USA,33907.86718648301, New Jersey,US,2020-10-05 04:30:35,40.2989,-74.521,208202,16136,35031.0,157035.0,34.0,2344.03902641128,3734094.0,,7.750165704460093,84000034,USA,42040.24007592721, New Mexico,US,2020-10-05 04:30:35,34.8405,-106.2485,30477,892,17210.0,12375.0,35.0,1453.480469795105,941512.0,,2.9267972569478617,84000035,USA,44901.70633847586, New York,US,2020-10-05 04:30:35,42.1657,-74.9481,464582,33205,77090.0,354287.0,36.0,2388.159165306547,11220620.0,,7.147285086378722,84000036,USA,57679.00283140963, North Carolina,US,2020-10-05 04:30:35,35.6301,-79.8064,217496,3634,184422.0,29440.0,37.0,2073.7438792442927,3160968.0,,1.6708353257071396,84000037,USA,30138.660216680186, North Dakota,US,2020-10-05 04:30:35,47.5289,-99.784,23550,274,19497.0,3779.0,38.0,3090.2997393912838,638320.0,,1.1634819532908705,84000038,USA,83762.21357317384, Northern Mariana Islands,US,2020-10-05 04:30:35,15.0979,145.6739,73,2,29.0,42.0,69.0,132.38067604816482,15185.0,,2.7397260273972597,580,MNP,27536.99405193675, Ohio,US,2020-10-05 04:30:35,40.3888,-82.7649,158907,4925,137038.0,16944.0,39.0,1359.445979587821,3356675.0,,3.0992970731308254,84000039,USA,28716.28269071186, Oklahoma,US,2020-10-05 04:30:35,35.5653,-96.9289,90748,1051,77606.0,12091.0,40.0,2293.370358286679,1248391.0,,1.1581522457795212,84000040,USA,31549.157170977494, Oregon,US,2020-10-05 04:30:35,44.572,-122.0709,34770,572,5752.0,28446.0,41.0,824.375725655725,705436.0,,1.645096347425942,84000041,USA,16725.46201908749, Pennsylvania,US,2020-10-05 04:30:35,40.5908,-77.2098,168126,8195,134098.0,25833.0,42.0,1313.280303552831,2095170.0,,4.874320450138587,84000042,USA,16365.972506303513, Puerto Rico,US,2020-10-05 04:30:35,18.2208,-66.5901,50675,686,,49989.0,72.0,1727.5128451275787,356647.0,,1.3537247163295512,630,PRI,12158.110975356989, Rhode Island,US,2020-10-05 04:30:35,41.6809,-71.5118,25076,1118,2346.0,21612.0,44.0,2367.0873290596883,797014.0,,4.45844632317754,84000044,USA,75235.35414273321, South Carolina,US,2020-10-05 04:30:35,33.8569,-80.945,151582,3453,73973.0,74156.0,45.0,2944.074967069447,1378086.0,,2.277974957448773,84000045,USA,26765.635069261956, South Dakota,US,2020-10-05 04:30:35,44.2998,-99.4388,24418,248,19902.0,4268.0,46.0,2760.1595643066994,199775.0,,1.0156441969039234,84000046,USA,22582.147471511627, Tennessee,US,2020-10-05 04:30:35,35.7478,-86.6923,201210,2577,184404.0,14229.0,47.0,2946.3299661130322,2970388.0,,1.280751453705084,84000047,USA,43495.56769237392, Texas,US,2020-10-05 04:30:35,31.0545,-97.5635,790194,16320,680083.0,93791.0,48.0,2725.1939680673954,6537885.0,,2.065315606041048,84000048,USA,22547.63357595515, Utah,US,2020-10-05 04:30:35,40.15,-111.8624,77618,478,57392.0,19748.0,49.0,2421.0547985968624,860894.0,,0.6158365327630189,84000049,USA,26852.940681069435, Vermont,US,2020-10-05 04:30:35,44.0459,-72.7107,1785,58,1622.0,105.0,50.0,286.0627350802658,166520.0,,3.249299719887955,84000050,USA,26686.36786866435, Virgin Islands,US,2020-10-05 04:30:35,18.3358,-64.8963,1327,20,1265.0,42.0,78.0,1237.088414065705,21239.0,,1.5071590052750563,850,VIR,19799.940336353804, Virginia,US,2020-10-05 04:30:35,37.7693,-78.17,151642,3270,17848.0,130524.0,51.0,1776.5996420369986,2113878.0,,2.1563946663853018,84000051,USA,24765.664513194806, Washington,US,2020-10-05 04:30:35,47.4009,-121.4905,89874,2142,,87732.0,53.0,1180.239827401383,1922956.0,,2.383336671339876,84000053,USA,25252.567567265884, West Virginia,US,2020-10-05 04:30:35,38.4912,-80.9545,16635,364,11982.0,4289.0,54.0,928.2162679735536,590079.0,,2.1881574992485717,84000054,USA,32925.81467926459, Wisconsin,US,2020-10-05 04:30:35,44.2685,-89.6165,132663,1377,107004.0,24282.0,55.0,2278.480099559737,1605641.0,,1.0379683860609212,84000055,USA,27576.800355315318, Wyoming,US,2020-10-05 04:30:35,42.756,-107.3025,6504,53,5160.0,1291.0,56.0,1123.7838202084115,103568.0,,0.8148831488314883,84000056,USA,17894.840512199382`34:[] 31:{"id":"cbff846c87e6d65b","slug":"part1-using-vega-lite-api","title":"Part1: Using Vega-Lite API","thumbnail":"635f15dcab70e8602e7e4a9fd677160b9d3fa67eb8f3d59395051b67b023cbe4","access_level":"public","create_time":"$D2020-10-06T04:05:39.325Z","update_time":"$D2020-10-06T18:42:28.676Z","view_time":null,"first_public_time":"$D2020-10-06T04:46:01.355Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"92032f850a4679ab","login":"bulbil","name":"Nabil Kashyap","avatar_url":"https://avatars-next.observableusercontent.com/d9e8d262f1076187594d379710a3a83a646393d004ed9faaffc35a85a0f4f9ce","tier":"starter_2024"},"version":170,"publish_version":170,"role":null,"authored":false,"authors":[{"type":"individual","id":"72aca3ddc200afbc","login":"bulbil","name":"Nabil Kashyap","avatar_url":"https://avatars-next.observableusercontent.com/d9e8d262f1076187594d379710a3a83a646393d004ed9faaffc35a85a0f4f9ce","tier":null}],"members":[{"type":"individual","id":"72aca3ddc200afbc","login":"bulbil","name":"Nabil Kashyap","avatar_url":"https://avatars-next.observableusercontent.com/d9e8d262f1076187594d379710a3a83a646393d004ed9faaffc35a85a0f4f9ce","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"9d3ffac228713fa7","slug":"computational-essays","title":"Computational Essays","owner":{"id":"92032f850a4679ab","login":"bulbil","name":"Nabil Kashyap"}},"type":"notebook","body":{"title":"Part1: Using Vega-Lite API","cells":[{"id":0,"value":"md`# Part1: Using Vega-Lite API`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"md`Getting comfortable with the basics of Vega-Lite API in Observable. Vega-Lite is a powerful visualization grammar built for exploratory visualization. While the details can get, well, detailed, the pattern is relatively simple. This notebook is intended to help us get acquainted with that pattern.\n\nWe are going to create a chart using Vega-Lite (we'll talk more about just what that is). This once, I ask that you create a new notebook rather than forking this one. Then add cells one at a time, just to get the feel of it. If you run into issues (err, when you run into issues) please post questions to Slack.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"md`### Loading our dependencies\n\nWe need two things to get started:\n\n- \\`vl\\` Vega-Lite and the Vega-Lite API\n- \\`d3-dsv\\` Parsing function from D3 visualization library\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"md`Load the following dependencies into your notebook.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"d3 = require(\"d3-dsv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"md`### Loading the data\n\nIn this case rather US COVID-19 data from October 4, 2020 courtesy of [COVID-19 Data Repository by the Center for Systems Science and Engineering (CSSE) at Johns Hopkins University](https://github.com/CSSEGISandData/COVID-19). You will need to copy the following cell exactly. Data will be in your notebook [in the form of a string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"md`Copy the following data into your notebook.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"md`What are the columns in this data? [Check this page out for descriptions of each column.](https://github.com/CSSEGISandData/COVID-19/tree/master/csse_covid_19_data)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"md`### Parsing the data\n\nIn other words turning it into a form the computer can reuse.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"md`Copy the following parsing command into your notebook.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"parsedData = d3.csvParse(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"md`### Where the magic happens`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"md`Type the following code in a new cell and see what happens.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`\n\\`\\`\\`\n\nvl.markBar()\n .data(parsedData)\n .encode(\n vl.x().fieldN(\"CHOOSE A COLUMN\"),\n vl.y().fieldQ(\"CHOOSE A COLUMN\"),\n vl.color().fieldN(\"Province_State\")\n )\n .render()\n\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"md`## On closer inspection each Vega-Lite chart:\n\n1) Invokes a Vega-Lite instance\n\n>> \\`vl\\`\n\n2) Selects a chart\n\n>> \\`vl.markBar()\\`\n\n3) Adds data to the chart\n\n>> \\`.data(parsedData)\\`\n\n4) Maps columns to axes and groupings\n\n>> \\`\\`\\`\n .encode(\n vl.x().fieldN(\"CHOOSE A COLUMN\"),\n vl.y().fieldQ(\"CHOOSE A COLUMN\"),\n vl.color().fieldN(\"Province_State\")\n )\n\\`\\`\\`\n\n4) Draws the chart\n\n>>\\`.render()\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"md`Check out the [Vega-Lite Chart Types](https://observablehq.com/@observablehq/vega-lite-chart-types?collection=@observablehq/observable-for-vega-lite) and [Vega-Lite API Reference](https://vega.github.io/vega-lite-api/api/). Now choose a different chart type (i.e., change out .markBar() for a different chart) and chart different columns on the *x* and *y* axes. What do you notice? Where do you get stuck?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"noticecss = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"