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

${viewof inputZeitraumRegionen}

${viewof inputModalsplit}

${viewof legendeRegionen}

${viewof karteRegionen}

${tabelleRegionen}

${viewof sankeyChartRegionen}

Export

Wählen Sie eine Verkehrsbeziehung. Hierzu klicken Sie auf die Region(en) auf der Karte.

`34:T657d,viewof karteRegionen = { const svgreg = d3.create("svg").attr("viewBox", [0, 0, widthNow, heightMap]); // Definition: Runder Pfeil Binnenverkehr svgreg .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 svgreg .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 }; let thisData = mapData.filter((el) => el.quelle_name == defaultFrom); var pathGroup = svgreg.append("g").attr("id", "pathGroup"); var arrowGroup = svgreg.append("g").attr("id", "arrowGroup"); var textGroup = svgreg.append("g").attr("id", "textGroup"); const featureElements = svgreg .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.6) .attr("stroke", (d) => (function () { if ( inputZeitraumRegionen != "2018-2040" && d.properties.GEBIET_C === 0 ) { return "LightSlateGray"; } else if ( inputZeitraumRegionen != "2018-2040" && d.properties.GEBIET_C !== 0 ) { return "Gainsboro"; } else { return "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" ); // MouseOver var pathGroup = svgreg.append("g").attr("id", "pathGroup"); var arrowGroup = svgreg.append("g").attr("id", "arrowGroup"); var textGroup = svgreg.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 (inputZeitraumRegionen == "2018-2040") { let value = thisData.filter( (c) => c.jahr == inputZeitraumRegionen && c.ziel_name == defaultFrom )[0].total; return "Veränderung: " + formatNumbers("percentage", "signed", value); } else if (inputZeitraumRegionen != "20218-2040") { let value = d3.rollups( thisData.filter( (c) => c.jahr == inputZeitraumRegionen && c.ziel_name == defaultFrom ), (v) => d3.sum(v, (d) => d.total), (d) => d.quelle_name ); return ( "Total Wege: " + formatNumbers( "integer", "unsigned", value[0][[1]] < 100 ? "<100" : 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 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; thisData = mapData.filter((el) => el.quelle_name == thisId); // Bounding Box vom MouseOver let clickedBBox = that._groups[0][0].getBBox(); console.log(clickedBBox); 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) { //Korridore nicht klickbar, wenn kein Gebiet ausgewählt svgreg.selectAll(".korridor").attr("pointer-events", "none"); // Anpassen Einfärbung der Karte im "fill" svgreg.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"); 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("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); mouseOverText .append("path") .attr("class", "mouse") .attr("d", that.attr("d")) .style("fill", "none") .attr("transform", "translate(" + -xPos + "," + -yPos + ")"); let dataValue = (function () { if (inputZeitraumRegionen == "2018-2040") { let value = thisData.filter( (c) => c.jahr == inputZeitraumRegionen && c.ziel_name == thisId )[0].total; return ( "Veränderung: " + formatNumbers("percentage", "signed", value) ); } else if (inputZeitraumRegionen != "20218-2040") { let value = d3.rollups( thisData.filter( (c) => c.jahr == inputZeitraumRegionen && c.ziel_name == thisId ), (v) => d3.sum(v, (d) => d.total), (d) => d.quelle_name ); return ( "Total Wege: " + formatNumbers( "integer", "unsigned", value[0][[1]] < 100 ? "<100" : value[0][[1]] ) ); } })(); mouseOverText .append("text") .attr("x", 2) .attr("y", 16) .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 svgreg.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"); 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 (inputZeitraumRegionen == "2018-2040") { let value = mapData.filter( (c) => c.jahr == inputZeitraumRegionen && c.quelle_name == selected.from && c.ziel_name == thisId )[0].total; return ( "Veränderung: " + formatNumbers("percentage", "signed", value) ); } else if (inputZeitraumRegionen != "20218-2040") { let value = d3.rollups( mapData.filter( (c) => c.jahr == inputZeitraumRegionen && 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]] < 100 ? "<100" : 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) .attr("dy", "1.4em") .text(dataValue) .style("font", "0.45em sans-serif"); if (selected.from != thisId) { // Pfeil für Binnenverkehr wird dünner svgreg .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("x", 2) .attr("y", 16) .html(selected.from + " " + "↔" + " " + thisId) .style("font", "0.45em sans-serif"); } else { svgreg .select("#arrowBinnen") .attr("stroke", "#000") .attr("stroke-width", 1) .attr("fill", "#000"); mouseOverText .append("text") .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"); //HINZUGEFÜGT// 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 = 35; // Position Tooltip var xPos = margin.left + 2, yPos = 5; let dataValue = (function () { if (inputZeitraumRegionen == "2018-2040") { let value = thisData.filter( (c) => c.jahr == inputZeitraumRegionen && c.ziel_name == thisId )[0].total; return ( "Veränderung: " + formatNumbers("percentage", "signed", value) ); } else if (inputZeitraumRegionen != "20218-2040") { let value = d3.rollups( thisData.filter( (c) => c.jahr == inputZeitraumRegionen && c.ziel_name == thisId ), (v) => d3.sum(v, (d) => d.total), (d) => d.quelle_name ); return ( "Total Wege: " + formatNumbers( "integer", "unsigned", value[0][[1]] < 100 ? "<100" : 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) .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, erneuter "); mouseOverText .append("text") .attr("x", 2) .attr("y", 16) .attr("dy", "2.8em") .style("font", "0.45em sans-serif") .text("Klick auf ") .append("tspan") .style("font-family", ZHFonts.black) .text(selected.to); mouseOverPolygon .append("path") .attr("class", "mouse") .attr("d", that.attr("d")) .style("fill", "none") .style("stroke", "DarkSlateBlue") .style("stroke-width", 1.25); } }) // 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 currentStateRegionen als bboxFrom resp. bboxTo hizugefügt let clickedBBox = that._groups[0][0].getBBox(); // 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; // ---------------------Wenn keine (0) Gebiete selected---------------------------// if (selected.from.length < 1) { // Aktualisieren vom currentStateRegionen "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"); // Pfeil für Binnenverkehr setzen 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 currentStateRegionen "from" & "bboxFrom" selected.from = ""; selected.bboxFrom = ""; // Highlight vom Polygon im stroke aufheben svgreg.select("#clickedFromPolygon").remove(); // Pfeil Binnenverkehr entfernen svgreg.select("#arrowBinnen").remove(); // GEBIET_N entfernen svgreg.select("#clickedFromText").remove(); // entfernt das Text, Path & Polygone? // Klick auf ein zweites Gebiet } else { // Aktualisieren currentStateRegionen "to" & "bboxTo" selected.to = thisId; selected.bboxTo = clickedBBox; // Pfeil Binnenverkehr enfernen svgreg.select("#arrowBinnen").remove(); // Highlight selected Polygon im stroke 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); 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); } // ---------------------Wenn zwei (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 svgreg.select("#mouseOverArrow") !== undefined) { svgreg.select("#mouseOverArrow").remove(); } svgreg.select("#arrowFromTo").remove(); // GEBIET_N von Ziel entfernen svgreg.select("#clickedToText").remove(); // Highlight vom Polygone im stroke entfernen svgreg.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 für Binnenverkehr setzen 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; // Pfeil Quelle-Ziel entfernen svgreg.select("#arrowFromTo").remove(); selected.to = thisId; selected.bboxTo = clickedBBox; // Pfeil Binnenverkehr enfernen svgreg.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); } } svgreg .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(svgreg.node(), { value: { selected }, onclick: (event) => { event.currentTarget.value = { selected: selected }; event.currentTarget.dispatchEvent(new CustomEvent("input")); } }); }35:T435,------- ## 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 (*'inputZeitraumRegionen'*): 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:T5281,tabelleRegionen = (function () { // ---------------------Wenn keine (0) Gebiete selected---------------------------// if ( currentStateRegionen.from.length < 1 && currentStateRegionen.to.length < 1 ) { return htl.html`

