map = {
const svg = d3.select(DOM.svg(width, height)).style("background", "#FFF8E7");
const mapGroup = svg.append("g");
const paths = mapGroup
.selectAll("path")
.data(topojson.feature(jls, jls.objects["JLS"]).features)
.enter()
.append("path")
.attr("fill", (d, i) => {
const mb = `HR_${d.properties.JLS_MB}`;
var durationItem = data.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));
return color(item.duration);
})
.attr("stroke", "white")
.attr("stroke-width", 0.4)
.attr("stroke-linejoin", "round")
.attr("d", d3.geoPath(projection))
.on("mousedown", (d, i) => console.log("kliknuo sam ", i));
return svg.node();
}
continuousMap = {
const svg = d3.select(DOM.svg(width, height)).style("background", "white");
const mapGroup = svg.append("g");
const w = 0.35;
const h = 0.12;
const titlePlace = mapGroup
.append("text")
.attr("x", width * w)
.attr("y", height * h)
.attr("text-anchor", "end")
.attr("font-size", 20)
.text("");
const titleDuration = mapGroup
.append("text")
.attr("x", width * w)
.attr("y", height * h)
.attr("dy", 20)
.attr("text-anchor", "end")
.text("");
const paths = mapGroup
.selectAll("path")
.data(topojson.feature(jls, jls.objects["JLS"]).features)
.enter()
.append("path")
.attr("fill", (d, i) => {
const mb = `HR_${d.properties.JLS_MB}`;
var durationItem = data.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));
return colorInterpolated(item.duration / (7 * 3600));
})
.attr("stroke", "lightgrey")
.attr("stroke-width", 0.4)
.attr("stroke-linejoin", "round")
.attr("d", d3.geoPath(projection))
.on("mouseover", (e, d) => {
const mb = `HR_${d.properties.JLS_MB}`;
var durationItem = data.filter((item) => item.id == mb);
var item = durationItem[0];
const travelTime = item.duration;
var hours = Math.floor(travelTime / 60 / 60);
var minutes = (travelTime / 60) % 60;
titlePlace.text(item.name);
titleDuration.text(`${hours}h ${minutes.toFixed(0)}m`);
// console.log(durationItem);
// console.log("selec ", d.properties.LAU_NAME)
});
return svg.node();
}
colorInterpolated = d3.interpolateRdGy //1
data = FileAttachment("TimeDistToZagreb.csv").csv()
// data = FileAttachment("TimeDistToBrtonigla.csv").csv()
d3.range(0.75, 8.5, 0.75)
d3.schemeRdBu[11]
color = d3.scaleThreshold(
//d3.range(0.5, 6, 0.5).map((d) => d * 3600),
d3
.range(0.75, 8.5, 0.75)
// .reverse()
.map((d) => d * 3600),
//d3.schemeRdBu[11]
d3.schemeRdBu[11]
)
d3.schemeOranges[9]
data.filter((d) => d.name == "Brtonigla - Verteneglio")
Plot.rectY(
data,
Plot.binX({ y: "count" }, { x: "duration", fill: "purple" })
).plot()
//fix for zadar (R-script that calls OSRM uses centroids, so some places land on the sea by accident )
(data.filter((d) => d.name == "Zadar")[0].duration = "11880")
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.
