grid = html`<div style="
background: #fff;
display: grid;
height: ${screen.height / screen.width * 100}vw;
grid-template-areas:
'a a'
'a a'
'b b';
grid-gap: 10px;
">
<div name="a" style="grid-area:a;border:solid 1px #ccc;"></div>
<div name="b" style="grid-area:b;border:solid 1px #ccc;"></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 = "100%";
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]"))
widthA = cellA.width
widthB = cellB.width
heightA = cellA.height
heightB = cellB.height
import {map as chartA, viewof chart as chartB} from "@pbogden/brushable-earthquakes-ii"
cellA.embed(chartA)
cellB.embed(viewof chartB)
filter_map = {
const [t0, t1] = [chartB[0][0].getTime(), chartB[1][0].getTime()];
const [m1, m0] = [chartB[0][1], chartB[1][1]];
d3.select(chartA).selectAll("circle")
.attr("r", d => d.datum.properties.mag)
.attr("fill-opacity", 0.5)
.attr("stroke", "#f00")
.attr("visibility", d => (d.datum.properties.time > t0 && d.datum.properties.time < t1
&& d.datum.properties.mag > m0 && d.datum.properties.mag < m1)
? "visible" : "hidden");
// Count the visible earthquakes on the map
const n = d3.select(chartA).selectAll("circle")
.filter(function() { return d3.select(this).attr("visibility") == "visible" })
.nodes().length;
return md`${n} earthquakes are visible on the map.`
}
d3 = require("d3@6")
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.