Verkehrsbeziehungen

Bewegen Sie die Maus über eine Region: Die Regionen, die eine Verkehrsbeziehung mit der ausgewählten Regionen 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 Region klicken, wird das Verkehrsaufkommen der einzelnen Verkehrsmittelarten in der Region angezeigt.
Klicken Sie auf eine zweite Region, um das Verkehrsaufkommen der einzelnen Verkehrsmittel zwischen den beiden Regionen anzuzeigen.

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

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

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

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

	Quell- und Zielverkehr	Binnenverkehr	Modal Split
MIV	${aussenverkehr[0].wege_miv.toLocaleString( "de-CH" )}	${binnenverkehr[0].wege_miv.toLocaleString( "de-CH" )}	${( modalsplit[0].tri_miv * 100 ).toFixed(0)}%
ÖV	${aussenverkehr[0].wege_oev.toLocaleString( "de-CH" )}	${binnenverkehr[0].wege_oev.toLocaleString( "de-CH" )}	${( modalsplit[0].tri_oev * 100 ).toFixed(0)}%
Velo	${aussenverkehr[0].wege_vel.toLocaleString( "de-CH" )}	${binnenverkehr[0].wege_vel.toLocaleString( "de-CH" )}	${( modalsplit[0].tri_vel * 100 ).toFixed(0)}%
Total	${aussenverkehr[0].total.toLocaleString( "de-CH" )}	${binnenverkehr[0].total.toLocaleString( "de-CH" )}

${viewof plot}

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

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

	Quell- und Zielverkehr	Modal Split
MIV	${aussenverkehr[0].wege_miv.toLocaleString( "de-CH" )}	${( modalsplit[0].tri_miv * 100 ).toFixed(0)}%
ÖV	${aussenverkehr[0].wege_oev.toLocaleString( "de-CH" )}	${( modalsplit[0].tri_oev * 100 ).toFixed(0)}%
Velo	${aussenverkehr[0].wege_vel.toLocaleString( "de-CH" )}	${( modalsplit[0].tri_vel * 100 ).toFixed(0)}%
Total	${aussenverkehr[0].total.toLocaleString( "de-CH" )}

