Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
UK MPs' votes on BrexitW3DT Product-Market Fit Dashboard v1 (IPFS and Filecoin data separate)DashboardN.J. use of force dataDashboardMarathon Training DashboardClustergrammer-GLInteractive Plot DashboardIn-Product Dashboard for your userCOVID-19 Live DashboardCricket DashboardDashboard with Brushing and Linking Example in Vega-LiteDashboard with bertin 🌍 & plot 📊Activity Tracking DashboardAWS HTTP Status Dashboard10 minutes dashboard: vegaSync guideAndy's Walgreens COVID-19 Tracker TrackerSVG DataGrid with many features and a live COVID Dashboard demo
Dashboard
grid = html`<div style="
background: #fff;
display: grid;
height: ${screen.height / screen.width * 100}vw;
grid-template-areas:
'a b'
'a b'
'a b'
'c c';
grid-gap: 10px;
">
<div name="a" style="grid-area: a; border: solid 1px #ccc; position: relative;"></div>
<div name="b" style="grid-area: b; border: solid 1px #ccc; position: relative;"></div>
<div name="c" style="grid-area: c; border: solid 1px #ccc; position: relative;"></div>
</div>`
class Cell {
constructor(element) {
this.element = element;
element.style.position = "relative";
}
get width() {
return resizer(this.element, "clientWidth");
}
get height() {
return resizer(this.element, "clientHeight");
}
embed(content) {
content.style.position = "absolute";
content.style.width = "100%";
content.style.height = "auto";
if (this.element.firstChild) this.element.replaceChild(content, this.element.firstChild);
else this.element.appendChild(content);
}
}
function resizer(element, dimension = "clientWidth") {
return Generators.observe(notify => {
let width = notify(element[dimension]);
const resized = () => {
let w = element[dimension];
if (w !== width) notify(width = w);
};
window.addEventListener("resize", resized);
return () => window.removeEventListener("resize", resized);
});
}
cellA = new Cell(grid.querySelector("[name=a]"))
cellB = new Cell(grid.querySelector("[name=b]"))
cellC = new Cell(grid.querySelector("[name=c]"))
widthA = cellA.width
widthB = cellB.width
widthC = cellC.width
heightA = cellA.height
heightB = cellB.height
heightC = cellC.height
import {chart as chartA} with {widthA as width, heightA as height} from "@d3/bar-chart@268"
import {chart as chartB} with {widthB as width, heightB as height} from "@d3/force-directed-graph@149"
import {chart as chartC} with {widthC as width, heightC as height} from "@d3/band-chart@129"
cellA.embed(chartA)
cellB.embed(chartB)
cellC.embed(chartC)
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.
