I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
Reusable and Reactive Visualization Widgets or ComponentsSearch Checkbox 🔎☑Faceted SearchChoropleth MapMulti Auto SelectScented CheckboxNavioPersist InputVega crossfilterSpaceTreeTree, ValueCollapsible TreeTree, Tidy fit to HeightZoomable Variable Size IcicleVisualize ERD SQLITE3 (WIP)Conditional ShowBrushable ScatterPlot (Reactive Widget)Force Directed Reactive Widget
Vega Selected
viewof selected = vegaSelected(spec, {invalidation});
selected
spec = {
const brush = vl.selectInterval("brush").encodings("y");
const single = vl.selectSingle("mouseover").encodings("y").on("mouseover");
const base = vl
.markBar()
.select(brush)
.encode(
vl.x().count(),
vl.y().fieldO("Cylinders"),
vl.color().if(brush, vl.value("steelblue")).value("gray")
);
return vl
.concat(
vl.layer(base),
base
.select(single)
.encode(
vl.y().fieldN("Origin"),
vl.color().if(single, vl.value("steelblue")).value("gray")
)
)
.data(data)
.toSpec();
}
viewof selected2 = {
return vegaSelected(specScatterplot, {
signal: "brush"
});
}
viewof specScatterplot2 = {
const brush = vl.selectInterval("brush").encodings(["x", "y"]);
return vl
.markPoint()
.select(brush)
.encode(
vl.x().fieldQ("Horsepower"),
vl.y().fieldQ("Miles_per_Gallon"),
vl.color().if(brush, "steelblue").value("gray")
)
.data(data)
.render();
}
{
specScatterplot2
.signal("brush", {
Horsepower: [49.576251296997064, 74.26375556945801],
Miles_per_Gallon: [17.703124999999996, 29.869791666666668]
})
;
// specScatterplot2
// .signal("brush_x", [82.62708549499511, 123.77292594909669])
// .run();
return specScatterplot2.runAsync();
}
getSignals(specScatterplot2)
JSON.stringify(specScatterplot2.signal("brush"))
specScatterplot = {
const brush = vl.selectInterval("brush").encodings(["x", "y"]);
return vl.markPoint()
.select(brush)
.encode(
vl.x().fieldQ("Horsepower"),
vl.y().fieldQ("Miles_per_Gallon"),
vl.color().if(brush, "steelblue").value("gray")
)
.data(data)
.toSpec();
}
vegaSelected = require("vega-selected")
// async function vegaSelected(
// spec,
// {
// vegaConfig = {},
// signal = null // provide a signal name to listen just to that one
// } = {}
// ) {
// let view = null;
// const chart = await vegaEmbed(spec, vegaConfig);
// // The vega view;
// view = chart.value;
// let internalValue = {};
// const setValue = (newVal) => {
// chart.value = newVal;
// chart.dispatchEvent(new Event("input", { bubbles: true }));
// };
// // Listen to events on the vega-lite view
// const signaled = (name, value) => {
// // console.log("signal", signal, "name, value", name, value);
// if (signal) {
// if (signal === name) internalValue = value;
// } else {
// if (value === null || Object.keys(value).length === 0) {
// //empty object
// delete internalValue[name];
// } else {
// internalValue[name] = value;
// }
// }
// setValue(internalValue);
// };
// const signals = getSignals(view);
// // console.log("signals", signals);
// signals.map((signal) => {
// view.addSignalListener(signal, signaled);
// });
// invalidation.then(() => {
// if (!view) return;
// signals.map((signal) => view.removeSignalListener(signal, signaled));
// });
// // 🧰 The value attribute represents the current interaction
// Object.defineProperty(chart, "value", {
// get() {
// return internalValue;
// },
// async set(newValue) {
// internalValue = newValue;
// if (signal) {
// // ⚠️ Experimental, trying to send a signal back to vegaLite
// view.signal(signal, internalValue);
// await view.runAsync();
// }
// }
// });
// // chart.value = internalValue;
// chart.view = view;
// return chart;
// }
data = vegaDatasets["cars.json"]().then(data => data.map(d => (d.date = new Date(d.date), d)))
vegaDatasets = require("vega-datasets@2")
import { vl } from "@vega/vega-lite-api-v5"
vegaEmbed = require("vega-embed@6.23.0")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.