3f:null 40:["$","title",null,{"children":"Vega-Lite: Getting Started | Vega-Lite for Deneb in PowerBI | Observable"}] 46:[] 44:{"id":"bb7a8acdf04a7c34","slug":"vega-lite-getting-started","title":" Vega-Lite: Getting Started ","thumbnail":"869069520061870184dcb32e0cc516d0aa268e1b2858f784a66cb07658bcd0d1","access_level":"public","create_time":"$D2023-10-25T21:07:17.099Z","update_time":"$D2024-06-04T21:29:46.298Z","view_time":null,"first_public_time":"$D2023-10-25T21:07:17.099Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"0ed04f365ec32e6d","login":"pbiqueryous","name":"Vega-Lite for Deneb in PowerBI","avatar_url":"https://avatars-next.observableusercontent.com/e29cba4009f63490b2e844f375dbd2fb18aa7b45714b154178fd511fe19c1305","tier":"starter_2024","bio":"","following":false},"version":339,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"095ccf69e3466ab9","login":"pbi-queryous","name":"PBI Queryous","avatar_url":"https://avatars-next.observableusercontent.com/0e362e0326315a8b72bf30cfe2bf107a47fb597d0f8798eeb7f6330b2bbb725a","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"0ed04f365ec32e6d","login":"pbiqueryous","name":"Vega-Lite for Deneb in PowerBI","avatar_url":"https://avatars-next.observableusercontent.com/e29cba4009f63490b2e844f375dbd2fb18aa7b45714b154178fd511fe19c1305","tier":"starter_2024","role":"editor"},{"type":"individual","id":"095ccf69e3466ab9","login":"pbi-queryous","name":"PBI Queryous","avatar_url":"https://avatars-next.observableusercontent.com/0e362e0326315a8b72bf30cfe2bf107a47fb597d0f8798eeb7f6330b2bbb725a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"72f7db4eca857ca5","slug":"templates","title":"Templates","owner":{"id":"0ed04f365ec32e6d","login":"pbiqueryous","name":"Vega-Lite for Deneb in PowerBI"}},"type":"notebook","body":{"titling":"auto","title":" Vega-Lite: Getting Started ","cells":[{"id":0,"value":"# **Vega-Lite: Getting Started**
\n _Import some basic data_\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":171,"value":"md`🧙‍♂️ [GitHub Repos](https://github.com/PBIQueryous) | 🕊️ [Twitter](https://twitter.com/PBIQueryous)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"contents(\"h1, h2, h3\", undefined, true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"addNote(htl.html`Note: \nThese notebooks are for consolidating my experience to better learn and share ideas.\n\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"## Data\n### _Manual Input Data_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":153,"value":"We want to do some basic tests on data. We could import an attachment, or we can simply input a manual table using JSON. \nSee below:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":151,"value":"#### Example","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"ageData = [\n { person: \"Mary\", age: 45 },\n { person: \"Jane\", age: 52 },\n { person: \"Jamil\", age: 35 },\n { person: \"Liang\", age: 21 }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"Show the datasets data types","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"showtypes(ageData)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"Also show the dataset as a table","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"show(ageData.slice(0, 5), undefined, 200)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"Use the **_Inputs.table()_** function to display the table","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"Inputs.table(ageData.slice(0, 5), { width: 200 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"Render the table in JavaScript","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"vl\n .markBar() // select the mark type\n .data(ageData) // add the data\n .encode(\n // add the visual encodings\n vl.x().fieldN(\"person\"),\n vl.y().fieldQ(\"age\")\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"Adjust the width and height","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":51,"value":"vl\n .markBar() // select the mark type\n .data(ageData) // add the data\n .encode(\n // add the visual encodings\n vl.x().fieldN(\"person\"),\n vl.y().fieldQ(\"age\")\n )\n .width(250)\n .height(250) // set graph size\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"Render the chart adding colour","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":301,"value":"viewof currentData = vegaDataViewer(ageChart, {\n tableOptions: { paged: 10 }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"viewof ageChart = {\n const brush = vl.selectInterval(\"brush\").encodings(\"y\");\n\n const base = vl\n .markBar()\n .select(brush)\n .encode(\n vl.x().fieldN(\"person\"),\n vl.y().fieldQ(\"age\"),\n vl.color().if(brush, vl.value(\"crimson\")).value(\"gray\")\n )\n .width(300)\n .height(300);\n\n return base.data(ageData).render(); // render the code as a chart?\n // use the below line to render the above js and tidy JSON for vega-lite\n return html`

${JSON.stringify(base.toObject(), 0, 2)}

`; // prettify the string\n\n // use the below as a function to return the js code as tidy vega-lite JSON\n return printVega(base, true);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"{\n // Same code as before but store in a plot variable\n const plot = vl\n .markBar()\n .data(ageData)\n .encode(vl.x().fieldN(\"person\"), vl.y().fieldQ(\"age\"))\n .width(200)\n .height(200);\n // return plot.toObject();\n return plot.render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"{\n const brush = vl.selectInterval(\"brush\").encodings(\"y\");\n\n const base = vl\n .markBar()\n .select(brush)\n .encode(\n vl.x().count(),\n vl.y().fieldQ(\"Horsepower\"),\n vl.color().if(brush, vl.value(\"steelblue\")).value(\"gray\")\n )\n .height(400);\n\n //return base.data(data).render();\n // return html`

${JSON.stringify(base.toObject(), 0, 2)}

`; // prettify the string\n return printVega(base, true);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"VegaLite({\n $schema: \"https://vega.github.io/schema/vega-lite/v5.json\",\n mark: \"bar\", // select the mark type\n data: { values: ageData }, // add the data\n encoding: {\n // add the visual encodings\n x: { field: \"person\", type: \"nominal\" },\n y: { field: \"age\", type: \"quantitative\" }\n },\n width: 250,\n height: 250 // set graph size\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"showMe(\n `VegaLite({\n mark: \"bar\", // select the mark type\n data: { values: ageData }, // add the data\n encoding: {\n // add the visual encodings\n x: { field: \"person\", type: \"nominal\" },\n y: { field: \"age\", type: \"quantitative\" }\n },\n width: 250,\n height: 250 // set graph size\n })`\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"{\n const brush = vl.selectInterval(\"brush\").encodings(\"y\");\n\n const base = vl\n .markBar()\n .select(brush)\n .encode(\n vl.x().count(),\n vl.y().fieldQ(\"Horsepower\"),\n vl.color().if(brush, vl.value(\"steelblue\")).value(\"gray\")\n )\n .height(400);\n\n //return base.data(data).render();\n // return html`

${JSON.stringify(base.toObject(), 0, 2)}

`; // prettify the string\n return printVega(base, true);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":178,"value":"import { showMe } from \"@observablehq/show-me\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"import {\n try_it as addNote,\n note as note,\n details as details\n} from \"@pbiqueryous-repo/callout-boxes\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"import { style, selectingCells } from \"@pbiqueryous-repo/keyboard-shortcuts\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"import { vegaDataViewer } from \"@pbiqueryous-repo/vega-data-viewer\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"import {\n toc as contents, // src = import { toc as contents } from \"@jonfroehlich/collapsible-toc\"\n fmt as fmt,\n printVegaJSON as printVega,\n vegalite as VegaLite,\n vegaEmbed as Vega,\n printTableTypes as showtypes, // src = import { printTableTypes } from \"@jonfroehlich/data-utilities\"\n printTable as show, // src = import { printTable as showtable } from \"@jonfroehlich/data-utilities\"\n note as note\n} from \"@pbiqueryous-repo/tools\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 45:"$44:body"