3f:null 40:["$","title",null,{"children":"Vega data viewer | John Alexis Guerra Gómez | 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":"45e5909f35596963","slug":"vega-data-viewer","title":"Vega data viewer","thumbnail":"a34b16314d8c770d16c4ca5289126953b3faf9846cf550b42100295ae56ca303","access_level":"public","create_time":"$D2020-05-24T20:37:03.430Z","update_time":"$D2026-03-22T19:02:47.858Z","view_time":null,"first_public_time":"$D2020-05-24T21:27:16.898Z","has_unpublished_edits":null,"fork":{"id":"01ba0fa9ab016bf8","slug":"observing-vega-signals","title":"Observing Vega Signals","owner":{"id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez"}},"stars":2,"starred":false,"owner":{"type":"team","id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":"starter_2024","bio":"I love to build dataviz for insight discovery. I also love to put technology to the service of humanity","following":false},"version":479,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null,"bio":"I love to build dataviz for insight discovery. I also love to put technology to the service of humanity","following":false}],"members":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"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 chart = 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'","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"