Recept voor een gratis dashboard over vuurwapengeweld

Vuurwapengeweld in de VS is een actueel en slepend probleem. De vuurwapenlobby is heel machtig waardoor een verbod op vuurwapens er maar niet doorheen lijkt te komen. Reden om eens een dashboard te maken om te zien waar en wanneer incidenten met vuurwapens hebben plaatsgevonden. En dat geheel met behulp van gratis open source software. Hieronder een recept om met een aantal stappen een front- en backend te ontwikkelen.

Ingrediënten voor 1 - ∞ personen

-MacBook
-Gunviolence dataset van Kaggle.com
-Python 3.4
-Flask
-MongoDB
-NoSQL Booster (optioneel)
-Bootstrap
-Keen.io
-D3, DC en Crossfilter.js

Bereidingstijd

Zeer afhankelijk van ervaring en kunde, maar kan al in een aantal uren.

Bereiding

Download MongoDB via deze link. MongoDB is een gratis NoSQL database. Een SQL database (zoals Microsoft SQL server) heeft tabellen en rijen en een NoSQL database heeft collecties en documenten. Voor meer uitleg over SQL en NoSQL kijk op deze link.

Open de terminal en ga naar de mongo /bin folder en start de database met mongod. Lees het csv bestand in met behulp van het volgende commando:
mongoimport --db gunviolence --collection gunviolence --type csv --headerline --file "gun-violence-data_01-2013_03-2018.csv"

Open NoSQLBooster en bekijk de data. Je kunt de data bekijken in het standaard formaat (json), maar ook als tabel zoals hieronder. Ook kun je de data bewerken met behulp van SQL statements.

Maak vervolgens een mappenstructuur conform de beschrijving op Flask. Flask is een super eenvoudig web framework dat o.a. door Linkedin wordt gebruikt.

Wees niet geïntimideerd door het aantal bestanden. Alleen app.py, index.html, graphs.js en custom.css moeten worden aangemaakt waarbij de laatste optioneel is. Alle overige zijn prefab css bestanden voor de opmaak en javascript bestanden voor data preparatie en visualisatie die allemaal via het web kunnen worden opgehaald (bv Github).

Maak het app.py bestand aan en voeg onderstaande python code toe. We importeren de benodigde libraries, halen de data uit MongoDB op met mongoclient en projecteren de data op URL localhost:5000/data.

De volgende stap is de frontend. Maak een graphs.js bestand aan met de volgende functie:

We lezen hierboven eerst twee databestanden in (van localhost:5000/data en us-json, een kaart van Amerika) en maken een functie waarin we de data formatteren, dimensies, meetwaarden en grafieken aanmaken en passen deze grafieken aan naar onze smaak.

Voeg de grafieken aan de index.html aan met onder andere 'div id="time-chart"'.

Ga vervolgens in een browser naar localhost:5000 en zie daar het resultaat! Een eenvoudig, interactief dashboard gebaseerd op 240.000 records dat laat zien waar de slachtoffers door geweld met een pistool zijn gevallen in de afgelopen jaren.

Nextgem is gespecialiseerd in flexibele en schaalbare (big) data oplossingen voor specifieke analyses tot en met enterprise applicaties. Kijk voor meer info op nextgem.nl of stuur een mail naar info@nextgem.nl.

Met vriendelijke groet,

Robin Bakker
0680184835

Tue, 29 May