viewof currentData = vegaDataViewer(chart, { tableOptions: { paged: 10 } })
viewof chart = vl
.markSquare({ size: 2, opacity: 1 })
.data('data/zipcodes.csv')
.transform(vl.calculate('substring(datum.zip_code, 0, 1)').as('digit'))
.project(vl.projection('albersUsa'))
.encode(
vl.longitude().fieldQ('longitude'),
vl.latitude().fieldQ('latitude'),
vl.color().fieldN('digit')
)
.width(width)
.height(Math.floor(width / 1.75))
.autosize({ type: 'fit-x', contains: 'padding' })
.config({ view: { stroke: null } })
.render()
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`<select>
${datasets.map(
ds =>
html`<option value="${ds}" ${
ds === dataset ? "selected" : ""
}>${ds}</option>`
)}
</select>
`;
const div = html`<form>
<label> <strong>Dataset: </strong> ${select}</label>
<label><div><strong>Data: </strong></label>
<div id="table">
${renderTable(data)}
</div>
</label>
</form>
`;
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;
}
getDatasets = chart =>
chart.getState({
signals: vl.vega.falsy,
data: vl.vega.truthy,
recurse: true
})
import {vl} from '@vega/vega-lite-api-v5'
import { table } from "@tmcw/tables/2"
import {select} from "@jashkenas/inputs"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
