Data visualisation design + code.
Interactive data journalist @TheEconomist
draw_map_canvas(shetland_buffered, 600, false, true, 'rgb(62,121,138)')
draw_map_canvas(shetland_buffered, 800, true, true)
draw_map_canvas(ireland_buffered, 600, true, true)
draw_map_canvas(ireland_buffered, 600, false, false)
ireland_buffered = create_buffered_polygons(ireland_complex, 18, 250)
shetland_buffered = create_buffered_polygons(shetland_simplified, 18, 20)
function draw_map_canvas(geojson_buffered_polygons, size=600, opacity_gradient=false, stroke_gradient=false, colour="teal") {
const opacity = d3.scalePow().exponent(3).domain([0, geojson_buffered_polygons.length - 1]).range([1, 0.1]);
const stroke_width = d3.scalePow().exponent(3).domain([0, geojson_buffered_polygons.length - 1]).range([1.4, 0.3]);
const context = DOM.context2d(width, size);
const path = d3.geoPath(d3.geoMercator().fitSize([width, size], geojson_buffered_polygons[geojson_buffered_polygons.length - 1]), context);
geojson_buffered_polygons.forEach(function(d,i){
context.beginPath();
path(geojson_buffered_polygons[i]);
context.strokeStyle = colour;
opacity_gradient ? context.globalAlpha = opacity(i) : 1;
stroke_gradient ? context.lineWidth = stroke_width(i) : 1;
context.stroke();
});
return context.canvas;
}
vl.markGeoshape()
.data([ireland_complex])
.height(400)
.width(400)
.render();
vl.markGeoshape()
.data([shetland_simplified])
.height(400)
.width(400)
.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.
