marcosox / Visualizzazione_incidenti

Infovis tool for BigData project

Visualizzazione incidenti

NOTE: this project was written a long ago and has been since refactored in two components:

• car-accidents-map-fe (Javascript frontend using D3.js)
• car-accidents-map-be (Java backend, ported from the Tomcat web application to a Vert.x verticle)

List of changes made since this version:

Backend

• Split tomcat webapp into js frontend and java backend
• Port to Vert.x, going from 9 to 2 3 classes
• Refactor DAO to use Vert.x Json library and remove google.simpleJson dependency from pom.xml
• Refactor DAO class to reuse the client connection and support authentication
• Add config.json support with credentials and app configuration

Frontend

• Add config object to set backend url
• Convert POST requests to GET
• Update jquery
• Clean code to modern standards
• Make proper use of jquery to make requests on page load
• Bugfixes for old outdated libraries
• Update bootstrap library and template html
• Clean css files and rules
• Optimize D3 code

About this tool:

This tool has been realized as an assignment for the InfoVis course held by Maurizio Patrignani at Roma Tre University and uses the following technologies:

• D3.JS as graphic library
• Bootstrap theme for html layout
• MongoDB for data persistence
• Jquery for responsive interaction
• Google Maps APIs for geographic visualization

It is basically an example of some common data visualization techniques that can be easily implemented in a webapp using D3JS.
The data visualizes informations about road accidents collected from another tool realized as part of the Big Data course held by Riccardo Torlone (the original dataset was for the Rome municipality, but the tool can be used with any dataset with minor changes).

There are 2 maps showing the accidents both individually and grouped by district, numerical statistics, a couple of time graphs and an interactive bar graph that can be sorted and has a feature used to show correlations between data (e.g. accident location vs time of the day)
The data is collected from a MongoDB database where it is stored in a custom format. Look inside the example_data folder to see the database format.

For the records, the data was originally obtained from the Rome municipality open data website in CSV format, then converted to RDF with Google Refine and manipulated in different ways to learn about semantic web technologies (which included generating an ontology to describe road accidents and using SPARQL to query the data).

Installation:

1. Import the example dataset inside MongoDB:
   mongoimport --db bigdata --collection incidenti --file /path/to/incidenti_geolocalizzati.json
mongoimport --db bigdata --collection incidenti --file /path/to/municipi.json
   Where bigdata and incidenti are respectively the db and the collection used inside the java class MongoDAO.java
2. Ensure your MongoDB installation is up and running
3. Generate a suitable format for your servlet container, e.g. generate a WAR file from the source code (this could include importing the project into eclipse and then exporting it into a war file)
4. Deploy the web application inside the servlet container (e.g. Tomcat: move the .war file inside the webapp folder of the tomcat installation)
5. Ensure Tomcat is up and running
6. Visit http://localhost:8080/Visualizzazione_incidenti/ to access the web app. If you are running Tomcat on a different port than 8080 adjust it in the URL.