3f:null 40:["$","title",null,{"children":"Figuring out how to do \"x\" in Vega-Lite Javascript API | chatchavan | Observable"}] 46:[] 44:{"id":"5769f24ceea152d5","slug":"figuring-vega-lite-api","title":"Figuring out how to do \"x\" in Vega-Lite Javascript API","thumbnail":"c5ec5dc37957ec49892fe3ed667c73a47dd6a828e626a682347ec492e52d94f6","access_level":"public","create_time":"$D2023-02-15T18:10:48.031Z","update_time":"$D2023-02-16T15:33:53.334Z","view_time":null,"first_public_time":"$D2023-02-15T18:10:48.031Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"d466550c63861b95","login":"chatchavan","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3665cdbaa35796d248f50ae978e98506a11470628250bf2c08b7b061ca2a7029","tier":"starter_2024","bio":"","following":false},"version":63,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ac033e5860d0cb69","login":"chatchavan","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3665cdbaa35796d248f50ae978e98506a11470628250bf2c08b7b061ca2a7029","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"ac033e5860d0cb69","login":"chatchavan","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3665cdbaa35796d248f50ae978e98506a11470628250bf2c08b7b061ca2a7029","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"8cc73b4351cf75ce","slug":"swansea-university-data-visualisation-2023","title":"Swansea University Data Visualisation 2023","owner":{"id":"d466550c63861b95","login":"chatchavan","name":""}},"type":"notebook","body":{"titling":"auto","title":"Figuring out how to do \"x\" in Vega-Lite Javascript API","cells":[{"id":4,"value":"# Figuring out how to do \"x\" in Vega-Lite Javascript API\nThe primary [Vega-Lite documentation](https://vega.github.io/vega-lite/docs/) is in JSON form. The documentation for [its Javascript API](https://vega.github.io/vega-lite/docs/) only show object and function structure. Below is a strategy for figuring out.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"## 1. Check if somebody had done it\n* [Vega-Lite (Javascript) Gallery](https://observablehq.com/collection/@vega/vega-lite-api)\n* [Vega-Lite (JSON) Gallery](https://vega.github.io/vega-lite/examples/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"## 2. Searching in the documentation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"These search boxes are equivalent to add the following phrase after entering your search keyword to Google:\n* `site:https://vega.github.io/vega-lite/docs/`\n* `site:https://vega.github.io/vega-lite-api/api/`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"## 3. JSON-to-Javascript translation patterns\nOnce you figured out how to work things out in JSON format, and which API function to call, you will need to figure out how to call them. Here are a few patterns that you could try.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"* __Sibling properties__ might become a __chain of function calls__:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"

\n     {\n       \"mark\": \"bar\",\n       \"data\": ...\n       \"encoding\": ...\n     }\n

\n  \nvl.markBar()\n  .data(...)\n  .encode(...)\n

\n    \"encoding\": {\n        \"x\": { ... },\n        \"y\": { ... },\n     }\n

\n  .encode(\n     vl.x()... ,\n     vl.y()...\n  )\n

\n      \"condition\": {\n        \"test\": {\n            \"not\": ...(x)...\n            \"value\": ...(y)...\n        },\n        \"value\": ...(z)...\n      },\n

\n  .if(\n     vl.not( ...(x)...), \n     ...(y)... \n  )\n  .value(...(z)...)\n

\n     \"y\": {\n       \"scale\": {\n          \"domain\":[0, 100] \n       }\n     }\n

\n  vl.x().scale({\n     domain: [0, 100]\n  })\n

\n     \"layer\": [\n       {\n        \"mark\": \"bar\"\n         ...\n       },\n       {\n        \"mark\": \"point\"\n         ...\n       },\n     ]\n

\n  vl.layer(\n     vl.markBar(\n       ...\n     ),\n     vl.markPoint(\n       ...\n     )\n  )\n

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"## 4. Debugging unexpected plot\nIf the plot renders, but the results is unexpected, you can print out Vega-Lite JSON using one of the following command instead of `.render()`:\n\n* As a compact fold-able view:\n```javascript\n{\n return plot.toObject()\n}\n```\n\n* As a Javascript text that could be copy-and-paste to the [Vega Editor](https://vega.github.io/editor) for further debugging:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":52,"value":"{ \n const plot = vl.markPoint()\n return html`

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

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"## 5. Debugging plots with errors\nIf an error message appears, try the following steps:\n\n1. Make a copy of the code cell. Then, remove all elements that are irrelevant to the problem. Try to create a simplest code that could reproduce the problem.\n\n2. Try creating JSON version on the [Vega Editor](https://vega.github.io/editor)---which provide more informative error messages and complier logs.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"## Appendices","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"(Style for example code Javascript vs. JSON.)\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 45:"$44:body"