Published
Edited
Oct 7, 2020
Insert cell
md`# Commuting to Colombo`
Insert cell
import { drawHBD } from '@nuuuwan/harry-beck-diagram'
Insert cell
drawHBD(
Object({
locations: [
Object({ id: 'Colombo Fort', latLng: [6.936026, 79.845035] }),
Object({ id: 'Moratuwa', latLng: [6.788091, 79.885151] }),
Object({ id: 'Piliyandala', latLng: [6.801668, 79.922896] }),
Object({ id: 'Pamankada Bridge', latLng: [6.873808, 79.872668] }),
Object({ id: 'Kirullapone Bridge', latLng: [6.878570, 79.872719] }),
Object({ id: 'A2/Vajira Rd', latLng: [6.890875, 79.858542] }),
Object({ id: 'A4/Vajira Rd', latLng: [6.891962, 79.862536] }),
Object({ id: 'Kottawa', latLng: [6.841680, 79.964322] }),
Object({ id: 'Thalawatugoda', latLng: [6.876301, 79.935463] }),
Object({ id: 'Malabe', latLng: [6.909482, 79.971091] }),
Object({ id: 'Angoda', latLng: [6.935991, 79.925620] }),
Object({ id: 'Kiribathgoda', latLng: [6.978122, 79.927287] }),
Object({ id: 'Kandana', latLng: [7.047747, 79.897299] }),
Object({ id: 'Pelawatte', latLng: [6.891186, 79.928782] }),
Object({ id: 'Parliament Ground', latLng: [6.892611, 79.921690] }),
Object({ id: 'A0/Kynsey Rd', latLng: [6.911411, 79.875846] }),
Object({ id: 'Ward Pl/Kynsey Rd', latLng: [6.915295, 79.874347] }),
Object({ id: 'Town Hall', latLng: [6.917165, 79.864442] }),
Object({ id: 'De Mel Park', latLng: [6.923010, 79.852266] }),
Object({ id: 'Diyatha Uyana', latLng: [6.903251, 79.908958] }),
Object({ id: 'A1/B435', latLng: [6.943962, 79.878297] }),
Object({ id: 'A1/AC5', latLng: [6.940131, 79.878256] }),
Object({ id: 'Kelani Bridge', latLng: [6.955051, 79.882419] }),
Object({ id: 'Kirula Junction', latLng: [6.892367, 79.877046] }),
Object({ id: 'Public Library', latLng: [6.912263, 79.858035] }),
Object({ id: 'A0/AC7', latLng: [6.911341, 79.877441] }),
Object({ id: 'Weli Park', latLng: [6.877915, 79.891817] }),
Object({ id: 'B345/B120/B368', latLng: [6.884002, 79.901916] }),
Object({ id: 'Borella Junction', latLng: [6.914675, 79.877515] }),
Object({ id: 'Maharagama', latLng: [6.8511, 79.9212] }),
Object({ id: 'Boralesgamuwa', latLng: [6.8410, 79.9017] }),
Object({ id: 'Ratmalana', latLng: [6.8195, 79.8801] }),
Object({ id: 'Dehiwala', latLng: [6.8301, 79.8801] }),
Object({ id: 'A4/AC8', latLng: [6.878295, 79.876393] })
],
roads: [
Object({
id: 'A0',
locations: [
'Public Library',
'A0/Kynsey Rd',
'A0/AC7',
'Diyatha Uyana',
'Parliament Ground'
]
}),
Object({
id: 'A1',
locations: [
'Colombo Fort',
'A1/AC5',
'A1/B435',
'Kelani Bridge',
'Kiribathgoda'
]
}),
Object({
id: 'A2',
locations: [
'Colombo Fort',
'A2/Vajira Rd',
'Dehiwala',
'Ratmalana',
'Moratuwa'
]
}),
Object({
id: 'A3',
locations: ['Kelani Bridge', 'Kandana']
}),
Object({
id: 'A4',
locations: [
'Colombo Fort',
'De Mel Park',
'Public Library',
'A4/Vajira Rd',
'Kirullapone Bridge',
'A4/AC8',
'Maharagama',
'Kottawa'
]
}),
Object({
id: 'AC5/6/7',
locations: [
'A1/AC5',
'A0/AC7',
'Borella Junction',
'Kirula Junction',
'A4/AC8'
]
}),

Object({
id: 'B84',
locations: ['Pamankada Bridge', 'Boralesgamuwa', 'Piliyandala']
}),
Object({
id: 'B533',
locations: ['Parliament Ground', 'Pelawatte']
}),
Object({
id: 'B47',
locations: ['Thalawatugoda', 'Pelawatte']
}),
Object({
id: 'B240',
locations: ['Diyatha Uyana', 'Malabe']
}),
Object({
id: 'B307',
locations: ['Kirula Junction', 'Weli Park']
}),
Object({
id: 'B345',
locations: ['Weli Park', 'B345/B120/B368']
}),
Object({
id: 'B368',
locations: ['Thalawatugoda', 'B345/B120/B368']
}),

Object({
id: 'B435',
locations: ['A1/B435', 'Angoda']
}),
Object({
id: 'Vajira Rd',
locations: ['A2/Vajira Rd', 'A4/Vajira Rd']
}),
Object({
id: 'Stratford Ave',
locations: ['Kirullapone Bridge', 'Pamankada Bridge']
}),
Object({
id: 'Kynsey Rd',
locations: ['A0/Kynsey Rd', 'Ward Pl/Kynsey Rd']
}),
Object({
id: 'Ward Pl',
locations: ['Borella Junction', 'Ward Pl/Kynsey Rd', 'Town Hall']
}),
Object({
id: 'Union Pl',
locations: ['Town Hall', 'De Mel Park']
})
]
}),
Object({
angle: 60,
width: 1000,
height: 1000,

doEqualize: true,
// doRound: true,
// roundPrecision: 200,

ignoreNonRoadLocations: true,
ignoreNonRoads: true,
ignoreNonJunctions: true,

doBeck: true,
caption: 'Commuting to Colombo',
funcRoadColor: function(road) {
const id = road.id;
if (id.length <= 4) {
if (id.substring(0, 1) === 'A') {
return 'red';
} else if (id.substring(0, 1) === 'B') {
return 'orange';
}
}
return 'green';
}
})
)
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