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">`
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.