<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Silnice v číslech</title><link>https://silnicevcislech.cz/shorts/</link><description/><generator>Hugo 0.139.3</generator><language>cs</language><managingEditor>Eduard Šubert</managingEditor><lastBuildDate>Mon, 27 Jul 2026 09:58:28 +0100</lastBuildDate><atom:link href="https://silnicevcislech.cz/shorts/feed.xml" rel="self" type="application/rss+xml"/><item><title>Kolik je zraněných chodců na zelenou?</title><link>https://silnicevcislech.cz/shorts/pedestrian_crossing_traffic_light/</link><pubDate>Mon, 27 Jul 2026 09:58:28 +0100</pubDate><guid>https://silnicevcislech.cz/shorts/pedestrian_crossing_traffic_light/</guid><description><![CDATA[<p>Bohužel ani na přechodech vybavených světelným signalizačním zařízením (semaforem) nejsou chodci v bezpečí. V roce 2025 bylo na takových přechodech <strong>sraženo 135 chodců</strong> s různými následky v nehodách zaviněných řidičem motorového vozidla.</p>
<p>V následujícím grafu se můžete podívat na počty různých následků pro chodce při přecházení na červenou nebo na zelenou, bez ohledu na zavinění nehody.</p>

<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
[data-chart-tooltip] { cursor: pointer; transition: filter 0.15s; }
[data-chart-tooltip]:hover, .chart-tooltip-active { filter: brightness(1.15); }
/* Labels drawn over bars/segments must not swallow taps and hovers */
.chart svg text { pointer-events: none; }
#chart-tooltip {
    position: fixed;
    display: none;
    pointer-events: none;
    z-index: 1000;
    max-width: 18rem;
    padding: 0.35rem 0.6rem;
    border-radius: 0.25rem;
    background: var(--tag-bg);
    color: var(--tag-text);
    border: 1px solid var(--border);
    font-size: 0.85rem;
    white-space: nowrap;
}
</style>

<script>
(function () {
    if (window.__chartTooltipInit) return;
    window.__chartTooltipInit = true;

    let tooltipEl = null;
    let currentTarget = null;
    let shownByTouch = false;

    function targetOf(event) {
        return event.target.closest ? event.target.closest("[data-chart-tooltip]") : null;
    }

    function show(target, clientX, clientY, isTouch) {
        if (!tooltipEl) {
            tooltipEl = document.createElement("div");
            tooltipEl.id = "chart-tooltip";
            document.body.appendChild(tooltipEl);
        }
        tooltipEl.textContent = target.getAttribute("data-chart-tooltip");
        tooltipEl.style.display = "block";
        const rect = tooltipEl.getBoundingClientRect();
        const left = Math.max(4, Math.min(clientX - rect.width / 2, window.innerWidth - rect.width - 4));
        // Offset above the pointer; larger for touch so the finger doesn't cover it
        let top = clientY - rect.height - (isTouch ? 24 : 12);
        if (top < 4) top = clientY + 16;
        tooltipEl.style.left = `${left}px`;
        tooltipEl.style.top = `${top}px`;
        if (currentTarget && currentTarget !== target) currentTarget.classList.remove("chart-tooltip-active");
        target.classList.add("chart-tooltip-active");
        currentTarget = target;
        shownByTouch = isTouch;
    }

    function hide() {
        if (tooltipEl) tooltipEl.style.display = "none";
        if (currentTarget) currentTarget.classList.remove("chart-tooltip-active");
        currentTarget = null;
        shownByTouch = false;
    }

    document.addEventListener("pointerover", (e) => {
        if (e.pointerType === "touch") return;
        const t = targetOf(e);
        if (t) show(t, e.clientX, e.clientY, false);
    });

    document.addEventListener("pointermove", (e) => {
        if (e.pointerType === "touch" || !currentTarget) return;
        if (targetOf(e) === currentTarget) show(currentTarget, e.clientX, e.clientY, false);
    });

    document.addEventListener("pointerout", (e) => {
        // On touch, pointerout fires on finger lift and must not hide the tooltip
        if (e.pointerType === "touch" || !currentTarget) return;
        const related = e.relatedTarget && e.relatedTarget.closest
            ? e.relatedTarget.closest("[data-chart-tooltip]")
            : null;
        if (targetOf(e) === currentTarget && related !== currentTarget) hide();
    });

    // Tap handler: a scroll gesture fires pointercancel instead, so pointerup
    // only arrives for genuine taps — no preventDefault needed
    document.addEventListener("pointerup", (e) => {
        if (e.pointerType !== "touch") return;
        const t = targetOf(e);
        if (t && t === currentTarget && shownByTouch) {
            hide();
        } else if (t) {
            show(t, e.clientX, e.clientY, true);
        } else {
            hide();
        }
    });

    document.addEventListener("scroll", () => {
        if (shownByTouch) hide();
    }, { capture: true, passive: true });

    window.addEventListener("resize", hide);

    document.addEventListener("keydown", (e) => {
        if (e.key === "Escape") hide();
    });
})();
</script>

