I am a Computer Scientist and Musician by training. A writer with interests in Philosophy, Economics, Technology, Politics, Business, the Arts and Fiction.
Published
Edited
Nov 18, 2020
Importers
md`# World Map`
d3 = require("d3@5", "d3-geo-projection@2")
topojson = require('topojson')
import { world, pop } from '@neocartocnrs/basemaps'
import { getDistance } from '@nuuuwan/latlng-utils'
import { addDefaults } from '@nuuuwan/option-utils'
import { getSVG, drawLine, drawMultiLine, drawText } from '@nuuuwan/svg-utils'
import { formatNumber } from '@nuuuwan/string-utils'
function drawWorldMap(svg, options = {}) {
options = addDefaults(options, {
width: width,
height: 500,
projection: d3.geoNaturalEarth2(),
colorSea: '#08f',
colorGraticule: '#ccc',
funcCountryDataToColor: function(d) {
if (d.properties.ISO3 === 'LKA') {
return '#f00';
}
if (['IND', 'SOM', 'THA', 'ATA'].includes(d.properties.ISO3)) {
return '#fcc';
}
return '#888';
}
});
const path = d3.geoPath(options.projection);
// Graticule
svg
.append("g")
.append("path")
.datum(d3.geoGraticule10())
.attr("class", "graticule")
.attr("d", path)
.attr("clip-path", "url(#clip)")
.style('fill', "none")
.style('stroke', options.colorGraticule)
.style('stroke-width', .8)
.style('stroke-opacity', .5)
.style('stroke-dasharray', 2);
// Countries
const countries = topojson.feature(world, world.objects.world_countries_data)
.features;
svg
.append("g")
.selectAll("path")
.data(countries)
.join("path")
.attr("fill", options.funcCountryDataToColor)
.attr("d", path);
}
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.
