Data visualisation design + code.
Interactive data journalist @TheEconomist
Published
Edited
Jan 19, 2022
Importers
81 stars
function draw_map_canvas_stroke(
/////////////////////////////////////////////////
/// Optional parameters (with default values) ///
/////////////////////////////////////////////////
geojson, // The geojson the waterlines will be drawn from
size = 600, // Full square size of image
stroke_number = 8, // Number of waterlines
opacity_gradient = false, // Fading-out opacity towards the edges?
stroke_gradient = false, // Water lines getting thinner towards the edges?
colour_scale = false, // if true, use the rainbow colour scale. Otherwise draw 'colour'
filled = false, // lines or fills?
colour = "teal", // waterline colour
stroke_thickness_const = 1, // constant stroke thickness if not on gradient
ripple_extent = 40, // How wide the waterlines extend
curve_this = d3.curveCatmullRomClosed, // The smoothing curve function used in the waterline path
start = 2, // Number of pixels off the shoreline to start first waterline
stroke_gradient_values = [1, 3], // if waterlines thickness on gradient - the min and max thicknesses
spacing_exponent = 1 / 2 // Degree of skew of waterline spacing gradient
) {
/////////////////////////
/// Set up projection ///
/////////////////////////
let projection_canvas = d3
.geoMercator()
.fitSize([size - ripple_extent, size - ripple_extent], geojson);
// centre the map in the middle
let projection_translate = projection_canvas.translate();
projection_canvas = projection_canvas.translate([
projection_translate[0] + ripple_extent / 2,
projection_translate[1] + ripple_extent / 2
]);
////////////////////////////////////////////
/// Smooth the stroke path /////////////////
/// using D3's curve settings //////////////
/// otherwise the strokes will be spikes ///
////////////////////////////////////////////
// code from @nbremer/simplified-curved-earth-map
function curveContext(curve) {
return {
moveTo(x, y) {
curve.lineStart();
curve.point(x, y);
},
lineTo(x, y) {
curve.point(x, y);
},
closePath() {
curve.lineEnd();
}
};
}
function geoCurvePath(curve, projection, context) {
return object => {
const pathContext = context === undefined ? d3.path() : context;
d3.geoPath(projection_canvas, curveContext(curve(pathContext)))(object);
return context === undefined ? pathContext + "" : undefined;
};
}
const context = DOM.context2d(size, size);
const path_svg = geoCurvePath(curve_this)(geojson);
let path = new Path2D(path_svg);
const path_orig = d3.geoPath(projection_canvas, context);
/////////////////////////
/// Define scales ///////
/////////////////////////
const opacity = d3
.scalePow()
.exponent(0.8)
.domain([0, stroke_number])
.range([0, 1]);
// this is to set the spacing between each waterline. It's called (perhaps confusingly) stroke_width because we're creating the waterlines by redrawing strokes of increasing width
const stroke_width = d3
.scalePow()
.exponent(spacing_exponent)
.domain([0, stroke_number])
.range([ripple_extent, start]); // start = distance from the shoreline the waterlines start
// this is to set the thickness of each waterline
const stroke_thickness = d3
.scalePow()
.exponent(3)
.domain([0, stroke_number])
.range(stroke_gradient_values);
/////////////////////////
/// Draw strokes ///////
/////////////////////////
for (let i = 0; i <= stroke_number; i++) {
// draw colour
context.beginPath();
context.strokeStyle = colour_scale
? d3.interpolateSpectral(1 - i / stroke_number)
: colour;
context.globalAlpha = opacity_gradient ? opacity(i) : 1;
context.lineWidth = stroke_gradient
? stroke_width(i) + stroke_thickness(i)
: stroke_width(i) + stroke_thickness_const;
context.stroke(path);
if (!filled) {
// clip out most of the stroke, so it becomes a line
// Based on @awoodruff/canvas-cartography-nacis-2019#masking-clipping-and-compositing which has a good explanation of context.globalCompositeOperation
context.globalAlpha = 1;
context.beginPath();
context.lineWidth = stroke_width(i);
context.globalCompositeOperation = 'destination-out'; // clipping
context.stroke(path);
context.globalCompositeOperation = 'source-over';
}
}
// draw the original (unsmoothed) geojson over the top
context.beginPath();
path_orig(geojson);
context.lineWidth = 2;
context.fillStyle = colour;
context.fill();
return context.canvas;
}
scilly_canvas_waterlines = draw_map_canvas_stroke(
scilly,
scilly_width,
24,
true,
true,
undefined,
undefined,
scilly_waterlines_colour,
undefined,
scilly_ripple_extent,
undefined,
0.5,
[2, 3],
0.3
)
function create_buffered_polygons_inWorker(data) {
let geojson = data.geojson,
total = data.total,
radial_distance = data.radial_distance, // in km
spacing_change = data.spacing_change;
// Use turf.rewind to make sure that the geojson winding direction is correct for d3 (or else polygons can be inverted into holes) - more on this https://bl.ocks.org/mbostock/a7bdfeb041e850799a8d3dce4d8c50c8
function buffer(geojson, distance) {
return turf.rewind(turf.buffer(geojson, distance), { reverse: true });
}
let buffered_polygons = [];
let exp = d3
.scalePow()
.exponent(spacing_change)
.domain([0, total - 1])
.range([0, radial_distance]);
for (let i = 0; i < total; i++) {
let new_polygon = buffer(geojson, exp(i), 'kilometers');
buffered_polygons.push(new_polygon);
}
return buffered_polygons;
}
function draw_map(
geojson_buffered_polygons,
opacity_gradient = false,
stroke_gradient = false,
colour = 'teal',
stroke_gradient_range = [1.4, 0.3],
size = 600
) {
const geoGenerator = d3
.geoPath()
.projection(
d3
.geoMercator()
.fitSize(
[width, size],
geojson_buffered_polygons[geojson_buffered_polygons.length - 1]
)
);
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(stroke_gradient_range); //0.6, 0.1
const svg = d3
.select(DOM.svg(width, size))
.style("width", "100%")
.style("height", "auto");
svg
.selectAll('path.waterLines')
.data(geojson_buffered_polygons)
.enter()
.append('path')
.attr("d", geoGenerator)
.attr("class", "waterLines")
.style('fill', 'none')
.style("stroke", colour)
.style("stroke-width", (d, i) => (stroke_gradient ? stroke_width(i) : 1))
.style("stroke-opacity", (d, i) => (opacity_gradient ? opacity(i) : 1));
return svg.node();
}
function draw_map_world(
geojson_buffered_polygons,
opacity_gradient = false,
stroke_gradient = false
) {
let projection = d3
.geoTransverseMercator()
.fitSize(
[600, 600],
geojson_buffered_polygons[geojson_buffered_polygons.length - 1]
);
// use projection.rotate to move the land masses into the centre
projection = projection.rotate([0, -75, 0]);
const geoGenerator = d3.geoPath().projection(projection);
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, 0.1]);
const svg = d3
.select(DOM.svg(600, 600))
.style("width", "100%")
.style("height", "auto")
.style('background', 'lightslategray');
svg
.selectAll('path.waterLines')
.data(geojson_buffered_polygons)
.enter()
.append('path')
.attr("d", geoGenerator)
.attr("class", "waterLines")
.style('fill', 'none')
.style("stroke", 'white')
.attr(
'stroke-dasharray',
(d, i) => (geojson_buffered_polygons.length - i) * 4 + "," + 2 * i
)
.style("stroke-width", (d, i) => (stroke_gradient ? stroke_width(i) : 1))
.style("stroke-opacity", (d, i) => (opacity_gradient ? opacity(i) : 1));
return svg.node();
}
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.
