ringring Svelte Themes

Ringring

A dashboard tool on behalf of Ring-ring organization. A dashboard tool for policy makers, which can see how traffic conditions can be improved. The tool consists of several visualizations formed from the Ring-Ring bicycle dataset.

#svelte #sapper #chartjs #mapbox #svelte3 #data-visualization #cycling #svelte-js #rollup #functional-programming
Demo Download

RingRing

:page_facing_up: Assignment

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.

:flashlight: Features

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.

Statistics

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

Feedback

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

:chart: Data

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.

:bar_chart: Data patterns

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.

Created custom data object

{
  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
}

RingRing data

{
  "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"
      }
    }
  ]
}

Link to json file

Feedback data

  {
    "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
  },

Link to json file

:computer: Tech-Stack

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.

Libraries

Chart.js

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 GL JS

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.

:rocket: Install 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.

Work on the project

Clone the GitHub repository

git clone https://github/com/joordy/ringring.git

Install project and corresponding node_modules

npm i

Run the project

npm run dev

Visit project

localhost:3000

Build project

When 404 is updated, generating new route with custom command

npx sapper export --legacy --entry not-found

Build the application

npm run build

Export the application

npm run export

Now your application is ready to be hosted!

The live version of the application can be watched here: ringring.jorrr.nl

Sources

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.

Code Sources

Map Data

Data Charts

:lock: License

This is a repository which is licensed as MIT. Developed by Jordy Fronik ©️ 2021.

Top categories

tailwind daisyui admin template popup mdsvex portfolio blog form ecommerce ui carousel auth dark seo image routing
Loading Svelte Themes