<script>
(function () {
    if (window.registerChart) return;

    const draws = [];
    window.registerChart = function (fn) {
        draws.push(fn);
        fn();
    };

    // Mobile browsers fire resize when the URL bar shows/hides while
    // scrolling; only a width change warrants a redraw
    let lastWidth = window.innerWidth;
    let timer;
    window.addEventListener("resize", () => {
        clearTimeout(timer);
        timer = setTimeout(() => {
            if (window.innerWidth === lastWidth) return;
            lastWidth = window.innerWidth;
            draws.forEach(fn => fn());
        }, 200);
    });
})();
</script>


<script>
    function drawTrafficLightChart(elementId, district, injuryType) {
        // Data format: [district, situation, injury_type, year, count]
        // district: "all" | NUTS3 code (CZ010 Praha, CZ020 Středočeský, CZ031 Jihočeský,
        //           CZ032 Plzeňský, CZ041 Karlovarský, CZ042 Ústecký, CZ051 Liberecký,
        //           CZ052 Královéhradecký, CZ053 Pardubický, CZ063 Vysočina,
        //           CZ064 Jihomoravský, CZ071 Olomoucký, CZ072 Zlínský, CZ080 Moravskoslezský)
        // situation: 1 = na zelenou | 2 = na červenou
        // injury_type: 1 = usmrcení | 2 = těžké zranění | 3 = lehké zranění | 4 = bez zranění
        // year: 2023 | 2024 | 2025
        const rawData = [['CZ010', 1, 1, 2023, 0],
        ['CZ010', 1, 1, 2024, 1],
        ['CZ010', 1, 1, 2025, 0],
        ['CZ010', 1, 2, 2023, 2],
        ['CZ010', 1, 2, 2024, 6],
        ['CZ010', 1, 2, 2025, 12],
        ['CZ010', 1, 3, 2023, 45],
        ['CZ010', 1, 3, 2024, 30],
        ['CZ010', 1, 3, 2025, 41],
        ['CZ010', 1, 4, 2023, 7],
        ['CZ010', 1, 4, 2024, 2],
        ['CZ010', 1, 4, 2025, 2],
        ['CZ010', 2, 1, 2023, 1],
        ['CZ010', 2, 1, 2024, 1],
        ['CZ010', 2, 1, 2025, 1],
        ['CZ010', 2, 2, 2023, 3],
        ['CZ010', 2, 2, 2024, 8],
        ['CZ010', 2, 2, 2025, 4],
        ['CZ010', 2, 3, 2023, 20],
        ['CZ010', 2, 3, 2024, 25],
        ['CZ010', 2, 3, 2025, 24],
        ['CZ010', 2, 4, 2023, 6],
        ['CZ010', 2, 4, 2024, 6],
        ['CZ010', 2, 4, 2025, 7],
        ['CZ020', 1, 1, 2023, 0],
        ['CZ020', 1, 1, 2024, 1],
        ['CZ020', 1, 1, 2025, 0],
        ['CZ020', 1, 2, 2023, 1],
        ['CZ020', 1, 2, 2024, 3],
        ['CZ020', 1, 2, 2025, 0],
        ['CZ020', 1, 3, 2023, 9],
        ['CZ020', 1, 3, 2024, 13],
        ['CZ020', 1, 3, 2025, 13],
        ['CZ020', 1, 4, 2023, 2],
        ['CZ020', 1, 4, 2024, 1],
        ['CZ020', 1, 4, 2025, 3],
        ['CZ020', 2, 1, 2023, 0],
        ['CZ020', 2, 1, 2024, 0],
        ['CZ020', 2, 1, 2025, 0],
        ['CZ020', 2, 2, 2023, 0],
        ['CZ020', 2, 2, 2024, 1],
        ['CZ020', 2, 2, 2025, 0],
        ['CZ020', 2, 3, 2023, 1],
        ['CZ020', 2, 3, 2024, 3],
        ['CZ020', 2, 3, 2025, 1],
        ['CZ020', 2, 4, 2023, 0],
        ['CZ020', 2, 4, 2024, 0],
        ['CZ020', 2, 4, 2025, 0],
        ['CZ031', 1, 1, 2023, 0],
        ['CZ031', 1, 1, 2024, 0],
        ['CZ031', 1, 1, 2025, 0],
        ['CZ031', 1, 2, 2023, 0],
        ['CZ031', 1, 2, 2024, 1],
        ['CZ031', 1, 2, 2025, 2],
        ['CZ031', 1, 3, 2023, 11],
        ['CZ031', 1, 3, 2024, 17],
        ['CZ031', 1, 3, 2025, 2],
        ['CZ031', 1, 4, 2023, 1],
        ['CZ031', 1, 4, 2024, 1],
        ['CZ031', 1, 4, 2025, 0],
        ['CZ031', 2, 1, 2023, 0],
        ['CZ031', 2, 1, 2024, 0],
        ['CZ031', 2, 1, 2025, 0],
        ['CZ031', 2, 2, 2023, 0],
        ['CZ031', 2, 2, 2024, 1],
        ['CZ031', 2, 2, 2025, 1],
        ['CZ031', 2, 3, 2023, 1],
        ['CZ031', 2, 3, 2024, 2],
        ['CZ031', 2, 3, 2025, 3],
        ['CZ031', 2, 4, 2023, 0],
        ['CZ031', 2, 4, 2024, 0],
        ['CZ031', 2, 4, 2025, 0],
        ['CZ032', 1, 1, 2023, 0],
        ['CZ032', 1, 1, 2024, 0],
        ['CZ032', 1, 1, 2025, 0],
        ['CZ032', 1, 2, 2023, 3],
        ['CZ032', 1, 2, 2024, 6],
        ['CZ032', 1, 2, 2025, 0],
        ['CZ032', 1, 3, 2023, 9],
        ['CZ032', 1, 3, 2024, 12],
        ['CZ032', 1, 3, 2025, 4],
        ['CZ032', 1, 4, 2023, 0],
        ['CZ032', 1, 4, 2024, 2],
        ['CZ032', 1, 4, 2025, 0],
        ['CZ032', 2, 1, 2023, 0],
        ['CZ032', 2, 1, 2024, 0],
        ['CZ032', 2, 1, 2025, 0],
        ['CZ032', 2, 2, 2023, 0],
        ['CZ032', 2, 2, 2024, 0],
        ['CZ032', 2, 2, 2025, 0],
        ['CZ032', 2, 3, 2023, 4],
        ['CZ032', 2, 3, 2024, 6],
        ['CZ032', 2, 3, 2025, 3],
        ['CZ032', 2, 4, 2023, 1],
        ['CZ032', 2, 4, 2024, 2],
        ['CZ032', 2, 4, 2025, 1],
        ['CZ041', 1, 1, 2023, 0],
        ['CZ041', 1, 1, 2024, 0],
        ['CZ041', 1, 1, 2025, 0],
        ['CZ041', 1, 2, 2023, 1],
        ['CZ041', 1, 2, 2024, 0],
        ['CZ041', 1, 2, 2025, 0],
        ['CZ041', 1, 3, 2023, 4],
        ['CZ041', 1, 3, 2024, 3],
        ['CZ041', 1, 3, 2025, 1],
        ['CZ041', 1, 4, 2023, 0],
        ['CZ041', 1, 4, 2024, 1],
        ['CZ041', 1, 4, 2025, 0],
        ['CZ041', 2, 1, 2023, 0],
        ['CZ041', 2, 1, 2024, 0],
        ['CZ041', 2, 1, 2025, 0],
        ['CZ041', 2, 2, 2023, 0],
        ['CZ041', 2, 2, 2024, 0],
        ['CZ041', 2, 2, 2025, 0],
        ['CZ041', 2, 3, 2023, 0],
        ['CZ041', 2, 3, 2024, 0],
        ['CZ041', 2, 3, 2025, 0],
        ['CZ041', 2, 4, 2023, 0],
        ['CZ041', 2, 4, 2024, 0],
        ['CZ041', 2, 4, 2025, 0],
        ['CZ042', 1, 1, 2023, 0],
        ['CZ042', 1, 1, 2024, 0],
        ['CZ042', 1, 1, 2025, 0],
        ['CZ042', 1, 2, 2023, 1],
        ['CZ042', 1, 2, 2024, 0],
        ['CZ042', 1, 2, 2025, 0],
        ['CZ042', 1, 3, 2023, 10],
        ['CZ042', 1, 3, 2024, 7],
        ['CZ042', 1, 3, 2025, 7],
        ['CZ042', 1, 4, 2023, 0],
        ['CZ042', 1, 4, 2024, 1],
        ['CZ042', 1, 4, 2025, 0],
        ['CZ042', 2, 1, 2023, 0],
        ['CZ042', 2, 1, 2024, 0],
        ['CZ042', 2, 1, 2025, 0],
        ['CZ042', 2, 2, 2023, 0],
        ['CZ042', 2, 2, 2024, 1],
        ['CZ042', 2, 2, 2025, 0],
        ['CZ042', 2, 3, 2023, 0],
        ['CZ042', 2, 3, 2024, 5],
        ['CZ042', 2, 3, 2025, 1],
        ['CZ042', 2, 4, 2023, 0],
        ['CZ042', 2, 4, 2024, 0],
        ['CZ042', 2, 4, 2025, 1],
        ['CZ051', 1, 1, 2023, 0],
        ['CZ051', 1, 1, 2024, 0],
        ['CZ051', 1, 1, 2025, 0],
        ['CZ051', 1, 2, 2023, 0],
        ['CZ051', 1, 2, 2024, 0],
        ['CZ051', 1, 2, 2025, 0],
        ['CZ051', 1, 3, 2023, 5],
        ['CZ051', 1, 3, 2024, 3],
        ['CZ051', 1, 3, 2025, 2],
        ['CZ051', 1, 4, 2023, 0],
        ['CZ051', 1, 4, 2024, 2],
        ['CZ051', 1, 4, 2025, 0],
        ['CZ051', 2, 1, 2023, 0],
        ['CZ051', 2, 1, 2024, 1],
        ['CZ051', 2, 1, 2025, 0],
        ['CZ051', 2, 2, 2023, 0],
        ['CZ051', 2, 2, 2024, 1],
        ['CZ051', 2, 2, 2025, 0],
        ['CZ051', 2, 3, 2023, 1],
        ['CZ051', 2, 3, 2024, 1],
        ['CZ051', 2, 3, 2025, 1],
        ['CZ051', 2, 4, 2023, 0],
        ['CZ051', 2, 4, 2024, 0],
        ['CZ051', 2, 4, 2025, 1],
        ['CZ052', 1, 1, 2023, 0],
        ['CZ052', 1, 1, 2024, 0],
        ['CZ052', 1, 1, 2025, 0],
        ['CZ052', 1, 2, 2023, 0],
        ['CZ052', 1, 2, 2024, 0],
        ['CZ052', 1, 2, 2025, 1],
        ['CZ052', 1, 3, 2023, 0],
        ['CZ052', 1, 3, 2024, 1],
        ['CZ052', 1, 3, 2025, 2],
        ['CZ052', 1, 4, 2023, 0],
        ['CZ052', 1, 4, 2024, 0],
        ['CZ052', 1, 4, 2025, 0],
        ['CZ052', 2, 1, 2023, 0],
        ['CZ052', 2, 1, 2024, 0],
        ['CZ052', 2, 1, 2025, 0],
        ['CZ052', 2, 2, 2023, 0],
        ['CZ052', 2, 2, 2024, 0],
        ['CZ052', 2, 2, 2025, 1],
        ['CZ052', 2, 3, 2023, 2],
        ['CZ052', 2, 3, 2024, 0],
        ['CZ052', 2, 3, 2025, 1],
        ['CZ052', 2, 4, 2023, 0],
        ['CZ052', 2, 4, 2024, 0],
        ['CZ052', 2, 4, 2025, 0],
        ['CZ053', 1, 1, 2023, 0],
        ['CZ053', 1, 1, 2024, 1],
        ['CZ053', 1, 1, 2025, 0],
        ['CZ053', 1, 2, 2023, 0],
        ['CZ053', 1, 2, 2024, 0],
        ['CZ053', 1, 2, 2025, 0],
        ['CZ053', 1, 3, 2023, 2],
        ['CZ053', 1, 3, 2024, 3],
        ['CZ053', 1, 3, 2025, 4],
        ['CZ053', 1, 4, 2023, 0],
        ['CZ053', 1, 4, 2024, 0],
        ['CZ053', 1, 4, 2025, 0],
        ['CZ053', 2, 1, 2023, 0],
        ['CZ053', 2, 1, 2024, 0],
        ['CZ053', 2, 1, 2025, 0],
        ['CZ053', 2, 2, 2023, 0],
        ['CZ053', 2, 2, 2024, 0],
        ['CZ053', 2, 2, 2025, 0],
        ['CZ053', 2, 3, 2023, 0],
        ['CZ053', 2, 3, 2024, 2],
        ['CZ053', 2, 3, 2025, 0],
        ['CZ053', 2, 4, 2023, 0],
        ['CZ053', 2, 4, 2024, 0],
        ['CZ053', 2, 4, 2025, 0],
        ['CZ063', 1, 1, 2023, 0],
        ['CZ063', 1, 1, 2024, 0],
        ['CZ063', 1, 1, 2025, 0],
        ['CZ063', 1, 2, 2023, 0],
        ['CZ063', 1, 2, 2024, 1],
        ['CZ063', 1, 2, 2025, 0],
        ['CZ063', 1, 3, 2023, 5],
        ['CZ063', 1, 3, 2024, 6],
        ['CZ063', 1, 3, 2025, 3],
        ['CZ063', 1, 4, 2023, 1],
        ['CZ063', 1, 4, 2024, 2],
        ['CZ063', 1, 4, 2025, 0],
        ['CZ063', 2, 1, 2023, 0],
        ['CZ063', 2, 1, 2024, 0],
        ['CZ063', 2, 1, 2025, 0],
        ['CZ063', 2, 2, 2023, 0],
        ['CZ063', 2, 2, 2024, 0],
        ['CZ063', 2, 2, 2025, 0],
        ['CZ063', 2, 3, 2023, 2],
        ['CZ063', 2, 3, 2024, 0],
        ['CZ063', 2, 3, 2025, 2],
        ['CZ063', 2, 4, 2023, 0],
        ['CZ063', 2, 4, 2024, 0],
        ['CZ063', 2, 4, 2025, 0],
        ['CZ064', 1, 1, 2023, 0],
        ['CZ064', 1, 1, 2024, 1],
        ['CZ064', 1, 1, 2025, 0],
        ['CZ064', 1, 2, 2023, 5],
        ['CZ064', 1, 2, 2024, 1],
        ['CZ064', 1, 2, 2025, 1],
        ['CZ064', 1, 3, 2023, 11],
        ['CZ064', 1, 3, 2024, 11],
        ['CZ064', 1, 3, 2025, 12],
        ['CZ064', 1, 4, 2023, 1],
        ['CZ064', 1, 4, 2024, 0],
        ['CZ064', 1, 4, 2025, 1],
        ['CZ064', 2, 1, 2023, 0],
        ['CZ064', 2, 1, 2024, 0],
        ['CZ064', 2, 1, 2025, 0],
        ['CZ064', 2, 2, 2023, 0],
        ['CZ064', 2, 2, 2024, 0],
        ['CZ064', 2, 2, 2025, 0],
        ['CZ064', 2, 3, 2023, 4],
        ['CZ064', 2, 3, 2024, 6],
        ['CZ064', 2, 3, 2025, 4],
        ['CZ064', 2, 4, 2023, 0],
        ['CZ064', 2, 4, 2024, 1],
        ['CZ064', 2, 4, 2025, 0],
        ['CZ071', 1, 1, 2023, 0],
        ['CZ071', 1, 1, 2024, 0],
        ['CZ071', 1, 1, 2025, 0],
        ['CZ071', 1, 2, 2023, 0],
        ['CZ071', 1, 2, 2024, 0],
        ['CZ071', 1, 2, 2025, 1],
        ['CZ071', 1, 3, 2023, 8],
        ['CZ071', 1, 3, 2024, 2],
        ['CZ071', 1, 3, 2025, 4],
        ['CZ071', 1, 4, 2023, 1],
        ['CZ071', 1, 4, 2024, 0],
        ['CZ071', 1, 4, 2025, 0],
        ['CZ071', 2, 1, 2023, 0],
        ['CZ071', 2, 1, 2024, 0],
        ['CZ071', 2, 1, 2025, 0],
        ['CZ071', 2, 2, 2023, 0],
        ['CZ071', 2, 2, 2024, 0],
        ['CZ071', 2, 2, 2025, 0],
        ['CZ071', 2, 3, 2023, 2],
        ['CZ071', 2, 3, 2024, 1],
        ['CZ071', 2, 3, 2025, 0],
        ['CZ071', 2, 4, 2023, 0],
        ['CZ071', 2, 4, 2024, 0],
        ['CZ071', 2, 4, 2025, 0],
        ['CZ080', 1, 1, 2023, 1],
        ['CZ080', 1, 1, 2024, 0],
        ['CZ080', 1, 1, 2025, 0],
        ['CZ080', 1, 2, 2023, 0],
        ['CZ080', 1, 2, 2024, 1],
        ['CZ080', 1, 2, 2025, 0],
        ['CZ080', 1, 3, 2023, 8],
        ['CZ080', 1, 3, 2024, 11],
        ['CZ080', 1, 3, 2025, 9],
        ['CZ080', 1, 4, 2023, 2],
        ['CZ080', 1, 4, 2024, 2],
        ['CZ080', 1, 4, 2025, 3],
        ['CZ080', 2, 1, 2023, 1],
        ['CZ080', 2, 1, 2024, 0],
        ['CZ080', 2, 1, 2025, 1],
        ['CZ080', 2, 2, 2023, 1],
        ['CZ080', 2, 2, 2024, 2],
        ['CZ080', 2, 2, 2025, 1],
        ['CZ080', 2, 3, 2023, 5],
        ['CZ080', 2, 3, 2024, 5],
        ['CZ080', 2, 3, 2025, 5],
        ['CZ080', 2, 4, 2023, 1],
        ['CZ080', 2, 4, 2024, 2],
        ['CZ080', 2, 4, 2025, 4],
        ['CZ072', 1, 1, 2023, 0],
        ['CZ072', 1, 1, 2024, 0],
        ['CZ072', 1, 1, 2025, 0],
        ['CZ072', 1, 2, 2023, 0],
        ['CZ072', 1, 2, 2024, 0],
        ['CZ072', 1, 2, 2025, 1],
        ['CZ072', 1, 3, 2023, 4],
        ['CZ072', 1, 3, 2024, 6],
        ['CZ072', 1, 3, 2025, 5],
        ['CZ072', 1, 4, 2023, 0],
        ['CZ072', 1, 4, 2024, 2],
        ['CZ072', 1, 4, 2025, 0],
        ['CZ072', 2, 1, 2023, 0],
        ['CZ072', 2, 1, 2024, 0],
        ['CZ072', 2, 1, 2025, 0],
        ['CZ072', 2, 2, 2023, 1],
        ['CZ072', 2, 2, 2024, 1],
        ['CZ072', 2, 2, 2025, 0],
        ['CZ072', 2, 3, 2023, 3],
        ['CZ072', 2, 3, 2024, 2],
        ['CZ072', 2, 3, 2025, 1],
        ['CZ072', 2, 4, 2023, 0],
        ['CZ072', 2, 4, 2024, 0],
        ['CZ072', 2, 4, 2025, 0],
        ['all', 1, 1, 2023, 1],
        ['all', 1, 1, 2024, 4],
        ['all', 1, 1, 2025, 0],
        ['all', 1, 2, 2023, 13],
        ['all', 1, 2, 2024, 19],
        ['all', 1, 2, 2025, 18],
        ['all', 1, 3, 2023, 131],
        ['all', 1, 3, 2024, 125],
        ['all', 1, 3, 2025, 109],
        ['all', 1, 4, 2023, 15],
        ['all', 1, 4, 2024, 16],
        ['all', 1, 4, 2025, 9],
        ['all', 2, 1, 2023, 2],
        ['all', 2, 1, 2024, 2],
        ['all', 2, 1, 2025, 2],
        ['all', 2, 2, 2023, 5],
        ['all', 2, 2, 2024, 15],
        ['all', 2, 2, 2025, 7],
        ['all', 2, 3, 2023, 45],
        ['all', 2, 3, 2024, 58],
        ['all', 2, 3, 2025, 46],
        ['all', 2, 4, 2023, 8],
        ['all', 2, 4, 2024, 11],
        ['all', 2, 4, 2025, 14]];

        d3.select(`#${elementId} .chart > *`).remove();

        const czCS = d3.formatLocale({ thousands: " ", grouping: [3], decimal: "," });
        const fmtNum = czCS.format(",d");

        const container = d3.select(`#${elementId} .chart`);
        const width = parseInt(container.style("width"));

        const situations = [
            { key: 1, label: "Přecházení na zelenou", color: "#59a14f" },
            { key: 2, label: "Přecházení na červenou", color: "#e15759" },
        ];

        const titles = {
            1: "Usmrcení chodci při přecházení přechodu se semaforem",
            2: "Těžce zranění chodci při přecházení přechodu se semaforem",
            3: "Lehce zranění chodci při přecházení přechodu se semaforem",
            4: "Sražení chodci bez zranění při přecházení přechodu se semaforem",
        };

        const districtNames = {
            "all":   "celá ČR",
            "CZ010": "Hlavní město Praha",
            "CZ020": "Středočeský kraj",
            "CZ031": "Jihočeský kraj",
            "CZ032": "Plzeňský kraj",
            "CZ041": "Karlovarský kraj",
            "CZ042": "Ústecký kraj",
            "CZ051": "Liberecký kraj",
            "CZ052": "Královéhradecký kraj",
            "CZ053": "Pardubický kraj",
            "CZ063": "Kraj Vysočina",
            "CZ064": "Jihomoravský kraj",
            "CZ071": "Olomoucký kraj",
            "CZ072": "Zlínský kraj",
            "CZ080": "Moravskoslezský kraj",
        };

        d3.select(`#${elementId} .chart-header h1`)
            .text(`${titles[+injuryType]} – ${districtNames[district]}`);

        // Filter and aggregate into [{year, 1: count, 2: count}, ...]
        const iType = +injuryType;
        const byYear = {};
        rawData
            .filter(d => d[0] === district && d[2] === iType)
            .forEach(d => {
                const yr = String(d[3]);
                const sit = d[1];
                if (!byYear[yr]) byYear[yr] = { year: yr, 1: 0, 2: 0 };
                byYear[yr][sit] = d[4];
            });
        const chartData = Object.values(byYear).sort((a, b) => +a.year - +b.year);

        const fontSize = Math.max(width * 0.022, 12);
        const labelFontSize = Math.max(width * 0.017, 10);
        const swatchSize = Math.round(fontSize * 0.9);
        const legendLineHeight = fontSize * 2;

        let svg;
        function layoutLegend(draw) {
            let lx = 0, ly = 0;
            situations.forEach(s => {
                const itemWidth = swatchSize + 5 + s.label.length * fontSize * 0.58 + 14;
                if (lx > 0 && lx + itemWidth > width) { lx = 0; ly += legendLineHeight; }
                if (draw) {
                    svg.append("rect")
                        .attr("x", lx).attr("y", ly + (legendLineHeight - swatchSize) / 2)
                        .attr("width", swatchSize).attr("height", swatchSize)
                        .attr("fill", s.color).attr("rx", 2);
                    svg.append("text")
                        .attr("x", lx + swatchSize + 5).attr("y", ly + legendLineHeight / 2)
                        .attr("dominant-baseline", "middle")
                        .attr("font-size", fontSize)
                        .text(s.label);
                }
                lx += itemWidth;
            });
            return ly + legendLineHeight;
        }

        const legendHeight = layoutLegend(false);
        const marginTop = legendHeight + labelFontSize * 2.5;
        const marginBottom = 30;
        const marginLeft = Math.max(width * 0.12, 55);
        const marginRight = 15;
        const chartHeight = Math.min(width * 0.55, 320);
        const height = marginTop + chartHeight + marginBottom;

        container.attr("style", `height: ${height}px;`);
        svg = container.append("svg")
            .attr("width", width).attr("height", height)
            .attr("viewBox", [0, 0, width, height])
            .attr("style", "max-width: 100%; height: auto;");

        layoutLegend(true);

        const x0 = d3.scaleBand()
            .domain(chartData.map(d => d.year))
            .range([marginLeft, width - marginRight])
            .paddingInner(0.35).paddingOuter(0.15);

        const x1 = d3.scaleBand()
            .domain(situations.map(s => s.key))
            .range([0, x0.bandwidth()])
            .padding(0.08);

        const maxVal = d3.max(chartData, d => Math.max(d[1], d[2])) || 1;
        const y = d3.scaleLinear()
            .domain([0, maxVal]).nice()
            .range([marginTop + chartHeight, marginTop]);

        const tickCount = Math.min(maxVal, 5);

        svg.append("g")
            .attr("transform", `translate(${marginLeft}, 0)`)
            .call(d3.axisLeft(y)
                .ticks(tickCount)
                .tickSize(-(width - marginLeft - marginRight))
                .tickFormat(""))
            .call(g => g.select(".domain").remove())
            .call(g => g.selectAll("line")
                .attr("stroke-opacity", 0.15)
                .attr("class", "chart-line"));

        const showLabels = x1.bandwidth() >= labelFontSize * 2;

        chartData.forEach(row => {
            const g = svg.append("g").attr("transform", `translate(${x0(row.year)}, 0)`);
            situations.forEach(s => {
                const bx = x1(s.key);
                const bw = x1.bandwidth();
                const val = row[s.key];
                const by = y(val);
                const bh = y(0) - by;

                g.append("rect")
                    .attr("x", bx).attr("y", by)
                    .attr("width", bw).attr("height", Math.max(bh, 0))
                    .attr("fill", s.color)
                    .attr("rx", 3)
                    .attr("data-chart-tooltip", `${row.year}, ${s.label}: ${fmtNum(val)}`)
                    .attr("aria-label", `${row.year}, ${s.label}: ${fmtNum(val)}`);

                if (showLabels && bh > labelFontSize) {
                    g.append("text")
                        .attr("x", bx + bw / 2)
                        .attr("y", by - 3)
                        .attr("text-anchor", "middle")
                        .attr("dominant-baseline", "auto")
                        .attr("font-size", labelFontSize)
                        .text(fmtNum(val));
                }
            });
        });

        svg.append("g")
            .attr("transform", `translate(0, ${marginTop + chartHeight})`)
            .call(d3.axisBottom(x0).tickSizeOuter(0).tickSizeInner(0))
            .attr("font-size", fontSize)
            .call(g => g.select(".domain").remove())
            .call(g => g.selectAll(".tick text").attr("dy", "1.2em"));

        svg.append("g")
            .attr("transform", `translate(${marginLeft}, 0)`)
            .call(d3.axisLeft(y)
                .ticks(tickCount)
                .tickFormat(d => Number.isInteger(d) ? fmtNum(d) : "")
                .tickSizeOuter(0).tickSizeInner(0))
            .attr("font-size", fontSize)
            .call(g => g.select(".domain").remove())
            .call(g => g.selectAll(".tick text").attr("x", -8).attr("text-anchor", "end"));
    }
