Weekly COVID deaths, USAIzbori test[EU] Vax rates vs median equivalised net incomeCOVID metrics EU rankings2020 Croatian Presidential Election MapsUSA vaccination rate by state, colored by 2020 election Dem/Rep ratioExcess mortalityIntervencije pauka ZG HoldingCafés in ZagrebZagreb Carbon Monoxide levels, comparison of years 2012-2021The US COVID SyringeSpikemap of croatian voters
Distance from Zagreb (isochrone map)
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
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.