Published
Edited
Jan 27, 2020
Insert cell
Insert cell
infographic = {
const selection = vl.selectSingle().on('mouseover');

const india_map = vl
.markGeoshape({ stroke: 'black', strokeWidth: .75 })
.data(vl.topojson(india).feature('india'))
.select(selection)
.encode(
vl.tooltip().fieldN('properties.name'),
vl.fill().if(selection, vl.value('gray'))
);
const myanmar_map = vl
.markGeoshape({ stroke: 'black', strokeWidth: .75 })
.data(vl.topojson(myanmar).feature('myanmar'))
.encode(
vl.tooltip().fieldN('properties.name'),
vl.fill().if(selection, vl.value('blue'))
);

const nepal_map = vl
.markGeoshape({ stroke: 'black', fill: '#CCC1FF', strokeWidth: .75 })
.data(vl.topojson(nepal).feature('nepal'))
.encode(
vl.tooltip().fieldN('properties.name'),
vl.fill().if(selection, vl.value('red'))
);

return vl
.layer(india_map, myanmar_map, nepal_map)
.width(width)
.height(700)
.config({ view: { stroke: null } })
.render();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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