Hello ObservableHello PolygonsHello AnimationHello Plot layout with HTML and CSSHello modern colour spacesHello Colour MixingHello custom marks with PlotHello Polygon MorphingHello Zoom-PanHello VegaLite and VegaHello Zoomable Vega-Lite MapHello SketchyHello ClipperLibHello NetworkHello Linear ProgrammingHello Census 2021Hello LabellaHello function expressions
Hello Transforms
newRenderer().polygon(pts0).render()
newRenderer().fit(pts).polygon(pts).render()
newRenderer().fit(pts).flipY().polygon(pts).render()
newRenderer().fit(pts, 20).flipY().polygon(pts).render()
{
const xSc = d3.scaleLinear().domain([30000, 180000]).range([0, h]);
const ySc = d3.scaleLinear().domain([10000, 110000]).range([h, 0]);
return newRenderer().setScales(xSc, ySc).polygon(pts).render();
}
{
const xSc = d3.scaleLinear().domain([30000, 180000]).range([0, h]);
const ySc = d3.scaleLog().domain([10000, 110000]).range([h, 0]);
return newRenderer().setScales(xSc, ySc).polygon(pts).render();
}
{
const xSc = d3
.scaleTime()
.domain([new Date(2021, 0, 1), new Date(2021, 11, 31)])
.range([0, h]);
const ySc = d3
.scaleOrdinal()
.domain(["spring", "summer", "autumn", "winter"])
.range([h / 2, 10, h / 2, h - 10]);
return newRenderer()
.setScales(xSc, ySc)
.pointSize(18)
.points(timeSeries)
.render();
}
function mortonToXY(i) {
const b = i.toString(2).padStart(32, "0"); // 32 bit binary string
const x = b
.split("")
.filter((_, i) => i % 2 == 1)
.join(""); // Odd digits of binary string
const y = b
.split("")
.filter((_, i) => i % 2 == 0)
.join(""); // Even digits of binary string
return [parseInt(x, 2) * 8, parseInt(y, 2) * 8];
}
newRenderer()
.setTransform(mortonToXY)
.stroke("rgb(180,90,45)")
.line(range(0, 511))
.render()
newRenderer().setProjection(d3.geoOrthographic()).geoShape(geo).render()
newRenderer()
.fit(pts, 20)
.flipY()
.polygon(pts)
.translate(200, 0)
.polygon(pts)
.render()
{
const margin = 20;
return newRenderer()
.fit(pts, margin)
.flipY()
.polygon(pts)
.translate(margin, margin)
.scale(0.717)
.rotate(-30)
.translate(-margin, -margin)
.polygon(pts)
.render();
}
{
const r = newRenderer().fit(pts, 20).flipY().polygon(pts);
const [cx, cy] = r.dataToScreen([30000, 110000]);
r.translate(cx, cy).scale(0.717).rotate(-30).translate(-cx, -cy).polygon(pts);
return r.render();
}
newRenderer()
.fit(pts, 20)
.flipY()
.polygon(pts)
.push()
.setTransform(null)
.fill("rgb(180,90,45)")
.text("What a wonderful shape", 20, 15)
.pop()
.translate(200, 0)
.polygon(pts)
.render()
{
const r = newRenderer().fit(pts).flipY();
for (let i = 0; i < 32; i++) {
r.push()
.scale(4)
.translate(...mortonToXY(i))
.scale(0.04)
.polygon(pts)
.pop();
}
return r.render();
}
{
const r = newRenderer().fit(pts, 20).flipY().polygon(pts);
r.addListener("mousemove", (ev) => {
const d = r.screenToData(d3.pointer(ev));
r.fill("rgb(252,246,229)")
.polygon(
[
[0, 0],
[w, 0],
[w, h],
[0, h]
].map(r.screenToData)
)
.fill("rgb(208,170,141)")
.polygon(pts)
.fill("black")
.text(d, d[0], d[1]);
});
return r.render();
}
{
const r = newRenderer()
.fit(pts, 20)
.flipY()
.polygon(pts)
.fill("black")
.text(d, d[0], d[1]);
r.addListener(
"mousemove",
(ev) => (mutable d = r.screenToData(d3.pointer(ev)))
);
return r.render();
}
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.
