height = width / 5
function svgContext() {
return DOM.svg(width, height);
}
function drawCircle(ctx) {
d3.select(ctx)
.append("circle")
.attr("r", height / 2 - 1)
.attr("cx", height / 2)
.attr("cy", height / 2)
.attr("fill", "rgb(200,100,50)")
.attr("stroke", "black")
.attr("stroke-width", 0.5);
return ctx;
}
drawCircle(svgContext())
function drawPoly1(coords, ctx) {
d3.select(ctx)
.append("path")
.attr("d", `M${coords.join("L")}Z`)
.attr("fill", "rgb(200,100,50)")
.attr("stroke", "black")
.attr("stroke-width", 0.5);
return ctx;
}
drawPoly1(
[
[50, 10],
[160, 60],
[210, 150],
[100, 100],
[10, 120]
],
svgContext()
)
coords1 = [
[105000, 14000],
[116000, 9000],
[121000, 0],
[110000, 5000],
[101000, 3000]
]
coords2 = [
[130000, 15000],
[108000, 10000],
[114000, 3000]
]
function scaleFn(coords, w, h) {
const [xMin, xMax] = d3.extent(coords, (p) => p[0]);
const [yMin, yMax] = d3.extent(coords, (p) => p[1]);
const scaleFactor = Math.min(w / (xMax - xMin), h / (yMax - yMin));
return ([x, y]) => [scaleFactor * (x - xMin), h - scaleFactor * (y - yMin)];
}
function drawPoly2(coords, ctx) {
const scCoords = coords.map(scaleFn(coords, width, height));
d3.select(ctx)
.append("path")
.attr("d", `M${scCoords.join("L")}Z`)
.attr("fill", "rgb(200,100,50)")
.attr("stroke", "black")
.attr("stroke-width", 0.5);
return ctx;
}
drawPoly2(coords1, svgContext())
function drawPoly3(coords, sc, ctx) {
d3.select(ctx)
.append("path")
.attr("d", `M${coords.map(sc).join("L")}Z`);
return ctx;
}
{
const sc = scaleFn(coords1, width, height);
const ctx = drawPoly3(coords1, sc, svgContext());
d3.select(ctx).attr("fill", "rgb(200,100,50)").attr("fill-opacity", 0.5);
return ctx;
}
world = d3.json(
"https://unpkg.com/visionscarto-world-atlas@0.0.6/world/110m_land.geojson"
)
function projection(features) {
return d3.geoEqualEarth().fitSize([height * 2, height], features);
}
function drawMap(features, ctx) {
d3.select(ctx)
.append("path")
.datum(features)
.attr("d", d3.geoPath(projection(features)));
return ctx;
}
{
const ctx = drawMap(world, svgContext());
d3.select(ctx).attr("fill", "rgb(200,100,50)").attr("fill-opacity", 0.5);
return ctx;
}
topojson = require("topojson-client@3")
london = d3
.json("https://gicentre.github.io/data/geoTutorials/londonBoroughs.json")
.then((feats) => topojson.feature(feats, feats.objects.boroughs))
{
const ctx = drawMap(london, svgContext());
d3.select(ctx)
.attr("fill", "rgb(200, 100, 50)")
.attr("fill-opacity", 0.5)
.attr("stroke", "white");
return ctx;
}
function canvasContext() {
return DOM.context2d(width, height);
}
function drawPoly4(coords, sc, ctx) {
const scCoords = coords.map(sc);
ctx.beginPath();
for (let c of scCoords) {
ctx.lineTo(c[0], c[1]);
}
ctx.closePath();
}
{
const sc = scaleFn(coords1.concat(coords2), width, height);
const ctx = canvasContext();
drawPoly4(coords1, sc, ctx);
ctx.stroke();
ctx.fillStyle = "rgb(200, 100, 50)";
ctx.fill();
drawPoly4(coords2, sc, ctx);
ctx.fillStyle = "black";
ctx.globalAlpha = 0.3;
ctx.fill();
return ctx.canvas;
}
{
const ctx = canvasContext();
const land = await d3.json(
"https://unpkg.com/visionscarto-world-atlas@0.0.6/world/110m_land.geojson"
);
const projection = d3.geoEqualEarth().fitSize([height * 2, height], land);
d3.geoPath(projection, ctx)(land);
ctx.fillStyle = "rgb(200, 100, 50)";
ctx.globalAlpha = 0.5;
ctx.fill();
return ctx.canvas;
}
{
const ctx = canvasContext();
d3.geoPath(projection(london), ctx)(london);
ctx.fillStyle = "rgb(200, 100, 50)";
ctx.strokeStyle = "white";
ctx.fill();
ctx.stroke();
return ctx.canvas;
}
new Renderer(width, width / 5, "canvas")
.fit(coords1.concat(coords2), 15)
.strokeWidth(3)
.fill("rgb(180,90,45)")
.polygon(coords1)
.stroke("")
.fill("rgba(0,0,0,0.3)")
.polygon(coords2)
.render()
new Renderer(0.3 * width, 0.2 * width, "svg")
.stroke("white")
.fill("rgb(200,100,50)")
.geoShape(london)
.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.
