map = html`<svg viewBox="0 0 ${width} ${height}"style= "background-color: lightblue">
<path d="${path(data)}" fill="none" stroke="gray"></path>
</svg>`;
paintbg()
function paintbg(){
return (d3.select("svg")
.call(zoomExtent.on("zoom", zoom))
)
}
zoomExtent = d3.zoom().scaleExtent([1, 20]);
g = d3.select("path").append("g")
.attr("class", "pippo")
.attr("transform",`translate(8,${margin.top})`)
function zoom() {
g.attr("transform", d3.event.transform)
}
projection = d3.geoIdentity()
.reflectY(true)
.fitWidth(width, data)
margin = ({top: 0, bottom: 0, left: 0, right: 0})
width = 954
height = Math.ceil(path.bounds(data)[1][1])
d3 = require("d3-geo@1", "d3@5")
import {jsonInput} from "@mbostock/file-input"
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.
