map = vl.layer(
// use the sphere of the Earth as the base layer
vl.markGeoshape({fill: '#FFFFFF'})
.data(vl.sphere()),
// add a graticule for geographic reference lines
vl.markGeoshape({stroke: '#ffffff', strokeWidth: 1})
.data(vl.graticule()),
// and then the countries of the world
vl.markGeoshape({stroke: '#706545', strokeWidth: 0.5})
.data(vl.topojson(world).feature('countries'))
.transform(
vl.lookup('id').from(vl.data(storyCounts).key('id').fields('logValue', 'value'))
)
.encode(
vl.color().fieldQ('logValue')
.scale({type: 'linear', domain: [0, dataMax], range: customBatlow}),
vl.tooltip().fieldQ('value')
)
)
.width(850).height(500)
.config({view: {stroke: null}})
colorPalettes = [customBatlow, 'blues', 'yellowgreenblue'];
customBatlow = {
const str2hex = (c) => {
const hex = Math.round(c).toString(16);
return hex.length == 1 ? "0" + hex : hex;
};
const rgb2hex = (r, g, b) => "#" + str2hex(r) + str2hex(g) + str2hex(b);
const rawColorsTxt = await FileAttachment("batlow.txt").text()
const lines = rawColorsTxt
.match(/[^\r\n]+/g)
.map(l => l.split(" "))
.map(c => [c[0]*255, c[1]*255, c[2]*255])
.map(c => rgb2hex(c[0], c[1], c[2]));
return lines;
}
dataMax = Math.max(...storyCounts.map(d=>d.logValue));
storyCounts = {
let counts = await FileAttachment("mc-pub-countries-2020@6.csv").csv();
// we need to add in the iso3166-1 numberic so we can connect it to the topology by index
counts = counts.map(d => ({...d,
value: parseInt(d.story_count),
logValue: Math.log10(parseInt(d.story_count)),
id: parseInt(d.id), // this is the iso316-numeric id (strip off leading zeros)
}));
return counts;
}
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.
