1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 6 <title>Velofahrten in der Stadt Zürich - digimen.ch</title> 7 <link rel="icon" type="image/x-icon" href="img/favicon.ico"> 8 9 <meta property="og:url" content="https://www.digimen.ch/velo_zuerich/" /> 10 <meta property="og:type" content="website" /> 11 <meta property="og:title" content="Velofahrten in der Stadt Zürich - Visualisierung by digimen.ch" /> 12 <meta property="og:description" content="Interaktive Visualisierung der Velofahrten in der Stadt Zürich." /> 13 <meta property="og:image" content="https://www.digimen.ch/velo_zuerich/img/titelbild.png" /> 14 15 <link href="assets/bootstrap/css/bootstrap.css" rel="stylesheet" > 16 <link href="assets/fontawesome/css/all.min.css" rel="stylesheet"> 17 <link href="assets/protip/protip.min.css" rel="stylesheet"> 18 <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin=""/> 19
19<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>
19 20
20<script src="assets/jquery/jquery-3.6.0.min.js" ></script>
20 21
21<script src="assets/bootstrap/js/bootstrap.min.js" ></script>
21 22
22<script src="assets/protip/protip.min.js" ></script>
22 23
23<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
23 24 25
25<script src="data/standorte.geojson" type="text/javascript"></script>
25 26
26<script src="data/velo_pro_tag.json" type="text/javascript"></script>
26 27
27<script src="data/velo_pro_kw.json" type="text/javascript"></script>
27 28
28<script src="assets/default.js" type="text/javascript"></script>
28 29 30 <link rel="stylesheet" href="assets/styles.css" /> 31 </style> 32 33 </head> 34 <body> 35 <div class="row p-3 g-0 row-1"> 36 <div class="col-12"> 37 <h1>Velofahrten in der Stadt Zürich <br> 38 <span> 39 Code by <a href="https://www.digimen.ch" target="_blank">digimen.ch</a> 40 mit Daten von <a href="https://data.stadt-zuerich.ch/" target="_blank">Open Data Stadt Zürich.</a> 41 Für mehr Infos & Anleitung <a href="#" id="modal_info_open">hier klicken.</a> 42 </span> 43 </h1> 44 </div> 45 </div> 46 <div class="row g-0 row-2"> 47 <div class="col-control"> 48 <div class="row g-0"> 49 <div class="elm-control btn-up protip btn-disabled" id="go_first" data-pt-title="Zum Anfang" data-pt-gravity="top-right-corner"> 50 <i class="fa-solid fa-backward-fast"></i> 51 </div> 52 <div class="elm-control btn-up protip btn-disabled" id="go_back" data-pt-title="Ein Tag zurück" data-pt-gravity="top-right-corner"> 53 <i class="fa-solid fa-backward-step"></i> 54 </div> 55 <div class="elm-control btn-up protip" id="play" data-pt-title="Abspielen" data-pt-gravity="top-right-corner"> 56 <i class="fa-solid fa-play"></i> 57 </div> 58 <div class="elm-control btn-up protip" id="stop" data-pt-title="Anhalten" data-pt-gravity="top-right-corner"> 59 <i class="fa-solid fa-stop"></i> 60 </div> 61 <div class="elm-control btn-up protip" id="go_next" data-pt-title="Ein Tag vorwärts" data-pt-gravity="top-right-corner"> 62 <i class="fa-solid fa-forward-step"></i> 63 </div> 64 <div class="elm-control btn-up protip" id="go_last" data-pt-title="Zum Ende" data-pt-gravity="top-right-corner"> 65 <i class="fa-solid fa-forward-fast"></i> 66 </div> 67 </div> 68 </div> 69 <div class="col-display"> 70 <div class="elm-display protip" data-pt-title="Datum" data-pt-gravity="top-left-corner"> 71 <p class="display-ico"><i class="fa-solid fa-calendar-days"></i></p> 72 <p class="display-txt" id="display_date"></p> 73 </div> 74 <div class="elm-display protip" data-pt-title="Total Fahrten" data-pt-gravity="top-left-corner"> 75 <p class="display-ico"><i class="fa-solid fa-person-biking"></i></p> 76 <p class="display-txt" id="display_bikes">0</p> 77 </div> 78 </div> 79 </div> 80 <div class="row g-0 row-3"> 81 <div class="col-progress"> 82 <input type="range" id="day_slider" min="0" max="1" step="1" value="0" /> 83 </div> 84 </div> 85 <div class="row g-0 row-4"> 86 <div class="col-lg-8 col-sm-12"> 87 <div id="map"></div> 88 </div> 89 <div class="col-lg-4 col-sm-12" id="stationen"> 90 91 </div> 92 </div> 93 <div class="row g-0 row-5"> 94 <div id="diagram"> 95 <div id="diagram_o"> 96 <div id="diagram_o_l"></div> 97 <div id="diagram_sliderxx"></div> 98 </div> 99 <div id="diagram_titel">Velofahrten pro Woche</div> 100 <input type="range" id="diagram_slider" min="0" max="1" step="1" value="0" /> 101 </div> 102 </div> 103 104 <!-- Modal --> 105 <div id="modal_info" class="modal fade dark modal-lg" tabindex="-1"> 106 <div class="modal-dialog modal-dialog-scrollable"> 107 <div class="modal-content"> 108 <div class="modal-header"> 109 <h5 class="modal-title">Visualisierung Velofahrten der Stadt Zürich</h5> 110 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> 111 </div> 112 <div class="modal-body"> 113 <p>Diese Visualisierung basiert auf den Zähldaten die das Tiefbaumt der Stadt Zürich erhebt. 114 Der Veloverkehr wird mit mittels im Strassenbelag eingelassenen Induktionsschlaufen erfasst. 115 Ebenfalls in erhoben wird der Fussverkehr. 116 Dieser wird durch passive Infrarotstrahlung gezählt ist aber nicht in dieser Visualisierung dargestellt. 117 <br><br> 118 </p> 119 <h6>Bedienung</h6> 120 <p> 121 <img src="img/steuerungsleiste.png" width="280" class="info_img sm_center"> Steuerungsleiste. Von links nach rechts: An den Anfang, ein Schritt zurück, Abspielen, Stop, ein Schritt vorwärts und ans Ende. 122 <br><br> 123 <img src="img/display.png" width="300" class="info_img sm_center"> Display rechts das Datum der dargestellten Daten und links die Total Velofahrten an diesem Tag. 124 <br><br> 125 <img src="img/karte.png" width="160" class="info_img">In der Mitte des Kreises die Position der Zählstelle und die Grösse des Kreises stellt die Anzahl Fahrten an diesem Tag dar. Bei Klick auf den Kreis wird der Name der Zählstation angezeigt. 126 <br><br> 127 <img src="img/label.png" width="300" class="info_img sm_center">Bezeichnung der Zählstelle. Links die Anzahl Fahrten an diesem Tag, rechts die Total gezählten Fahren. Mit einem Klick die Zählstelle auf der Karte einzoomen. Mit einem erneuten Klick wieder rauszoomen. 128 <br><br> 129 <img src="img/timeline.png" width="160" class="info_img">Total Velofahrten pro Woche. Mit Klick auf die blaue Linie kann man diese nach rechts / links ziehen und zu einem gewünschten Datum springen. 130 <br><br> 131 </p> 132 <h6>Copyright & Credits</h6> 133 <ul> 134 <li>Realisiert von Michael Caviglia - <a href="www.digimen.ch" target="_blank">digimen.ch</a></li> 135 <li>Die Daten der Velofahrten werden vom Tiefbauamt erhoben und <a href="https://data.stadt-zuerich.ch/dataset/ted_taz_verkehrszaehlungen_werte_fussgaenger_velo" target="_blank">hier bei Open Data Stadt Zürich bereitgestellt</a></li> 136 <li>Die Geodaten stammen von <a href="https://www.openstreetmap.org/" target="_blank">
136openstreetmap.org</a></li> 137 <li>Die Karten-Tiles werden von <a href="https://www.jawg.io/" target="_blank">JawgMaps</a> bereitgestellt</li> 138 </ul> 139 <p style="text-align: center;"> 140 <br /> 141 <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"> 142 <img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a> 143 <br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>. 144 <br /> 145 <br /> 146 </p> 147 148 </div> 149 <div class="modal-footer"> 150 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> 151 </div> 152 </div> 153 </div> 154 </div> 155 </body> 156</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.