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();
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.