map = {
const svg = d3.select(DOM.svg(width, height)).style("background", "#d8d8d8");
const mapGroup = svg.append("g");
const paths = mapGroup
.selectAll("path")
//.data(topojson.feature(jls, jls.objects["JLS"]).features)
.data(topojson.feature(laus, laus.objects["austriaFeatures"]).features)
.enter()
.append("path")
.attr("fill", (d, i) => {
const mb = d.properties.GISCO_ID;
var durationItem = austrianData.filter((item) => item.id == mb);
var item = durationItem[0];
//return color(8.25 * 3600 - item.duration);
// return colorInterpolated(1 - item.duration / (8.25 * 3000));
// return colorInterpolated(item.duration / (8.25 * 3000));
//if (item) return color(item.duration);
if (item) return colorInterpolated(item.duration / (9 * 3600));
else {
// console.log("idem dohvatiti za: ", mb, durationItem);
return colorInterpolated(8985 / (9 * 3600));
}
})
.attr("stroke", "white")
.attr("stroke-width", 0.4)
.attr("stroke-linejoin", "round")
.attr("d", d3.geoPath(projection))
// .on("mousedown", (e, d) => console.log("kliknuo sam ", d))
.on("mouseover", (e, d) => {
mutable selectedPlace = d.properties.LAU_NAME;
const mb = d.properties.GISCO_ID;
var durationItem = austrianData.filter((item) => item.id == mb);
var item = durationItem[0];
if (!item) mutable travelTime = 8985;
else mutable travelTime = durationItem[0].duration;
var hours = Math.floor(mutable travelTime / 60 / 60);
var minutes = (mutable travelTime / 60) % 60;
mutable travelTime = `${hours}h ${minutes.toFixed(0)}m`;
// console.log("selec ", d.properties.LAU_NAME)
});
return svg.node();
}
mutable travelTime = ""
mutable selectedPlace = ""
austrianData = FileAttachment("TimeDistToVienna.csv").csv()
laus = FileAttachment("austriaFeatures.topo.json").json()
height = 800
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.