${viewof plot}

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

Veränderung Verkehrsbeziehung, ${currentStateRegionen.jahr}:
${currentStateRegionen.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})
Velo	${tabDiffSpalte1[0].diff_wege_vel_18_40} (${tabDiffSpalte1[0].change_wege_vel})	${tabDiffSpalte2[0].diff_wege_vel_18_40} (${tabDiffSpalte2[0].change_wege_vel})
Total	${tabDiffSpalte1[0].diff_total_18_40} (${tabDiffSpalte1[0].total})	${tabDiffSpalte2[0].diff_total_18_40} (${tabDiffSpalte2[0].total})

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

Veränderung Verkehrsbeziehung ${currentStateRegionen.jahr}:
${currentStateRegionen.from} ↔ ${currentStateRegionen.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})
Velo	${tabDiffSpalte1[0].diff_wege_vel_18_40} (${tabDiffSpalte1[0].change_wege_vel})
Total	${tabDiffSpalte1[0].diff_total_18_40} (${tabDiffSpalte1[0].total})

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

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

	Quell- und Zielverkehr	Binnenverkehr	Modal Split
MIV	${aussenverkehr[0].wege_miv.toLocaleString( "de-CH" )}	${binnenverkehr[0].wege_miv.toLocaleString( "de-CH" )}	${( modalsplit[0].bi_miv * 100 ).toFixed(0)}%
ÖV	${aussenverkehr[0].wege_oev.toLocaleString( "de-CH" )}	${binnenverkehr[0].wege_oev.toLocaleString( "de-CH" )}	${( modalsplit[0].bi_oev * 100 ).toFixed(0)}%
Total	${aussenverkehr[0].bi_total.toLocaleString( "de-CH" )}	${binnenverkehr[0].bi_total.toLocaleString( "de-CH" )}

${viewof plot}

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

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

	Quell- und Zielverkehr	Modal Split
MIV	${aussenverkehr[0].wege_miv.toLocaleString( "de-CH" )}	${( modalsplit[0].bi_miv * 100 ).toFixed(0)}%
ÖV	${aussenverkehr[0].wege_oev.toLocaleString( "de-CH" )}	${( modalsplit[0].bi_oev * 100 ).toFixed(0)}%
Total	${aussenverkehr[0].bi_total.toLocaleString( "de-CH" )}

${viewof plot}

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

Veränderung Verkehrsbeziehung, ${currentStateRegionen.jahr}:
${currentStateRegionen.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_bi_total_18_40} (${tabDiffSpalte1[0].bi_total})	${tabDiffSpalte2[0].diff_bi_total_18_40} (${tabDiffSpalte2[0].bi_total})

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

Veränderung Verkehrsbeziehung ${currentStateRegionen.jahr}:
${currentStateRegionen.from} ↔ ${currentStateRegionen.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_bi_total_18_40} (${tabDiffSpalte1[0].bi_total})

