Windows>> ring-ring>> 返回
项目作者： ralfz123

项目描述 ：
A tool designed for the policy makers of Amsterdam, commissioned by the company Ring-Ring ® in the Netherlands.
高级语言： HTML
项目地址: git://github.com/ralfz123/ring-ring.git
创建时间： 2020-12-09T21:51:35Z
项目社区：https://github.com/ralfz123/ring-ring
开源协议：MIT License
下载


Project Information Design 20-21

Ring-Ring

Project Information Design, a course of Information Design. It is a thema semester of the third year from the study CMD. In this course I will learn to create a concept for Ring-Ring in which data visualization is a mandatory part.

A tool designed for the policy makers of Amsterdam, commissioned by the company Ring-Ring ® in the Netherlands.

Ring Ring logo

:page_with_curl: Case

For this course I have to create an interactive data visualization for a company. Ring-Ring is the company I have chosen for, because it’s a company that strives for a better cycling environment. I like that endeavor and I agree with it! Ring-Ring has also an application where users cycle routes and the app tracks their cycled routes. Now I have been asked to make a data visualization of the data for one of the target groups (think of policy makers, insurance, stakeholders, app users).

:heart_eyes: Concept

We have created a tool for Amsterdam policymakers in which new insights will emerge. In this dashboard, the data of cycling accidents and cycling routes come together, which has never happened before. In this way, efforts to improve cycling safety may well be achieved! This is all showed in one overview, as well as the given feedback from the Ring-Ring app users.

Introduction page

At the begin of the application, there is a short video (7.0s) (see below) that shows a traffic accident (the topic at stake).

When the video is over, an overlay with an introduction text appears (see below). It explains the entire tool in a nutshell.

:bulb: Features

There are 2 pages in the tool; the dashboard and the feedback-page. Each page has their own features.

Dashboard

  • You can see the cycling accident data plotted on a map (red and orange circles)
  • You can see the cycled routes data of January 2020 in Amsterdam plotted on a map
  • There is a bar chart showing the number of cycling accidents of different age groups and sexes
  • You can filter the cycling accident data by age, type of accident and year
  • You can switch the cycled routes (cycle crowds) on and off. This filter option is off by default, because the focus is on the cycling accidents
  • You can see the data of a specific bicycle accident in the tooltip

Feedback

  • The feedback from the Ring-Ring app users is displayed in a clear overview and can be filtered by feedback score, relevance, most recent and most used keywords

:chart_with_upwards_trend: Libraries

I used two libraries that helped me a lot to make a nice dashboard;

Mapbox GL JS
Mapbox is a JS library that delivers interactive OpenStreetMaps and online Mapbox styles (Studio Mapbox). In the editor of the Studio you can style your own map, so that it fits completely into your design. The way how to implement the Mapbox code and style is very user friendly.

Chart.js
Chart.js is a JS library that delivers a lot of data visualizations. I chose to make the bar chart with Chart.js and it helped me a lot. You can configure it to the end to how you want it and it also works fine with plugins like chartjs-plugin-datalabels.

:1234: Data

Datasets / API’s

Data structure | cycled routes (Ring-Ring)

  1. {
  2.   "type": "FeatureCollection",
  3.   "features": [
  4.      {
  5.       "type": "Feature",
  6.       "geometry": {
  7.         "coordinates": [
  8.           [
  9.             4.8996458,
  10.             52.3695223
  11.           ],
  12.           [
  13.             4.8999728,
  14.             52.3693523
  15.           ],
  16.         ],
  17.         "type": "LineString"
  18.             },
  19.       "properties": {
  20.         "start": "2020-01-31T22:57:40Z",
  21.         "end": "2020-01-31T22:59:51Z",
  22.         "duration": 2,
  23.         "modality": 2,
  24.         "distance": 0.16,
  25.         "feedback score": null,
  26.         "feedback": null,
  27.         "weather": "zwaar bewolkt"
  28.       }
  29.     }
  30.     ]
  31. }

Data structure | cycling accident

  1. {
  2.     "type": "FeatureCollection",
  3.     "features": [
  4.         {
  5.             "type": "Feature",
  6.             "geometry": {
  7.                 "type": "Point",
  8.                 "coordinates": [4.875882387575789, 52.37217063062023]
  9.             },
  10.             "properties": {
  11.                 "id": 2,
  12.                 "street": "Marnixstraat/Rozengracht",
  13.                 "outcome": "dodelijk",
  14.                 "gender": "v",
  15.                 "age": 32,
  16.                 "weather": "droog",
  17.                 "year": 2019,
  18.                 "url_site": "https://www.at5.nl/artikelen/205165/het-leven-van-zahra-32-eindigde-op-een-amsterdams-kruispunt",
  19.                 "image_article_site": "https://media.at5.nl/images/464337.f75ed47.webp?width=3200&ratio=3:1&quality=80",
  20.                 "source": "AT5.nl",
  21.                 "date_publicated": "25-10-2020"
  22.             }
  23.         }
  24.     ]
  25. }

:red_circle: Live version

Link to live version, click here!

:rocket: Install project

Clone repository

  1. git clone https://github.com/ralfz123/ring-ring.git

Install project

  1. npm i

Run the project

  1. python -m SimpleHTTPServer 8000

Visit project

  1. localhost:8000

:file_folder: Sources

Credits to Janine Hogendoorn from Ring-Ring for giving feedback and thinking along in the process and Credits to Suze for thinking along and motivating the process. Also credits to my teammates Nassèra Grampon and Lawrence Prins (for the design).

Map sources

Chart sources

Other sources

:cop: License

This project from Ralf has a MIT © License