Weekly COVID deaths, USAIzbori test[EU] Vax rates vs median equivalised net incomeCOVID metrics EU rankingsUSA 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 SyringeDistance from Zagreb (isochrone map)Spikemap of croatian voters
2020 Croatian Presidential Election Maps
vote_map_animation_to_scatter = {
// const height = (width * 5) / 8;
const svg = d3
.select(DOM.svg(width, height))
// .attr("viewBox", "0 0 960 600")
.style("width", "100%")
.style("height", "auto");
svg.append("g").attr("class", "axis").style("opacity", 0).call(xAxis);
svg.append("g").attr("class", "axis").style("opacity", 0).call(yAxis);
svg
.append("g")
.selectAll("circle")
.data(municipalities)
.enter()
.append("circle")
.attr("opacity", 0)
.attr("id", (d) => `circle-${d.rank}`)
.attr("fill", (county) => {
if (!county.properties.votes.kgk || !county.properties.votes.zoky) {
return "white";
} else if (county.properties.votes.kgk > county.properties.votes.zoky) {
return color(
county.properties.votes.kgk / county.properties.votes.count
);
} else {
return color(
-county.properties.votes.zoky / county.properties.votes.count
);
}
})
.attr("cx", (d) => (d.properties.centroid ? d.properties.centroid[0] : 0))
.attr("cy", (d) => (d.properties.centroid ? d.properties.centroid[1] : 0))
.attr("r", (d) => d.properties.radius)
.style("stroke", "white")
.append("title")
.text((d) => {
if (d.properties.jls.dohodak == null) return "";
else {
return [
d.properties.name,
`Dohodak ${d3.format(".2s")(d.properties.jls.dohodak)}`,
`Obrazovanje ${d3.format(".2f")(d.properties.jls.obrazovanje)} `,
`Zoky ${d3.format(".1%")(
d.properties.votes.zoky / d.properties.votes.count
)} glasova`,
`KGK ${d3.format(".1%")(
d.properties.votes.kgk / d.properties.votes.count
)} glasova`
].join("\n");
}
});
let opcine = svg
.append("g")
.selectAll("path")
.data(municipalities)
.enter()
.append("path")
.attr("id", (d) => `path-${d.rank}`)
.attr("class", "countyShape")
.attr("fill", (county) => {
if (!county.properties.votes.kgk || !county.properties.votes.zoky) {
return "white";
} else if (county.properties.votes.kgk > county.properties.votes.zoky) {
return color(
county.properties.votes.kgk / county.properties.votes.count
);
} else {
return color(
-county.properties.votes.zoky / county.properties.votes.count
);
}
})
.attr("d", path)
.attr("stroke", "white")
.attr("stroke-width", 0.5);
opcine
.transition()
.delay((d) => d.rank * 2)
.duration(4000)
// .style('opacity', 0.2)
.attrTween("d", function (d, i) {
//return flubber.toCircle(path(d), d.x, d.y, d.properties.radius, {
return flubber.toCircle(
path(d),
d.properties.centroid[0],
d.properties.centroid[1],
d.properties.radius,
{
maxSegmentLength: 2
}
);
})
.on("end", (transition, d) => {
// console.log(transition, d);
d3.select(`#path-${d}`).lower();
d3.select(`#circle-${d}`).attr("opacity", 1);
})
.remove();
svg
.selectAll("circle")
.transition()
.delay((d) => {
// console.log('tranz circle', d);
return 7000 + d.rank * 2;
})
.duration(5000)
//.style('opacity', 1)
.attr("r", (d) =>
d.properties.jls.razvijenost_rank == null ? 0 : d.properties.radius
)
.attr("cx", (d) => x(d.properties.jls.obrazovanje))
.attr("cy", (d) => y(d.properties.jls.dohodak));
svg
.selectAll(".axis")
.transition()
.delay((d) => {
return 7000;
})
.duration(5000)
.style("opacity", 1);
return svg.node();
}
vote_map = {
const height = (width * 5) / 8;
const svg = d3
.select(DOM.svg(width, height))
.attr("viewBox", "0 0 960 600")
.style("width", "100%")
.style("height", "auto");
svg
.append("g")
.selectAll("path")
.data(municipalities)
.enter()
.append("path")
.attr("fill", county => {
if (!county.properties.votes.kgk || !county.properties.votes.zoky) {
return 'white';
} else if (county.properties.votes.kgk > county.properties.votes.zoky) {
return color(
county.properties.votes.kgk / county.properties.votes.count
);
} else {
return color(
-county.properties.votes.zoky / county.properties.votes.count
);
}
})
.attr("d", path)
.append("title")
.text(d => {
if (d.properties.votes == null) return '';
else {
return [
d.properties.name,
`${d3.format(".1%")(
d.properties.votes.zoky / d.properties.votes.count
)} Zoky`,
`${d3.format(".1%")(
d.properties.votes.kgk / d.properties.votes.count
)} KGK`
].join(" – ");
}
});
svg
.append("path")
//.datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b))
.datum(topojson.mesh(croatia, croatia.objects.hrvatska, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 0.5)
.attr("d", path);
return svg.node();
}
vote_map_population_bubble = {
const height = (width * 5) / 8;
const svg = d3
.select(DOM.svg(width, height))
.attr("viewBox", "0 0 960 600")
.style("width", "100%")
.style("height", "auto");
svg
.append("g")
.selectAll("circle")
.data(municipalities)
.enter()
.append("circle")
.attr("fill", (county) => {
if (!county.properties.votes.kgk || !county.properties.votes.zoky) {
return "white";
} else if (county.properties.votes.kgk > county.properties.votes.zoky) {
return color(
county.properties.votes.kgk / county.properties.votes.count
);
} else {
return color(
-county.properties.votes.zoky / county.properties.votes.count
);
}
})
// .attr('fill', (d, i) => (i % 2 == 0 ? "#0e0eb9" : "#ea0004"))
.attr("cx", (d) => (d.properties.centroid ? d.properties.centroid[0] : 0))
.attr("cy", (d) => (d.properties.centroid ? d.properties.centroid[1] : 0))
.attr("r", (d) => d.properties.radius)
.style("stroke", "white");
// render legend
const x = d3.scaleLinear().domain(color.domain()).rangeRound([0, 260]);
return svg.node();
}
// vote_map_population_bubble_to_scatter = {
// const height = (width * 5) / 8;
// const svg = d3
// .select(DOM.svg(width, height))
// .attr("viewBox", "0 0 960 600")
// .style("width", "100%")
// .style("height", "auto");
// svg
// .append("g")
// .selectAll("circle")
// .data(municipalities)
// .enter()
// .append("circle")
// .attr("fill", county => {
// if (!county.properties.votes.kgk || !county.properties.votes.zoky) {
// return 'white';
// } else if (county.properties.votes.kgk > county.properties.votes.zoky) {
// return color(
// county.properties.votes.kgk / county.properties.votes.count
// );
// } else {
// return color(
// -county.properties.votes.zoky / county.properties.votes.count
// );
// }
// })
// .attr("cx", d => (d.properties.centroid ? d.properties.centroid[0] : 0))
// .attr("cy", d => (d.properties.centroid ? d.properties.centroid[1] : 0))
// .attr("r", d => d.properties.radius)
// .style("stroke", "white")
// .append("title")
// .text(d => {
// if (d.properties.jls.dohodak == null) return '';
// else {
// return [
// d.properties.name,
// `${d3.format(".2f")(d.properties.jls.dohodak)} dohodak`,
// `${d3.format(".2f")(d.properties.jls.obrazovanje)} obrazovanje`
// ].join(" – ");
// }
// });
// svg
// .selectAll("circle")
// .transition()
// .delay(d => 5000 + d.rank * 2)
// .duration(5000)
// .attr('r', d => (d.properties.jls.rbr == null ? 0 : d.properties.radius))
// .attr('cx', d => x(d.properties.jls.obrazovanje))
// .attr('cy', d => y(d.properties.jls.dohodak));
// svg.append('g').call(xAxis);
// svg.append('g').call(yAxis);
// return svg.node();
// }
xAxis = g =>
g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).ticks(width / 80))
.call(g => g.select(".domain").remove())
.call(g =>
g
.append("text")
.attr("x", width - margin.right)
.attr("y", -10)
.attr("fill", "currentColor")
.attr("text-anchor", "end")
.text('Stupanj obrazovanja (VSS, 20-65) →')
.append('title')
.text(
'Stopa obrazovanosti iz članka 2. točke 5. ove Uredbe izračunava se kao udjel stanovništva sa završenim visokim obrazovanjem u ukupnom stanovništvu, u dobi između 20 i 65 godina, na području jedinice lokalne, odnosno područne (regionalne) samouprave.\nZa izračun pokazatelja iz stavka 1. ovoga članka koriste se podaci Državnog zavoda za statistiku o obrazovnoj strukturi stanovništva Republike Hrvatske i broju stanovnika u dobi između 20 i 65 godina na razini jedinica lokalne, odnosno područne (regionalne) samouprave.'
)
)
//→
yAxis = g =>
g
.attr("transform", `translate(${margin.left},0)`)
.attr('font-size', 14)
.call(
d3
.axisLeft(y)
.ticks(null, ",d")
.tickFormat(d3.format(".2s"))
// .tickFormat(d => (d == 100 ? `${d}%` : d))
)
.call(g => g.select(".domain").remove())
.call(g =>
g
.append("text")
.attr("x", -margin.left + 15)
.attr("y", y(d3.max(jlsData, d => d.dohodak)))
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text('↑ Prosječni dohodak po stanovniku')
.append('title')
.text(
'Dohodak po stanovniku iz članka 2. točke 2. ove Uredbe izračunava se kao omjer ukupnog iznosa dohotka kojega su tijekom jednoga poreznog razdoblja (kalendarska godina) ostvarili porezni obveznici, fizičke osobe s prebivalištem ili uobičajenim boravištem na području jedinice lokalne, odnosno područne (regionalne) samouprave za koju se vrši izračun, i broja stanovnika koji žive na području te jedinice.\nDohodak iz stavka 1. ovoga članka utvrđuje se prema zakonu kojim se uređuje porez na dohodak, a uključuje dohodak ostvaren od nesamostalnog rada i dohodak ostvaren od samostalne djelatnosti.\nU ukupan iznos dohotka iz stavka 1. ovoga članka uračunava se i dobit koju su ostvarile fizičke osobe od obavljanja samostalne djelatnosti tijekom jednoga poreznog razdoblja (kalendarska godina) na području jedinice lokalne, odnosno područne (regionalne) samouprave za koju se vrši izračun.\nDohotkom od samostalne djelatnosti u smislu stavka 1. ovoga članka smatra se dohodak umanjen za propisana umanjenja i preneseni gubitak, sukladno zakonu kojim se uređuje porez na dohodak.\nDobiti iz stavka 3. ovoga članka smatra se dobit nakon propisanih umanjenja i uvećanja dobiti, sukladno zakonu kojim se uređuje porez na dobit.\nZa izračun pokazatelja iz stavka 1. ovoga članka koriste se podaci Porezne uprave o isplaćenim dohocima i podaci Državnog zavoda za statistiku o broju stanovnika na razini jedinica lokalne, odnosno područne (regionalne) samouprave.'
)
)
// vote_map_population_spread_bubble = {
// const height = (width * 5) / 8;
// const svg = d3
// .select(DOM.svg(width, height))
// .attr("viewBox", "0 0 960 600")
// .style("width", "100%")
// .style("height", "auto");
// svg
// .append("g")
// .selectAll("circle")
// .data(spreadMunicipalities)
// .enter()
// .append("circle")
// .attr("fill", county => {
// if (!county.properties.votes.kgk || !county.properties.votes.zoky) {
// return 'white';
// } else if (county.properties.votes.kgk > county.properties.votes.zoky) {
// return color(
// county.properties.votes.kgk / county.properties.votes.count
// );
// } else {
// return color(
// -county.properties.votes.zoky / county.properties.votes.count
// );
// }
// })
// .attr("cx", d => d.x)
// .attr("cy", d => d.y)
// .attr("r", d => d.properties.radius)
// .style("stroke", "white")
// .append("title")
// .text(d => {
// if (d.properties.votes == null) return '';
// else {
// return [
// d.properties.name,
// `${d3.format(".1%")(
// d.properties.votes.zoky / d.properties.votes.count
// )} Zoky`,
// `${d3.format(".1%")(
// d.properties.votes.kgk / d.properties.votes.count
// )} KGK`
// ].join(" – ");
// }
// });
// // render legend
// const x = d3
// .scaleLinear()
// .domain(color.domain())
// .rangeRound([0, 260]);
// return svg.node();
// }
// vote_map_animation = {
// const height = (width * 5) / 8;
// const svg = d3
// .select(DOM.svg(width, height))
// .attr("viewBox", "0 0 960 600")
// .style("width", "100%")
// .style("height", "auto");
// svg
// .append("g")
// .selectAll("path")
// .data(municipalities)
// .enter()
// .append("path")
// .attr("class", "countyShape")
// .attr("fill", county => {
// if (!county.properties.votes.kgk || !county.properties.votes.zoky) {
// return 'white';
// } else if (county.properties.votes.kgk > county.properties.votes.zoky) {
// return color(
// county.properties.votes.kgk / county.properties.votes.count
// );
// } else {
// return color(
// -county.properties.votes.zoky / county.properties.votes.count
// );
// }
// })
// .attr("d", path)
// .attr("stroke", "white")
// .attr("stroke-width", 0.5)
// .append("title")
// .text(d => {
// if (d.properties.votes.candidate == null) return '';
// else {
// return [
// d.properties.name,
// `${d3.format("~s")(d.properties.votes.zoky)} Zoky`,
// `${d3.format("~s")(d.properties.votes.kgk)} KGK`
// ].join(" – ");
// }
// });
// setInterval(() => {
// svg
// .selectAll(".countyShape")
// .transition()
// .delay(d => d.rank * 2)
// .duration(5000)
// .attrTween('d', function(d, i) {
// return flubber.toCircle(path(d), d.x, d.y, d.properties.radius, {
// maxSegmentLength: 2
// });
// });
// svg
// .selectAll(".countyShape")
// .transition()
// .delay(d => 10000 + d.rank * 2)
// .duration(5000)
// .attrTween('d', function(d, i) {
// return flubber.fromCircle(d.x, d.y, d.properties.radius, path(d), {
// maxSegmentLength: 2
// });
// });
// }, 25000);
// return svg.node();
// }
populations.filter(d => d.found == false)
populations = {
let retval = new Array();
croatia.objects.hrvatska.geometries.forEach(opcina => {
let opcinaFound = populationData.find(
d => d.Name.toUpperCase() == opcina.properties.NAME_2.toUpperCase()
);
retval.push({
id: opcina.properties.ID_2,
name: opcina.properties.NAME_2,
found: opcinaFound ? true : false,
population: opcinaFound ? opcinaFound.Population : 0
});
});
return retval;
}
// populations.filter(d => d.found == false)
// glas = izbori.find(d=>d.gropNaziv.toUpperCase()=='Zagreb'.toUpperCase())
izbori = {
let retval = JSON.parse(await FileAttachment("izbori@7.json").text());
return retval;
}
// votingData.filter(d => d.zupNaziv != "" && d.gropNaziv == "")
// stanovnistvo = {
// let retval = d3.csvParse(await FileAttachment("hrvatska.stanovnistvo.2011@4.csv").text(), d3.autoType)
// let zagreb = 0;
// retval.filter(d=>d.county == 'Grad Zagreb').forEach(cetvrt=>{
// zagreb += cetvrt.population;
// })
// retval = retval.filter(d => d.county != 'Grad Zagreb')
// retval.push({
// county: 'Grad Zagreb',
// denomination: 'Grad',
// name: 'Zagreb',
// population: zagreb,
// });
// return retval
// }
populationData = d3.csvParse(
await FileAttachment('stanovnistvo_povrsina@2.csv').text(),
d3.autoType
)
applySimulation = (nodes) => {
const simulation = d3.forceSimulation(nodes)
.force("cx", d3.forceX().x(d => width / 2).strength(0.02))
.force("cy", d3.forceY().y(d => width * (5/8) / 2).strength(0.02))
.force("x", d3.forceX().x(d => d.properties.centroid ? d.properties.centroid[0] : 0).strength(0.3))
.force("y", d3.forceY().y(d => d.properties.centroid ? d.properties.centroid[1] : 0).strength(0.3))
.force("charge", d3.forceManyBody().strength(-1))
.force("collide", d3.forceCollide().radius(d => d.properties.radius + nodePadding).strength(1))
.stop()
let i = 0;
while (simulation.alpha() > 0.01 && i < 200) {
simulation.tick();
i++;
console.log(`${Math.round(100*i/200)}%`)
}
return simulation.nodes();
}
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.
