Skip to content

NHorward/DataVisualisation

Repository files navigation

DataVisualisation

Nicole's assignments for the class Data Visualisation MCT3, 2018-2019.

Assignment 1: Nicole-O-Meter

Process

I found some cool data on the amount of Nicole's per city on the website of the Belgian government.

Data source: Voornamen van de totale bevolking per gemeente, STATBEL.

Goal

Create a 3D map displaying interesting data about the amount of Nicole's and their location within Belgium.

Properties

Intent: A.1 Explanatory

Media: B Physical

Appearance: A.2 Static

Other: A.x 3D

Results

A 3D printed map of Belgium, showcasing the absolute number of Nicole's per province. The height of each province correlates with the amount of Nicole's living there in 2017.

The Nicole-O-Meter

Sources

Voornamen van de totale bevolking per gemeente, STATBEL. Date of reference: 14th of October 2018. Low SVG map of Belgium, AmCharts Date of reference: 23rd of October 2018.

Assignment 2: Hamster-O-Meter

Process

Last year, I created an IoT device to track my hamsters runs in his hamster wheel.

Over the course of a year, I collected quite a lot of interesting (semi reliable) data. It would be a waste not to analyse the data and make something nice.

Goal

Create a heat map displaying when Harold ran the most and least per hour and per weekday.

Properties

Intent: A.1 Explanatory

Appearance: A.2 Linear / Interactive

Other: A.x D3.js

Results

An interactive heat map visualising Harold's running data, created using D3.js.

An interesting poster to showcase at the Clash of Sounds.

A poster about Harold the Hamster.

Please note that loading the CSV file doesn't work in Chrome and Internet Explorer, so the heat map doesn't show up. However, it does work nicely in Firefox and Microsoft Edge.

Sources

Lynda D3 JS Essential Training for Data Scientists Date of reference: 26th of November 2018 Building a simple heat map with D3, Jeffrey Everhart Date of reference: 26th of November 2018 Day/hour heatmap in v4, takayki Date of reference: 26th of November 2018 D3.js Tutorial: Building interactive bar chars with JavaScript, Mate Huszarik Date of reference: 26th of November 2018 Comfortaa, Google Fonts Date of reference: 26th of November 2018

Assignment 3: Sounds-Like-Running-O-Meter

Process

During my work on assignment 2, the Hamster-O-Meter, I created an interesting dataset using D3.js: the hourly average of Harold's runs in his hamster wheel.

Personally, I thought it would be a waste not to try capturing this data in another way: sound.

Goal

Properties

Intent: A.1 Exploratory

Media: B Auditive

Appearance: A.2 Linear

Other: A.x Node-based

Results

The result is a sonification of Harold's runs in his hamster wheel, made with Pure Data. The more he runs per hour, the faster the running sounds are. Below is the waveform of the data sonification, created using this waveform generation website. A .wav file of the sonification can be found in the folder Assignment 3.

The waveform of Harold the Hamster's running data'.

Sources

Running gravel or dry leaves loop, FreeSound Date of reference: 10th of January 2019. Generate a waveform image from an audio file, converting now Date of reference: 14th of January 2019.

Assignment 4: Animal-O-Meter

Process

I've always loved the interactive installations often seen in zoos, where you can weigh yourself and see how many times your body weight fits in an elephant.

Goal

Create a version of this zoo installation, where people can compare their body weight to the weight of a number of animals.

Properties

Intent: A.1 Explanatory

Appearance: A.2 Interactive

Other: A.x D3

Results

An interactive webpage where you can select an animal and enter your weight, to see how many of an animal you are. The animals and their weights are dynamically loaded into the page, so it's easy to customize. The visualisation was made using D3.js.

A screenshot of the Animal-O-Meter

Sources

Animal Icon Set for Adobe XD, Behance Date of Reference: 25th of December 2018. Bootstrap 4, W3 schools 3rd of January 2019 House mouse, Wikipedia Date of Reference: 25th of December 2018. Barn owl, Wikipedia Date of Reference: 25th of December 2018. Cat, Wikipedia Date of Reference: 25th of December 2018. Holland Lop, Wikipedia Date of Reference: 25th of December 2018. Booted Bantam, Wikipedia Date of Reference: 25th of December 2018. Black mamba, Wikipedia Date of Reference: 25th of December 2018. Round sardinella, Wikipedia Date of Reference: 25th of December 2018. Leatherback sea turtle, Wikipedia Date of Reference: 25th of December 2018. Red squirrel, Wikipedia Date of Reference: 25th of December 2018. Medium dog breeds, Your Pure Bred Puppy Date of Reference: 25th of December 2018. How much do butterflies weigh? The Children's Butterfly Site Date of Reference: 25th of December 2018.

Assignment 5: Mouse-O-Meter

Process

Like a lot of people, I use my computer most of the day. What if I could create art whilst going about my daily business?

Goal

The goal is to capture the movements of the mouse on the computer screen, and visualize them in an interesting way.

Properties

Intent: A.1 Exploratory

Appearance: A.2 Interactive

Results

The result is a Processing program that tracks mouse movements and visualises it, as displayed below.

An example of the Mouse-O-Meter

Sources

Global mouse tracker, Processing forum Date of reference: 13th of January 2019. Changing colour of shapes over time, Processing forum Date of reference: 14th of January 2019.