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
md`# Where is Sri Lanka?`
d3 = require("d3@5", "d3-geo-projection@2")
import { getDistance } from '@nuuuwan/latlng-utils'
import { formatNumber } from '@nuuuwan/string-utils'
import { getSVG, drawText, drawMultiLine } from '@nuuuwan/svg-utils'
import { drawWorldMap } from '@nuuuwan/world-map'
{
const svg = getSVG({});
const projection = d3.geoNaturalEarth2();
const [LAT_SL, LNG_SL] = [7.42, 80.78];
const LNG_SOM = 49;
const LNG_THA = 99.35;
const LAT_ACA = -67.90;
const LAT_IND = 15.78;
drawWorldMap(svg, { projection });
[
[LAT_ACA, null, 'South'],
[null, LNG_SOM, 'West'],
[null, LNG_THA, 'East'],
[LAT_IND, null, 'North']
].map(function([lat, lng, label]) {
lat = lat ? lat : LAT_SL;
lng = lng ? lng : LNG_SL;
const distance = getDistance([LAT_SL, LNG_SL], [lat, lng]);
drawMultiLine(svg, [LNG_SL, LAT_SL], [lng, lat], 10, {
projection,
stroke: 'hsla(0, 100%, 50%, 0.5)',
strokeDasharray: '5,5'
});
const [x, y] = projection([(lng + LNG_SL) / 2, (lat + LAT_SL) / 2]);
drawText(svg, [x, y], formatNumber(parseInt(distance)) + 'km', {
fontSize: 8
});
drawText(svg, [x, y + 10], label, {
fontSize: 8
});
});
return svg.node();
}
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.
