Wednesday, 14 October 2015

Data Visualisation Test

I decided to begin testing ways of acquiring usable data and how to use code to represent it as a graphic. Here is a link to a simple website I made with visualised data:

http://dindins.web44.net/weather/visualtest.php

The site consists of three red circles representing Cork Institute of Technology, University College Dublin, and Massachusetts Institute of Technology. The site reads the current temperature for each of these locations and adjusts the appearance of these circles accordingly. The higher the temperature, the larger the circles become, and the more saturated the colour becomes. Below is a screenshot of the site:


You can see that the circle for M.I.T. is the largest and most vibrantly coloured, which directly correlates to its high temperature. You can see the exact temperature figures in degrees celsius next to the place names.


 To do this I collected real-time weather data using The Dark Sky Weather Forecast API. Using php I input longitude and latitude coordinates from google maps to gather forecast data from. I then created containers whose style tags would adjust depending on the data. The current temperature for each of these location were stored in variables as numbers. I then manipulated these numbers by concatenating the variables with strings to correlate to the size (in pixels) of the containers and their RGB colour values. Below is a an example of the code that uses the temperature data variable to alter the style tag of a container:







No comments:

Post a Comment