Data visualisation design + code.
Interactive data journalist @TheEconomist
Published
Edited
Aug 14, 2022
25 stars
// Textures using Riccardo Scalco's Textures.js https://riccardoscalco.it/textures/
ts = [
// "Gaelic",
textures
.lines()
.orientation("diagonal")
.size(4)
.strokeWidth(2)
.stroke('rgb(97,129,98)'),
// "Welsh",
textures
.lines()
.orientation("horizontal")
.size(4)
.strokeWidth(1)
.stroke('rgb(97,129,98)'),
// "Pictich",
textures
.lines()
.orientation("vertical")
.size(3)
.strokeWidth(1)
.stroke('rgb(97,129,98)'),
// "Brittonic_Old_English",
textures
.lines()
.orientation("vertical", "horizontal")
.size(3)
.strokeWidth(1)
.shapeRendering("crispEdges")
.stroke('rgb(104,128,101)')
.background('rgb(190,94,97)'),
// "Old_Norse_Old_English",
textures
.lines()
.orientation("horizontal")
.size(4)
.strokeWidth(1)
.stroke('rgb(96,106,131)')
.background('rgb(190,94,97)'),
// "Brittonic_Gaelic",
textures
.lines()
.orientation("vertical", "horizontal", "diagonal")
.size(6)
.strokeWidth(2)
.stroke('rgb(104,128,101)'),
// "Brittonic_English",
textures
.lines()
.orientation("vertical", "horizontal")
.size(3)
.strokeWidth(1)
.stroke('rgb(104,128,101)')
.background('rgb(190,94,97)'),
// "Goidelic/Brittonic",
textures
.lines()
.orientation("vertical", "horizontal")
.size(4)
.strokeWidth(3)
.stroke('rgb(104,128,101)'),
// "Old_Norse_Middle_English",
textures
.lines()
.orientation("vertical", "horizontal")
.size(4)
.strokeWidth(1)
.stroke('rgb(190,94,97)')
.background('rgb(96,106,131)'),
// "Old_Norse_Celtic",
textures
.lines()
.orientation("vertical")
.size(4)
.strokeWidth(2)
.stroke('rgb(104,128,101)')
.background('rgb(96,106,131)'),
// "Gaelic_Celtic"
textures
.lines()
.orientation("diagonal")
.size(6)
.strokeWidth(4)
.stroke('rgb(104,128,101)'),
// "Brittonic",
textures
.lines()
.orientation("vertical", "horizontal")
.size(3)
.strokeWidth(1)
.shapeRendering("crispEdges")
.stroke('rgba(104,128,101, 0.8)'),
// "Middle English",
textures
.lines()
.orientation("vertical", "horizontal")
.size(3)
.strokeWidth(1)
.shapeRendering("crispEdges")
.stroke('rgb(214,140,136)'),
// "English",
textures
.lines()
.orientation("vertical")
.size(3)
.strokeWidth(1)
.shapeRendering("crispEdges")
.stroke('rgba(190,94,97,0.5)')
]
Aberdeenshire_Kincardineshire_merge = {
let sc = await FileAttachment("Spre1890_mercator.json").json();
console.log(sc);
// NOTE the names are mixed up in this dataset. The polygon with 'G_NAME' 'WIGTOWNSHIRE' is actually Aberdeenshire.
var selected = d3.set(['KINCARDINESHIRE', 'WIGTOWNSHIRE']);
let sc_merged = topojson.merge(sc,sc.objects.Spre1890_mercator.geometries.filter(function(d){ return selected.has(d.properties.G_NAME) }));
return sc_merged;
}
vl.markGeoshape()
.data([Aberdeenshire_Kincardineshire_merge])
.height(200)
.width(200)
.render();
historic_british_counties_Y = {
// switch in historic Yorkshire merged
let historic_british_counties_Y = historic_british_counties.filter(function(d){ return (d.properties.G_NAME != "EAST RIDING") & (d.properties.G_NAME != "WEST RIDING") & (d.properties.G_NAME != "NORTH RIDING")});
// add in merged Yorkshire
historic_british_counties_Y.push(Yorkshire_historic_merged.features[0]);
// Wigtownshire and Aberdeenshire are mixed up
for (let i=0; i<historic_british_counties_Y.length; i++){
if (historic_british_counties_Y[i].properties.G_UNIT == 10091974){
historic_british_counties_Y[i].properties.G_NAME = "ABERDEENSHIRE";
};
if (historic_british_counties_Y[i].properties.G_UNIT == 10036021){
historic_british_counties_Y[i].properties.G_NAME = "WIGTOWNSHIRE";
};
};
// switch out the correct Aberdeenshire & kinardineshire for the merged aberdeenshire-kinardineshire
historic_british_counties_Y = historic_british_counties_Y.filter(function(d){ return (d.properties.G_NAME != "ABERDEENSHIRE") | (d.properties.G_NAME != "KINCARDINESHIRE")});
historic_british_counties_Y.push({'type': 'Feature', 'properties': { 'G_NAME': 'ABERDEENSHIRE' }, 'geometry': Aberdeenshire_Kincardineshire_merge} );
return historic_british_counties_Y;
}
county_data_merged = FileAttachment('county_data_merged.json').json()
// merge county polygon data with name origin data
county_data_merged_1 = {
let county_data_merged = [];
historic_british_counties_Y.forEach(function(d,i){
county_name_origins.forEach(function(k,j){
if ((d.properties.G_NAME.toLowerCase() == "forfarshire") & (k['County name'].toLowerCase() == "angus")){
let new_item = d;
new_item.properties.G_NAME = "ANGUS";
new_item.name_origin = k;
county_data_merged.push(new_item);
}
else if (d.properties.G_NAME.toLowerCase() == k['County name'].toLowerCase()){
let new_item = d;
new_item.name_origin = k;
county_data_merged.push(new_item);
};
});
});
return county_data_merged;
}
html`<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Texturina:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400&display=swap" rel="stylesheet">`
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.
