Published
Edited
Aug 31, 2020
Insert cell
md`# Where to build roads in Sri Lanka`
Insert cell
d3 = require('d3@5')
Insert cell
import { addDefaults } from '@nuuuwan/option-utils'
Insert cell
import {
REGION_TYPE,
getRegionLabel,
drawRegionMap
} from '@nuuuwan/sri-lanka-regions'
Insert cell
import { drawTable } from '@nuuuwan/table-utils'
Insert cell
async function getData() {
return await d3.csv(
'https://raw.githubusercontent.com/nuuuwan/misc-sl-data/master/transport.gnd_and_min_duration.csv'
);
}
Insert cell
(await getData())[0]
Insert cell
async function getRegionToMinDuration() {
return (await getData()).reduce(function(travelTimeIndex, datum) {
travelTimeIndex[datum.gnd_id] = datum.min_duration;
return travelTimeIndex;
}, {});
}
Insert cell
async function drawPolygonMapTravelTime(options = {}) {
const travelTimeIndex = await getRegionToMinDuration();

options = addDefaults(options, {
fAppendLegend: svg => null,
fAppendLabel: svg => null,
fRegionInfoToColor: function(regionInfo) {
const regionID = regionInfo.regionID;
const travelTime = travelTimeIndex[regionID];
if (travelTime === undefined) {
return 'gray';
}
if (travelTime < 0.25) {
return 'green';
}
if (travelTime < 0.5) {
return 'lightgreen';
}

if (travelTime < 1.0) {
return 'orange';
}
return 'red';
}
});

return drawRegionMap('LK-11', REGION_TYPE.GND, options);
}
Insert cell
drawPolygonMapTravelTime()
Insert cell
async function drawTableTravelTime(options = {}) {
const travelTimeIndex = await getRegionToMinDuration();
const tableData = Object.entries(travelTimeIndex)
.sort((a, b) => b[1] - a[1])
.slice(0, 10)
.map(([regionID, travelTime]) =>
Object({
region_name: getRegionLabel(regionID),
region_id: regionID,
travel_time: parseInt(travelTime * 60 + 0.5)
})
);
options = addDefaults(
options,
Object({
fieldToClass: { travel_time: 'number' }
})
);

return drawTable(tableData, options);
}
Insert cell
drawTableTravelTime()
Insert cell

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.
Learn more