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


Today Tobias taught us the basics about how to use Illustrator.

Illustrator is a vector drawing software which allows you to draw detailed drawings such as cartoons, diagrams, charts and logos. Illustrator uses a grid of dots and mathematical equations in order to store information and draw shapes. It also allows shaped to be scaled without losing any pixelation or resolution.


Illustrator uses various tools such as, crop, selection, shape and colour which are used widely over all Adobe programs, this makes it quite easy to adapt to and use. It also uses an art board instead of pages which makes it easier to let the user set their work out properly. Also when saving files form Illustrator, it writes the artwork into a file.


Scales: Semiotics & Storytelling

What is Semiotics and Storytelling?

Semiotics is the language of science in allows signs and symbols to signify something. Whereas storytelling contains a narrative that people see, a plot which is things that happen in the world and a story which is the way the story has been interpreted.

Signifier is a explicit, codified and universal meaning. Signified is individual, implicit and interpreted meaning.


After this, we looked at the The Seven Basic Plots created by Christopher Booker:

  • Overcoming the Monster
  • Rags to Riches
  • The Quest
  • Voyage and Return
  • Comedy
  • Tragedy
  • Rebirth

After this we were put in groups and asked to produce a 15 second story/video based on any subject. But using the timeline/structure of a story.



In todays lesson, Oliver taught us how to use/ write css.

What is CSS?

CSS (Cascading Style Sheet) is a language used alongside HTML which is used to describe the look and presentation of a web page and are displayed as ‘stylesheets’. This allows you to add/change colours, layout and font. CSS is used as a separately document but works together with the HTML document as it stops the use of tags and it also saves a lot of work.

During the lesson, Oliver showed how to use CSS and was given the task to use our existing HTML sheets which we created last week and use CSS to change the look and add features.



What is Typography? 
Features of Typography

Typography is a piece of text which should be legible to and engaging to read. This is conducted by choosing specific typefaces, (a set of font which is created from a set of glyphs) point sizes, leading, (the distance between the lines of each type) tracking, (space between groups of letters) and kerning, (space between each character.)

Chinese Calligraphy

Pre-digital typography Originated from ancient China where calligraphy was used around 5000 years ago.  A set of images where being used in order to express text and communicate words to one another.

Woodblock Printing

After this it lead to Woodblock printing in 220 AD. This first arrived in Asia which involved cutting a sections of text into a block of wood. The wood would then be dipped into ink and then pressed onto the paper in order to create copies of text.

Movable Type Letterpress Printing

In 1040 AD Movable type letterpress printing was used in China and soon it moved to Europe. Font molds which were made from metal were used and was organised manually in a set order. Ink was then placed onto top of each letter and then stamped onto paper. This allowed letter to be arranged into new text and re-used again. This allowed letterpress to be more efficient and quicker. If larger fonts needed to pressed onto better, wooden font molds would be used instead of using metal molds.

Linotype Machine

In the 1890’s Linotype machines where used in order to create lines of type in one go. This was done by using a 90 character keyboard instead of having to manually press individual letters. A molten metal cast was used to produce the type. This allows the letters to be used continuously. Furthermore, this changed the newspaper printing as it took a long time to produce type, using this method cut the time in half and more pages where being produced.

By the 1950’s Phototypesetting machines where created to project light through a cut out character onto film which is then handled using chemicals in order to stain the type. This lead to digital typography due to the use of Bitmap (raster) fonts and Outline (vector) fonts.

Bitmap fonts uses a file which is made up of glyphs in a pixel. However these fonts cannot be scaled compared to vector fonts as they contain sets of sizes. Whereas Outline fonts are a set of mathematical lines and curves which trace the outline of glyphs. These fonts can be scaled without pixilation.

To conclude the lesson, we went out of the university and tried to find different fonts on objects and buildings. We presented to the class our findings and why we liked each font.

“The best graphics are about the useful and important, about life and death, about the universe. Beautiful graphics do not traffic with the trivial.”

– Edward Tufte

Colour Workshop

What is Colour?

Colour is caused by different quantities of light which has been reflected. When light shines into an object, colour will bounce of it in order to be projected and will be absorbed by it. Our eyes will only be able to visualise the colour which has been reflected or bounced off.

Primary colours are made up of red, blue and yellow. These colours can be used to create any colour other than itself.  Primary Colours are very good when using it on the internet, on various devices and monitors. Red, green and blue are the basic colours which make up the colour of a screen.

Primary Colour


Secondary colours are when you mix yellow and blue, blue and red, red and yellow. This is how secondary colours are formed which are purple, green and orange. This colours are good when creating contrasts.

Secondary Colours

Complimentary colours are colours which are opposite each other on the colour wheel. Opposite colours do not work well together as they give out a high amount of contrast, such as purple and yellow or green and red.

Complementary Colour

Due to the high contrast, a simultaneous contrast form within all complementary colours. This means colours may affect each other when put together, especially when complementary colours. An example of this is if red and green are put together; the green will make the red look a lot brighter. However when different complementary colours are put together they will have different relationships. The image below shows when a colour is put with grey, it changes the contrast of the colour, making it look different each time.

Simultaneous Contrast

In-between secondary colours are tertiary colours. Tertiary colours are made up of primary and secondary colours. These colours are good when creating colour combinations within the same family. Furthermore they can be put in any order which makes it easy to work with when designing. It also changes the appearance of the colours when projected, rendered or printed.

“By adding a small amount of a distant relative, adds to the activity of colours.”