Data Team analyzing Philippines related problems:
demographics, geography,
callcenter data, economics
map = {
const container = yield htl.html`<div style="height: 500px;">`;
const map = L.map(container).setView([10, 123.0], 5);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
}
philippines = (await fetch("https://gist.githubusercontent.com/data-ph/2dac41bc499d626b4cc395ebb699b12b/raw/db6b205a7189c885c28afb30f8144dd4d1aead43/philippines-regions2018.json")).json()
chart = {
const width=400, height=600;
const svg = d3.select(DOM.svg(width, height))
// Use Mercator projection
var projection = d3.geoMercator()
// Powerfull stuff! I didnt know where exactly my dataset was located projection-wise,
// but .fitExtent() allows you to fit your dataset within a specified canvas
.fitExtent([[20, 20], [width, height]], philippines);
var path = d3.geoPath()
.projection(projection);
// Draw each province as a path
svg.append('g').selectAll('path')
.data(philippines.features)
.enter().append('path')
.attr('d', path)
// Styling
.style('fill', 'white')
.style('stroke', '#ccc')
return svg.node()
}
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.
