2d:null 2e:["$","title",null,{"children":"Part 2: Using Vega-Lite API | Nabil Kashyap | Observable"}] 33:T455,md` A (very) basic example of using the visualization library [Vega-Lite](https://vega.github.io/vega-lite/). The data here is from the National UFO Reporting Center -- [a cleaned up subset of ~80,000 sightings](https://github.com/planetsig/ufo-reports). Regardless of the library you are using, the first step in Observable is ***loading*** and ***parsing*** the data. ***Loading*** here refers to **(a)** [attaching a file to your notebook](https://observablehq.com/@observablehq/file-attachments) and **(b)** associating the contents of your file to a variable that you can do stuff with. ***Parsing*** refers to reading and making sense of the file contents. In this case we are using the \`.text()\` method to get the text inside the file. In the Vega-Lite, we are using the built in \`.csv\` parser to interpret that text. ### Further Resources: - [Vega-Lite API Reference](https://vega.github.io/vega-lite-api/api/) - [Exploring Data with Vega-Lite @mbostock](https://observablehq.com/@mbostock/exploring-data-with-vega-lite) - [Vega-Lite Documentation](https://vega.github.io/vega-lite/docs/) `34:T7b4,md`## 3) Explore the data ![screenshot of file size](https://bulbil.static.observableusercontent.com/files/d25df331cdbf7e4f6dab43fbc8097eaaca88c9dfd335fd4ac18910de85ca4a176d98029d134d20d8852225e162ecc038d65829ef0e293d957c873f9a48daeb67?response-content-disposition=attachment%3Bfilename*%3DUTF-8%27%27Screen%2520Shot%25202020-10-05%2520at%25203.18.33%2520PM.png&Expires=1601985600000&Key-Pair-Id=APKAJCHFJLLLU4Y2WVSQ&Signature=RrpxtNgkUcS1Jvijaw7KoxbOqPJ01gjrw8KGO2v~ph3ecnpIx-lxJs8mlfrnOSFfDQIXbnVk1r9VGrPGjCd46PR357vs7ikodM7iXnrgXc5bHnOzwK6qvuGQAURWaTPgVo5UjVdo3wfB2Zg~uAYozfoUUL9AbQXawZz5ecFY3TAby-1YOBBzoxV7rBy4EMsHHZGR070xHrrbRA3hwaNsE~iEbAYn854TepPcC1ALhI-abq7Zgz5Qv0bmI-9eSaTcGiogaM98dG2Hj9mEjRgvYRFUYmze1Il~Die~lWEJhFt-0A2crAV1RTobVPQJLu4bsdfiWK-3MEuWUpVObi1GMw__) 1. First we have to ***parse*** the data, in this case using the function \`d3.csvParse()\` 2. Next we are going to load the parsed data into the helper utility we loaded above. Note that the data is *looooong* so we're only going to load the first 100 rows using the helper \`.slice(0,99)\` >> **What does parsing mean?** In our example, parsing simply mean reading the raw text and turning into something the computer can use. \`d3.csvParse()\` converts a long string of text characters and turns it into an "Array" of row "Objects". Here's another way of looking at the first row "Object" in a format called [JSON](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON): --- \`\`\` Array(5) [ 0: Object { date: "1949/10/10" time: "20:30" city: "san marcos" state: "tx" country: "us" shape: "cylinder" duration-seconds: "2700" duration-hours-min: "45 minutes" comments: "This event took place in early fall around 1949-50…ing in the Baptist Church. The Baptist Church sit" date posted: "4/27/2004" latitude: "29.8830556" longitude: "-97.9411111" } ] \`\`\` `35:T436,md`## 4) Call the visualization In Vega-Lite, every feature of the graph is set by updating the parameters. These parameters appear below and are set by helper methods for setting parameters. What this means is that you have fine grained control over customizable visualizations but don't need any programming. ![vega-lite api documentation screenshot](https://bulbil.static.observableusercontent.com/files/aee32d243cd51b5f761b073d5614809e66c03205332dc3604868bea96c5dfdfbb1f329018bb1133e2b85d82f08e9e2154754b855e9160ebb1be3358e3dea4253?response-content-disposition=attachment%3Bfilename*%3DUTF-8%27%27Screen%2520Shot%25202020-10-05%2520at%252010.56.58%2520PM.png&Expires=1602028800000&Key-Pair-Id=APKAJCHFJLLLU4Y2WVSQ&Signature=LtV2H1uZDwyg9ZNODf8UxSTqzXu9j7YoXg9MMg5ttTFaRBYfmIL3HclBfjCJJjiEsaOu8dbomNlo8MY6UscagYIGuHl-lyUqnb1WSocdyZ76iJ9rFeba01KqVdq29WABGKTDF1uBjYH94uk6OzzEHtnmnb4tkaZCdeRb93XM3TW84ajqcEvsYf0ImtMwNnN3MY6nAGZ7yA-MT~jV9dAmdLZNyyzw19qhGmSH9hTaCv54fwCzQzy3ycWF8HrCKaNsl3UGUPtUgP8~rKXK6V2zdnYmSKAh-kMP8PFl5EgLAF44EWsqI-zjFf7loPYrV6KEeSwsJegdzfGu7ekg0Z1OyQ__) `36:T4c5,md`## 5) Making the chart interactive While there are some drawbacks, one of the best features of Observable is how easy interactivity is. You can make a variable and set it equal to HTML or Markdown if you want to. When you update the HTML, every reference to that variable is updated, too. - Use \`viewof\` syntax (example below) to set a variable equal to some HTML. - add a [filter transform](https://vega.github.io/vega-lite/docs/filter.html) to your Vega-Lite chart, after the \`markLine\` section -- choose which field you'd like to compare plus how you'd like to filter whether \`equal\`, \`gt\` (greater than), \`lt\` (less than), \`gte\` (greater than or equal to), \`lte\` (less than or equal to). - set the filter equal to your \`viewof\` variable Below you'll see two patterns -- writing an HTML element and setting it equal to a variable and importing a helper select function. --- >>**How to set up a filter?** Filtering is incredibly flexible. You can use Vega-Lite's syntax to avoid programming or you can use regular Javascript. Look more closely at the above example for a couple of ideas of how you might pattern a filter. Some are require programming, some do not, according to yoru preference. `37:[{"id":"fe6d100a95e9ca6a91c7cd74c46c7ec46ce8e1d0bf18ccff4759c6b42165d5a2d4cf24bcfb72a0aaf12d53c7eba7a063710866045f743f07acdee85f4a855705","href":"https://static.observableusercontent.com/files/fe6d100a95e9ca6a91c7cd74c46c7ec46ce8e1d0bf18ccff4759c6b42165d5a2d4cf24bcfb72a0aaf12d53c7eba7a063710866045f743f07acdee85f4a855705","name":"ufo-scrubbed-geocoded-time-standardized@1.csv","type":"application/octet-stream","lastModified":1601916542625.491,"size":14015000}] 31:{"id":"a0c415d0f4b13ae6","slug":"using-vega-lite-api","title":"Part 2: Using Vega-Lite API","thumbnail":"fcacae2e1c27bfdd6fb8bc4378f6c12cfe97a4711942db7b00aa24172b78ebcc","access_level":"public","create_time":"$D2020-10-05T16:49:02.625Z","update_time":"$D2020-12-07T20:25:05.323Z","view_time":null,"first_public_time":"$D2020-10-06T04:01:06.411Z","has_unpublished_edits":null,"fork":{"id":"f8a67f0ac6391b5f","slug":"using-vega-lite","title":"Using Vega-Lite","owner":{"id":"92032f850a4679ab","login":"bulbil","name":"Nabil Kashyap"}},"stars":1,"starred":false,"owner":{"type":"team","id":"92032f850a4679ab","login":"bulbil","name":"Nabil Kashyap","avatar_url":"https://avatars-next.observableusercontent.com/d9e8d262f1076187594d379710a3a83a646393d004ed9faaffc35a85a0f4f9ce","tier":"starter_2024"},"version":886,"publish_version":886,"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":8,"collection":{"id":"9d3ffac228713fa7","slug":"computational-essays","title":"Computational Essays","owner":{"id":"92032f850a4679ab","login":"bulbil","name":"Nabil Kashyap"}},"type":"notebook","body":{"title":"Part 2: Using Vega-Lite API","cells":[{"id":0,"value":"md`# Part 2: Using Vega-Lite API`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":803,"value":"md`Checkout [Vega-Lite API Reference](https://vega.github.io/vega-lite-api/api/) for full documentation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`## 1) Load Resources\n\nHere we load the resources we are going to use for this example, including Vega-Lite API (Observable helper for a dataviz software library), D3 (dataviz software library), and some helpers, including \"tables\" and \"inputs.\"\n\nNow you have access to all things Vega-Lite through \\`vl\\` created below. Also added are references to @jashkenas \\`inputs\\` and @tmcw \\`tables\\` utilities. Note that in most Observable notebooks you'll see these loaded at the end of the notebook, which is just an aesthetic preference.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"import { table } from \"@tmcw/tables/2\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"import { select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"md`## 2) Load the data\n\nWhatever environment we're using, step one is to load the data, which is not always so easy. Here use Observable's \\`FileAttachment\\` feature to load the data. Don't forget we only want the text part of it, hence \\`.text()\\`.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"data = await FileAttachment(\n \"ufo-scrubbed-geocoded-time-standardized@1.csv\"\n).text()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":823,"value":"md`How would you increase or decrease the number of rows being parsed? What happens when you do?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"parsedData = await d3.csvParse(data).slice(0, 20000)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"table(parsedData)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"md`## Currently Selected Shape: ***${shape}***`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":837,"value":"md`Choose different columns to visualize, whether on the x or y axes or categories (or different lines) being displayed.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"vl\n .markLine({ interpolate: \"monotone\" })\n .title('UFO Sightings')\n .height(500)\n .width(750)\n .params({ interpolate: 'monotone' })\n .data(parsedData)\n .transform(vl.filter({ field: \"shape\", equal: shape }))\n // .data(parsedData.filter(row => (shape == \"all\" ? row : row.shape == shape)))\n //\n // .data(\n // parsedData.filter(function(row) {\n // if (shape == \"all\") {\n // return row;\n // } else {\n // if (row.shape == shape) {\n // return row;\n // }\n // }\n // })\n .encode(\n vl\n .x()\n .fieldT(\"date\")\n .timeUnit(\"day\"),\n vl.y().aggregate(\"count\"),\n vl.color().fieldN(\"country\")\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":842,"value":"md`Make the \"Stooges\" selector below actually apply to the chart above. What do you have to modify?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"shape = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"viewof fancyShape = select({\n title: \"Stooges\",\n description: \"Please pick your favorite stooge.\",\n options: [\"Curly\", \"Larry\", \"Moe\", \"Shemp\"],\n value: \"Moe\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"md`### Current Scale Factor: ___${scale}___`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"viewof scale = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":698,"value":"md`## 6) Map it!\n\nBelow is one pattern for adding a map layer, adding a data layer (longitude/latitude), then adding a projection.\n\nThis is different from above because we encapsulate the \\`mark\\` section within a \\`layer\\`. Then some parameters are set on all the layers, including height, width, and map projection settings.\n\nWhat makes sense about the syntax below? What is perhaps still a little confusing?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":847,"value":"md`Change to color and rotation of the map below. Add or modify an interactive element to update the map display dynamically.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"vl\n .layer(\n vl\n .markGeoshape()\n .data(\n vl\n .topojson(\"https://unpkg.com/world-atlas@2/countries-110m.json\")\n .feature(\"countries\")\n )\n .encode(\n vl.stroke().value(\"#fff\"),\n vl.color().value(\"#000\"),\n vl.fill().value(\"#dfd\")\n ),\n vl\n .markCircle()\n .data(parsedData)\n .encode(\n vl.longitude().fieldQ(\"longitude\"),\n vl.latitude().fieldQ(\"latitude\"),\n vl.color().fieldN(\"country\")\n )\n )\n .project(\n vl\n .projection()\n .type(\"orthographic\")\n .scale(scale)\n .rotate([-45, -45, 0])\n )\n .width(750)\n .height(750)\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"noticecss = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"