2d:null 2e:["$","title",null,{"children":"ObservableHQ & Vegalite Intro + Loading & modifying Dataset | ic-dataviz | Observable"}] 33:T48e,md`Vega-Lite is a high-level grammar of interactive graphics. It provides a concise, declarative JSON syntax to create an expressive range of visualizations for data analysis and presentation. By *declarative*, it means that you can provide a high-level specification of *what* you want the visualization to include, in terms of *data*, *graphical marks*, and *encoding channels*, rather than having to specify *how* to implement the visualization in terms of for-loops, low-level drawing commands, *etc*. The key idea is that you declare links between data fields and visual encoding channels, such as the x-axis, y-axis, color, *etc*. The rest of the plot details are handled automatically. Building on this declarative plotting idea, a surprising range of simple to sophisticated visualizations can be created using a concise grammar. To learn more about the motivation and basic concepts behind Vega-Lite, watch the ${tb`[Vega-Lite presentation video from OpenVisConf 2017](https://www.youtube.com/watch?v=9uaHRWj04D4)`}.
You can refer to ${tb`[vega-lite-homepage](https://vega.github.io/vega-lite/)`} to learn about vegalite and study many examples.
`34:[{"id":"321e5679e611639e74c35f901251845cb4ea951fd2d5d6d52e6f53bddbdfcc90c42293cba6ded42eca81ddd7c266ed4ad249fe6f65d0f9f94ca0c201a6c0235c","href":"https://static.observableusercontent.com/files/321e5679e611639e74c35f901251845cb4ea951fd2d5d6d52e6f53bddbdfcc90c42293cba6ded42eca81ddd7c266ed4ad249fe6f65d0f9f94ca0c201a6c0235c","name":"Screen Shot 2021-07-21 at 7.12.06 AM.png","type":"image/png","lastModified":1629688719262.34,"size":25272},{"id":"8e990a7d52742f30caeed77c92cc558588a186787eb4face5adf94c9753906f19e99dc7953a02a0bed56b44ce1e8f84dd1f795e1275517bfb2b80573aa529348","href":"https://static.observableusercontent.com/files/8e990a7d52742f30caeed77c92cc558588a186787eb4face5adf94c9753906f19e99dc7953a02a0bed56b44ce1e8f84dd1f795e1275517bfb2b80573aa529348","name":"Screen Shot 2021-07-21 at 6@1.58.39 AM.png","type":"image/png","lastModified":1629688719262.34,"size":7463},{"id":"eda9247c882ad14346b70d9604e9811071db3ac736e35942f5af55afcf3d685b66f20b71a6d63f1627a01b9b58b99ffedd20d00d138028ed3ee13bf4fe103d9c","href":"https://static.observableusercontent.com/files/eda9247c882ad14346b70d9604e9811071db3ac736e35942f5af55afcf3d685b66f20b71a6d63f1627a01b9b58b99ffedd20d00d138028ed3ee13bf4fe103d9c","name":"Screenshot (514)@1.png","type":"image/png","lastModified":1629688719262.34,"size":1978},{"id":"09c49eb29195b1ec06a8660f74f353999eecaf2a501835e9fe4ad5bfef6047b3371f3a768b23526cfb510c6551ea7a5fde54f09f35e4a59cfe5d7e9eea6b451f","href":"https://static.observableusercontent.com/files/09c49eb29195b1ec06a8660f74f353999eecaf2a501835e9fe4ad5bfef6047b3371f3a768b23526cfb510c6551ea7a5fde54f09f35e4a59cfe5d7e9eea6b451f","name":"Screen Shot 2021-07-19 at 3.02.39 PM.png","type":"image/png","lastModified":1629688719262.34,"size":14542},{"id":"b3d655026426fdae26f8d632e0d5623a2d47a3af314da5dba0d078582c47644b44223c12c967493d7f1af54f91c1e6b6037587bc15c829dc012c7fd0a0ed1468","href":"https://static.observableusercontent.com/files/b3d655026426fdae26f8d632e0d5623a2d47a3af314da5dba0d078582c47644b44223c12c967493d7f1af54f91c1e6b6037587bc15c829dc012c7fd0a0ed1468","name":"Screen Shot 2021-07-19 at 11@1.43.26 AM.png","type":"image/png","lastModified":1629688719262.34,"size":7949},{"id":"e70c788491fcdd11616f56d2d36678ad4b563f0dc174d9dc8fd52e3bf3bd699b85a4e2577893556da30a8bb4d0781cdd8bd1458e75d29cc6318ccd6c2e676b4b","href":"https://static.observableusercontent.com/files/e70c788491fcdd11616f56d2d36678ad4b563f0dc174d9dc8fd52e3bf3bd699b85a4e2577893556da30a8bb4d0781cdd8bd1458e75d29cc6318ccd6c2e676b4b","name":"diamonds@2.csv","type":"text/csv","lastModified":1629688719262.34,"size":3192560},{"id":"1653266afd164cea988075724a4bedd6ce9ef8af404cfb1a3cd07213bc8698d47c67029eb0a4da31ccd9e50efe917ebc23cb99f96bfad6ddce89c241a6c8c65b","href":"https://static.observableusercontent.com/files/1653266afd164cea988075724a4bedd6ce9ef8af404cfb1a3cd07213bc8698d47c67029eb0a4da31ccd9e50efe917ebc23cb99f96bfad6ddce89c241a6c8c65b","name":"module.gif","type":"image/gif","lastModified":1629688719262.34,"size":99483}] 31:{"id":"382dd513117795a3","slug":"observablehq-vegalite-intro","title":"ObservableHQ & Vegalite Intro + Loading & modifying Dataset","thumbnail":"987f5575bc4effcce0014afb584ff6398845d68489b4145314e2b0c3c24774ad","access_level":"public","create_time":"$D2021-08-23T03:18:39.262Z","update_time":"$D2021-08-26T06:59:01.850Z","view_time":null,"first_public_time":"$D2021-09-12T05:30:02.568Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"c91d625c69468941","login":"ic-dataviz","name":"","avatar_url":"https://avatars-next.observableusercontent.com/bd3217ad4660055b3e7ebbb5b5c74dbc9606b95c9dc87684e7216c3036ab5ac8","tier":"starter_2024"},"version":5345,"publish_version":5345,"role":null,"authored":false,"authors":[{"type":"individual","id":"1093b9e42c8891e7","login":"ic-dataviz","name":"","avatar_url":"https://avatars-next.observableusercontent.com/bd3217ad4660055b3e7ebbb5b5c74dbc9606b95c9dc87684e7216c3036ab5ac8","tier":null}],"members":[{"type":"individual","id":"1093b9e42c8891e7","login":"ic-dataviz","name":"","avatar_url":"https://avatars-next.observableusercontent.com/bd3217ad4660055b3e7ebbb5b5c74dbc9606b95c9dc87684e7216c3036ab5ac8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"ObservableHQ & Vegalite Intro + Loading & modifying Dataset","cells":[{"id":307,"value":"md`\n# **ObservableHQ & Vegalite Intro + Loading & modifying Dataset**\n#### *This material was prepared by Bibek KC, Yugyeong Jung*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"md`---\n## Learning Objectives\n\nWe are going to learn the following items: \n\n* Observable environments\n* Getting data from various external sources and modifying it\n* Vegalite Library\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"md`---\n# **Observable Notebook Introduction**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2094,"value":"md`If you are not familiar with notebook, firstly have a look at ${tb`[introduction-to-notebooks](https://observablehq.com/@bibekyess/introduction-to-notebook)`}.
\nThen go through ${tb`[a-minimal-introduction-to-javascript-and-observable](https://observablehq.com/@uwdata/a-minimal-introduction-to-javascript-and-observable)`} to get started with writing javascript on observable.
\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3323,"value":"md`Firstly, sign up for the Observable. Click Sign in in the top right to join Observable using your GitHub account, and then click **+ New** in the top right to create a new notebook. You can also click **Publish** to make your notebook public.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2089,"value":"md`Observable has two types of editor modes. \"Classic\" and \"Next\". It is recommended to use \"Next\". Most of the description in this notebook is for the \"Next\" editor. To compare the features of them, go ${tb`[classic-vs-next-infobox](https://observablehq.com/@observablehq/classic-vs-next-infobox)`}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2454,"value":"md`If you love to use shorcut keys (which are different based on your OS), you can see a list of available shortcuts by clicking on the ${questionMark} sign, located on your top right.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2344,"value":"md`Note that, when you are working on others notebooks, you need to fork it to save your work. Otherwise, all of your edits will be lost. You can click on the ${forkMark} sign located at the top right of the notebook.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2432,"value":"md`Observable stores your edit history and allows you to restore to previous versions or compare them with the current versions. Located on the top right, you can click on this sign ${clockMark} to track it.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2399,"value":"md`To learn more on using observable notebooks, have a look at ${tb`[user-manual](https://observablehq.com/@observablehq/user-manual)`}.` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4240,"value":"md`Throughout the notebook, while creating a formatted text, I am using markdown source instead of html source. For details, you can have a look at ${tb`[Markdown-cheatsheet](https://observablehq.com/@ajlimbert/github-flavored-markdown-cheatsheet-observable)`} and compare with html.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"md`---\n# **How to get data from various sources?**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"md`There are various types of data. But, in this tutorial, we will learn how to read CSV and JSON and handle these data types. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1451,"value":"md`For more information on using file attachments and knowing how files work, go ${tb`[here](https://observablehq.com/@observablehq/file-attachments)`}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1829,"value":"md`### Make sure that you are writing on javascript in observable.
\n### Observable provides easy way of uploading local files.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2220,"value":"FileAttachment(\"module.gif\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"dataSample = FileAttachment(\"diamonds@2.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1809,"value":"md`While parsing, you might find a numerical value inside double or single quotation, if you want your file to be well-typed, simply use {typed: true}. It converts strings into more specific types such as numbers or dates. For instance, you can compare the values of depth, table and price of *data* and *dataSample*.
\nNote that in ..${arraySign}.. You can click on ${arrows} to explore the data contents.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1818,"value":"data = FileAttachment(\"diamonds@2.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1834,"value":"md`---\n## Fetching data from online links:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":831,"value":"url = \"https://api.github.com/users/joelgrus/repos\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":852,"value":"url2 = \"https://raw.githubusercontent.com/codeforamerica/ohana-api/master/data/sample-csv/addresses.csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":834,"value":"md`There are many ways of fetching online datas. Using d3-library, it is very easy to fetch online json and csv datas using d3.json(url) or d3.csv(url), so most commonly we will be using it.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":847,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":846,"value":"data3 = d3.json(url)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":858,"value":"data4 = d3.csv(url2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2322,"value":"md` You can use javascript standard method of fetch(url) too and wait for the promise. To learn more about fetching datas, have a look at this short video: ${tb`[Getting-data-into-a-notebook](https://www.youtube.com/watch?v=DqrQ20Hc3mk&t=544s)`}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1105,"value":"md`---\n## Observing and describing data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1252,"value":"md`For more reference on learning data handling, please reference to ${tb`[Learn-JS-data](https://observablehq.com/@dakoop/iterating-over-and-reducing-data-learn-js-data)`}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1107,"value":"md`** Lets display the first five data entries:**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1203,"value":"firstFive = data.slice(0,5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4976,"value":"md`**Displays the last five data entries:**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4978,"value":"lastFive = data.slice(data.length-5, data.length)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1391,"value":"md`**Thing to note:** After firstFive is defined, doing 'firstFive[0].carat = 0' not only changes the value of carat in *firstFive* but it also changes the value in original data \"*data* in this example\".`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1303,"value":"md`#### We need to make sure the data are immutable. When we iterate any dataset, we may perform any manipulations which may modify the original dataset. So, the safe way is to create a copy of our data objects and work on that copy. We can use javascript's map to produce another copy of the data elements.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1368,"value":"data2 = firstFive.map(function(d,i){ //Here 'd' represents each row entry of firstFive dataset\n return{\n \"\": d[\"\"],\n carat: d.carat,\n cut: d.cut,\n color: d.color,\n clarity: d.clarity,\n depth: d.depth,\n table: d.table,\n price: d.price,\n x: d.x,\n y: d.y,\n z: d.z\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1883,"value":"md`> Map is very useful as we can produce new data of our wish, using the values of any existing data.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1441,"value":"md`**Think about: what if we have directly returned *'d'* instead of returning a new object in above map function? Does it create a new copy doing that?**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1750,"value":"md`### Another shortcut of creating a copy quickly:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1737,"value":"copyData = JSON.parse(JSON.stringify(firstFive))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3432,"value":"md`---\n### Lets print the first five rows of diamond dataset:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1164,"value":"printTable(firstFive)\n// Or, can directly do: printTable(data.slice(0, 5))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1169,"value":"md`Here, we are using printTable to print an array of data objects as a HTML-formatted table. You can reference ${tb`[here](https://observablehq.com/@uwdata/data-utilities)`} to learn more about using printTable and mdTable.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2004,"value":"import {printTable} from '@uwdata/data-utilities'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1177,"value":"md`** Counts the number of rows and columns in the DataFrame:**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":865,"value":"md`>Number of rows = ${data.length}
\n Number of columns = ${Object.keys(data[0]).length}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1199,"value":"md`---\n### Looping through or iterating our dataset`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1242,"value":"md`\nCommon ways of iterating our dataset are:\n\\`\\`\\`\n for (const values in data2){\n console.log(data2[values]); //can print in console and checking console output is helpful to debug\n ...\n }\nOr,\n data2.forEach(function(d) {\n console.log(d);\n ...\n })\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2424,"value":"md`For the examples of iterating and displaying results on the obserable cells, go to ${tb`[printing-directly-in-observable-cells](https://observablehq.com/@bibekyess/printing-directly-in-observable-cells)`}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1274,"value":"md`---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1277,"value":"md`### Displaying only the selected fields:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1279,"value":"printTable(data.slice(0,6), [{field: 'cut', title: 'cut'}, {field: 'color', title: 'color'}, {field: 'clarity', title: 'clarity'}])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1285,"value":"md `### Displaying only the selected rows:
\n>Selects the top 5 entries with ideal cuts`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1283,"value":"printTable(data.filter(d => d.cut === 'Ideal').slice(0,5)) //It means it takes (d) as an argument and returns (d.cut === 'Ideal')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3461,"value":"md`Note that, the above one is similar to this one:
\n**printTable(data.filter(function(d) {return d.cut === 'Ideal'}).slice(0,5))**
\nBut the arrow method of writing functions is more nicer and takes less space. To learn more, you can refer ${tb`[Arrow_functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)`}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5107,"value":"// printTable(data.filter(function(d) {return d.cut === 'Ideal'}).slice(0,5))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1289,"value":"md`### Adding new column to the data field and rounds off the value to 2 dp.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1291,"value":"{\n for (const i in copyData){\n copyData[i].price_per_carat = parseFloat(copyData[i].price/copyData[i].carat).toFixed(2);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1793,"value":"printTable(copyData)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1295,"value":"md`---\n### Sorting the entries based on properties of any objects:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5171,"value":"md`Sorts by the increasing order of carat:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":871,"value":" printTable(data.slice(0,6).sort((a,b) => (a.carat-b.carat))) //OR, printTable(data.slice(0, 6).sort(function(a,b) {return a.carat-b.carat}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5157,"value":"md`Sorts based on the cut type in the following order: [\"Ideal\", \"Good\", \"Very Good\", \"Premium\"]`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5160,"value":"order = [\"Ideal\", \"Good\", \"Very Good\", \"Premium\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5163,"value":"printTable(\n data.slice(0,6).sort((a,b) => {\n return (\n order.indexOf(a.cut) - order.indexOf(b.cut)\n );\n})\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":895,"value":"md`To sort an array based on any objects, we need to use the sort property and provide the comparison function that determines the order of objects.
\nYou can reference here to learn more about ${tb`[sorting-an-array-of-objects](https://www.javascripttutorial.net/array/javascript-sort-an-array-of-objects/)`}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1866,"value":"md`#### Returns an array of colums' headers:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1864,"value":"keys = Object.keys(data[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1461,"value":"md`### We can quickly generate an array of data objects from a given input column vectors. For that, we need to import the shell named fromColumns from *uwdata/data-utilities*.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1464,"value":"test = fromColumns(\n {\n day: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],\n state: ['reading', 'playing', 'writing', 'interview', 'chilling']\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":873,"value":"import {fromColumns} from '@uwdata/data-utilities'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"md`---\n# **Vegalite Introduction**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3489,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2486,"value":"md`Creating chart from scratch is a lot of work. So, we will be using vegalite, a great library for visualizations that lets you create charts with very little code. Before starting vegalite in observable, go through ${tb`[tutorial-3-visualizing-data](https://observablehq.com/@observablehq/tutorial-3-visualizing-data)`}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3497,"value":"md`**Using the VEGALITE library**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3499,"value":"md`#### 1. Imports the shell named vl from the observable notebook @vega/vega-lite-api`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3502,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3506,"value":"md`To learn Vegalite in observable using vegalite API, you can refer to ${tb`[introduction-to-vega-lite-using-api](https://observablehq.com/@uwdata/introduction-to-vega-lite)`}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3509,"value":"md`#### 2. The require function allows us to include codes from any javascript modules shared on ${tb`[NPM](http://npmjs.org/)`}. Requiring **vega-lite** allows us to execute codes using JSON syntax much like the the examples on vegalite ${tb`[homepage](https://vega.github.io/vega-lite)`}. Throughout this notebook, we will be using vegalite library in this way.` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4808,"value":"vegalite = require(\"vega-embed@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5250,"value":"md`

${next}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4258,"value":"md`---\nImports the shell 'tb' to create a 'blank-targeted' hyperlinks for markdown. It opens the link in new tab.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1136,"value":"import {tb} from \"@mariodelgadosr/target-blank\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5188,"value":"next = Inputs.button( md`

[Next](https://observablehq.com/@ic-dataviz/visualizing-amounts-and-distribution)

`) //Creates a button element","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1052,"value":"//This increases the width of the selected components written in markdown\nhtml`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2353,"value":"//This is to include the pictures inside observable\nhtml`\n

*[Next](https://observablehq.com/@ic-dataviz/visualizing-amounts-and-distribution)*

[Next](https://observablehq.com/@ic-dataviz/visualizing-amounts-and-distribution)