geoJson = await FileAttachment("philippines-region.json").json()
renderData = ({
width: 750,
height: 1000,
margin: 50,
})
{
const svg = d3
.create('svg')
.attr('width', renderData.width)
.attr('height', renderData.height);
const clippedWidth = renderData.width - renderData.margin * 2;
const clippedHeight = renderData.height - renderData.margin * 2;
const geoMercator = d3
.geoMercator()
// the center uses longtitude and latitude
// get Long/Lat data from google maps
.center([128, 36])
.fitSize([clippedWidth, clippedHeight], geoJson);
const pathGen = d3.geoPath(geoMercator);
const stage = svg
.append('g')
.attr('transform', `translate(${renderData.margin},${renderData.margin})`);
const textX = 10;
const textY = 10;
const infoText = stage
.append('g')
.attr('transform', `translate(${textX},${textY})`)
.append('text')
.style("font", "20px sans-serif");
infoText.text('no data');
const onMouseHover = d => {
stage
.selectAll('.geopath')
.filter(td => td.properties.ADM1_EN === d.properties.ADM1_EN)
.attr('fill', 'pink');
infoText.text(d.properties.ADM1_EN);
};
const onMouseLeave = d => {
stage
.selectAll('.geopath')
.filter(td => td.properties.ADM1_EN === d.properties.ADM1_EN)
.attr('fill', color);
infoText.text('Hover on a region');
};
const tEnter = enter =>
enter
.append('path')
.attr('d', pathGen)
.attr('stroke', 'white')
.attr('fill', color)
.classed('geopath', true)
.on('mouseenter', onMouseHover)
.on('mouseleave', onMouseLeave);
const tUpdate = null;
const tExit = null;
stage
.selectAll('.geopath')
.data(geoJson.features)
.join(tEnter, tUpdate, tExit);
return svg.node();
}
d3 = require("d3@v5")
height = 500;
topojson = require("topojson-server@3", "topojson-client@3", "topojson-simplify@3")
color = '#69b3a2'
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.
