3f:null 40:["$","title",null,{"children":"Vega data viewer | Libraries and Functions | Observable"}] 46:T59c,function vegaDataViewer( chart, options = { dataset: undefined, tableOptions: undefined // passed directly to the table } ) { const datasets = Object.keys( getDatasets(chart).data ); let dataset = options.dataset || (datasets.includes("source_0") ? "source_0" : datasets[0]); let data = chart.data(dataset); const renderTable = data => html`${ !data || data.length ? table(data, options.tableOptions) : "Empty data" } `; const select = html` `; const div = html`

Dataset: ${select}

Data:

${renderTable(data)}

`; const signaled = (name, value) => { data = div.value = chart.data(select.value); const tableEle = div.querySelector("#table"); tableEle.textContent = ""; tableEle.appendChild(renderTable(data)); div.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; invalidation.then(() => { chart.removeDataListener(select.value, signaled); select.removeEventListener("input", signaled); }); chart.addDataListener(select.value, signaled); select.addEventListener("input", signaled); div.value = data; return div; }47:[] 44:{"id":"7e23b79ff2aaccc1","slug":"vega-data-viewer","title":"Vega data viewer","thumbnail":"ed424c792e917492162c595d0e80ca248d1800b60c12d4dc7fb42a74f60415fb","access_level":"public","create_time":"$D2023-10-26T19:07:09.282Z","update_time":"$D2023-10-26T19:16:06.635Z","view_time":null,"first_public_time":"$D2023-10-26T19:07:09.282Z","has_unpublished_edits":null,"fork":{"id":"45e5909f35596963","slug":"vega-data-viewer","title":"Vega data viewer","owner":{"id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez"}},"stars":1,"starred":false,"owner":{"type":"team","id":"cc62ca71f10761fe","login":"pbiqueryous-repo","name":"Libraries and Functions","avatar_url":"https://avatars-next.observableusercontent.com/3af165f0f88c264d557f44ea2c0bd231e7f3838a766690f9c147869f3f6c2c0d","tier":"starter_2024","bio":"","following":false},"version":481,"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":"individual","id":"095ccf69e3466ab9","login":"pbi-queryous","name":"PBI Queryous","avatar_url":"https://avatars-next.observableusercontent.com/0e362e0326315a8b72bf30cfe2bf107a47fb597d0f8798eeb7f6330b2bbb725a","tier":null,"role":"editor"},{"type":"team","id":"cc62ca71f10761fe","login":"pbiqueryous-repo","name":"Libraries and Functions","avatar_url":"https://avatars-next.observableusercontent.com/3af165f0f88c264d557f44ea2c0bd231e7f3838a766690f9c147869f3f6c2c0d","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Vega data viewer","cells":[{"id":28,"value":"md`# Vega data viewer\n\nA very basic implementation of the [vega editor](https://vega.github.io/editor/) data-viewer for Observable designed to observe changes in the dataset\n\n## Usage\n\n~~~js\nimport {vegaDataViewer} from \"@john-guerra/vega-data-viewer\"\n~~~\n\nand then \n\n~~~js\nviewof data = vegaDataViewer(chart)\n~~~\n\nYou will get the raw data in *data* and *chart* is expected to be a vega-view instance on your notebook. If you are using vega-lite-api create your *chart* as\n\n~~~js\nviewof localchart = vl.mark() // your Vega-Lite API spec\n ...\n .render()\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"viewof currentData = vegaDataViewer(chart, { tableOptions: { paged: 10 } })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"viewof chart = vl\n .markSquare({ size: 2, opacity: 1 })\n\n .data('data/zipcodes.csv')\n .transform(vl.calculate('substring(datum.zip_code, 0, 1)').as('digit'))\n .project(vl.projection('albersUsa'))\n .encode(\n vl.longitude().fieldQ('longitude'),\n vl.latitude().fieldQ('latitude'),\n vl.color().fieldN('digit')\n )\n .width(width)\n .height(Math.floor(width / 1.75))\n .autosize({ type: 'fit-x', contains: 'padding' })\n .config({ view: { stroke: null } })\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"getDatasets = chart =>\n chart.getState({\n signals: vl.vega.falsy,\n data: vl.vega.truthy,\n recurse: true\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"import {vl} from '@vega/vega-lite-api-v5'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"import { table } from \"@tmcw/tables/2\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"import {select} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 45:"$44:body"