Published
Edited
Sep 22, 2022
10 stars
viewof table = {
const node = htl.html`<div style="height:320px;" class="ag-theme-alpine"></div>`;
new AgGrid.Grid(node, gridOptions);
gridOptions.api.addEventListener("modelUpdated", update) // set value after filter
gridOptions.api.sizeColumnsToFit();
update(); // set initial value
function update() { // for Observable dataflow
let value = [];
gridOptions.api.forEachNodeAfterFilter(d => value.push(d.data));
node.value = value;
node.dispatchEvent(new Event("input"));
}
return node;
}
table
Plot.dot(table, {x: "flipper_length_mm", y: "body_mass_g", stroke: "species"}).plot()
gridOptions = ({
columnDefs: [
{ headerName: "Species", field: "species", filter: true },
{ headerName: "Island", field: "island", filter: true },
{ headerName: "Culmen length (mm)", field: "culmen_length_mm", filter: true },
{ headerName: "Culmen depth (mm)", field: "culmen_depth_mm", filter: true },
{ headerName: "Flipper length (mm)", field: "flipper_length_mm", filter: true },
{ headerName: "Body mass (grams)", field: "body_mass_g", filter: true },
{ headerName: "Sex", field: "sex", filter: true }
],
rowData: penguins,
rowSelection: "single"
})
AgGrid = require("ag-grid-community@23.0.2/dist/ag-grid-community.js")
// AgGrid = require("ag-grid-enterprise/dist/ag-grid-enterprise.js")
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.
