map = {
const svg = d3
.create("svg")
.attr("width", w)
.attr("height", h)
.attr("viewBox", [0, 0, w, h])
let map = svg
.append('g')
const s = 6
map.selectAll('.point')
.data(weather_data)
.enter()
.append('rect')
.attr('width', s)
.attr('height', s)
.attr('class', 'point')
.attr('transform', d => {
let p = projection([d.X, d.Y])
return `translate(${p[0]-s/2} ${p[1]-s/2})`
})
.attr('fill', d => temp_color(d.Value))
let screen = map.append('g')
.attr('class', 'screen')
screen.append('rect')
.attr('width', w*1.2)
.attr('height', h*1.2)
.attr('x', -w*0.1)
.attr('y', -h*0.1)
.attr('class', 'screenrect')
screen
.selectAll(".subunit")
.data(provinces.features)
.enter()
.append("path")
.attr("class", "subunit")
.attr("d", path)
map
.append('path')
.datum(topojson.merge(italy, italy.objects.subunits.geometries))
.attr("d", path)
.attr("class", "italy")
map
.append('path')
.datum(topojson.mesh(italy, italy.objects.subunits, (a,b) => a !== b && usu.get(a.id).codice_regione == usu.get(b.id).codice_regione))
.attr("d", path)
.attr("class", "subunits_borders")
map
.append('path')
.datum(topojson.mesh(italy, italy.objects.subunits, (a,b) => a !== b && usu.get(a.id).codice_regione != usu.get(b.id).codice_regione))
.attr("d", path)
.attr("class", "units_borders")
function zoomed() {
map.attr('transform', d3.event.transform)
map.selectAll('.bubble').attr('transform', `scale(${1/d3.event.transform.k})`)
}
svg.call(d3.zoom()
.scaleExtent([0, Infinity])
.on('zoom', zoomed))
return svg.node()
}