`; } })()37:T69d,// 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 == currentStateRegionen.from if (currentStateRegionen.from.length > 1 && currentStateRegionen.to.length < 1) { return tidy( mapData, filter( (d) => d.quelle_name == currentStateRegionen.from && d.ziel_name != currentStateRegionen.from ), groupBy("quelle_name", [ summarize({ wege_oev: sum("wege_oev"), wege_miv: sum("wege_miv"), wege_vel: sum("wege_vel"), 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, tri_oev: (d) => d.wege_oev / d.total, tri_miv: (d) => d.wege_miv / d.total, tri_vel: (d) => d.wege_vel / 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 == currentStateRegionen.to } else if (currentStateRegionen.from.length > 1 && currentStateRegionen.to.length > 1) { return tidy( mapData, filter( (d) => d.quelle_name == currentStateRegionen.from && d.ziel_name == currentStateRegionen.to ) ); } })()38:T511,modalsplit = (function () { // ---------------------Wenn zwei (2) Gebiete selected---------------------------// if (currentStateRegionen.from.length > 1 && currentStateRegionen.to.length > 1) { return tidy( mapData, filter( (d) => d.quelle_name == currentStateRegionen.from && d.ziel_name == currentStateRegionen.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 (currentStateRegionen.from.length > 1 && currentStateRegionen.to.length < 1) { return tidy( mapData, filter((d) => d.quelle_name == currentStateRegionen.from), groupBy("quelle_name", [ summarize({ wege_oev: sum("wege_oev"), wege_miv: sum("wege_miv"), wege_vel: sum("wege_vel"), 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, tri_oev: (d) => d.wege_oev / d.total, tri_miv: (d) => d.wege_miv / d.total, tri_vel: (d) => d.wege_vel / d.total }) ); } })()39:T458,formatNumbers = function (formatter, style, 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") { 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(1).toLocaleString("de-CH") + "%"; } } }3a:T171e,tabDiffSpalte1 = (function () { // Die erste Spalte der Tabelle zeigt den von der Quellregion (currentStateRegionen.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 == currentStateRegionen.from if ( currentStateRegionen.from.length > 1 && currentStateRegionen.to.length < 1 ) { return tidy( data2018_2040, filter( (d) => d.jahr == currentStateRegionen.jahr && d.quelle_name == currentStateRegionen.from && d.ziel_name != currentStateRegionen.from ), groupBy("quelle_name", [ summarize({ wege_oev_2018: sum("wege_oev_2018"), wege_miv_2018: sum("wege_miv_2018"), wege_vel_2018: sum("wege_vel_2018"), total_2018: sum("total_2018"), bi_total_2018: sum("bi_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_wege_vel_18_40: sum("diff_wege_vel_18_40"), diff_total_18_40: sum("diff_total_18_40"), // Summe der Differenzen für den Gesamtverkehr diff_bi_total_18_40: sum("diff_bi_total_18_40") }) ]), 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 change_wege_vel: (d) => formatNumbers( "percentage", "signed", d.diff_wege_vel_18_40 / d.wege_vel_2018 ), // Prozent. Veränderung 2040 zu 2018 Velo total: (d) => formatNumbers( "percentage", "signed", d.diff_total_18_40 / d.total_2018 ), // Prozent. Veränderung 2040 zu 2018 Gesamtverkehr bi_total: (d) => formatNumbers( "percentage", "signed", d.diff_bi_total_18_40 / d.bi_total_2018 ), 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), bi_total_2018: (d) => formatNumbers("integer", "signed", d.bi_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_wege_vel_18_40: (d) => formatNumbers("integer", "signed", d.diff_wege_vel_18_40), diff_total_18_40: (d) => formatNumbers("integer", "signed", d.diff_total_18_40), diff_bi_total_18_40: (d) => formatNumbers("integer", "signed", d.diff_bi_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 == currentStateRegionen.to } else if ( currentStateRegionen.from.length > 1 && currentStateRegionen.to.length > 1 ) { return tidy( data2018_2040, filter( (d) => d.jahr == currentStateRegionen.jahr && d.quelle_name == currentStateRegionen.from && d.ziel_name == currentStateRegionen.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 change_wege_vel: (d) => formatNumbers( "percentage", "signed", d.diff_wege_vel_18_40 / d.wege_vel_2018 ), // Prozent. Veränderung 2040 zu 2018 Velo total: (d) => formatNumbers( "percentage", "signed", d.diff_total_18_40 / d.total_2018 ), // Prozent. Veränderung 2040 zu 2018 Gesamtverkehr bi_total: (d) => formatNumbers( "percentage", "signed", d.diff_bi_total_18_40 / d.bi_total_2018 ), 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_wege_vel_18_40: (d) => formatNumbers("integer", "signed", d.diff_wege_vel_18_40), diff_total_18_40: (d) => formatNumbers("integer", "signed", d.diff_total_18_40), diff_bi_total_18_40: (d) => formatNumbers("integer", "signed", d.diff_bi_total_18_40) }) ); } })()3b:T74d,tabDiffSpalte2 = tidy( data2018_2040, filter( (d) => d.jahr == currentStateRegionen.jahr && d.quelle_name == currentStateRegionen.from && d.ziel_name == currentStateRegionen.from ), 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 change_wege_vel: (d) => formatNumbers( "percentage", "signed", d.diff_wege_vel_18_40 / d.wege_vel_2018 ), // Prozent. Veränderung 2040 zu 2018 Velo total: (d) => formatNumbers("percentage", "signed", d.diff_total_18_40 / d.total_2018), // Prozent. Veränderung 2040 zu 2018 Gesamtverkehr bi_total: (d) => formatNumbers( "percentage", "signed", d.diff_bi_total_18_40 / d.bi_total_2018 ), 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_wege_vel_18_40: (d) => formatNumbers("integer", "signed", d.diff_wege_vel_18_40), diff_total_18_40: (d) => formatNumbers("integer", "signed", d.diff_total_18_40), diff_bi_total_18_40: (d) => formatNumbers("integer", "signed", d.diff_bi_total_18_40) }) )3c:Td85,tabelleFrom = (function () { // ---------------------Wenn zwei (2) Gebiete selected---------------------------// if ( currentStateRegionen.from.length > 1 && currentStateRegionen.to.length > 1 ) { return tidy( mapData, filter( (d) => d.quelle_name == currentStateRegionen.from && d.ziel_name == currentStateRegionen.to ), mutate( (function () { if (inputModalsplit == "Bimodal") { return { ÖV: (d) => d.bi_oev, MIV: (d) => d.bi_miv, beziehung: (d) => `${d.quelle_name} ↔ ${d.ziel_name}` }; } else { return { ÖV: (d) => d.tri_oev, MIV: (d) => d.tri_miv, Velo: (d) => d.tri_vel, beziehung: (d) => `${d.quelle_name} ↔ ${d.ziel_name}` }; } })() ), pivotLonger({ cols: (function () { if (inputModalsplit == "Bimodal") { return ["ÖV", "MIV"]; } else { return ["ÖV", "MIV", "Velo"]; } })(), namesTo: "wege", valuesTo: "werte" }), 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 ( currentStateRegionen.from.length > 1 && currentStateRegionen.to.length < 1 ) { return tidy( mapData, filter((d) => d.quelle_name == currentStateRegionen.from), groupBy("quelle_name", [ summarize( (function () { if (inputModalsplit == "Bimodal") { return { wege_oev: sum("wege_oev"), wege_miv: sum("wege_miv"), total: sum("bi_total"), bi_total: sum("bi_total") }; } else { return { wege_oev: sum("wege_oev"), wege_miv: sum("wege_miv"), wege_vel: sum("wege_vel"), total: sum("total"), bi_total: sum("bi_total") }; } })() ) ]), mutate( (function () { if (inputModalsplit == "Bimodal") { return { 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)` }; } else { return { bi_oev: (d) => d.wege_oev / d.bi_total, bi_miv: (d) => d.wege_miv / d.bi_total, ÖV: (d) => d.wege_oev / d.total, MIV: (d) => d.wege_miv / d.total, Velo: (d) => d.wege_vel / d.total, beziehung: (d) => `${d.quelle_name} (Gesamtverkehr)` }; } })() ), pivotLonger({ cols: (function () { if (inputModalsplit == "Bimodal") { return ["ÖV", "MIV"]; } else { return ["ÖV", "MIV", "Velo"]; } })(), namesTo: "wege", valuesTo: "werte" }), select(["beziehung", "wege", "werte"]) ); } })()3d:T135c,viewof plot = { const plotBottom = vl .data(Kanton) .transform( vl .calculate("indexof(['MIV', 'ÖV', 'Velo'], datum.wege)") .as("stackSortOrder") ) .layer( vl .markBar({ cornerRadiusTopRight: 3, cornerRadiusBottomRight: 3, stroke: "white", yOffset: 10, height: 50 }) .encode( vl .x() .sum("werte") .stack("normalize") .axis({ format: "%" }) .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: biTriArr, range: colorModalSplit, //["#da4f81", "#5ac5c4", "#cac96a"], 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 plotTop = vl .data(tabelleFrom) .transform( vl .calculate("indexof(['MIV','ÖV', 'Velo'], datum.wege)") .as("stackSortOrder") ) .layer( vl .markBar({ cornerRadiusTopRight: 3, cornerRadiusBottomRight: 3, stroke: "white", yOffset: 10, height: 50 }) .encode( vl .x() .sum("werte") .stack("normalize") .axis({ format: "%" }) .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: biTriArr, 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: "black" }, value: "white" }), 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(plotTop, plotBottom) .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: "#ffffff", axis: { labelFontSize: 13, labelColor: "black" }, axisX: { labelFont: ZHFonts.black, labelFontSize: 12, format: "%", tickCount: 7, title: null }, axisY: { labelPadding: 10, title: null, ticks: false, labelLimit: 750, 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 }, // title: { fontSize: 16, color: "black", offset: 15, anchor: "center" }, text: { font: ZHFonts.regular, fontSize: 16, color: "white" } }) .render(); }3e:T5b8,chartRegionen = { 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 .attr("fill", "#000000") .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:T53b,sankeyDataRaw = tidy( mapData, select( (function () { if (inputModalsplit == "Bimodal") { return ["jahr", "quelle_name", "ziel_name", "wege_oev", "wege_miv"]; } else { return [ "jahr", "quelle_name", "ziel_name", "wege_oev", "wege_miv", "wege_vel" ]; } })() ), mutate( (function () { if (inputModalsplit == "Bimodal") { return { ÖV: (d) => d["wege_oev"], MIV: (d) => d["wege_miv"], ziel_name: (d) => d.ziel_name == d.quelle_name ? d.ziel_name + " (Binnenverkehr)" : d.ziel_name }; } else { return { ÖV: (d) => d["wege_oev"], MIV: (d) => d["wege_miv"], Velo: (d) => d["wege_vel"], ziel_name: (d) => d.ziel_name == d.quelle_name ? d.ziel_name + " (Binnenverkehr)" : d.ziel_name }; } })() ), pivotLonger({ cols: (function () { if (inputModalsplit == "Bimodal") { return ["MIV", "ÖV"]; } else { return ["MIV", "ÖV", "Velo"]; } })(), namesTo: "verkehrsmittel", valuesTo: "value" }), select(["jahr", "quelle_name", "verkehrsmittel", "ziel_name", "value"]) )40:T457,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 sankeyData) { 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 sankeyData) { 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 }; }41:T569,dataRegion_roh = d3 .csv( "https://www.web.statistik.zh.ch/cms_vis/mobilitaet_afm/gesamtverkehrsmodell/AFM_GVM_REG_2018-2040.csv" ) // Das Total der Verkehrswege berechnen .then(function (data) { data.forEach(function (d) { 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.wege_vel = +d.wege_vel * 2; d.total = d.wege_oev + d.wege_miv + d.wege_vel; 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.tri_oev = d.wege_oev / d.total; d.tri_miv = d.wege_miv / d.total; d.tri_vel = d.wege_vel / d.total; } else if (d.quelle_code == d.ziel_code) { d.wege_oev = +d.wege_oev; d.wege_miv = +d.wege_miv; d.wege_vel = +d.wege_vel; d.total = d.wege_oev + d.wege_miv + d.wege_vel; 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.tri_oev = d.wege_oev / d.total; d.tri_miv = d.wege_miv / d.total; d.tri_vel = d.wege_vel / d.total; } }); return data; })42:T64d,data2018_2040 = tidy( dataRegion_roh, 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 }), wege_vel_2018: lag("wege_vel", { n: 1 }), total_2018: lag("total", { n: 1 }) }) ), filter((d) => d.jahr != 2018), select([ "jahr", startsWith("quelle_"), startsWith("ziel_"), startsWith("wege_"), startsWith("total_"), startsWith("bi_") ]), rename({ wege_oev: "diff_wege_oev_18_40", wege_miv: "diff_wege_miv_18_40", wege_vel: "diff_wege_vel_18_40" }), mutate({ diff_total_18_40: (d) => d.diff_wege_oev_18_40 + d.diff_wege_miv_18_40 + d.diff_wege_vel_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 change_wege_vel: (d) => d.diff_wege_vel_18_40 / d.wege_vel_2018, // Prozent. Veränderung 2040 zu 2018 Velo total: (d) => d.diff_total_18_40 / d.total_2018, // Prozent. Veränderung 2040 zu 2018 Gesamtverkehr diff_bi_total_18_40: (d) => d.diff_wege_oev_18_40 + d.diff_wege_miv_18_40, // Summe der Differenzen für den Gesamtverkehr bi_total_2018: (d) => d.wege_oev_2018 + d.wege_miv_2018, bi_total: (d) => d.diff_bi_total_18_40 / d.bi_total_2018 // Prozent. Veränderung 2040 zu 2018 Gesamtverkehr }) )43:[{"id":"3060ad42124f2bf0edce01e76cb287e54c496fe5662f8fef7153c0dc31f75ceeb5a9903b8b5f08ec380e58dd4946c0bc6ba56e82511fee4957a81920697e016d","href":"https://static.observableusercontent.com/files/3060ad42124f2bf0edce01e76cb287e54c496fe5662f8fef7153c0dc31f75ceeb5a9903b8b5f08ec380e58dd4946c0bc6ba56e82511fee4957a81920697e016d","name":"AFM_GVM_REG_KTZH_2018-2040@1.csv","type":"text/csv","lastModified":1674216479901.434,"size":1731}] 31:{"id":"48974bcf41f3437a","slug":"gesamtverkehrsmodell_regionen","title":"Gesamtverkehrsmodell: Quell-, Ziel- und Binnenverkehr - REGIONEN","thumbnail":"c4fb5476905c7e91adb309c4ce252cf29d99692e61815adfe1df9a90ff7ed90b","access_level":"public","create_time":"$D2022-01-20T08:18:16.242Z","update_time":"$D2024-09-28T12:19:36.896Z","view_time":null,"first_public_time":"$D2022-07-29T14:44:05.624Z","has_unpublished_edits":null,"fork":true,"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":6477,"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":5,"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 - REGIONEN","cells":[{"id":118,"value":"htl.html`

Gesamtverkehrsmodell: Quell-, Ziel- und Binnenverkehr - REGIONEN

\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":4488,"value":"default_from = \"Furttal\"","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":5702,"value":"### PNG Export","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5630,"value":"viewof buttonPNG = Inputs.button(\"Grafiken als PNG herunterladen (2 Dateien)\", {\n value: null,\n reduce: () =>\n (function () {\n createPNG(pngConfig_map);\n createPNG(pngConfig_sankey);\n })()\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5628,"value":"pngConfig_map = ({\n containerId: \"map-regionen\",\n filename:\n \"Karte_\" + currentStateRegionen.from + \"_\" + inputZeitraumRegionen + \".png\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6212,"value":"pngConfig_sankey = ({\n containerId: \"sankey-regionen\",\n filename:\n \"Verkehrsbeziehungen_\" +\n currentStateRegionen.from +\n \"_\" +\n inputZeitraumRegionen +\n \".png\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5626,"value":"runDownloadPng_old = {\n if (buttonPNG >= 1) {\n createPNG(pngConfig_map);\n createPNG(pngConfig_sankey);\n\n viewof buttonPNG.value = 0;\n viewof buttonPNG.dispatchEvent(new CustomEvent(\"input\"));\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5699,"value":"### CSV Export","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5676,"value":"viewof buttonCSV = Inputs.button(\"Daten als CSV herunterladen\", {\n value: null,\n reduce: () => createCSV(csvConfig)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5690,"value":"csvConfig = ({\n filename:\n \"GVM_\" + currentStateRegionen.from + \"_\" + inputZeitraumRegionen + \".csv\",\n data: tabDownloadData\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5678,"value":"runDownloadCSV_old = {\n if (buttonCSV >= 1) {\n createCSV(csvConfig);\n\n viewof buttonCSV.value = 0;\n viewof buttonCSV.dispatchEvent(new CustomEvent(\"input\"));\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5704,"value":"### XLSX Export","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5373,"value":"viewof buttonXLSX = Inputs.button(\"Daten als XLSX herunterladen\", {\n value: 1,\n reduce: () => createXLSX(xlsxConfig)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5321,"value":"xlsxConfig = ({\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: currentStateRegionen.from + \" \" + inputZeitraumRegionen,\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:\n \"GVM_\" + currentStateRegionen.from + \"_\" + inputZeitraumRegionen + \".xlsx\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5465,"value":"runDownloadXSLX_old = {\n if (buttonXLSX >= 1) {\n createXLSX(xlsxConfig);\n\n viewof buttonXLSX.value = 0;\n viewof buttonXLSX.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":"currentStateRegionen = (function () {\n let obj = {};\n obj.from = karteRegionen.selected.from; //karteRegionen.value.from;\n obj.to = karteRegionen.selected.to;\n obj.bboxFrom = karteRegionen.selected.bboxFrom;\n obj.bboxTo = karteRegionen.selected.bboxTo;\n obj.jahr = inputZeitraumRegionen;\n // console.log(\"currentStateRegionen:\");\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":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":true,"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 (currentStateRegionen.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 == currentStateRegionen.from\nbinnenverkehr = dataRegion_roh.filter(\n (d) =>\n d.jahr == currentStateRegionen.jahr &&\n d.quelle_name == currentStateRegionen.from &&\n d.ziel_name == currentStateRegionen.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":6466,"value":"Inputs.table(modalsplit)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6468,"value":"Inputs.table(mapData.filter((d) => d.quelle_name == currentStateRegionen.from))","pinned":true,"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 Modalsplit 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":6406,"value":"dataKTZH = await FileAttachment(\"AFM_GVM_REG_KTZH_2018-2040@1.csv\").csv({\n typed: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6424,"value":"Inputs.table(\n dataKTZH.filter(\n (d) =>\n d.jahr == 2040 &&\n (d.modalsplit == \"Bimodal\".jahr) == 2040 &&\n (d.modalsplit == \"Bimodal\".jahr) == 2040 &&\n d.modalsplit == \"Bimodal\"\n )\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6427,"value":"2975687 / 4549731","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6432,"value":"2975687 / 4549731","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6409,"value":"Kanton = tidy(\n dataKTZH,\n filter(\n (d) =>\n d.jahr == currentStateRegionen.jahr && d.modalsplit == inputModalsplit\n )\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4890,"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":6332,"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 == currentStateRegionen.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 total: \"total_wege_trimodal\",\n bi_total: \"total_wege_bimodal\",\n tri_oev: \"anteil_oev_trimodal\",\n tri_miv: \"anteil_miv_trimodal\",\n tri_vel: \"anteil_vel_trimodal\",\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 startsWith(\"total_\"),\n startsWith(\"anteil_\"),\n \"hinweis_zu_daten\"\n ])\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6336,"value":"Inputs.table(tabDownloadData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2089,"value":"-----------\n## Plot \"Modalsplit\"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2146,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5231,"value":"inputModalsplit","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":2092,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5252,"value":"biTriArr = (function () {\n if (inputModalsplit == \"Bimodal\") {\n return [\"MIV\", \"ÖV\"];\n } else {\n return [\"MIV\", \"ÖV\", \"Velo\"];\n }\n})()","pinned":false,"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":4403,"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":6098,"value":"### Code zum Sankey Plot\n↓ (Zelle aufklappen)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4452,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6177,"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":4468,"value":"viewof sankeyChartRegionen = (function () {\n // ---------------------Wenn keine (0) Gebiete selected---------------------------//\n if (inputZeitraumRegionen == \"2018-2040\") {\n return htl.html`

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

Modal Split-Verteilung auf die Regionen

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

${currentStateRegionen.from}: Verteilung der Verkehrsbeziehungen

${chartRegionen}

`;\n }\n})()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4408,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4427,"value":"sankeyData = (function () {\n if (currentStateRegionen.from.length < 1) {\n return sankeyDataRaw.filter(\n (d) => d.jahr == inputZeitraumRegionen && d.quelle_name == default_from\n );\n } else {\n return sankeyDataRaw.filter(\n (d) => d.jahr == inputZeitraumRegionen && d.quelle_name == currentStateRegionen.from\n );\n }\n})()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4430,"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":4433,"value":"colorSankey = d3\n .scaleOrdinal([\"MIV\", \"ÖV\", \"Velo\"], colorModalSplit)\n .unknown(\"#ccc\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4444,"value":"width = 768","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4447,"value":"height = 450","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4438,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4443,"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":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 - Raumplanungsregionen\n\n↓ Importierte Rohdaten; Nach Import werden die Totale berechnet","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6473,"value":"d3.csv(\n \"https://www.web.statistik.zh.ch/cms_vis/mobilitaet_afm/gesamtverkehrsmodell/AFM_GVM_REG_2018-2040.csv\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6446,"value":"Inputs.table(dataRegion_roh.filter((d) => d.jahr == \"2018-2040\"))","pinned":true,"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 (inputZeitraumRegionen == \"2018-2040\") {\n return data2018_2040.filter((el) => el.jahr == inputZeitraumRegionen);\n } else if (inputZeitraumRegionen == \"2018\") {\n return dataRegion_roh.filter((el) => el.jahr == inputZeitraumRegionen);\n } else if (inputZeitraumRegionen == \"2040\") {\n return dataRegion_roh.filter((el) => el.jahr == inputZeitraumRegionen);\n }\n})()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3890,"value":"Inputs.table(mapData)","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":"$42","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3898,"value":"Inputs.table(data2018_2040)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"### Geodaten - Raumplanungsregionen","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_regionen_F_KTZHGR/gvm_korridore_regionen_F_KTZHGR_2019_01_01.json\"\n// \"https://www.web.statistik.zh.ch/vis_observable_prototyping/AFM_GVM/korridore_regionen_wgs84_clipped.json\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"mapGeoData = 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 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":6391,"value":"gebiete_Karte = [\n ...new Set(mapGeoData.features.map((d) => d.properties.GEBIET_N))\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6394,"value":"gebiete_Alte_Karte_by_Code = d3.group(\n mapGeoData.features,\n (d) => d.properties.GEBIET_C\n // ,\n // (d) => d.properties.BFS_C\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 Pfad 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":6310,"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":5575,"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 *('inputZeitraumRegionen')*:\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 (inputZeitraumRegionen === \"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":3720,"value":"colorScaleDiff = d3\n .scaleSequential(d3.interpolateRgbBasis(divergingViOr))\n .domain([\n -1 * d3.max(data2018_2040, (d) => d.total),\n //d3.min(data2018_2040, (d) => d.total),\n d3.max(data2018_2040, (d) => d.total)\n ])\n .unknown(\"#e3e3e3\")\n// d3.scaleDiverging().domain([\n// -1 * d3.max(data2018_2040, (d) => d.total),\n// //d3.min(data2018_2040, (d) => d.total),\n// 0,\n// d3.max(data2018_2040, (d) => d.total)\n// ])\n// // .interpolator(d3.interpolate(\"#96170F\", \"#ccccccc\", \"#54268E\"))\n// // .range(colorDiff)\n// .range([\"#96170F\", \"#ccccccc\", \"#54268E\"]) //[\"#f0f3bd\", \"#05668d\"]\n// .unknown(\"#e5e5e5\")","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 //.range([\"rgb(229, 229, 229)\", \"rgb(8, 48, 107)\"])\n .unknown(\"e3e3e3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5530,"value":"divergingViOr = \n// ['#3f007d', '#561e8d', '#6a389a', '#7c51a6', '#8e69b3', '#a081bf', '#b39acb', '#c5b3d8', '#d8cce5', '#ece5f2', '#ffffff', '#fbf6e8', '#f8edd1', '#f4e3ba', '#f0daa2', '#edd18a', '#e9c772', '#e5bd59', '#e1b340', '#dda927', '#d99f0d']\n\n[\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 legendeRegionen = (function () {\n if (inputZeitraumRegionen == \"2018-2040\") {\n return legend({\n color: colorScaleDiff,\n tickFormat: \"+%\",\n title: \"Veränderung 2018-2040, %\"\n });\n } else if (inputZeitraumRegionen != \"2018-2040\") {\n return legend({\n color: colorScaleLog,\n title: \"Anzahl Verkehrswege\",\n // ticks: 3,\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":4703,"value":"viewof inputZeitraumRegionen = radio({\n title: \"Zeithorizont:\",\n //description: \"Bitte einen Bezirk wählen.\",\n options: [...new Set(dataRegion_roh.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":3862,"value":"---------\n#### Modal Split\n↓ (Zelle aufklappen)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3866,"value":"viewof inputModalsplit = radio({\n title: \"Modal Split:\",\n //description: \"Bitte einen Bezirk wählen.\",\n options: [\"Bimodal\", \"Trimodal\"],\n value: \"Trimodal\",\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":6132,"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// `","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":6457,"value":"import { fonts as ZHFonts } from \"@statistikzh/common-styles\"","pinned":true,"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 arrange,\n asc,\n desc,\n mutateWithSummary,\n lead,\n lag,\n startsWith\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":4435,"value":"d3 = require(\"d3@6\", \"d3-sankey@0.12\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5632,"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":"$W43","stdlib":"1","titling":"auto"}} 32:"$31:body"

Export

Verkehrsbeziehungen

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

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

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

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

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

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

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

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

Gesamtverkehrsmodell: Quell-, Ziel- und Binnenverkehr - REGIONEN

Modal Split-Verteilung auf die Regionen

${currentStateRegionen.from}: Verteilung der Verkehrsbeziehungen

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

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

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

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

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

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

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

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