html`<div id="myGrid" style="width: 80%;height:200px;" class="ag-theme-alpine"></div>`
viewof chart = Inputs.button("Update Chart", {value: null, reduce: () => vl.markCircle()
.data(getAgData(gridOptions))
.encode(
vl.x().fieldQ("col1"),
vl.y().fieldQ("col2"),
vl.color().fieldN("col3")
)
.render() })
chart
gridOptions = {
const eGridDiv = document.getElementById('myGrid');
const columnDefs = [
{ headerName: "col1", field: "col1", filter: true },
{ headerName: "col2", field: "col2", filter: true },
{ headerName: "col3", field: "col3", filter: true },
]
// let the grid know which columns and what data to use
const gridOptions = {
columnDefs: columnDefs,
rowData: dat,
rowSelection: 'single'
};
new AgGrid.Grid(eGridDiv, gridOptions);
gridOptions.api.sizeColumnsToFit();
return gridOptions;
}
AgGrid = require('ag-grid-enterprise/dist/ag-grid-enterprise.js')
import {vl} from '@vega/vega-lite-api-v5'
dat = d3.csvParse(`col1,col2,col3
1,1,a
2,2,a
3,3,b`, d3.autoType)
function getAgData(gridOptions){
let rowData = [];
gridOptions.api.forEachNodeAfterFilter(node => {
rowData.push(node.data);
});
return rowData
}
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.
