Implementation for the bachelor thesis: "Analyzing the Popularity of Street Segments for Cyclists in the SimRa Dataset"

README.md

@@ -1,14 +1,24 @@
-# SimRa-Visualization
+# SimRa Visualization
 
 This project is part of the SimRa research project which includes the following subprojects:
-- [sirma-android](https://github.com/simra-project/simra-android/): The SimRa app for Android.
+
+- [simra-android](https://github.com/simra-project/simra-android/): The SimRa app for Android.
 - [simra-ios](https://github.com/simra-project/simra-ios): The SimRa app for iOS.
 - [backend](https://github.com/simra-project/backend): The SimRa backend software.
 - [dataset](https://github.com/simra-project/dataset): Result data from the SimRa project.
-- [screenshots](https://github.com/simra-project/screenshots): Screenshots of both the iOS and Android app.
-- [SimRa-Visualization](https://github.com/simra-project/SimRa-Visualization): Web application for visualizing the dataset.
+- [screenshots](https://github.com/simra-project/SimRa-Visualization): Screenshots of both the iOS and Android app.
+- SimRa-Visualization: Web application for visualizing the dataset([frontend](https://github.com/simra-project/simra-visualization-web), [backend](https://github.com/simra-project/simra-visualizations-server)).
+
+In this project, we collect – with a strong focus on data protection and privacy – data on such near crashes to identify when and where bicyclists are especially at risk. We also aim to identify the main routes of bicycle traffic in Berlin. To obtain such data, we have developed a smartphone app that uses GPS information to track routes of bicyclists and the built-in acceleration sensors to pre-categorize near crashes. After their trip, users are asked to annotate and upload the collected data, pseudonymized per trip. For more information see [our website](https://www.digital-future.berlin/en/research/projects/simra/).
+
+## Project setup
+
+```
+cd frontend/
+npm install
+```
 
-In this project, we collect – with a strong focus on data protection and privacy – data on such near crashes to identify when and where bicyclists are especially at risk. We also aim to identify the main routes of bicycle traffic in Berlin. To obtain such data, we have developed a smartphone app that uses GPS information to track routes of bicyclists and the built-in acceleration sensors to pre-categorize near crashes. After their trip, users are asked to annotate and upload the collected data, pseudonymized per trip.
-For more information see [our website](https://www.digital-future.berlin/en/research/projects/simra/).
+Then you can either execute `npm run server` to compile and provide hot-reloading while developing or run `npm run build` to compile and manifest for production.
 
-```
+## Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

frontend/.env

@@ -1,6 +1,6 @@
 VUE_APP_TITLE="SimRa Visualization (Dev)"
-VUE_APP_API_URL=http://207.180.205.80:8000
-VUE_APP_TILE_URL=http://207.180.205.80:1337
+VUE_APP_API_URL=http://127.0.0.1:8000
+VUE_APP_TILE_URL=http://127.0.0.1:1337
 VUE_APP_DEBUG=false
 VUE_APP_I18N_LOCALE=en
 VUE_APP_I18N_FALLBACK_LOCALE=en

frontend/src/components/MapLegend.vue

@@ -20,6 +20,7 @@
                 <div class="text-box">{{ $t('legend.regularIncident') }}</div>
         </template>
 
+        <!-- Incidents combined -->
         <template v-if="viewMode === config.viewModes.INCIDENTS">
             <template v-if="zoom > 15">
                 <div class="symbol symbol-marker marker-scary"><i class="fa fa-car"/></div>
@@ -85,6 +86,136 @@
             </div>
             <div class="text-box">{{ $t('legend.stopTimes') }}</div>
         </template>
+
+        <!-- Popularity score p_score -->
+        <template v-if="viewMode === config.viewModes.POPULARITY && (subViewMode === config.subViewModes.POPULARITY_COMBINED || subViewMode === config.subViewModes.POPULARITY_W_INCIDENTS_COMBINED)">
+            <!--
+            Show different incident markes, depending on zoom level.
+                16 - 18 Drop formed markers with icons.
+                14 - 15 Grey and red dots.
+                   < 14 None.
+            -->
+            <template v-if="zoom >= 16 && incidentsVisible">
+                <div class="symbol symbol-marker marker-scary"><i class="fa fa-car"/></div>
+                <div class="text-box">{{ $t('legend.scaryIncident') }}</div>
+
+                <div class="symbol symbol-marker marker-regular"><i class="fa fa-car"/></div>
+                <div class="text-box">{{ $t('legend.regularIncident') }}</div>
+            </template>
+            <template v-else-if="zoom >= 14 && incidentsVisible">
+                <div class="symbol-container">
+                    <div class="symbol symbol-circle" style="background-color: #9e1a16"/>
+                    <div class="symbol symbol-circle" style="background-color: #777777"/>
+                </div>
+                <div class="text-box">{{ $t('legend.incidents') }}</div>
+            </template>
+
+            <div class="symbol-container">
+                <div class="symbol symbol-box gradient6"/>
+                <div class="symbol symbol-box gradient5"/>
+                <div class="symbol symbol-box gradient4"/>
+                <div class="symbol symbol-box gradient3"/>
+                <div class="symbol symbol-box gradient2"/>
+                <div class="symbol symbol-box gradient1"/>
+            </div>
+            <div class="text-box">{{ $t('legend.popularityCombined') }}</div>
+        </template>
+
+        <!-- Avoided street segment density -->
+        <template v-if="viewMode === config.viewModes.POPULARITY && (subViewMode == config.subViewModes.POPULARITY_AVOIDED || subViewMode == config.subViewModes.POPULARITY_W_INCIDENTS_AVOIDED)">
+            <!--
+            Show different incident markes, depending on zoom level.
+                16 - 18 Drop formed markers with icons.
+                14 - 15 Grey and red dots.
+                   < 14 None.
+            -->
+            <template v-if="zoom >= 16 && incidentsVisible">
+                <div class="symbol symbol-marker marker-scary"><i class="fa fa-car"/></div>
+                <div class="text-box">{{ $t('legend.scaryIncident') }}</div>
+
+                <div class="symbol symbol-marker marker-regular"><i class="fa fa-car"/></div>
+                <div class="text-box">{{ $t('legend.regularIncident') }}</div>
+            </template>
+            <template v-else-if="zoom >= 14 && incidentsVisible">
+                <div class="symbol-container">
+                    <div class="symbol symbol-circle" style="background-color: #9e1a16"/>
+                    <div class="symbol symbol-circle" style="background-color: #777777"/>
+                </div>
+                <div class="text-box">{{ $t('legend.incidents') }}</div>
+            </template>
+
+            <div class="symbol-container">
+                <div class="symbol symbol-box blue1 one-third"/>
+                <div class="symbol symbol-box blue2 two-thirds"/>
+                <div class="symbol symbol-box blue3"/>
+            </div>
+            <div class="text-box">{{ $t('legend.avoidedStreetSegments') }}</div>
+        </template>
+
+        <!-- Chosen street segment density -->
+        <template v-if="viewMode === config.viewModes.POPULARITY && (subViewMode == config.subViewModes.POPULARITY_CHOSEN || subViewMode == config.subViewModes.POPULARITY_W_INCIDENTS_CHOSEN)">
+            <!--
+            Show different incident markes, depending on zoom level.
+                16 - 18 Drop formed markers with icons.
+                14 - 15 Grey and red dots.
+                   < 14 None.
+            -->
+            <template v-if="zoom >= 16 && incidentsVisible">
+                <div class="symbol symbol-marker marker-scary"><i class="fa fa-car"/></div>
+                <div class="text-box">{{ $t('legend.scaryIncident') }}</div>
+
+                <div class="symbol symbol-marker marker-regular"><i class="fa fa-car"/></div>
+                <div class="text-box">{{ $t('legend.regularIncident') }}</div>
+            </template>
+            <template v-else-if="zoom >= 14 && incidentsVisible">
+                <div class="symbol-container">
+                    <div class="symbol symbol-circle" style="background-color: #9e1a16"/>
+                    <div class="symbol symbol-circle" style="background-color: #777777"/>
+                </div>
+                <div class="text-box">{{ $t('legend.incidents') }}</div>
+            </template>
+
+            <div class="symbol-container">
+                <div class="symbol symbol-box blue1 one-third"/>
+                <div class="symbol symbol-box blue2 two-thirds"/>
+                <div class="symbol symbol-box blue3"/>
+            </div>
+            <div class="text-box">{{ $t('legend.chosenStreetSegments') }}</div>
+        </template>
+
+        <!-- Mixed popularity score p_mscore -->
+        <template v-if="viewMode === config.viewModes.POPULARITY && (subViewMode === config.subViewModes.POPULARITY_SCORE || subViewMode === config.subViewModes.POPULARITY_W_INCIDENTS_SCORE)">
+            <!--
+            Show different incident markes, depending on zoom level.
+                16 - 18 Drop formed markers with icons.
+                14 - 15 Grey and red dots.
+                   < 14 None.
+            -->
+            <template v-if="zoom >= 16 && incidentsVisible">
+                <div class="symbol symbol-marker marker-scary"><i class="fa fa-car"/></div>
+                <div class="text-box">{{ $t('legend.scaryIncident') }}</div>
+
+                <div class="symbol symbol-marker marker-regular"><i class="fa fa-car"/></div>
+                <div class="text-box">{{ $t('legend.regularIncident') }}</div>
+            </template>
+            <template v-else-if="zoom >= 14 && incidentsVisible">
+                <div class="symbol-container">
+                    <div class="symbol symbol-circle" style="background-color: #9e1a16"/>
+                    <div class="symbol symbol-circle" style="background-color: #777777"/>
+                </div>
+                <div class="text-box">{{ $t('legend.incidents') }}</div>
+            </template>
+
+            <div class="symbol-container">
+                <div class="symbol symbol-box gradient6"/>
+                <div class="symbol symbol-box gradient5"/>
+                <div class="symbol symbol-box gradient4"/>
+                <div class="symbol symbol-box gradient3"/>
+                <div class="symbol symbol-box gradient2"/>
+                <div class="symbol symbol-box gradient1"/>
+            </div>
+            <div class="text-box">{{ $t('legend.popularityCombined') }}</div>
+        </template>
     </div>
 </template>
 
@@ -97,11 +228,17 @@ export default {
         viewMode: Number,
         subViewMode: Number,
         zoom: Number,
+        incidentsVisible: Boolean,
     },
     data() {
         return {
             config: Config,
         }
+    },
+    watch: {
+        incidentsVisible() {
+            return this.incidentsVisible;
+        }
     }
 };
 </script>
@@ -163,6 +300,10 @@ export default {
         &.blue2 { background-color: hsl(215, 71%, 53%); opacity: 0.9; }
         &.blue3 { background-color: hsl(240, 71%, 53%); }
 
+        &.red1 {background-color: hsl(80, 80%, 48%); }
+        &.red2 {background-color: hsl(55, 80%, 48%); }
+        &.red3 {background-color: hsl(30, 80%, 48%); }
+
         &.gradient1 { background-color: rgb(68, 153, 53); }
         &.gradient2 { background-color: rgb(142, 192, 84); }
         &.gradient3 { background-color: rgb(237, 226, 4); }