Develop a tool for policymakers to improve cycling conditions, such as making it safer, more accessible and more pleasant based on the routes and feedback from users. Visualize the dataset and the feedback in an attractive way, so that policy makers can take the feedback into account in future decisions to improve cycling conditions, with the use of the data from the Ring-Ring organization.
For the concept for Ring-Ring I looked at developing a policy-makers dashboard. On the dashboard, policymakers are able to analyze all information about the data in one overview, as well as the feedback from the users.
The main feature of the application is the dashboard tool. Two overviews can be viewed on the dashboard tool, namely the general statistics view and the feedback overview.
With the statistics overview, a lot of information can be viewed in an overview:
- All start and end points of the routes
- All traveled routes plotted on a map, where the busiest points can be found.
- The number of rides categorized by length
- The number of trips per day during the month of January
- The total number of trips
- Average duration of a bicycle ride
- Average distance of a trip
With the feedback, everything about the feedback of the users can be analyzed.
- The route driven, including start and end point.
- The response about the route, including the attached annoyance topic.
- Which part of the city has the most responses
- How the responses are distributed, based on topic
For this project I used the Ring-Ring dataset. The dataset contains all information about the rides driven in Amsterdam, from January 2020. The dataset is hosted on my personal hosting, located here
The dataset contains information about the routes traveled in the month of January 2020, in Amsterdam. Based on these routes, the location, time, distance and weather conditions can be found.
In my project I used different functional patterns to clean up the dataset and make it usable for myself. I am using a large object, which contains different values.
One of the values ββis an object, in which I put all the data for realizing the data visualisations. Here I have released various functions in which the data is transformed into useful information.
The second value contains the entire dataset that we received from Ring-Ring, in order to plot the geo-location on a map. This one is unedited, we received it from the IT department and after a bit of fumbling it was usable for plotting.
The last value contains a feedback data file. This is based on fictitious responses, because they were missing from the dataset. The responses are linked from previous rides from the Ring-Ring dataset.
{
charts: {
barChart: lorem
lineChart: lorem,
positionStart: lorem,
positionEnd: lorem,
subjectChart: lorem,
feedbackLocationChart: lorem,
avgTime: lorem,
avgDistance: lorem,
}, // Chart data
geojson: , // Ringring dataset,
feedbackData: , // Feedback dataset
}
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"coordinates": [], // Coordinates of route
"type": "LineString"
},
"properties": {
"start": "2020-01-31T22:57:40Z",
"end": "2020-01-31T22:59:51Z",
"duration": 45.2,
"modality": 2,
"distance": 17.1,
"feedback score": null,
"feedback": null,
"weather": "zwaar bewolkt"
}
}
]
}
{
"route": {
"geometry": {
"coordinates": [], // Coordinates of route
"type": "LineString"
},
"properties": {
"day": "2020-01-31T16:34:03Z",
"start": "2020-01-31T16:34:03Z",
"end": "2020-01-31T16:57:33Z",
"duration": 23,
"modality": 2,
"distance": 3.5,
"weather": "zwaar bewolkt"
},
"type": "Feature"
},
"feedback": "Een onhandige indeling van het fietspad, waardoor je niet veilig kan oversteken.",
"feedbackTag": ["fietspad", "oversteekpunt"],
"stadsdeel": "Centrum",
"gevoelsVeiligheid": 3
},
The application is build in Sapper. Sapper is a framework for building web applications, based on Svelte's technology. This ensures that the code is compiled, rather than displayed in a virtual dome. Svelte writes code that surgically updates the DOM when your app's state changes. The usage of an framework makes it easier to expand the tool with new features, the code could now be extended in an easy way with, for example, a valid login system and multiple datasets. I have chosen to work with a framework in order to gain experience with it, for my personal development.
To create the data visualizations, I've made use of Chart.js. Chart.js is a library that helps plot data inside a chart. Its customizable with a bunch of options, and responsive so i
MapBox is a JavaScript Library that renders interactive maps from vector tiles and online MapBox styles. This means you can create a custom style inside the MapBox Editor, and import the style inside your code. This allows you to easily add your own twist to the design, making it a perfect match for your project.
When you already have a connection with Git, and installed Node Version Manager on your computer you can easily download my project. If you haven't already installed these programs, I recommend to do that first.
git clone https://github/com/joordy/ringring.git
npm i
npm run dev
localhost:3000
npx sapper export --legacy --entry not-found
npm run build
npm run export
Now your application is ready to be hosted!
The live version of the application can be watched here: ringring.jorrr.nl
During the project I was assisted by Marleen Buchner and Meggie Chen regarding the design. They have made it possible for the design of the tool to look as it is now visible. Also a big thanks to Janine Hogendoorn from Ring-Ring for th
Thanks also to Janine Hogendoorn from Ring-Ring for giving critical feedback on our tool, and to SuzeSwarte for the guidance during the project.
- SvelteJS. (n.d.). Sveltejs/sapper repository GitHub | SvelteJS.. Retrieved 7 December 2020, from https://github.com/sveltejs/sapper
- MDN. (2020, December 8). CSS Grid Layout - CSS: Cascading Style Sheets | MDN. Retrieved 10 December 2020, from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
- MDN. (2021, January 13). Array.prototype.reverse() - JavaScript | MDN. Retrieved 16 january 2020, from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse
- MDN. (2021, January 13). Object.values() - JavaScript | MDN. Retrieved 17 january 2020, from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values
- MDN. (2021, January 13). Object.keys() - JavaScript | MDN. Retrieved 17 january 2020, from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
- MDN. (2021, January 13). Object.keys() - JavaScript | MDN. Retrieved 17 january 2020, from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
- Johnson, D. (2018, April 18). How to Count Unique Items in JavaScript Arrays | ThisDaveJ. Retrieved 19 January 2020, from https://thisdavej.com/how-to-count-unique-items-in-javascript-arrays/
- Condrey, D. (2010, January 6). How to get year/month/day from a date object? |Stack Overflow. Retrieved 15 January 2021, from https://stackoverflow.com/questions/2013255/how-to-get-year-month-day-from-a-date-object
- SixStringsCoder. (2020, October 21). Off-Canvas Menu toggle. | Svelte Repl. Retrieved 4 January 2021, from https://Svelte.Dev/. https://svelte.dev/repl/e9c4ff0b0ff94059a6c85a09c556284a?version=3.29.0
- The Net Ninja. (2020, April 17). Svelte Tutorial for Beginners #20 - Reusable Tabs Component. YouTube. | Retrieved 14 December 2020, from https://youtube.com/watch?v=U8cM_jhmDxA
- MapBox. (n.d.). Documentation Mapbox. | MapBox GL JS. Retrieved 23 December 2020, from https://docs.mapbox.com/
- MapBox. (n.d.). Layers | Style Specification | Mapbox GL JS. Retrieved 12 January 2021, from https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#paint-line-line-blur
- MapBox. (n.d.). Add a GeoJSON polygon | Mapbox GL JS. Retrieved January 13 2021, from https://docs.mapbox.com/mapbox-gl-js/example/geojson-polygon/
- MapBox. (n.d.). Draw GeoJSON points | Mapbox GL JS. Retrieved January 13 2021, from https://docs.mapbox.com/mapbox-gl-js/example/geojson-markers/
- MapBox. (n.d.). Add Image | Mapbox GL JS. Retrieved January 13 2021, from https://docs.mapbox.com/mapbox-gl-js/example/add-image/
- MapBox GL JS. (n.d.). Filter features within map view | Mapbox GL JS. Retrieved 18 January 2021, from https://docs.mapbox.com/mapbox-gl-js/example/filter-features-within-map-view/
- Chart.js. (n.d.). Introduction Β· Chart.js documentation. | Chart.js. Retrieved 19 December 2020, from https://www.chartjs.org/docs/latest/
- Chart.js. (n.d.). Labelling Β· Chart.js documentation. | Chart.js. Retrieved 16 January 2021, from https://www.chartjs.org/docs/latest/axes/labelling.html
- DYclassroom. (n.d.). DYclassroom | Have fun learning :-). Retrieved 10 January 2021, from https://dyclassroom.com/chartjs/how-to-create-a-line-graph-using-chartjs
- Chart.js. (n.d.). Labeling Axes | Chart.js. Retrieved 12 January 2021, from https://www.chartjs.org/docs/next/axes/labelling/
- Shokeen, M. (2017, April 25). Getting Started With Chart.js: Scales. | Code Envato Tuts+. Retrieved 12 January 2021, from https://code.tutsplus.com/tutorials/getting-started-with-chartjs-scales--cms-28477
This is a repository which is licensed as MIT. Developed by Jordy Fronik Β©οΈ 2021.