Data Engineer and aspiring Data Visualization Journalist, you can reach me at rjhontomin@gmail.com
{
const svg = d3.create("svg").attr("viewBox", [0, 0, width+margin.left+margin.right, height + margin.top + margin.bottom]).style("background", "#efefe7")
const wrapper = svg.append("g").attr("transform", `translate(${margin.left}, ${margin.top})`)
// Geo Projection
let projection = d3.geoMercator().fitSize([innerWidth, innerHeight], phl_regions2)
let geoGenerator = d3.geoPath().projection(projection)
let regions = wrapper.selectAll('region').data(phl_regions2.features)
let areas = regions.enter().append("path").attr("class", "areas").attr("d", d => geoGenerator(d)).attr("fill", "gray").attr("stroke", "white").attr("stroke-width", 1)
const circles = wrapper.selectAll('circle').data(data).join('circle').attr("transform", d => `translate(${d.x}, ${d.y})`).attr("r", 2).attr("fill", "red")
return svg.node()
}
_philvolcs = FileAttachment("2021_philvolcs.csv").csv()
phl_regions2 = FileAttachment("phl_regions2.geojson").json()
parseDate = d3.utcParse("%Y-%m-%d") //2021-01-31
height = 900
width = 600
margin = ({"top":100, "bottom":50, "left":30, "right":30})
innerHeight = height - margin.top - margin.bottom
innerWidth = width - margin.left - margin.right
projection = d3.geoMercator().translate([margin.left, margin.top]).fitSize([innerWidth, innerHeight], phl_regions2)
pathGenerator = d3.geoPath(projection)
data = ( await FileAttachment("2021_philvolcs.csv").csv()).map(d => {
let geoJsonPoint = {
type: "Point",
coordinates: [d.lat, d.long]
}
let t = projection([parseFloat(d.long), parseFloat(d.lat)]);
console.log(d.lat, d.long, t)
return {...d, "x": t[0], "y":t[1], date: parseDate(d.date)}
}).sort((a, b) => a.date - b.date)
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.