</script>

<div class="chart-control" id="traffic_light_chart_control">
    <form>
        <fieldset class="grid">
        <div>
            <label for="districtChoice">Vyberte kraj:</label>
            <select id="districtChoice" name="district">
                <option value="all" selected>Všechny kraje</option>
                <option value="CZ010">Hlavní město Praha</option>
                <option value="CZ020">Středočeský kraj</option>
                <option value="CZ031">Jihočeský kraj</option>
                <option value="CZ032">Plzeňský kraj</option>
                <option value="CZ041">Karlovarský kraj</option>
                <option value="CZ042">Ústecký kraj</option>
                <option value="CZ051">Liberecký kraj</option>
                <option value="CZ052">Královéhradecký kraj</option>
                <option value="CZ053">Pardubický kraj</option>
                <option value="CZ063">Kraj Vysočina</option>
                <option value="CZ064">Jihomoravský kraj</option>
                <option value="CZ071">Olomoucký kraj</option>
                <option value="CZ072">Zlínský kraj</option>
                <option value="CZ080">Moravskoslezský kraj</option>
            </select>
        </div>
        <div>
            <label for="injuryChoice">Vyberte závažnost:</label>
            <select id="injuryChoice" name="injuryChoice">
                <option value="1" selected>Usmrcení</option>
                <option value="2">Těžké zranění</option>
                <option value="3">Lehké zranění</option>
                <option value="4">Bez zranění</option>
            </select>
        </div>
        </fieldset>
    </form>
