Data Team analyzing Philippines related problems:
demographics, geography,
callcenter data, economics
Public
Edited
Oct 1, 2023
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("Philippines Region");
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 color = "#69b3a2" //overlay
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")
topojson = require("topojson-server@3", "topojson-client@3", "topojson-simplify@3")
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.
