2d:null 2e:["$","title",null,{"children":"Gesamtverkehrsmodell: Quell-, Ziel- und Binnenverkehr - GEMEINDEN | Office for Statistics and Data of the Canton of Zurich | Observable"}] 33:T550,gemeinden = html`

${viewof inputZeitraum}

${viewof legende}

${viewof karteGemeinden}

${tabelle}

${viewof sankeyChartGemeinden}

Export

Wählen Sie eine Verkehrsbeziehung. Hierzu klicken Sie auf die Gemeinde(n) auf der Karte.

`34:T636a,viewof karteGemeinden = { const svggem = d3.create("svg").attr("viewBox", [0, 0, widthNow, heightMap]); // console.log("redraw"); // Definition: Runder Pfeil Binnenverkehr svggem .append("defs") .append("marker") .attr("id", "arrowCircular") .attr("viewBox", [0, 0, markerBoxWidth, markerBoxHeight]) .attr("refX", 5) // defines position at line along the x axis .attr("refY", 5) // defines position at line along the y axis .attr("markerWidth", markerWidth) .attr("markerHeight", markerHeight) .attr("orient", "auto-start") .append("path") .attr("d", d3.line()(arrowPoints)) .attr("stroke", "#000") .attr("fill", "#000") .attr("fill-opacity", 1); // Definition: Linie mit Pfeilköpfen für Aussenverkehr svggem .append("defs") .append("marker") .attr("id", "arrow") .attr("viewBox", [0, 0, markerBoxWidth, markerBoxHeight]) .attr("refX", refX) // defines position at line along the x axis .attr("refY", refY) // defines position at line along the y axis .attr("markerWidth", markerWidth) .attr("markerHeight", markerHeight) .attr("orient", "auto-start-reverse") .append("path") .attr("d", d3.line()(arrowPoints)) .attr("stroke", "#000") .attr("fill-opacity", 1); let defaultFrom = default_from; let klick1 = ""; let klick2 = ""; let bboxKlick1 = ""; let bboxKlick2 = ""; let selected = { from: klick1, to: klick2, bboxFrom: bboxKlick1, bboxTo: bboxKlick2 }; //svg. let thisData = mapData.filter((el) => el.quelle_name == defaultFrom); const featureElements = svggem .append("g") .attr("id", "map") .selectAll("path") .data(mapGeoData.features) .join("path") .attr("id", (d, i) => d.properties.GEBIET_C !== 0 ? "map_" + d.properties.GEBIET_C : "see_" + i ) .style("fill-opacity", 1) .style("stroke-width", 0.5) .attr("stroke", "LightSlateGray") .attr("fill", (d) => d.properties.GEBIET_C === 0 ? "#cae9ff" : colorScaleGVM( +thisData.filter((c) => c.ziel_code == d.properties.GEBIET_C)[0] .total ) ) .attr("stroke-width", 0.5) .attr("d", d3.geoPath(projectionMap)) .style("cursor", "pointer") .attr("class", (d) => (d.properties.GEBIET_C === 0 ? "see" : "polygone")) .classed("korridor", (d) => d.properties.GEBIET_C > 10000 ? true : false ) // class "polygone.korridor" (Korridore als Unterklasse der Polygone) .attr("pointer-events", (d, i) => d.properties.GEBIET_C === 0 || d.properties.GEBIET_C > 10000 ? "none" : "all" ); var pathGroup = svggem.append("g").attr("id", "pathGroup"); var arrowGroup = svggem .append("g") .attr("id", "arrowGroup") .attr("pointer-events", "none"); var textGroup = svggem.append("g").attr("id", "textGroup"); // Tooltip für Default Status // In einem Tooltip zeigt GEBIET_N und das Total // Grösse Tooltip var tooltipWidth = widthNow - 24, tooltipHeight = 28; // Position Tooltip var xPos = margin.left + 2, yPos = 5; var mouseOverText = textGroup .append("g") .attr("id", "mouseOverText") .attr("pointer-events", "none") .attr("transform", "translate(" + xPos + "," + yPos + ")") .style("font", "0.45em sans-serif bold"); mouseOverText .append("rect") .attr("x", -5) .attr("y", 4.5) .attr("width", tooltipWidth) .attr("height", tooltipHeight) .style("fill", "white") .attr("fill-opacity", 0.9) .style("stroke", "#white") //"#8d99ae" .style("stroke-width", 3); let dataValue = (function () { if (inputZeitraum == "2018-2040") { let value = thisData.filter( (c) => c.jahr == inputZeitraum && c.ziel_name == defaultFrom )[0].total; return "Veränderung: " + formatNumbers("percentage", "signed", value); } else if (inputZeitraum != "20218-2040") { let value = d3.rollups( thisData.filter( (c) => c.jahr == inputZeitraum && c.ziel_name == defaultFrom ), (v) => d3.sum(v, (d) => d.total), (d) => d.quelle_name ); return ( "Total Wege: " + formatNumbers("integer", "unsigned", value[0][[1]]) ); } })(); mouseOverText .append("text") .attr("x", 2) .attr("y", 16) .html(defaultFrom + " " + "⟳") .style("font", "0.45em sans-serif"); mouseOverText .append("text") .attr("x", 2) .attr("y", 16) .attr("dy", "1.4em") .text(dataValue) .style("font", "0.45em sans-serif"); // End Tooltip Default Status // MouseOver featureElements .on("mouseover", function (event, d) { if (selected.to.length < 1) { mouseOut(); } // Daten vom MouseOver let that = d3.select(this); let da = that.data()[0]; let thisId = da.properties.GEBIET_N; let thisCode = da.properties.GEBIET_C; console.log("thisID: " + thisId); thisData = mapData.filter((el) => el.quelle_name == thisId); console.log("thisData"); console.log(thisData); // Bounding Box vom MouseOver let clickedBBox = that._groups[0][0].getBBox(); var xPosbboxFrom = selected.bboxFrom.x + selected.bboxFrom.width / 2, yPosbboxFrom = selected.bboxFrom.y + selected.bboxFrom.height / 2; var xPosbboxTo = clickedBBox.x + clickedBBox.width / 2, yPosbboxTo = clickedBBox.y + clickedBBox.height / 2; // ---------------------Wenn kein (0) Gebiete selected---------------------------// if (selected.from.length < 1) { // console.log("kein Gebiet selected"); //Korridore nicht klickbar, wenn kein Gebiet ausgewählt svggem.selectAll(".korridor").attr("pointer-events", "none"); // Anpassen Einfärbung der Karte im "fill" svggem.selectAll("path.polygone").attr("fill", function (d) { if (d.properties.GEBIET_C !== 0) { let thisCode = d.properties.GEBIET_C; let thisValues = thisData.filter((c) => c.ziel_code == thisCode); return colorScaleGVM(thisValues[0].total); } }); // Highlight Polygon im "stroke" var mouseOverArrow = arrowGroup .append("g") .attr("id", "mouseOverArrow") .attr("pointer-events", "none"); var mouseOverPolygon = pathGroup .append("g") .attr("id", "mouseOverPolygon") .attr("pointer-events", "none"); mouseOverPolygon .append("path") .attr("class", "mouse") .attr("d", that.attr("d")) .attr("fill", "none") .attr("fill-opacity", 0) .style("stroke", "DarkSlateBlue") .style("stroke-width", 1.25); // In einem Tooltip zeigt GEBIET_N und das Total // Grösse Tooltip var tooltipWidth = widthNow - 24, tooltipHeight = 28; // Position Tooltip var xPos = margin.left + 2, yPos = 5; var mouseOverText = textGroup .append("g") .attr("pointer-events", "none") .attr("id", "mouseOverText") .attr("transform", "translate(" + xPos + "," + yPos + ")") .style("font", "0.45em sans-serif bold"); mouseOverText .append("rect") .attr("x", -5) .attr("y", 4.5) .attr("width", tooltipWidth) .attr("height", tooltipHeight) .style("fill", "white") .attr("fill-opacity", 0.9) .style("stroke", "#white") //"#8d99ae" .style("stroke-width", 3); let dataValue = (function () { let value = thisData.filter( (c) => c.jahr == inputZeitraum && c.ziel_name == thisId )[0].total; if (inputZeitraum == "2018-2040") { return ( "Veränderung: " + formatNumbers("percentage", "signed", value) ); } else if (inputZeitraum != "20218-2040") { let value = d3.rollups( thisData.filter( (c) => c.jahr == inputZeitraum && c.ziel_name == thisId ), (v) => d3.sum(v, (d) => d.total), (d) => d.quelle_name ); return ( "Total Wege: " + formatNumbers("integer", "unsigned", value[0][[1]]) ); } })(); mouseOverText .append("text") .attr("id", "mouseOverText") .attr("x", 2) .attr("y", 16) .style("font-weight", "bold") .html(thisId + " " + "⟳") .style("font", "0.45em sans-serif"); mouseOverText .append("text") .attr("x", 2) .attr("y", 16) .attr("dy", "1.4em") .text(dataValue) .style("font", "0.45em sans-serif"); // ---------------------Wenn ein (1) Gebiet selected---------------------------// } else if (selected.from.length > 1 && selected.to.length < 1) { // Klick-Events auf Korridore ein svggem.selectAll(".korridor").attr("pointer-events", "all"); // Highlight Polygon im "stroke" var mouseOverArrow = arrowGroup .append("g") .attr("id", "mouseOverArrow") .attr("pointer-events", "none"); var mouseOverPolygon = pathGroup .append("g") .attr("id", "mouseOverPolygon") .attr("pointer-events", "none"); mouseOverPolygon .append("path") .attr("class", "mouse") .attr("d", that.attr("d")) .style("fill", "none") .style("stroke", "DarkSlateBlue") .style("stroke-width", 1.25); // In einem Tooltip zeigt GEBIET_N und das Total // Grösse Tooltip var tooltipWidth = widthNow - 24, tooltipHeight = 28; // Position Tooltip var xPos = margin.left + 2, yPos = 5; let dataValue = (function () { if (inputZeitraum == "2018-2040") { let value = mapData.filter( (c) => c.jahr == inputZeitraum && c.quelle_name == selected.from && c.ziel_name == thisId )[0].total; return function () { if (value === undefined || isNaN(value)) { return "Veränderung: --"; } else { return ( "Veränderung: " + formatNumbers("percentage", "signed", value) ); } }; } else if (inputZeitraum != "20218-2040") { let value = d3.rollups( mapData.filter( (c) => c.jahr == inputZeitraum && c.quelle_name == selected.from && c.ziel_name == thisId ), (v) => d3.sum(v, (d) => d.total), (d) => d.quelle_name ); return ( "Total Wege: " + formatNumbers("integer", "unsigned", value[0][[1]]) ); } })(); var mouseOverText = textGroup .append("g") .attr("pointer-events", "none") .attr("id", "mouseOverText") .attr("transform", "translate(" + xPos + "," + yPos + ")"); mouseOverText .append("rect") .attr("x", -5) .attr("y", 4.5) .attr("width", tooltipWidth) .attr("height", tooltipHeight) .style("fill", "white") .attr("fill-opacity", 0.9) .style("stroke", "#white") //"#8d99ae" .style("stroke-width", 3); mouseOverText .append("text") .attr("x", 2) .attr("y", 16) .attr("dy", "1.4em") .text(dataValue) .style("font", "0.45em sans-serif"); if (selected.from != thisId) { // Pfeil für Binnenverkehr wird dünner svggem .select("#arrowBinnen") .attr("stroke", "#000") .attr("stroke-width", 1) .attr("fill", "#000"); //Pfeil zwischen Quelle und Ziel wird gezeichnet mouseOverArrow .append("line") .attr("x1", xPosbboxFrom) .attr("y1", yPosbboxFrom) .attr("x2", xPosbboxTo) .attr("y2", yPosbboxTo) .attr("stroke", "#000") .attr("stroke-width", 1.25) .attr("marker-start", "url(#arrow)") .attr("marker-end", "url(#arrow)") .attr("fill", "none"); mouseOverText .append("text") .attr("id", "mouseOverText") .attr("x", 2) .attr("y", 16) .html(selected.from + " " + "↔" + " " + thisId) .style("font", "0.45em sans-serif"); } else { svggem .select("#arrowBinnen") .attr("stroke", "#000") .attr("stroke-width", 1) .attr("fill", "#000"); mouseOverText .append("text") .attr("id", "mouseOverText") .attr("x", 2) .attr("y", 16) .html(selected.from + " " + "⟳") .style("font", "0.45em sans-serif"); } // ---------------------Wenn zwei (2) Gebiete selected---------------------------// } else if (selected.from.length > 1 && selected.to.length > 1) { mouseOut(); var mouseOverArrow = arrowGroup .append("g") .attr("id", "mouseOverArrow") .attr("pointer-events", "none"); // Highlight Polygon im "stroke" var mouseOverPolygon = pathGroup .append("g") .attr("id", "mouseOverPolygon") .attr("pointer-events", "none"); mouseOverPolygon .append("path") .attr("class", "mouse") .attr("d", that.attr("d")) .style("fill", "none") .style("stroke", "DarkSlateBlue") .style("stroke-width", 1.25); // Im Tooltip anzeigen, dass zunächst das Ziel wieder gelöst werden muss, bevor ein neues Ziel gesetzt werden kann // In einem Tooltip zeigt GEBIET_N und das Total // In einem Tooltip zeigt GEBIET_N und das Total // Grösse Tooltip var tooltipWidth = widthNow - 24, tooltipHeight = 35; // Position Tooltip var xPos = margin.left + 2, yPos = 5; let dataValue = (function () { if (inputZeitraum == "2018-2040") { let value = thisData.filter( (c) => c.jahr == inputZeitraum && c.ziel_name == thisId )[0].total; return ( "Veränderung: " + formatNumbers( "percentage", "signed", value === undefined || isNaN(value) ? "--" : value ) ); } else if (inputZeitraum != "20218-2040") { let value = d3.rollups( thisData.filter( (c) => c.jahr == inputZeitraum && c.ziel_name == thisId ), (v) => d3.sum(v, (d) => d.total), (d) => d.quelle_name ); return ( "Total Wege: " + formatNumbers("integer", "unsigned", value[0][[1]]) ); } })(); var mouseOverText = textGroup .append("g") .attr("id", "mouseOverText") .attr("pointer-events", "none") .attr("transform", "translate(" + xPos + "," + yPos + ")"); mouseOverText .append("rect") .attr("x", -5) .attr("y", 4.5) .attr("width", tooltipWidth) .attr("height", tooltipHeight) .style("fill", "white") .attr("fill-opacity", 0.9) .style("stroke", "#white") //"#8d99ae" .style("stroke-width", 3); mouseOverText .append("text") .attr("x", 2) .attr("y", 16) .style("font", "0.45em sans-serif") .text("Durch Klick die Zielregion ändern auf ") .append("tspan") .style("font-family", ZHFonts.black) .text(thisId); mouseOverText .append("text") .attr("x", 2) .attr("y", 16) .attr("dy", "1.4em") .style("font", "0.45em sans-serif") .text("Um die bestehende Auswahl aufzuheben, "); mouseOverText .append("text") .attr("x", 2) .attr("y", 16) .attr("dy", "2.8em") .style("font", "0.45em sans-serif") .text("erneuter Klick auf ") .append("tspan") .style("font-family", ZHFonts.black) .text(selected.to); //Pfeil zwischen Quelle und Ziel wird gezeichnet } }) // Definition: on MouseOut-Verhalten .on("mouseout", function (event, d) { mouseOut(); }) // // Definition: on Click-Verhalten // .on("click", function (d) { //Daten vom Klick let that = d3.select(this); let da = that.data()[0]; let thisId = da.properties.GEBIET_N; thisData = mapData.filter((el) => el.quelle_name == thisId); // Bounding Box vom Klick wird dem currentState als bboxFrom resp. bboxTo hizugefügt let clickedBBox = that._groups[0][0].getBBox(); // console.log("clickedBBox: " + clickedBBox.x + ", " + clickedBBox.y); // Bounding Box von Quelle (bboxFrom) & Ziel (bboxTo) finden var xPosbboxFrom = clickedBBox.x + clickedBBox.width / 2, yPosbboxFrom = clickedBBox.y + clickedBBox.height / 2; var xPosbboxTo = clickedBBox.x + clickedBBox.width / 2, yPosbboxTo = clickedBBox.y + clickedBBox.height / 2; // Klick: ---------------------Wenn keine (0) Gebiete selected---------------------------// if (selected.from.length < 1) { // Aktualisieren vom currentState "from" & "bboxFrom" selected.from = thisId; selected.bboxFrom = clickedBBox; // Highlight selected Polygon im stroke var clickedFromPolygon = pathGroup .append("g") .attr("id", "clickedFromPolygon") .attr("pointer-events", "none"); var arrowBinnen = arrowGroup .append("g") .attr("id", "arrowBinnen") .attr("pointer-events", "none"); clickedFromPolygon .append("path") .attr("class", "click") .attr("d", that.attr("d")) .style("fill", "none") .style("stroke", "DarkSlateBlue") .style("stroke-width", 1.25); arrowBinnen .append("path") .attr("d", arc) .attr("stroke", "#000") .attr("stroke-width", 1) .attr("marker-start", "url(#arrowCircular)") .attr("fill", "#000") .style("shape-rendering", " geometricPrecision") .attr( "transform", "translate(" + xPosbboxFrom + "," + yPosbboxFrom + ")" ); // ---------------------Wenn ein (1) Gebiet selected---------------------------// } else if (selected.from.length > 1 && selected.to.length < 1) { // Erneuter Klick auf das selbe Gebiet if (selected.from == thisId) { // Aktualisieren vom currentState "from" & "bboxFrom" selected.from = ""; selected.bboxFrom = ""; // Highlight vom Polygon im stroke aufheben svggem.select("#clickedFromPolygon").remove(); // Pfeil Binnenverkehr entfernen svggem.select("#arrowBinnen").remove(); // GEBIET_N entfernen svggem.select("#clickedFromText").remove(); // entfernt das Text, Path & Polygone? // Klick auf ein zweites Gebiet } else { // Aktualisieren currentState "to" & "bboxTo" selected.to = thisId; selected.bboxTo = clickedBBox; // Pfeil Binnenverkehr enfernen svggem.select("#arrowBinnen").remove(); var clickedToPolygon = pathGroup .append("g") .attr("id", "clickedToPolygon") .attr("pointer-events", "none"); // Pfeil Quelle-Ziel fixieren var arrowFromTo = arrowGroup .append("g") .attr("id", "arrowFromTo") .attr("pointer-events", "none"); arrowFromTo .append("line") .attr("stroke", "#000") .attr("stroke-width", 1.25) .attr("marker-start", "url(#arrow)") .attr("marker-end", "url(#arrow)") .attr("fill", "none") .attr("x1", selected.bboxFrom.x + selected.bboxFrom.width / 2) .attr("y1", selected.bboxFrom.y + selected.bboxFrom.height / 2) .attr("x2", selected.bboxTo.x + selected.bboxTo.width / 2) .attr("y2", selected.bboxTo.y + selected.bboxTo.height / 2); // Highlight selected Polygon im stroke clickedToPolygon .append("path") .attr("class", "click") .attr("d", that.attr("d")) .style("fill", "none") .style("stroke", "DarkSlateBlue") .style("stroke-width", 1.25); } // ---------------------Wenn zwein (2) Gebiete selected---------------------------// } else if (selected.from.length > 1 && selected.to.length > 1) { // Erneuter Klick auf das selbe Ziel-Gebiet oder das from Gebiet // Pfeil Quelle-Ziel entfernen if (typeof svggem.select("#mouseOverArrow") !== undefined) { svggem.select("#mouseOverArrow").remove(); } svggem.select("#arrowFromTo").remove(); // GEBIET_N von Ziel entfernen svggem.select("#clickedToText").remove(); // Highlight vom Polygone im stroke entfernen svggem.select("#clickedToPolygon").remove(); if (selected.to == thisId || selected.from == thisId) { // Aktualisieren currentState "to" & "bboxTo" selected.to = ""; selected.bboxTo = ""; var xPosFrom = selected.bboxFrom.x + selected.bboxFrom.width / 2, yPosFrom = selected.bboxFrom.y + selected.bboxFrom.height / 2; /////////////////////////////////////////////////////////////////////////////// // Pfeil Quelle-Ziel fixieren var arrowBinnen = arrowGroup .append("g") .attr("id", "arrowBinnen") .attr("pointer-events", "none"); arrowBinnen .append("path") .attr("d", arc) .attr("id", "arrowBinnen") .attr("stroke", "#000") .attr("stroke-width", 1) .attr("marker-start", "url(#arrowCircular)") .attr("fill", "#000") .attr("transform", "translate(" + xPosFrom + "," + yPosFrom + ")"); } else { selected.to = thisId; selected.bboxTo = clickedBBox; selected.to = thisId; selected.bboxTo = clickedBBox; // Pfeil Binnenverkehr enfernen svggem.select("#arrowBinnen").remove(); // Pfeil Quelle-Ziel fixieren var arrowFromTo = arrowGroup .append("g") .attr("id", "arrowFromTo") .attr("pointer-events", "none"); arrowFromTo .append("line") .attr("stroke", "#000") .attr("stroke-width", 1.25) .attr("marker-start", "url(#arrow)") .attr("marker-end", "url(#arrow)") .attr("fill", "none") .attr("x1", selected.bboxFrom.x + selected.bboxFrom.width / 2) .attr("y1", selected.bboxFrom.y + selected.bboxFrom.height / 2) .attr("x2", selected.bboxTo.x + selected.bboxTo.width / 2) .attr("y2", selected.bboxTo.y + selected.bboxTo.height / 2); // Highlight selected Polygon im stroke var clickedToPolygon = pathGroup .append("g") .attr("id", "clickedToPolygon") .attr("pointer-events", "none"); clickedToPolygon .append("g") .attr("pointer-events", "none") .append("path") .attr("class", "click") .attr("d", that.attr("d")) .style("fill", "none") .style("stroke", "DarkSlateBlue") .style("stroke-width", 1.25); console.log(svggem.select("#mouseOverText")); svggem .select("#mouseOverText") .html(selected.from + " " + "↔" + " " + thisId); } } svggem .selectAll("path") .style("stroke-width", function (d) { if (d.properties.GEBIET_C == 0) { return 1; } else { return 0.5; } }) .style("fill", (d) => d.properties.GEBIET_C == 0 ? "#cae9ff" : colorScaleGVM( +thisData.total // Umstellen, dass es das Ziel-Total für die Quelle anzeigt ) ) .style("fill-opacity", 0.8); }); return Object.assign(svggem.node(), { value: { selected }, onclick: (event) => { event.currentTarget.value = { selected: selected }; event.currentTarget.dispatchEvent(new CustomEvent("input")); } }); }35:T42d,------- ## Tabelle Die in der Tabelle dargestellten Inhalte sind abhängig von: 1. Anzahl gewählter Regionen: 1. kein Gebiet → Die User sehen: **kurzer Instruktionstext** 2. ein Gebiet → Die User sehen: 1. eine **Tabelle** mit 3 Spalten - Binnenverkehr, Aussenverkehr, Modal Split 2. ein **Stacked Bar Chart** zum Modal Split Gesamtverkehr der Beziehung im Vergleich zum gesamten Kanton Zürich 3. einen Button zum **Download der Daten** für die Beziehung als CSV 3. zwei Gebiete → Die User sehen: 1. eine **Tabelle** mit 2 Spalten - Aussenverkehr, Modal Split 2. ein **Stacked Bar Chart** zum Modal Split Gesamtverkehr der Beziehung im Vergleich zum gesamten Kanton Zürich 3. einen Button zum **Download der Daten** für die Beziehung als CSV 2. Input des Zeitraums (*'inputZeitraum'*): 1. 2018 & 2040: Tabelle wie unter 1 beschrieben 2. 2018-2040: Tabelle ohne Spalte zum Modal Split & Werte sind als absolute Werte mit der prozentualen Veränderung in Klammern angegeben ### Code zur Tabelle ↓ (Zelle aufklappen)36:T2896,tabelle = (function () { // ---------------------Wenn keine (0) Gebiete selected---------------------------// if (currentState.from.length < 1 && currentState.to.length < 1) { return htl.html`

Verkehrsbeziehungen

Bewegen Sie die Maus über eine Gemeinde: Die Gemeinden, die eine Verkehrsbeziehung mit der ausgewählten Gemeinde haben, werden entsprechend der Höhe des Quell-Ziel-Verkehrsaufkommen eingefärbt. Am oberen Rand der Karte wird jeweils die Höhe des Verkehrsaufkommens entsprechend der aktuellen Auswahl angezeigt.
Wenn Sie auf eine Gemeinde klicken, wird das Verkehrsaufkommen der einzelnen Verkehrsmittelarten in der Gemeinde angezeigt.
Klicken Sie auf eine zweite Gemeinde, um das Verkehrsaufkommen der einzelnen Verkehrsmittel zwischen den beiden Gemeinden anzuzeigen.

Klicken Sie auf eine weitere Gemeinde, um eine neue Verkehrsbeziehung aufzurufen.
Klicken Sie erneut auf die zweite Gemeinde, um die Verkehrsbeziehung aufzuheben.

Klicken Sie erneut auf die erste Gemeinde, um die Auswahl aufzuheben.

`; // ---------------------Wenn ein (1) Gebiet selected---------------------------// } else if ( inputZeitraum != "2018-2040" && currentState.from.length > 1 && currentState.to.length < 1 ) { return htl.html`

Verkehrsbeziehung ${currentState.jahr}:
${ currentState.from } ⟳

	Quell- und Zielverkehr	Binnenverkehr	Modal Split
MIV	${formatNumbers( "integer", "unsigned", aussenverkehr[0].wege_miv )}	${formatNumbers( "integer", "unsigned", binnenverkehr[0].wege_miv )}	${formatNumbers( "percentage", "unsigned", modalsplit[0].bi_miv )}
ÖV	${formatNumbers( "integer", "unsigned", aussenverkehr[0].wege_oev )}	${formatNumbers( "integer", "unsigned", binnenverkehr[0].wege_oev )}	${formatNumbers( "percentage", "unsigned", modalsplit[0].bi_oev )}
Total	${formatNumbers( "integer", "unsigned", aussenverkehr[0].total )}	${formatNumbers( "integer", "unsigned", binnenverkehr[0].total )}

${viewof plot}

`; // ---------------------Wenn zwei (2) Gebiete selected---------------------------// } else if ( inputZeitraum != "2018-2040" && currentState.from.length > 1 && currentState.to.length > 1 ) { return htl.html`

Verkehrsbeziehung ${currentState.jahr}:
${ currentState.from } ↔ ${currentState.to}

	Quell- und Zielverkehr	Modal Split
MIV	${formatNumbers( "integer", "unsigned", aussenverkehr[0].wege_miv )}	${formatNumbers( "percentage", "unsigned", modalsplit[0].bi_miv )}
ÖV	${formatNumbers( "integer", "unsigned", aussenverkehr[0].wege_oev )}	${formatNumbers( "percentage", "unsigned", modalsplit[0].bi_oev )}
Total	${formatNumbers( "integer", "unsigned", aussenverkehr[0].total )}

${viewof plot}

`; // ---------------------Veränderun 2018-2040---------------------------// // ---------------------Wenn ein (1) Gebiet selected---------------------------// } else if ( inputZeitraum == "2018-2040" && currentState.from.length > 1 && currentState.to.length < 1 ) { return htl.html`

Veränderung Verkehrsbeziehung, ${currentState.jahr}:
${currentState.from} ⟳

	Quell- und Zielverkehr	Binnenverkehr
MIV	${tabDiffSpalte1[0].diff_wege_miv_18_40} (${tabDiffSpalte1[0].change_wege_miv})	${tabDiffSpalte2[0].diff_wege_miv_18_40} (${tabDiffSpalte2[0].change_wege_miv})
ÖV	${tabDiffSpalte1[0].diff_wege_oev_18_40} (${tabDiffSpalte1[0].change_wege_oev})	${tabDiffSpalte2[0].diff_wege_oev_18_40} (${tabDiffSpalte2[0].change_wege_oev})
Total	${tabDiffSpalte1[0].diff_total_18_40} (${tabDiffSpalte1[0].total})	${tabDiffSpalte2[0].diff_total_18_40} (${tabDiffSpalte2[0].total})

`; // ---------------------Wenn zwei (2) Gebiete selected---------------------------// } else if ( inputZeitraum == "2018-2040" && currentState.from.length > 1 && currentState.to.length > 1 ) { return htl.html`

Veränderung Verkehrsbeziehung ${currentState.jahr}:
${currentState.from} ↔ ${currentState.to}

	Quell- und Zielverkehr
MIV	${tabDiffSpalte1[0].diff_wege_miv_18_40} (${tabDiffSpalte1[0].change_wege_miv})
ÖV	${tabDiffSpalte1[0].diff_wege_oev_18_40} (${tabDiffSpalte1[0].change_wege_oev})
Total	${tabDiffSpalte1[0].diff_total_18_40} (${tabDiffSpalte1[0].total})

`; } })()37:T598,// Die erste Spalte der Tabelle zeigt den Aussenverkehr ( quelle != ziel) aussenverkehr = (function () { // ---------------------Wenn ein (1) Gebiet selected---------------------------// // Es ergibt sich eine 1:n Beziehung. Es muss die Summe des weggehenden Verkehrs je Verkehrsmittel gebildet werden; d.h. ausgeschlossen: ziel_name == currentState.from if (currentState.from.length > 1 && currentState.to.length < 1) { return tidy( mapData, filter( (d) => d.quelle_name == currentState.from && d.ziel_name != currentState.from ), groupBy("quelle_name", [ summarize({ wege_oev: sum("wege_oev"), wege_miv: sum("wege_miv"), total: sum("total"), bi_total: sum("bi_total") }) ]), mutate({ bi_oev: (d) => d.wege_oev / d.total, bi_miv: (d) => d.wege_miv / d.total }) ); // ---------------------Wenn zwei (2) Gebiete selected---------------------------// // Es ergibt sich eine 1:1 Beziehung (Quelle:Ziel), deren Werte bereits in den Rohdaten vorliegen. // Die Daten müssen zusätzlich eingeschränkt werden auf ziel_name == currentState.to } else if (currentState.from.length > 1 && currentState.to.length > 1) { return tidy( mapData, filter( (d) => d.quelle_name == currentState.from && d.ziel_name == currentState.to ) ); } })()38:T42a,modalsplit = (function () { // ---------------------Wenn zwei (2) Gebiete selected---------------------------// if (currentState.from.length > 1 && currentState.to.length > 1) { return tidy( mapData, filter( (d) => d.quelle_name == currentState.from && d.ziel_name == currentState.to ) ); // ---------------------Wenn ein (1) Gebiet selected---------------------------// // Der Modal Split wird für den Gesamtverkehr (Binnen- und Aussenverkehr) gerechnet // D.h. Filter nur auf die Quellregion } else if (currentState.from.length > 1 && currentState.to.length < 1) { return tidy( mapData, filter((d) => d.quelle_name == currentState.from), groupBy("quelle_name", [ summarize({ wege_oev: sum("wege_oev"), wege_miv: sum("wege_miv"), total: sum("total"), bi_total: sum("bi_total") }) ]), mutate({ bi_oev: (d) => d.wege_oev / d.bi_total, bi_miv: (d) => d.wege_miv / d.bi_total }) ); } })()39:T485,formatNumbers = function (formatter, style, value) { console.log(value); if (style == "signed") { if (formatter == "integer") { if (isNaN(value)) { return "--"; } else if (value == 0) { return "+/-" + value.toLocaleString("de-CH"); } else if (value > 0) { return "+" + value.toLocaleString("de-CH"); } else if (value < 0) { return "-" + (-1 * value).toLocaleString("de-CH"); } } else if (formatter == "percentage") { if (isNaN(value)) { return "--"; } else if (value == 0 || value == "undefined" || value == "Infinity") { return "+/-0%"; } else if (value > 0) { return "+" + (value * 100).toFixed(1).toLocaleString("de-CH") + "%"; } else if (value < 0) { return "-" + (-100 * value).toFixed(1).toLocaleString("de-CH") + "%"; } } } else if (style == "unsigned") { if (isNaN(value)) { return "--"; } else if (formatter == "integer") { return value.toLocaleString("de-CH"); } else if (formatter == "percentage") { return (value * 100).toFixed(0).toLocaleString("de-CH") + "%"; } } }3a:T107c,tabDiffSpalte1 = (function () { // Die erste Spalte der Tabelle zeigt den von der Quellregion (currentState.from) weggehenden Verkehr // ---------------------Wenn ein (1) Gebiet selected---------------------------// // Es ergibt sich eine 1:n Beziehung. Es muss die Summe des weggehenden Verkehrs je Verkehrsmittel gebildet werden; d.h. ausgeschlossen: ziel_name == currentState.from if (currentState.from.length > 1 && currentState.to.length < 1) { return tidy( data2018_2040, filter( (d) => d.jahr == currentState.jahr && d.quelle_name == currentState.from && d.ziel_name != currentState.from ), groupBy("quelle_name", [ summarize({ wege_oev_2018: sum("wege_oev_2018"), wege_miv_2018: sum("wege_miv_2018"), total_2018: sum("total_2018"), diff_wege_oev_18_40: sum("diff_wege_oev_18_40"), diff_wege_miv_18_40: sum("diff_wege_miv_18_40"), diff_total_18_40: sum("diff_total_18_40") // Summe der Differenzen für den Gesamtverkehr }) ]), mutate({ change_wege_oev: (d) => formatNumbers( "percentage", "signed", d.diff_wege_oev_18_40 / d.wege_oev_2018 ), // Prozent. Veränderung 2040 zu 2018 ÖV change_wege_miv: (d) => formatNumbers( "percentage", "signed", d.diff_wege_miv_18_40 / d.wege_miv_2018 ), // Prozent. Veränderung 2040 zu 2018 MIV total: (d) => formatNumbers( "percentage", "signed", d.diff_total_18_40 / d.total_2018 ), // Prozent. Veränderung 2040 zu 2018 Gesamtverkehr wege_oev_2018: (d) => formatNumbers("integer", "signed", d.wege_oev_2018), wege_miv_2018: (d) => formatNumbers("integer", "signed", d.wege_miv_2018), total_2018: (d) => formatNumbers("integer", "signed", d.total_2018), diff_wege_oev_18_40: (d) => formatNumbers("integer", "signed", d.diff_wege_oev_18_40), diff_wege_miv_18_40: (d) => formatNumbers("integer", "signed", d.diff_wege_miv_18_40), diff_total_18_40: (d) => formatNumbers("integer", "signed", d.diff_total_18_40) }) ); // ---------------------Wenn zwei (2) Gebiete selected---------------------------// // Es ergibt sich eine 1:1 Beziehung (Quelle:Ziel), deren Werte bereits in den Rohdaten vorliegen. // Die Daten müssen zusätzlich eingeschränkt werden auf ziel_name == currentState.to } else if (currentState.from.length > 1 && currentState.to.length > 1) { return tidy( data2018_2040, filter( (d) => d.jahr == currentState.jahr && d.quelle_name == currentState.from && d.ziel_name == currentState.to ), mutate({ change_wege_oev: (d) => formatNumbers( "percentage", "signed", d.diff_wege_oev_18_40 / d.wege_oev_2018 ), // Prozent. Veränderung 2040 zu 2018 ÖV change_wege_miv: (d) => formatNumbers( "percentage", "signed", d.diff_wege_miv_18_40 / d.wege_miv_2018 ), // Prozent. Veränderung 2040 zu 2018 MIV total: (d) => formatNumbers( "percentage", "signed", d.diff_total_18_40 / d.total_2018 ), // Prozent. Veränderung 2040 zu 2018 Gesamtverkehr wege_oev_2018: (d) => formatNumbers("integer", "signed", d.wege_oev_2018), wege_miv_2018: (d) => formatNumbers("integer", "signed", d.wege_miv_2018), wege_vel_2018: (d) => formatNumbers("integer", "signed", d.wege_vel_2018), total_2018: (d) => formatNumbers("integer", "signed", d.total_2018), diff_wege_oev_18_40: (d) => formatNumbers("integer", "signed", d.diff_wege_oev_18_40), diff_wege_miv_18_40: (d) => formatNumbers("integer", "signed", d.diff_wege_miv_18_40), diff_total_18_40: (d) => formatNumbers("integer", "signed", d.diff_total_18_40) }) ); } })()3b:T4da,tabDiffSpalte2 = tidy( data2018_2040, filter( (d) => d.jahr == currentState.jahr && d.quelle_name == currentState.from && d.ziel_name == currentState.from ), mutate({ change_wege_oev: (d) => formatNumbers( "percentage", "signed", d.diff_wege_oev_18_40 / d.wege_oev_2018 ), change_wege_miv: (d) => formatNumbers( "percentage", "signed", d.diff_wege_miv_18_40 / d.wege_miv_2018 ), total: (d) => formatNumbers("percentage", "signed", d.diff_total_18_40 / d.total_2018), // Prozent. Veränderung 2040 zu 2018 Gesamtverkehr wege_oev_2018: (d) => formatNumbers("integer", "signed", d.wege_oev_2018), wege_miv_2018: (d) => formatNumbers("integer", "signed", d.wege_miv_2018), // wege_vel_2018: (d) => formatNumbers("integer", "signed", d.wege_vel_2018), total_2018: (d) => formatNumbers("integer", "signed", d.total_2018), diff_wege_oev_18_40: (d) => formatNumbers("integer", "signed", d.diff_wege_oev_18_40), diff_wege_miv_18_40: (d) => formatNumbers("integer", "signed", d.diff_wege_miv_18_40), diff_total_18_40: (d) => formatNumbers("integer", "signed", d.diff_total_18_40) }) )3c:T6dc,tabelleFrom = (function () { // ---------------------Wenn zwei (2) Gebiete selected---------------------------// if (currentState.from.length > 1 && currentState.to.length > 1) { return tidy( mapData, filter( (d) => d.quelle_name == currentState.from && d.ziel_name == currentState.to ), mutate({ ÖV: (d) => d.bi_oev, MIV: (d) => d.bi_miv, beziehung: (d) => `${d.quelle_name} ↔ ${d.ziel_name}` }), pivotLonger({ cols: ["ÖV", "MIV"], namesTo: "wege", valuesTo: "werte" }), // when((d) => isNaN("werte"), [mutate({ werte: "NA" })]), select(["beziehung", "wege", "werte"]) ); // ---------------------Wenn ein (1) Gebiet selected---------------------------// // Der Modal Split wird für den Gesamtverkehr (Binnen- und Aussenverkehr) gerechnet // D.h. Filter nur auf die Quellregion } else if (currentState.from.length > 1 && currentState.to.length < 1) { return tidy( mapData, filter((d) => d.quelle_name == currentState.from), groupBy("quelle_name", [ summarize({ wege_oev: sum("wege_oev"), wege_miv: sum("wege_miv"), // total: sum("total"), bi_total: sum("bi_total") }) ]), mutate({ // bi_oev: (d) => d.wege_oev / d.bi_total, // bi_miv: (d) => d.wege_miv / d.bi_total, ÖV: (d) => d.wege_oev / d.bi_total, MIV: (d) => d.wege_miv / d.bi_total, beziehung: (d) => `${d.quelle_name} (Gesamtverkehr)` }), pivotLonger({ cols: ["ÖV", "MIV"], namesTo: "wege", valuesTo: "werte" }), select(["beziehung", "wege", "werte"]) ); } })()3d:T12de,viewof plot = { const plotKTZH = vl .data(Kanton) // .data(tabelleKanton) .transform( vl.calculate("indexof(['MIV', 'ÖV'], datum.wege)").as("stackSortOrder") ) .layer( vl .markBar({ cornerRadiusTopRight: 3, cornerRadiusBottomRight: 3, stroke: "white", yOffset: 10, height: 50 }) .encode( vl.x().fieldQ("werte").axis(null), vl.y().fieldO("quelle_name").scale({ padding: 0 }).axis({ bandPosition: 0, grid: false, domain: false, ticks: false, labelAlign: "left", labelBaseline: "middle", labelPadding: 0, labelOffset: -30 }), vl .color() .fieldO("wege") .scale({ domain: ["MIV", "ÖV"], range: colorModalSplit, reverse: false }), vl.order("stackSortOrder") ), vl .markText({ align: "right", fill: "black", // fontWeight: "bold", fontSize: 14, dx: -5, yOffset: 10 }) .encode( vl.x().sum("werte").stack("normalize").axis({ format: "%" }), vl.y().fieldN("quelle_name"), vl.text({ format: ".0%" }).fieldQ("werte"), vl.order("stackSortOrder") ) ) .width(chartWidth(2)) // specifying responsive width .height(chartHeight) .autosize({ type: "fit-x", resize: false, contains: "padding" }); const plotVerkehrsbeziehung = vl .data(tabelleFrom) .transform( vl.calculate("indexof(['MIV', 'ÖV'], datum.wege)").as("stackSortOrder"), vl.filter("isValid(datum.werte)") ) .layer( vl .markBar({ cornerRadiusTopRight: 3, cornerRadiusBottomRight: 3, stroke: "white", yOffset: 10, height: 50 }) .encode( vl.x().fieldQ("werte").axis(null), vl.y().fieldO("beziehung").scale({ padding: 0 }).axis({ bandPosition: 0, grid: false, domain: false, ticks: false, labelAlign: "left", labelBaseline: "middle", labelPadding: 0, labelOffset: -30 }), vl .color() .fieldO("wege") .scale({ domain: ["MIV", "ÖV"], range: colorModalSplit, reverse: false }), vl.order("stackSortOrder") ), vl .markText({ align: "right", fill: "black", // fontWeight: "bold", fontSize: 14, dx: -5, yOffset: 10 }) .encode( vl.x().sum("werte").stack("normalize").axis({ format: "%" }), vl.y().fieldN("beziehung"), vl .text({ format: ".0%" }) .fieldQ("werte"), vl.color({ condition: { test: "datum['werte'] >= 0.045", value: "white" }, value: "black" }), vl.opacity({ condition: { test: "datum['werte'] >= 0.045", value: 1 }, value: 0 }), vl.order("stackSortOrder") ) ) .width(chartWidth(2)) // specifying responsive width .height(chartHeight) .autosize({ type: "fit-x", resize: false, contains: "padding" }); return vl .concat(plotVerkehrsbeziehung, plotKTZH) .columns(1) .spacing(0) .title({ text: "Modal Split-Verteilung im Vergleich zum Kanton Zürich" // subtitle: "" }) .config({ view: { stroke: null }, // scale: { bandPaddingInner: 0.2, bandPaddingOuter: 0.2, stroke: 2 }, background: "#fff", axis: { labelFontSize: 13, labelColor: "black" }, axisX: { labelFont: ZHFonts.black, labelFontSize: 12, format: "%", tickCount: 7, title: null }, axisY: { labelPadding: 10, title: null, ticks: false, labelLimit: 500, labelFont: ZHFonts.black }, title: { font: ZHFonts.black, fontSize: 16, offset: 15, anchor: "start", lineHeight: 5, padding: 40, subtitleFont: ZHFonts.regular, subtitleFontSize: 14 }, legend: { orient: "top", symbolSize: 250, labelFontSize: 12, labelFont: ZHFonts.regular, labelColor: "black", labelLimit: 300, columns: 3, // responsive legend width rowPadding: 5, title: null }, text: { font: ZHFonts.regular, fontSize: 16, color: "black" } }) .render(); }3e:T59c,chartGemeinden = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const { nodes, links } = sankey({ nodes: graph.nodes.map((d) => Object.assign({}, d)), links: graph.links.map((d) => Object.assign({}, d)) }); svg .append("g") .selectAll("rect") .data(nodes) .join("rect") .attr("x", (d) => d.x0) .attr("y", (d) => d.y0) .attr("height", (d) => d.y1 - d.y0) .attr("width", (d) => d.x1 - d.x0) .append("title") .text((d) => `${d.name}\n${d.value.toLocaleString("de-CH")}`); svg .append("g") .attr("fill", "none") .selectAll("g") .data(links) .join("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", (d) => colorSankey(d.names[0])) .attr("stroke-width", (d) => d.width) .style("mix-blend-mode", "multiply") .append("title") .text((d) => `${d.names.join(" → ")}\n${d.value.toLocaleString("de-CH")}`); svg .append("g") .style("font", "0.6250em sans-serif") // 10px -> 0.6250em .selectAll("text") .data(nodes) .join("text") .attr("x", (d) => (d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6)) .attr("y", (d) => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", (d) => (d.x0 < width / 2 ? "start" : "end")) .text((d) => d.name) .append("tspan") .attr("fill-opacity", 1) .text((d) => ` ${d.value.toLocaleString("de-CH")}`); return svg.node(); }3f:T461,graph = { let index = -1; const nodes = []; const nodeByKey = new Map(); const indexByKey = new Map(); const links = []; for (const k of keys) { for (const d of totalSankeyData) { const key = JSON.stringify([k, d[k]]); if (nodeByKey.has(key)) continue; const node = { name: d[k] }; nodes.push(node); nodeByKey.set(key, node); indexByKey.set(key, ++index); } } for (let i = 1; i < keys.length; ++i) { const a = keys[i - 1]; const b = keys[i]; const prefix = keys.slice(0, i + 1); const linkByKey = new Map(); for (const d of totalSankeyData) { const names = prefix.map((k) => d[k]); const key = JSON.stringify(names); const value = d.value || 1; let link = linkByKey.get(key); if (link) { link.value += value; continue; } link = { source: indexByKey.get(JSON.stringify([a, d[a]])), target: indexByKey.get(JSON.stringify([b, d[b]])), names, value }; links.push(link); linkByKey.set(key, link); } } return { nodes, links }; }40:T61e,sankeyData = (function () { if (currentState.from.length < 1) { return tidy( mapData, filter((d) => d.jahr == inputZeitraum && d.quelle_name == default_from), select(["jahr", "quelle_name", "ziel_name", "wege_oev", "wege_miv"]), mutate({ ÖV: (d) => d["wege_oev"], MIV: (d) => d["wege_miv"], Total: (d) => d["wege_oev"] + d["wege_miv"], ziel_name: (d) => d.ziel_name == d.quelle_name ? d.ziel_name + " (Binnenverkehr)" : d.ziel_name }), arrange(desc("Total")), sliceHead(15), pivotLonger({ cols: ["ÖV", "MIV"], namesTo: "verkehrsmittel", valuesTo: "value" }), select(["jahr", "quelle_name", "verkehrsmittel", "ziel_name", "value"]) ); } else { return tidy( mapData, filter( (d) => d.jahr == inputZeitraum && d.quelle_name == currentState.from ), select(["jahr", "quelle_name", "ziel_name", "wege_oev", "wege_miv"]), mutate({ ÖV: (d) => d["wege_oev"], MIV: (d) => d["wege_miv"], Total: (d) => d["wege_oev"] + d["wege_miv"], ziel_name: (d) => d.ziel_name == d.quelle_name ? d.ziel_name + " (Binnenverkehr)" : d.ziel_name }), arrange(desc("Total")), sliceHead(15), pivotLonger({ cols: ["ÖV", "MIV"], namesTo: "verkehrsmittel", valuesTo: "value" }), select(["jahr", "quelle_name", "verkehrsmittel", "ziel_name", "value"]) ); } })()41:T68b,sddr = (function () { if (currentState.from.length < 1) { return tidy( mapData, filter( (d) => d.jahr == inputZeitraum && d.quelle_name == default_from && !top15Gemeinden.includes(d.ziel_name) && !default_from.includes(d.ziel_name) ), select(["jahr", "quelle_name", "ziel_name", "wege_oev", "wege_miv"]), mutate({ ÖV: (d) => d["wege_oev"], MIV: (d) => d["wege_miv"] }), pivotLonger({ cols: ["ÖV", "MIV"], namesTo: "verkehrsmittel", valuesTo: "value" }), groupBy( ["jahr", "quelle_name", "verkehrsmittel"], [summarize({ value: sum("value") })] ), mutate({ ziel_name: "Übrige Gemeinden" }), select(["jahr", "quelle_name", "verkehrsmittel", "ziel_name", "value"]) ); } else { return tidy( mapData, filter( (d) => d.jahr == inputZeitraum && d.quelle_name == currentState.from && !top15Gemeinden.includes(d.ziel_name) && !currentState.from.includes(d.ziel_name) ), select(["jahr", "quelle_name", "ziel_name", "wege_oev", "wege_miv"]), mutate({ ÖV: (d) => d["wege_oev"], MIV: (d) => d["wege_miv"] }), pivotLonger({ cols: ["ÖV", "MIV"], namesTo: "verkehrsmittel", valuesTo: "value" }), groupBy( ["jahr", "quelle_name", "verkehrsmittel"], [summarize({ value: sum("value") })] ), mutate({ ziel_name: "Übrige Gemeinden" }), select(["jahr", "quelle_name", "verkehrsmittel", "ziel_name", "value"]) ); } })()42:T53f,dataRegion_neu = d3 .csv( "https://www.web.statistik.zh.ch/cms_vis/mobilitaet_afm/gesamtverkehrsmodell/AFM_GVM_GEM-2018-2040_neu.csv" ) // Das Total der Verkehrswege berechnen .then(function (data) { data.forEach(function (d) { // d.ziel_name = d.ziel_code == "10002" ? "TG-St.Gallen (A1)" : d.ziel_name; // d.quelle_name = // d.quelle_code == "10002" ? "TG-St.Gallen (A1)" : d.quelle_name; if (d.quelle_code !== d.ziel_code) { // mal 2 um Quell- plus Zielverkehr d.wege_oev = +d.wege_oev * 2; d.wege_miv = +d.wege_miv * 2; d.total = d.wege_oev + d.wege_miv; d.total = +d.total; d.bi_total = d.wege_oev + d.wege_miv; d.bi_total = +d.bi_total; d.bi_oev = d.wege_oev / d.bi_total; d.bi_miv = d.wege_miv / d.bi_total; d.bi_oev = +d.bi_oev; d.bi_miv = +d.bi_miv; } else if (d.quelle_code == d.ziel_code) { d.wege_oev = +d.wege_oev; d.wege_miv = +d.wege_miv; d.total = d.wege_oev + d.wege_miv; d.total = +d.total; d.bi_total = d.wege_oev + d.wege_miv; d.bi_total = +d.bi_total; d.bi_oev = d.wege_oev / d.bi_total; d.bi_oev = +d.bi_oev; d.bi_miv = d.wege_miv / d.bi_total; d.bi_miv = +d.bi_miv; } }); return data; })43:T425,data2018_2040 = tidy( dataRegion_neu, filter((d) => d.jahr != 2040), arrange(["jahr", "quelle_name", "ziel_name"]), groupBy( ["quelle_name", "ziel_name"], mutateWithSummary({ wege_oev_2018: lag("wege_oev", { n: 1 }), wege_miv_2018: lag("wege_miv", { n: 1 }), total_2018: lag("total", { n: 1 }) }) ), filter((d) => d.jahr != 2018), select([ "jahr", startsWith("quelle_"), startsWith("ziel_"), startsWith("wege_"), startsWith("total_") ]), rename({ wege_oev: "diff_wege_oev_18_40", wege_miv: "diff_wege_miv_18_40" }), mutate({ diff_total_18_40: (d) => d.diff_wege_oev_18_40 + d.diff_wege_miv_18_40, // Summe der Differenzen für den Gesamtverkehr change_wege_oev: (d) => d.diff_wege_oev_18_40 / d.wege_oev_2018, // Prozent. Veränderung 2040 zu 2018 ÖV change_wege_miv: (d) => d.diff_wege_miv_18_40 / d.wege_miv_2018, // Prozent. Veränderung 2040 zu 2018 MIV total: (d) => d.diff_total_18_40 / d.total_2018 // Prozent. Veränderung 2040 zu 2018 Gesamtverkehr }) )44:[{"id":"f9f56182caea00653083549c25f449cdccdd04b3d745ed3769ec1cc72e864609a8725158c8f34d5ee548def99f574d255667fc9a0342e38dfbc71097468567b8","href":"https://static.observableusercontent.com/files/f9f56182caea00653083549c25f449cdccdd04b3d745ed3769ec1cc72e864609a8725158c8f34d5ee548def99f574d255667fc9a0342e38dfbc71097468567b8","name":"AFM_GVM_KTZH-2018-2040.csv","type":"text/csv","lastModified":1673858104456.309,"size":665}] 31:{"id":"d34b094497733c57","slug":"gesamtverkehrsmodell_gemeinden","title":"Gesamtverkehrsmodell: Quell-, Ziel- und Binnenverkehr - GEMEINDEN","thumbnail":"e83a9da33160274fb5c888a76e39740ff63d84ff71835d19f397950ff007c264","access_level":"public","create_time":"$D2022-05-06T07:45:09.650Z","update_time":"$D2024-09-28T16:55:06.940Z","view_time":null,"first_public_time":"$D2022-07-29T14:37:46.118Z","has_unpublished_edits":null,"fork":{"id":"48974bcf41f3437a","slug":"gesamtverkehrsmodell_regionen","title":"Gesamtverkehrsmodell: Quell-, Ziel- und Binnenverkehr - REGIONEN","owner":{"id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich"}},"stars":0,"starred":false,"owner":{"type":"team","id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich","avatar_url":"https://avatars-next.observableusercontent.com/61364635cd5db7a914727e7625ac41daa90fedeba239e3d2ce93b57a9ad3bce9","tier":"pro"},"version":6373,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"32d8f5276b0e4535","login":"cgrb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a7d9a10b8456291ccefbc9c7c7b9ecdc5d5f31095c0a77bdea09bd75590057bc","tier":null}],"members":[{"type":"individual","id":"32d8f5276b0e4535","login":"cgrb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a7d9a10b8456291ccefbc9c7c7b9ecdc5d5f31095c0a77bdea09bd75590057bc","tier":null,"role":"editor"},{"type":"team","id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich","avatar_url":"https://avatars-next.observableusercontent.com/61364635cd5db7a914727e7625ac41daa90fedeba239e3d2ce93b57a9ad3bce9","tier":"pro","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"34f48f7c861e4f57","slug":"mobilitat-afm","title":"AFM - Gesamtverkehrsmodell","owner":{"id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich"}},"type":"notebook","body":{"title":"Gesamtverkehrsmodell: Quell-, Ziel- und Binnenverkehr - GEMEINDEN","cells":[{"id":118,"value":"htl.html`

Gesamtverkehrsmodell: Quell-, Ziel- und Binnenverkehr - GEMEINDEN

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"Alle Projektunterlagen liegen auf \"L:\\STAT\\08_DS\\04_Auftraege\\2021\\A2021_0256\"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3836,"value":"toc({ selector: \"h2,h3,h4\", heading: \"Jump to:\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2238,"value":"------\n## Download Button","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5092,"value":"### PNG Export","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5094,"value":"viewof gdeButtonPNG = Inputs.button(\n \"Grafiken als PNG herunterladen (2 Dateien)\",\n {\n value: null,\n reduce: () =>\n (function () {\n createPNG(pngConfigGDE_map);\n createPNG(pngConfigGDE_sankey);\n })()\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5096,"value":"pngConfigGDE_map = ({\n containerId: \"map-gemeinden\",\n filename: \"Karte_\" + currentState.from + \"_\" + inputZeitraum + \".png\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5997,"value":"pngConfigGDE_sankey = ({\n containerId: \"sankey-gemeinden\",\n filename:\n \"Verkehrsbeziehungen_\" + currentState.from + \"_\" + inputZeitraum + \".png\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5098,"value":"gde_runDownloadPng_old = {\n if (gdeButtonPNG >= 1) {\n createPNG(pngConfigGDE_map);\n createPNG(pngConfigGDE_sankey);\n viewof gdeButtonPNG.value = 0;\n viewof gdeButtonPNG.dispatchEvent(new CustomEvent(\"input\"));\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5110,"value":"### CSV Export","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5114,"value":"viewof gdeButtonCSV_old = Inputs.button(\"Daten als CSV herunterladen\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6242,"value":"viewof gdeButtonCSV = Inputs.button(\"Daten als CSV herunterladen\", {\n value: null,\n reduce: () => createCSV(csvConfigGDE)\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5116,"value":"csvConfigGDE = ({\n filename: \"GVM_\" + currentState.from + \"_\" + inputZeitraum + \".csv\",\n data: tabDownloadData\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5120,"value":"gde_runDownloadCSV_old = {\n if (gdeButtonCSV >= 1) {\n console.log(gdeButtonCSV);\n createCSV(csvConfigGDE);\n viewof gdeButtonCSV.value = 0;\n viewof gdeButtonCSV.dispatchEvent(new CustomEvent(\"input\"));\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5125,"value":"### XLSX Export","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5127,"value":"viewof gdeButtonXLSX = Inputs.button(\"Daten als XLSX herunterladen\", {\n value: 1,\n reduce: () => createXLSX(xlsxConfigGDE)\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6256,"value":"(function () {\n if (tabDownloadData[0]) {\n return Object.keys(tabDownloadData[0]);\n } else {\n return \"empty\";\n }\n})()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5129,"value":"xlsxConfigGDE = ({\n data: tabDownloadData,\n columns: (function () {\n if (tabDownloadData[0]) {\n return Object.keys(tabDownloadData[0]);\n } else {\n return \"empty\";\n }\n })(),\n datatypes: [\"string\", \"string\"],\n title: currentState.from + \" \" + inputZeitraum,\n subtitle: \"\",\n description: \"\",\n contact: [\n \"Quelle: Gesamtverkehrsmodell des Kantons Zürich (GVM-ZH), Amt für Mobilität\"\n ],\n source: \"\",\n autofilters: true,\n filename: \"GVM_\" + currentState.from + \"_\" + inputZeitraum + \".xlsx\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5132,"value":"gde_runDownloadXSLX_old = {\n if (gdeButtonXLSX >= 1) {\n createXLSX(xlsxConfigGDE);\n viewof gdeButtonXLSX.value = 0;\n viewof gdeButtonXLSX.dispatchEvent(new CustomEvent(\"input\"));\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4025,"value":"--------------","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4033,"value":"## Current State\nZeigt die gewählten Gebiete als Object sowie die gefilterten Daten als Tabelle.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":733,"value":"currentState = (function () {\n let obj = {};\n obj.from = karteGemeinden.selected.from; //karteGemeinden.value.from;\n obj.to = karteGemeinden.selected.to;\n obj.bboxFrom = karteGemeinden.selected.bboxFrom;\n obj.bboxTo = karteGemeinden.selected.bboxTo;\n obj.jahr = inputZeitraum;\n console.log(\"currentState:\");\n console.log(obj);\n return obj;\n})()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3768,"value":"------\n## Karte\n\n1. Einfärbung:\n 1. Total der Wege im Binnenverkehr je Region (Summe d. Wege MIV, ÖV, Velo) resp. prozentuale Veränderung für \"2018-2040\"\n 2. Sobald mit der Maus über eine Region gefahren wird, passt sich die Einfärbung auf die Region unter der Maus an, d.h. Anzahl Wege ab Region unter der Mause in alle anderen Regionen\n 3. Im Tooltip steht der Name der Region unter der Maus sowie der Wert für den Binnenverkehr der Region\n2. \n\n### Code zur Karte\n↓ (Zelle aufklappen)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6211,"value":"default_from = \"Aeugst a.A.\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1301,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":495,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4040,"value":"### Datentabellen Aussenverkehr\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1704,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4045,"value":"### Datentabellen Binnenverkehr","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1717,"value":"// Die zweite Spalte der Tabelle zeigt den von Binnenverkehr der Quellregion (currentState.from)\n// Es ergibt sich eine 1:1 Beziehung (Quelle:Quelle), deren Werte bereits in den Rohdaten vorliegen.\n// Die Daten müssen zusätzlich eingeschränkt werden auf ziel_name == currentState.from\nbinnenverkehr = mapData.filter(\n (d) =>\n d.jahr == currentState.jahr &&\n d.quelle_name == currentState.from &&\n d.ziel_name == currentState.from\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4047,"value":"### Datentabellen Modal Split\nDer Modal Split zeigt den Gesamtverkehr bestehend aus Quell-, Ziel- und Binnenverkehr für die gewählte Verkehrsbeziehung im Vergleich zum Kanton Zürich.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3988,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4052,"value":"### Datentabellen gesamter Kanton\nUnabhängig von gewählten Verkehrsbeziehungen berechnet diese Tabelle die totalen Verkehrswege je Verkehrsmittel sowie den Modal Split für den gesamten Kanton. Gebraucht für die Darstellung im Balkendiagramm.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6350,"value":"dataKTZH = await FileAttachment(\"AFM_GVM_KTZH-2018-2040.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6332,"value":"Kanton = tidy(\n dataKTZH,\n filter((d) => d.jahr == currentState.jahr)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4759,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3095,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3293,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3228,"value":"Inputs.table(tabDiffSpalte2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6218,"value":"### Datentabelle Download\nHinweis: Die angegebenen Wege entsprechen dem Verkehrsaufkommen zwischen Quelle und Ziel in beiden Richtungen: von der Quelle zum Ziel und vom Ziel zur Quelle.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4361,"value":"tabDownloadData = tidy(\n mapData,\n filter((d) => d.quelle_name == currentState.from),\n mutate({\n hinweis_zu_daten:\n \"Die angegebenen Wege entsprechen dem Verkehrsaufkommen im durchschnittlichen Werktagsverkehr (DWV) zwischen Quelle und Ziel in beiden Richtungen: von der Quelle zum Ziel und vom Ziel zur Quelle.\"\n }),\n rename({\n bi_total: \"total_wege\",\n bi_oev: \"anteil_oev_bimodal\",\n bi_miv: \"anteil_miv_bimodal\"\n }),\n select([\n \"jahr\",\n startsWith(\"quelle_\"),\n startsWith(\"ziel_\"),\n startsWith(\"wege_\"),\n \"total_wege\",\n startsWith(\"anteil_\"),\n \"hinweis_zu_daten\"\n ])\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2089,"value":"-----------\n## Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6102,"value":"Inputs.table(tabelleFrom)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2146,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4096,"value":"### Code zum Plot\n↓ (Zelle aufklappen)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6126,"value":"$3d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2209,"value":"padding = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2212,"value":"chartHeight = 85","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2208,"value":"chartWidth = function (nPlots) {\n if (nPlots == 1) {\n // Entspricht Mobile\n if (width < 415) {\n return width * 0.88;\n } else if (width >= 415 && width < 768) {\n return width * 0.855;\n // Entspricht Tablets\n } else if (width >= 768 && width <= 1248) {\n return width * 0.877;\n // Entspricht Laptops & Desktops\n } else {\n return 1128 * 0.9275;\n }\n } else {\n // Entspricht Mobile\n if (width < 768) {\n return (width * 1.4) / nPlots;\n // Entspricht Tablets\n } else if (width >= 768 && width <= 1248) {\n return (width * 1.6) / nPlots;\n // Entspricht Laptops & Desktops\n } else {\n return (1128 * 0.92) / nPlots;\n }\n }\n}\n// {\n// if (width >= 1100) {\n// return width / 3.5;\n// } else if (width < 1100 && width >= 750) {\n// return width / 2;\n// } else {\n// return width / 1.5;\n// }\n// }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4546,"value":"-----------\n## Sankey Plot\n\nDieses Diagramm zeigt, wie sich die Verkehrswege von der Quelle zu den Zielen auf die drei Verkehrsmittel aufteilen: Die *Verkehrsmittel* befinden sich auf der linken Seite, die *Ziele* auf der rechten. \n\nAuf das Anzeigen der *Quelle* wird verzichtet, da dies eine Wiederholung der Informationen aus der Tabelle wäre. \n\nDie Dicke jeder geschwungenen Linie steht für die Anzahl Wege, die wiederholt nach Zielen unterteilt sind.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5944,"value":"### Code zum Sankey Plot\n↓ (Zelle aufklappen)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4542,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4565,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4568,"value":"sankey = d3\n .sankey()\n .nodeSort(null)\n .linkSort(null)\n .nodeWidth(5)\n .nodePadding(10)\n .extent([\n [0, 5],\n [width, height - 5]\n ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5949,"value":"### Code für das conditional Anzeigen im HTML\n↓ (Zelle aufklappen)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4544,"value":"viewof sankeyChartGemeinden = (function () {\n // ---------------------Wenn keine (0) Gebiete selected---------------------------//\n if (inputZeitraum == \"2018-2040\") {\n return htl.html`

`;\n } else if (\n currentState.from.length < 1 &&\n currentState.to.length < 1 &&\n currentState.to.length < 1 &&\n inputZeitraum != \"2018-2040\"\n ) {\n return htl.html`\n

Modal Split-Verteilung auf die Gemeinden

Wählen Sie eine Verkehrsbeziehung. Hierzu klicken Sie auf die gewünschte Quell- und Zielregion auf der Karte.

`;\n // ---------------------Wenn ein (1) Gebiet selected---------------------------//\n } else {\n return htl.html`\n

${currentState.from}: bedeutendste Verkehrsbeziehungen

Die 15 bedeutendsten Verkehrsbeziehungen sind im Modal Split dargestellt. Alle anderen Verkehrsbeziehungen sind unter \"Übrige Gemeinden\" zusammengefasst.

${chartGemeinden}

`;\n }\n})()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4552,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4914,"value":"top15Gemeinden = [...new Set(d3.map(sankeyData, (d) => d.ziel_name))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4858,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4879,"value":"totalSankeyData = d3\n .merge([sankeyData, sddr])\n .sort(asc((d) => d.verkehrsmittel))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4557,"value":"keys = [\"verkehrsmittel\", \"ziel_name\"] // data.columns.slice(1, -1) --> to get incl. source","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4559,"value":"colorSankey = d3.scaleOrdinal([\"MIV\", \"ÖV\"], colorModalSplit).unknown(\"#e3e3e3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4561,"value":"width = 768","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4563,"value":"height = 450","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"-----\n# Appendix\n\n## Daten\nVor dem Import wurden folgende Anpassungen an den Daten vorgenommen:\n1. Trennzeichen ersetzen: Semikolon ( ; ) wurden mit Kommata ( , ) ersetzt\n2. Leere Zeilen am Ende des Files wurden gelöscht\n3. Regionen: Die Codes und Namen der Regionen wurden korrigiert (fixing_regio_codes.R)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":101,"value":"### Daten - Gemeinden\n\n↓ Importierte Rohdaten; Nach Import werden die Totale berechnet","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6286,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3700,"value":"↓ In der Karte verwendete Daten; auf den im Input gewählten Zeitraum gefiltert","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":815,"value":"// Filtern der Rohdaten auf den im Input gewählten Zeitraum\nmapData = (function () {\n if (inputZeitraum == \"2018-2040\") {\n return data2018_2040.filter((el) => el.jahr == inputZeitraum);\n } else if (inputZeitraum == \"2018\") {\n return dataRegion_neu.filter((el) => el.jahr == inputZeitraum);\n } else if (inputZeitraum == \"2040\") {\n return dataRegion_neu.filter((el) => el.jahr == inputZeitraum);\n }\n})()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3707,"value":"↓ Daten mit berechneten Veränderungen 2018-2040","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2891,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"### Geodaten - Gemeinden","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2300,"value":"path = \"https://www.web.statistik.zh.ch/geodaten_visualisierungen/gvm_korridore_gemeinden_F_KTZHGR/gvm_korridore_gemeinden_F_KTZHGR_2019_01_01.json\"\n//\"https://www.web.statistik.zh.ch/vis_observable_prototyping/AFM_GVM/korridore_gemeinden_2020_wgs84_clipped.json\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"mapGeoData = \n d3.json(path) //await FileAttachment(\"korridore_regionen_wgs84.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"projectionMap = d3 // When a GeoJSON is encoded in WGS84 planar coordinates, and you need to project it with D3\n .geoMercator()\n // .rotate([0, 0])\n // .parallels([46, 49])\n .fitExtent(\n [[10, 10], [widthNow, heightMap].map((d) => d - 10)],\n mapGeoData // geometry\n )\n\n// When your GeoJSON is encoded in EPSG:2056, the coordinate system for Liechtenstein; Switzerland, and you need to project it with D3\n// d3\n// .geoIdentity()\n// .reflectY(true)\n// .fitExtent([[10, 10], [widthNow, heightMap].map((d) => d - 10)], mapGeoData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"mouseOut = function () {\n d3.select(\"#mouseOverPolygon\").remove();\n d3.select(\"#mouseOverText\").remove();\n if (typeof d3.select(\"#mouseOverArrow\") !== undefined) {\n d3.select(\"#mouseOverArrow\").remove();\n }\n\n d3.select(\".Gemeinde\")\n .selectAll(\"path\")\n .style(\"stroke-width\", 0.5)\n .style(\"fill-opacity\", 1)\n .style(\"stroke-opacity\", 1);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"---\n## Parameter der Karte\n### Width, Height & Margin","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":211,"value":"widthNow = {\n if (width >= 1100) {\n return width / 5.8; //ursprünglich 5.8\n } else if (width < 1100 && width >= 750) {\n return width / 3;\n } else {\n return width / 1.5;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"heightMap = widthNow * 1.15","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"margin = ({ top: 15, right: 15, bottom: 15, left: 15 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2395,"value":"---\n### Pfeile","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2728,"value":"// Definieren runden Pfades für den Pfeil vom Binnenverkehr\narc = d3.arc().innerRadius(8).outerRadius(9).startAngle(6).endAngle(0.5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2400,"value":"markerBoxWidth = 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2402,"value":"markerBoxHeight = 20;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2404,"value":"refX = markerBoxWidth / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2406,"value":"refY = markerBoxHeight / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2408,"value":"markerWidth = markerBoxWidth / 4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2410,"value":"markerHeight = markerBoxHeight / 4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2412,"value":"// Definieren der Pfeilköpfe\narrowPoints = [\n [0, 0],\n [0, 20],\n [20, 10]\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2060,"value":"---\n### Farbskala & Legende","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6194,"value":"**Modal Split Plot:** Farbauswahl, die so getroffen wird, dass.\n\n1. alle Farben geteilte Komplementärfarben voneinander sind; beginnend mit dem gewünschten Rot (rgb(200, 100, 100)) *[Color Information & Color Schemes ↗](https://www.colorhexa.com/c86565)*\n2. die Palette farbenblind-sicher ist *[Prüfung der Farbenblindheit ↗](http://vis4.net/palettes/#/3|s|c86565,6597c8,c8c865|ffffe0,ff005e,93003a|0|0)*\n3. die Schriftfarbe Schwarz auf allen Farben gut lesbar ist - Kontrast von mindestens AA *[Contrast testing ↗](https://colorable.jxnblk.com/000000/c86565)*\n\n ↪ *Schriftfarbe schwarz*, da sie auch im Sankey-Plot vor weissem Hintergrund am besten lesbar ist.\n\nSomit ergibt sich folgende Farbpalette:\n- rot: rgb(200, 100, 100) => rgb(200,101,101)\n- blau: rgb(101,151,200)\n- grün: rgb(200,200,101)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5082,"value":"colorModalSplit = [\"#c86565\", \"#6597c8\", \"#c8c865\"] //[\"#ba0800\", \"#2e5a9f\", \"#b3ba00\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3496,"value":"**Karte:** Unterschiedliche Skalen und Einfärbung je nach gewähltem Zeitraum *('inputZeitraum')*:\n- Totale der Verkehrswege in den Jahren 2018 & 2040 sind log-skaliert\n- Veränderung 2018-2040 ist linear und in Prozent","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3755,"value":"colorScaleGVM = (function () {\n if (inputZeitraum === \"2018-2040\") {\n return colorScaleDiff;\n // Farbskala für Total Verkehrswege\n } else {\n return colorScaleLog;\n }\n})()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4822,"value":"colorScaleDiff = d3\n .scaleSequential(d3.interpolateRgbBasis(divergingViOr))\n .domain([\n -1 * d3.max(data2018_2040, (d) => d.total),\n d3.max(data2018_2040, (d) => d.total)\n ])\n .unknown(\"#f0f0f0\")\n\n// d3\n// .scaleDiverging()\n// .domain([\n// -1 * d3.max(data2018_2040, (d) => d.total),\n// 0,\n// d3.max(data2018_2040, (d) => d.total)\n// ])\n// .interpolator(d3.interpolatePuOr)\n// .unknown(\"#fefefe\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3331,"value":"colorScaleLog = d3\n .scaleSequentialLog(d3.interpolatePurples)\n .domain([100, d3.max(mapData, (d) => +d.total)])\n .unknown(\"#f0f0f0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5057,"value":"divergingViOr = [\n \"#800080\",\n \"#922492\",\n \"#a040a0\",\n \"#ad5aad\",\n \"#b972b9\",\n \"#c58ac5\",\n \"#d0a1d0\",\n \"#dcb8dc\",\n \"#e8d0e8\",\n \"#f3e7f3\",\n \"#ffffff\",\n \"#fbf6e8\",\n \"#f8edd1\",\n \"#f4e3ba\",\n \"#f0daa2\",\n \"#edd18a\",\n \"#e9c772\",\n \"#e5bd59\",\n \"#e1b340\",\n \"#dda927\",\n \"#d99f0d\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1305,"value":"**Legende**\n↓","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3718,"value":"// Legende\nviewof legende = (function () {\n if (inputZeitraum == \"2018-2040\") {\n return legend({\n color: colorScaleDiff,\n tickFormat: \"+%\",\n title: \"Veränderung 2018-2040, %\"\n });\n } else if (inputZeitraum != \"2018-2040\") {\n return legend({\n color: colorScaleLog,\n title: \"Anzahl Verkehrswege\",\n // ticks: 5,\n tickSize: tickSize,\n height: 50 + tickSize,\n tickFormat: (d) => d.toLocaleString(\"de-CH\"),\n tickValues: [100, 1000, 10000, 100000, 1000000]\n });\n }\n})()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4217,"value":"tickSize = 5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"---------\n### Inputs\n#### Zeithorizont\n↓ (Zelle aufklappen)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":579,"value":"viewof inputZeitraum = radio({\n title: \"Zeithorizont:\",\n //description: \"Bitte einen Bezirk wählen.\",\n options: [...new Set(dataRegion_neu.map((d) => d.jahr))],\n value: \"2018\",\n column: \"180px\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"-----\n## CSS Styles für Darstellung im CMS\n\n- The flex-direction property defines in which direction the container wants to stack the flex items. The row value stacks the flex items horizontally (from left to right)\n- The flex-wrap property specifies whether the flex items should wrap or not.\n- The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties.\n- flex-flow: row wrap will wrap the felx items if neccessary and then stack them on top of each other.\n- The justify-content property is used to align the flex items. The flex-start value aligns the flex items at the top of the container.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":107,"value":"cssStyles = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5834,"value":"css = html`\n\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4321,"value":"// stylesheet = html`\n\n// `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"-----\n## Dependencies & Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6367,"value":"import { fonts as ZHFonts } from \"@statistikzh/common-styles\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4570,"value":"d3 = require(\"d3@6\", \"d3-sankey@0.12\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"import {\n tidy,\n filter,\n rename,\n pivotLonger,\n mutate,\n select,\n groupBy,\n summarize,\n sum,\n when,\n // fullJoin,\n // transmute,\n arrange,\n asc,\n desc,\n mutateWithSummary,\n lead,\n lag,\n startsWith,\n sliceHead,\n replaceNully\n} from \"@pbeshai/tidyjs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2129,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2245,"value":"import {\n createPNG,\n createXLSX,\n createCSV,\n radio\n} from \"@statistikzh/shared-imports\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3833,"value":"import { toc } from \"@harrystevens/toc\" //import { toc } from \"@mbostock/toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5107,"value":"htmlToImage = require(\"html-to-image@1.9.0/dist/html-to-image.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W44","stdlib":"1","titling":"auto"}} 32:"$31:body"

Export

Verkehrsbeziehungen

Verkehrsbeziehung ${currentState.jahr}:${ currentState.from } ⟳

Verkehrsbeziehung ${currentState.jahr}:${ currentState.from } ↔ ${currentState.to}

Veränderung Verkehrsbeziehung, ${currentState.jahr}:${currentState.from} ⟳