Interested in data visualisation, maps, JavasScript, and geology
projection = d3CompositeProjections.geoConicConformalFrance()
svgMap = {
const path = d3.geoPath(projection);
const svg = d3.select(DOM.svg(width, height))
.style("width", "100%")
.style("height", "auto");
svg.append("path")
.datum(land)
.attr("fill", "#ccc")
.style("stroke", "#555")
.attr("d", path);
svg.append("path")
.style("fill","none")
.style("stroke","#000")
.attr("d", projection.getCompositionBorders());
return svg.node();
}
canvasMap = {
const context = this ? this.getContext("2d") : DOM.context2d(width, height);
const path = d3.geoPath(projection, context);
context.strokeStyle = "#777";
context.fillStyle = "#ccc";
context.clearRect(0, 0, width, width);
context.beginPath(), path(land), context.fill(), context.stroke();
context.beginPath()
context.strokeStyle = "#000";
projection.drawCompositionBorders(context);
context.stroke();
return context.canvas;
}
html`<style>table { max-width: none; }</style>`
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.
