Web Datavis researcher by day, Indie Game designer by night
map()
map = () => {
const svg = d3
.create("svg")
.attr("width", w)
.attr("height", h)
.attr("viewBox", [0, 0, w, h])
svg.append('defs').append('filter')
.attr('id', "blur")
.attr('x', "-50%")
.attr('y', "-50%")
.attr('width', "200%")
.attr('height', "200%")
.append('feGaussianBlur')
.attr('in', "SourceGraphic")
.attr('stdDeviation', "10")
let map = svg
.append('g')
.attr('class', 'map')
map
.selectAll(".provincia")
.data(province.features)
.enter()
.append("path")
.attr("class", "provincia")
.attr("d", path)
const merge = topojson.merge(italy, italy.objects.province.geometries)
/*const thicknesses = [12,8,4]
thicknesses.forEach((thickness, i) => {
map
.append('path')
.datum(merge)
.attr("d", path)
.attr("class", "shadow")
.attr('stroke-linejoin', 'round')
.attr('stroke-width', thickness)
.attr('stroke', d3.hcl(0,0,80+8*(thicknesses.length-i-1)))
})*/
map
.append('path')
.datum(merge)
.attr("d", path)
.attr("class", "shadow")
.style('filter', 'url(#blur)')
map
.append('path')
.datum(merge)
.attr("d", path)
.attr("class", "italy")
.attr("id", "land")
map
.append('path')
.datum(topojson.mesh(italy, italy.objects.province, (a,b) => a !== b && a.properties.COD_REG == b.properties.COD_REG))
.attr("d", path)
.attr("class", "province_borders")
map
.append('path')
.datum(topojson.mesh(italy, italy.objects.province, (a,b) => a !== b && a.properties.COD_REG != b.properties.COD_REG))
.attr("d", path)
.attr("class", "regioni_borders")
// zoom
function zoomed(event) {
map.attr('transform', event.transform)
}
svg.call(zoom.on('zoom.default', zoomed))
return svg.node()
}
zoom = d3.zoom()
.scaleExtent([0, Infinity])
province_data = province.features.map(d => d.properties)
italy = FileAttachment("province.topo.json").json()
province = topojson.feature(italy, italy.objects.province)
projection = d3.geoAzimuthalEqualArea() // Lambert equal-area
.rotate([-9, -53]) // centered in Germany (FIXME?)
.fitExtent([[0, 0], [w, h]], province)
path = d3.geoPath().projection(projection)
d3 = require("d3@6")
topojson = require("topojson-client@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.
