{"id":13859058,"url":"https://github.com/joordy/ringring","last_synced_at":"2025-07-14T01:33:07.262Z","repository":{"id":54492560,"uuid":"319657430","full_name":"joordy/ringring","owner":"joordy","description":"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. ","archived":false,"fork":false,"pushed_at":"2021-05-31T21:30:48.000Z","size":10870,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-08-06T03:06:35.369Z","etag":null,"topics":["chartjs","cycling","data-visualization","data-visualization-project","functional-programming","mapbox","rollup","sapper","svelte","svelte-js","svelte3"],"latest_commit_sha":null,"homepage":"https://ringring.jorrr.dev/","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/joordy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-12-08T14:06:49.000Z","updated_at":"2022-06-20T15:02:44.000Z","dependencies_parsed_at":"2022-08-13T17:40:35.379Z","dependency_job_id":null,"html_url":"https://github.com/joordy/ringring","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joordy%2Fringring","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joordy%2Fringring/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joordy%2Fringring/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joordy%2Fringring/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joordy","download_url":"https://codeload.github.com/joordy/ringring/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225938768,"owners_count":17548548,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chartjs","cycling","data-visualization","data-visualization-project","functional-programming","mapbox","rollup","sapper","svelte","svelte-js","svelte3"],"created_at":"2024-08-05T03:02:31.021Z","updated_at":"2024-11-22T17:30:41.847Z","avatar_url":"https://github.com/joordy.png","language":"Svelte","readme":"# RingRing\n\n![Prototype Ring-Ring](https://user-images.githubusercontent.com/48051912/105212466-c8899000-5b4d-11eb-9f83-854e97b97c32.png)\n\n## :page_facing_up: Assignment\n\n**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](http://data.jorrr.nl/ringring/data-ringring.json) from the [Ring-Ring](https://ring-ring.nu/) organization.**\n\nFor 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.\n\n---\n\n## :flashlight: Features\n\nThe 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.\n\n### Statistics\n\nWith the statistics overview, a lot of information can be viewed in an overview:\n\n- All start and end points of the routes\n- All traveled routes plotted on a map, where the busiest points can be found.\n- The number of rides categorized by length\n- The number of trips per day during the month of January\n- The total number of trips\n- Average duration of a bicycle ride\n- Average distance of a trip\n\n![Statistics overview Ring-Ring tool](https://user-images.githubusercontent.com/48051912/105229887-e44c6080-5b64-11eb-97d9-b93cf7039ac2.png)\n\n### Feedback\n\nWith the feedback, everything about the feedback of the users can be analyzed.\n\n- The route driven, including start and end point.\n- The response about the route, including the attached annoyance topic.\n- Which part of the city has the most responses\n- How the responses are distributed, based on topic\n\n![Feedback overview Ring-Ring tool](https://user-images.githubusercontent.com/48051912/105229946-f75f3080-5b64-11eb-8a0f-3797613ef040.png)\n\n---\n\n## :chart: Data\n\nFor this project I used the [Ring-Ring](https://ring-ring.nu/) 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](http://data.jorrr.nl/ringring/data-ringring.json)\n\nThe 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.\n\n---\n\n## :bar_chart: Data patterns\n\nIn 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.\n\nOne 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.\n\nThe second value contains the entire [dataset](http://data.jorrr.nl/ringring/data-ringring.json) 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.\n\nThe last value contains a [feedback data](https://github.com/joordy/ringring/blob/master/src/utils/helpers/feedbackData.js) 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.\n\n### Created custom data object\n\n```javascript\n{\n  charts: {\n    barChart: lorem\n    lineChart: lorem,\n    positionStart: lorem,\n    positionEnd: lorem,\n    subjectChart: lorem,\n    feedbackLocationChart: lorem,\n    avgTime: lorem,\n    avgDistance: lorem,\n  },               // Chart data\n  geojson: ,       // Ringring dataset,\n  feedbackData: ,  // Feedback dataset\n}\n\n```\n\n### RingRing data\n\n```json\n{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"geometry\": {\n        \"coordinates\": [], // Coordinates of route\n        \"type\": \"LineString\"\n      },\n      \"properties\": {\n        \"start\": \"2020-01-31T22:57:40Z\",\n        \"end\": \"2020-01-31T22:59:51Z\",\n        \"duration\": 45.2,\n        \"modality\": 2,\n        \"distance\": 17.1,\n        \"feedback score\": null,\n        \"feedback\": null,\n        \"weather\": \"zwaar bewolkt\"\n      }\n    }\n  ]\n}\n```\n\n[Link to json file](http://data.jorrr.nl/ringring/data.json)\n\n### Feedback data\n\n```json\n  {\n    \"route\": {\n      \"geometry\": {\n        \"coordinates\": [], // Coordinates of route\n        \"type\": \"LineString\"\n      },\n      \"properties\": {\n        \"day\": \"2020-01-31T16:34:03Z\",\n        \"start\": \"2020-01-31T16:34:03Z\",\n        \"end\": \"2020-01-31T16:57:33Z\",\n        \"duration\": 23,\n        \"modality\": 2,\n        \"distance\": 3.5,\n        \"weather\": \"zwaar bewolkt\"\n      },\n      \"type\": \"Feature\"\n    },\n    \"feedback\": \"Een onhandige indeling van het fietspad, waardoor je niet veilig kan oversteken.\",\n    \"feedbackTag\": [\"fietspad\", \"oversteekpunt\"],\n    \"stadsdeel\": \"Centrum\",\n    \"gevoelsVeiligheid\": 3\n  },\n```\n\n[Link to json file](http://data.jorrr.nl/ringring/feedbackData.json)\n\n---\n\n## :computer: Tech-Stack\n\nThe application is build in [Sapper](https://sapper.svelte.dev/). 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.\n\n### Libraries\n\n#### Chart.js\n\nTo 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\n\n#### MapBox GL JS\n\nMapBox 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.\n\n---\n\n## :rocket: Install project\n\nWhen you already have a connection with [Git](https://formulae.brew.sh/formula/git), and installed [Node Version Manager](https://github.com/nvm-sh/nvm) on your computer you can easily download my project. If you haven't already installed these programs, I recommend to do that first.\n\n### Work on the project\n\n#### Clone the GitHub repository\n\n```bash\ngit clone https://github/com/joordy/ringring.git\n```\n\n#### Install project and corresponding node_modules\n\n```bash\nnpm i\n```\n\n#### Run the project\n\n```bash\nnpm run dev\n```\n\n#### Visit project\n\n```bash\nlocalhost:3000\n```\n\n### Build project\n\n#### When 404 is updated, generating new route with custom command\n\n```bash\nnpx sapper export --legacy --entry not-found\n```\n\n#### Build the application\n\n```bash\nnpm run build\n```\n\n#### Export the application\n\n```bash\nnpm run export\n```\n\nNow your application is ready to be hosted!\n\n---\n\n## :key: Deployment link\n\nThe live version of the application can be watched here: [ringring.jorrr.nl](https://ringring.jorrr.nl/)\n\n---\n\n## Sources\n\nDuring 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\n\nThanks also to Janine Hogendoorn from [Ring-Ring](https://ring-ring.nu/) for giving critical feedback on our tool, and to SuzeSwarte for the guidance during the project.\n\n#### Code Sources\n\n- SvelteJS. (n.d.). Sveltejs/sapper repository GitHub | SvelteJS.. Retrieved 7 December 2020, from https://github.com/sveltejs/sapper\n- 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\n- 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\n- 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\n- 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\n- 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\n- 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/\n- 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\n- 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\n- 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\n\n#### Map Data\n\n- MapBox. (n.d.). Documentation Mapbox. | MapBox GL JS. Retrieved 23 December 2020, from https://docs.mapbox.com/\n- 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\n- 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/\n- MapBox. (n.d.). Draw GeoJSON points | Mapbox GL JS. Retrieved January 13 2021, from https://docs.mapbox.com/mapbox-gl-js/example/geojson-markers/\n- MapBox. (n.d.). Add Image | Mapbox GL JS. Retrieved January 13 2021, from https://docs.mapbox.com/mapbox-gl-js/example/add-image/\n- 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/\n\n#### Data Charts\n\n- Chart.js. (n.d.). Introduction · Chart.js documentation. | Chart.js. Retrieved 19 December 2020, from https://www.chartjs.org/docs/latest/\n- Chart.js. (n.d.). Labelling · Chart.js documentation. | Chart.js. Retrieved 16 January 2021, from https://www.chartjs.org/docs/latest/axes/labelling.html\n- DYclassroom. (n.d.). DYclassroom | Have fun learning :-). Retrieved 10 January 2021, from https://dyclassroom.com/chartjs/how-to-create-a-line-graph-using-chartjs\n- Chart.js. (n.d.). Labeling Axes | Chart.js. Retrieved 12 January 2021, from https://www.chartjs.org/docs/next/axes/labelling/\n- 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\n\n---\n\n## :lock: License\n\nThis is a repository which is licensed as MIT. Developed by Jordy Fronik ©️ 2021.\n\n\u003c!-- # sapper-template\n\nThe default template for setting up a [Sapper](https://github.com/sveltejs/sapper) project. Can use either Rollup or webpack as bundler.\n\n\n## Getting started\n\n\n### Using `degit`\n\nTo create a new Sapper project based on Rollup locally, run\n\n```bash\nnpx degit \"sveltejs/sapper-template#rollup\" my-app\n```\n\nFor a webpack-based project, instead run\n\n```bash\nnpx degit \"sveltejs/sapper-template#webpack\" my-app\n```\n\n[`degit`](https://github.com/Rich-Harris/degit) is a scaffolding tool that lets you create a directory from a branch in a repository.\n\nReplace `my-app` with the path where you wish to create the project.\n\n\n### Using GitHub templates\n\nAlternatively, you can create the new project as a GitHub repository using GitHub's template feature.\n\nGo to either [sapper-template-rollup](https://github.com/sveltejs/sapper-template-rollup) or [sapper-template-webpack](https://github.com/sveltejs/sapper-template-webpack) and click on \"Use this template\" to create a new project repository initialized by the template.\n\n\n### Running the project\n\nOnce you have created the project, install dependencies and run the project in development mode:\n\n```bash\ncd my-app\nnpm install # or yarn\nnpm run dev\n```\n\nThis will start the development server on [localhost:3000](http://localhost:3000). Open it and click around.\n\nYou now have a fully functional Sapper project! To get started developing, consult [sapper.svelte.dev](https://sapper.svelte.dev).\n\n### Using TypeScript\n\nBy default, the template uses plain JavaScript. If you wish to use TypeScript instead, you need some changes to the project:\n\n * Add `typescript` as well as typings as dependences in `package.json`\n * Configure the bundler to use [`svelte-preprocess`](https://github.com/sveltejs/svelte-preprocess) and transpile the TypeScript code.\n * Add a `tsconfig.json` file\n * Update the project code to TypeScript\n\nThe template comes with a script that will perform these changes for you by running\n\n```bash\nnode scripts/setupTypeScript.js\n```\n\n`@sapper` dependencies are resolved through `src/node_modules/@sapper`, which is created during the build. You therefore need to run or build the project once to avoid warnings about missing dependencies.\n\nThe script does not support webpack at the moment.\n\n## Directory structure\n\nSapper expects to find two directories in the root of your project —  `src` and `static`.\n\n\n### src\n\nThe [src](src) directory contains the entry points for your app — `client.js`, `server.js` and (optionally) a `service-worker.js` — along with a `template.html` file and a `routes` directory.\n\n\n#### src/routes\n\nThis is the heart of your Sapper app. There are two kinds of routes — *pages*, and *server routes*.\n\n**Pages** are Svelte components written in `.svelte` files. When a user first visits the application, they will be served a server-rendered version of the route in question, plus some JavaScript that 'hydrates' the page and initialises a client-side router. From that point forward, navigating to other pages is handled entirely on the client for a fast, app-like feel. (Sapper will preload and cache the code for these subsequent pages, so that navigation is instantaneous.)\n\n**Server routes** are modules written in `.js` files, that export functions corresponding to HTTP methods. Each function receives Express `request` and `response` objects as arguments, plus a `next` function. This is useful for creating a JSON API, for example.\n\nThere are three simple rules for naming the files that define your routes:\n\n* A file called `src/routes/about.svelte` corresponds to the `/about` route. A file called `src/routes/blog/[slug].svelte` corresponds to the `/blog/:slug` route, in which case `params.slug` is available to the route\n* The file `src/routes/index.svelte` (or `src/routes/index.js`) corresponds to the root of your app. `src/routes/about/index.svelte` is treated the same as `src/routes/about.svelte`.\n* Files and directories with a leading underscore do *not* create routes. This allows you to colocate helper modules and components with the routes that depend on them — for example you could have a file called `src/routes/_helpers/datetime.js` and it would *not* create a `/_helpers/datetime` route.\n\n\n#### src/node_modules/images\n\nImages added to `src/node_modules/images` can be imported into your code using `import 'images/\u003cfilename\u003e'`. They will be given a dynamically generated filename containing a hash, allowing for efficient caching and serving the images on a CDN.\n\nSee [`index.svelte`](src/routes/index.svelte) for an example.\n\n\n#### src/node_modules/@sapper\n\nThis directory is managed by Sapper and generated when building. It contains all the code you import from `@sapper` modules.\n\n\n### static\n\nThe [static](static) directory contains static assets that should be served publicly. Files in this directory will be available directly under the root URL, e.g. an `image.jpg` will be available as `/image.jpg`.\n\nThe default [service-worker.js](src/service-worker.js) will preload and cache these files, by retrieving a list of `files` from the generated manifest:\n\n```js\nimport { files } from '@sapper/service-worker';\n```\n\nIf you have static files you do not want to cache, you should exclude them from this list after importing it (and before passing it to `cache.addAll`).\n\nStatic files are served using [sirv](https://github.com/lukeed/sirv).\n\n\n## Bundler configuration\n\nSapper uses Rollup or webpack to provide code-splitting and dynamic imports, as well as compiling your Svelte components. With webpack, it also provides hot module reloading. As long as you don't do anything daft, you can edit the configuration files to add whatever plugins you'd like.\n\n\n## Production mode and deployment\n\nTo start a production version of your app, run `npm run build \u0026\u0026 npm start`. This will disable live reloading, and activate the appropriate bundler plugins.\n\nYou can deploy your application to any environment that supports Node 10 or above. As an example, to deploy to [Vercel Now](https://vercel.com) when using `sapper export`, run these commands:\n\n```bash\nnpm install -g vercel\nvercel\n```\n\nIf your app can't be exported to a static site, you can use the [now-sapper](https://github.com/thgh/now-sapper) builder. You can find instructions on how to do so in its [README](https://github.com/thgh/now-sapper#basic-usage).\n\n\n## Using external components\n\nWhen using Svelte components installed from npm, such as [@sveltejs/svelte-virtual-list](https://github.com/sveltejs/svelte-virtual-list), Svelte needs the original component source (rather than any precompiled JavaScript that ships with the component). This allows the component to be rendered server-side, and also keeps your client-side app smaller.\n\nBecause of that, it's essential that the bundler doesn't treat the package as an *external dependency*. You can either modify the `external` option under `server` in [rollup.config.js](rollup.config.js) or the `externals` option in [webpack.config.js](webpack.config.js), or simply install the package to `devDependencies` rather than `dependencies`, which will cause it to get bundled (and therefore compiled) with your app:\n\n```bash\nnpm install -D @sveltejs/svelte-virtual-list\n```\n\n\n## Bugs and feedback\n\nSapper is in early development, and may have the odd rough edge here and there. Please be vocal over on the [Sapper issue tracker](https://github.com/sveltejs/sapper/issues). --\u003e\n","funding_links":[],"categories":["Svelte"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoordy%2Fringring","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoordy%2Fringring","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoordy%2Fringring/lists"}