</div>

<div class="chart-box" id="traffic_light_chart">
    <div class="chart-header">
        <img class="chart-header-logo light" alt="logo" width="100" height="100" src="/images/logo-light.svg">
        <img class="chart-header-logo dark" alt="logo" width="100" height="100" src="/images/logo-dark.svg">
        <h1></h1>
        <p>Nehody s chodci na přechodech vybavených světelným signalizačním zařízením. Bez ohledu na zavinění nehody.</p>
    </div>
    <div class="chart"></div>
    <div class="chart-footer">
        <span class="source">Zdroj: <a href="https://policie.gov.cz/clanek/statistika-nehodovosti.aspx?q=Y2hudW09Mg%3d%3d" target="_blank">Policie ČR</a></span>
    </div>
</div>

<script>
    let district = document.getElementById("districtChoice").value;
    let injuryType = document.getElementById("injuryChoice").value;

    registerChart(() => drawTrafficLightChart("traffic_light_chart", district, injuryType));

    document.getElementById("districtChoice").addEventListener("change", (event) => {
        district = event.target.value;
        drawTrafficLightChart("traffic_light_chart", district, injuryType);
    });
    document.getElementById("injuryChoice").addEventListener("change", (event) => {
        injuryType = event.target.value;
        drawTrafficLightChart("traffic_light_chart", district, injuryType);
    });
