Users can find their own healthcare institution or an institution of interest and can shop with the profit they made in a specific year. Users can buy silly things in the webshop like a private jet or an Aston Martin supercar.
At the stats page users can dive into the numbers and identify the zorgcowboys. They see how the chosen healthcare institution compares to the rest of the dataset (Nederland) and to the norm (when can we call this institution a zorgcowboy). This way, with some explanation about what a zorgcowboy is, they can identify if their chosen healthcare institution is a zorgcowboy.
Also at the stats page, in a different view, users can dive into the revenue made by their chosen healthcare institution in the chosen year.
When users go to their cart, they get slammed in the face because they see how much money they spent on their silly things and see what they otherwise could do with the money by putting it back into healthcare. Like, did you know that you could help around 180.000 people with eating for a year with the money you would buy 30 Aston Martin's for?
You can share the results with your friends on Facebook or Twitter.
Before starting the project you should have the following things sorted out:
- Ask us or Pointer for a raw .csv data file
- Ask us for a dutch-data .csv file
- Put both csv's in a
datafolder in the root of your project
You can find our email adresses at the bottom of the README.
# Install dependencies
npm install
# Spin up a dev server with hot-reloads for development
npm run dev
# Generate a static site for production
npm run generateSome technical notes about the used frameworks and libraries and out build process.
The app gets build after you run npm run generate. After it runs the pregenerate script (which rewrites the csv files to JSON and cleanes it (more on that later)) it builds out the app and serves all in the dist folder which leaves you with just an index.html for every page and all static assets. The dist folder is also the folder that gets served on Netlify.
We chose to clean the data pre-build so it doesn't have to happen on page load and therefore our website is faster than yours. - Kris Kuiper
This project is built using Nuxt. Nuxt uses Vue components to build out your web application. With Nuxt you get server-side rendering out of the box. The first page view gets server-side rendered, therefore the user doesn't see an empty page before all JavaScript kicks in as you can see when you go to our live version.
For handling app-wide state we use Vuex, which comes built in with Nuxt. Using such a store (you can think of it as Redux, but for Vue) makes handling state very easy. You can commit mutations to the store and map component state to store state by using mapGetters or mapState.
ChartJS is a charting library which integrates seamlessly with Nuxt, also we used the VueChartJS library to implement our bar and stacked bar-chart components.
VueChartJS makes it easy to build out the charts while still using the Vue spec for building out a bar-chart component for example.
The application is proudly hosted on Netlify. We can do this because Nuxt serves out a static site when running nuxt generate.
If you want to read all about our data-cleaning process you can take a look at our wiki.
- Kris Kuiper (kriskuiper74@gmail.com)
- Deanna Bosschert (deanna.bosschert@gmail.com)