Hello ObservableHello PolygonsHello TransformsHello 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 ClipperLibHello NetworkHello Linear ProgrammingHello Census 2021Hello LabellaHello function expressions
Hello Sketchy
{
const ctx = DOM.svg(width, height);
d3.select(ctx).style("background-color", "rgb(231,215,186)"); // Manila background
const rc = rough.svg(ctx);
const node = rc.rectangle(120, 50, width - 240, height - 100, {
fill: "white",
fillStyle: "solid"
});
ctx.appendChild(node);
return ctx;
}
{
const ctx = DOM.context2d(width, height);
// Non-sketchy Manila background
ctx.fillStyle = "rgb(231,215,186)";
ctx.rect(0, 0, width, height);
ctx.fill();
// Sketchy writing to the canvas
const rc = rough.canvas(ctx.canvas);
rc.rectangle(120, 50, width - 240, height - 100, {
fill: "white",
fillStyle: "solid"
});
return rc.canvas;
}
function pencilStyle(pencilColour = "rgba(120, 120, 120, 0.6)") {
return {
stroke: pencilColour,
strokeWidth: 2,
fill: pencilColour,
fillWeight: 0.3,
hachureGap: 0.8
};
}
scene(pencilStyle())
function waterAndInkStyle(paintColour = "rgba(255,255,255,0.8)") {
return {
fill: paintColour,
fillStyle: "solid",
roughness: 3
};
}
scene(waterAndInkStyle("rgba(195,68,45,0.5)"))
function markerStyle(markerColour = "rgb(201, 88, 66)") {
return {
strokeWidth: 6,
fill: markerColour,
fillStyle: "zigzag",
fillWeight: 6,
hachureGap: 13,
roughness: 2
};
}
scene(markerStyle())
function colouredPenStyle(penColour = "rgb(195,68,45)") {
return {
stroke: "rgba(0,0,0,0)",
fill: penColour,
fillWeight: 2,
hachureGap: 1.5,
hachureAngle: 88
};
}
scene(colouredPenStyle())
{
const ctx = DOM.svg(width, height);
d3.select(ctx).style("background-color", "rgb(231,215,186)"); // Manila background
const rc = rough.svg(ctx);
const path = `M${coords1.join("L")}Z`;
const poly = rc.path(path, waterAndInkStyle());
ctx.appendChild(poly);
const eye = rc.circle(310, 120, 20, waterAndInkStyle());
ctx.appendChild(eye);
return ctx;
}
{
const ctx = DOM.context2d(width, width * 0.6);
const rc = rough.canvas(ctx.canvas);
const london = await d3
// Load the topoJSON
.json("https://gicentre.github.io/data/geoTutorials/londonBoroughs.json")
// and convert it into a geoJSON collection of features
.then((feats) => topojson.feature(feats, feats.objects.boroughs));
const mapPath = d3
.geoPath()
.projection(d3.geoEqualEarth().fitSize([width, 0.6 * width], london));
london.features.forEach((feat) => rc.path(mapPath(feat), pencilStyle()));
return rc.canvas;
}
{
const ctx = DOM.svg(width, 0.6 * width);
const rc = rough.svg(ctx);
const london = await d3
// Load the topoJSON
.json("https://gicentre.github.io/data/geoTutorials/londonBoroughs.json")
// and convert it into a geoJSON collection of features
.then((feats) => topojson.feature(feats, feats.objects.boroughs));
const mapPath = d3
.geoPath()
.projection(d3.geoEqualEarth().fitSize([width, 0.6 * width], london));
london.features.forEach((feat) =>
ctx.append(rc.path(mapPath(feat), markerStyle()))
);
return ctx;
}
height = width / 3.2
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.