</script>

<p>Trochu překvapivě se v datech o nehodách vyskytují i záznamy o sraženích chodce při přecházení na červenou, které jsou přesto zaviněné řidičem motorového vozidla, ale i o sraženích chodce při přecházení na zelenou, které jsou zaviněné chodcem. Proto jsem do grafu zahrnul všechny nehody bez ohledu na zavinění.</p>
<h2 id="nehody-z-roku-2025-s-překvapivým-zaviněním">Nehody z roku 2025 s překvapivým zaviněním</h2>
<p>Nejprve nehody zaviněné řidičem motorového vozidla při přecházení na červenou:</p>
<ul>
<li>
<p>V Ostravě srazil policejní automobil, jehož 33letý řidič se plně nevěnoval řízení, na přechodu pro chodce na světelně řízené křižovatce 57letého chodce, který vstoupil do vozovky na signál &ldquo;Stůj&rdquo; pod vlivem alkoholu a léků a utrpěl těžké zranění. Uvedené zavinění: řidič se plně nevěnoval řízení vozidla. <a href="https://nehody.cdv.cz/detail.php?p1=70725002472" target="_blank" rel="noopener">Všechny informace</a>
</p>
</li>
<li>
<p>V Ostravě srazil na mokré vozovce 27letý řidič osobního automobilu Škoda na přechodu pro chodce řízeném světelnou signalizací 20letou chodkyni, která náhle vstoupila do vozovky na signál &ldquo;Stůj&rdquo;; chodkyně utrpěla lehké zranění. Uvedené zavinění: nedání přednosti v jízdě chodci na vyznačeném přechodu. <a href="https://nehody.cdv.cz/detail.php?p1=70725002689" target="_blank" rel="noopener">Všechny informace</a>
</p>
</li>
<li>
<p>V Praze srazil 64letý řidič osobního automobilu Škoda na přechodu pro chodce na světelně řízené křižovatce 28letou chodkyni, která vstoupila do vozovky na signál &ldquo;Stůj&rdquo; a špatně odhadla vzdálenost a rychlost vozidla; utrpěla lehké zranění. Uvedené zavinění: nedání přednosti v jízdě chodci na vyznačeném přechodu. <a href="https://nehody.cdv.cz/detail.php?p1=25002755" target="_blank" rel="noopener">Všechny informace</a>
</p>
</li>
<li>
<p>Ve Znojmě srazil za slabého deště a zhoršené viditelnosti 60letý řidič osobního automobilu Jeep na přechodu pro chodce na světelně řízené křižovatce 42letou chodkyni, která náhle vstoupila do vozovky na signál &ldquo;Stůj&rdquo;; chodkyně utrpěla lehké zranění, řidič z místa nehody ujel, byl však následně zjištěn. Uvedené zavinění: jiný druh nesprávného způsobu jízdy. <a href="https://nehody.cdv.cz/detail.php?p1=61325000029" target="_blank" rel="noopener">Všechny informace</a>
</p>
</li>
</ul>
<p>Nakonec jedna nehoda zaviněná chodcem při přecházení na zelenou:</p>
<ul>
<li>V Jihlavě na místní komunikaci srazila 60letá řidička osobního automobilu Škoda na přechodu pro chodce 4letého chlapce. Chování chlapce je uvedeno jako zmatené, zbrklé, nerozhodné a situace v místě nehody jako vstup chodce na signál &ldquo;Volno&rdquo;; nehoda byla vyhodnocena jako zaviněná chodcem, chlapec utrpěl lehké zranění. <a href="https://nehody.cdv.cz/detail.php?p1=160725000573" target="_blank" rel="noopener">Všechny informace</a>
</li>
</ul>
<p><em>Poznámka autora: Uvádím data o nehodách tak, jak jsou dostupná od Policie ČR. Svůj názor a svou interpretaci zde záměrně nezveřejňuji.</em></p>
]]></description></item></channel></rss>