{
const boroughs = vl.markGeoshape({fill: '#eee', stroke: 'white', strokeWidth: 2})
.data(vl.topojson('data/londonBoroughs.json').feature('boroughs'));
const centroids = vl.markText({size: 8, opacity: 0.6})
.data('data/londonCentroids.json')
.transform(
vl.calculate('split(datum.name, " ")[0]').as('label')
)
.encode(
vl.longitude().fieldQ('cx'),
vl.latitude().fieldQ('cy'),
vl.text().fieldN('label'),
);
const lines = vl.markGeoshape({filled: false, strokeWidth: 2})
.data(vl.topojson('data/londonTubeLines.json').feature('line'))
.encode(
vl.color().fieldN('id').title(null)
.legend({symbolType: 'stroke', orient: 'bottom-right', offset: 2})
.scale({domain: stations, range: colors})
);
return vl.layer(boroughs, centroids, lines)
.width(700)
.height(500)
.config({view: {stroke: null}})
.render();
}
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.
