Data Files & Formats

What is data?

Data is a collection of facts and statistics collected together for reference or analysis.

Where do they come from?

Data comes from measurement which can be found around us such as, Interviews, Observations and Technology they can also come from a source, such as from the government, companies, reports and yourself. This allows you to gather quantitive and qualitative data.

Data Cleaning:

Data cleansing is the process of detecting and correcting (or removing) corrupt or inaccurate data from a record set. Corrupt data could have been due to human error or if it is not from an original source, data could have been changed. This is where normalisations are made.

During the lesson we were asked, in groups to collect data of trees, buses, signs, pubs, bikes, street lights, bins, parks and food shops from a specific road we were assigned to.  Patrick, Xavier and I visited Newington Causeway to find the data. Other groups visited different roads.

Once we had collected the data, we looked at different file formats; CSV, JSON and XML.

CSV: CSV is a file format used to store data (in columns), such as a spreadsheet or database.

JSON: JSON is an open-standard format that uses human-readable text to transmit data objects which use attribute–value pairs.

XML: XML is a markup language that defines a set of rules for encoding documents in a format that is both human-readable and machine-readable.

We combined our data into a table and exported it as a CSV file which could be access by other groups :

Screen Shot 2017-03-13 at 11.59.42.png
Data collected from Newington Causeway

Oliver combined the data gathered by each group and we were asked to write a JSON file which showed the data:

We also validated the data to see if there were any errors:

Screen Shot 2017-03-13 at 12.31.53 copy.jpg
Data Validation

From here we can add more context to we were trying to show, for example adding a longitude or latitude of each point to that you are able to view it on a map.

7. Live Locations

In this lesson, we learnt how to gather live locations using Javascript. This can be quite difficult due to privacy reasons.  However, this could be a way of adding live data to my work based on the subject I chose to look at.

To code, we used Codepen:

“At, they describe themselves as a “playground for the front-end side of the web.” CodePen is great for testing out bugs, collaborating, and finding new inspiration. It works by allowing you to create “pens”, which are sets of HTML, CSS, and JavaScript.”

Screen Shot 2017-02-27 at 10.22.06.png

We used our maps from our previous lesson and took our API from the map and placed it into the Javascript of Codepen:

Screen Shot 2017-02-27 at 10.33.18.png
API of my Map previously created

Using the code which was used to create the map, we pasted them into Codepen:

Screen Shot 2017-02-27 at 10.42.30.png

We located London College of Communication, added a marker and centred it:

Screen Shot 2017-02-27 at 11.16.13.png

To the map, we wanted to add speed to show the distance of a person who is moving and allowing the map to be updated as you move. We learnt this from using Mozilla Developer Network.

The print screen on the left shows the data being tracked:

Finally, I have been able to display the speed on the screen:

Screen Shot 2017-02-27 at 13.05.16.png
Speed Displayed

5. Google Maps (Part 2)

Today we continued learning about how Google Maps works. To begin we were asked to put what we had learnt into practice to test ourselves from our previous lesson. We had to find the longitude and latitude of Elephant & Castle, centre it with in the map and add a marker to identify the point.

Next, we selected three other points which could be from around the world or in the UK and add a marker:

Adding more than one point wasn’t very difficult as you could re-use previous code but find different longitude and latitude by finding it on Google Maps.

We were shown how to create movement/ animation within the map so that it could move to each point automatically, we used Google Maps API Documentation as a reference to create it:

The third images show there’s problems with the code, however this was correct as its doing its commands. The animation was not on a loop which caused there to be an error.

We used an “if statement” to see if the data was true and working correctly:

If Statement (shown towards the bottom of the page)

To the map, other elements can we added such as buttons in order to move between each location. This is an alternative to using an animation:

A button to move to each section and a random button which takes you to any area of the map was created (the button is shown at the top right of the map):

Finally, we added an overlay to the map and on the London area. As you zoom in, the image gets smaller:

4. Google Maps (Part 1)

We used Google Maps API to change specific elements of its interface. Learning about Google Maps will help me hugely as I want this to be the main feature in my work.

Application program interface (API) is a set of routinesprotocols, and tools for building software applications. An API specifies how software components should interact. Additionally, APIs are used when programming graphical user interface (GUI) components. A good API makes it easier to develop a program by providing all the building blocks. A programmer then puts the blocks together.”

To begin we visited Google Maps API website and selected “Google Maps JavaScript API” as it uses the same code we learnt beforehand:

Screen Shot 2017-02-13 at 10.45.54.png
API of Google Maps

Then we selected “Get a key”, this would give us our API key which would allow us to connect the API to our own code:

Screen Shot 2017-02-13 at 10.50.40.png

From here we could start re-designing the interface of Google Maps to suit our needs. We were able to experiment with using different colours when moving the map, I was able to change the colour to red rather than it being grey:

Additionally, I was able to change the map into different views, such as Hybrid, Terrain, Road Map and Satellite by changing the “mapTypeId:”

Hybrid Map

We used Google Maps online editor to edit and change elements on their original map, we were able to change things such as colours, theme, text and remove parts of the map  such as roads.

Screen Shot 2017-02-13 at 11.24.22.png

Then we added our data to the map, due to OpenPaths being down, I decided to use Xavier’s data:

Finally we added different images to the map to show specific points of the journey:

2. Introduction to Geo-mapping

Today we were shown how to collect data, using maps from our phones and import it into JavaScript to create a visualisation.

To begin, we were asked to download OpenPaths. OpenPaths allows you to track your location, visualise where you’ve been, and upload your data by using the OpenPaths website. Also, the data can be download from the website using three different formats, KML, JSON, and CSV.

To collect our own data, we were asked to walk around Elephant and Castle to pick up points on our map.

Screen Shot 2017-02-06 at 12.06.31.png
Points Collected

I had a few problems with my map as it was not picking up enough points. Later I found out it was due to my settings.

To visualise the data, we visited the OpenPaths website which allowed us to download our data into a JSON (JavaScript Object Notation). We decided to use JSON instead of KML and CSV as they were more complicated to use whereas JSON was something we had learnt beforehand due to the use of JavaScript.

We used Atom as JSON to start visualising our data:

We chose specific coordinates which helped plot the information in the correct area.

We were also able to show our data in a different way:

Javascript & jQuery

Today Oliver taught us the basics of Javascript and jQuery.

Javascript is a computer programming language, which is used to create interactive effects when using websites, it does not write the main code which contains information on a specific topic.

Basic Javascript example 

jQuery works alongside Javascript however it helps simplify HTML making it easier to create a webpage. ‘jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.’

jQuery example


What is Affordance?

Affordance is the way in which humans interact with object, the environment and the world.

Affordance can be grouped into specific sections these are:

  • False Affordance – an object or thing that does not have any real function which gives a false perception
  • Perceptible Affordance – a person can perceive the meanings of an object and can act upon it straight away
  • Counter Affordance – used the hide the meaning of objects or a thing
  • Hidden Affordance – hidden functions or meaning of an object

It can also be communicated in different ways:

  • Intuitive/ Obvious – Icon (emoji, hand and mail)
  • Indicated/ Implied  – Index (USB, progress path and recycling bin)
  • Learned/ Remembered – Symbol (hyperlink and loading symbol)
  • Skeuomorphic Affordances – an object which is used to resemble another material or technique (microphone, light recycling bin)

To finish the lesson as a class, we looked around our room to find any affordances:

  • False Affordance – thermostat
  • Hidden Affordance – coding, software functions and copyright images
  • Perceived Affordance – cup, headphones and switches