Data Visualisation

Data Visualisation


Data is everything and everywhere. How do we make sense of such ‘big data’? How can we see, hear, experience and form meaning from it? This project aims to guide students in how to decode and re-encode such data, exploring different graphing types and methods, spatial and temporal mapping, use of scale/colour/position, and more, to create meaningful, interpretative realisations of multi-dimensional information. We will be introduced to some data formats including CSV, JSON and XML, and extend our understanding of how creative realisations of data can effectively express ideas. The data may be static, live, from online or offline sources.

The brief is deliberately left open to encourage students to explore a range of responses, from print visualisations, to realtime graphics, to sculptural, audio, or performative work. Above all else we aim to enable the data to ‘speak’, focusing closely on how we express ideas through data, interpret it, and consider methods of understanding narratives through multimedia representation.

The data visualisation project started. It is a five-week long-term project.



Data Visualisation Project start


Data – ‘information, especially facts or numbers’. This is a dictionary definition of data.

The key to the Data Visualisation project is to restructure the data. Using different sizes, textures, positions, shapes, colors, orientations, etc., I should use different types of graphs depending on the format of data.

It’s fine to use only one type of data, but it’s okay to have multiple comparison of data. And most importantly, when I am working, data should not be distorted. And too complex data can also compromise visualisation. Perhaps the main thing in this project is the storytelling of the data.

On the first day, tutor explained an overview of the project, dictionary meaning of the data, and some of the basic elements for project. We also learned about the types of data and which graphs to use depending on the type. And if when we visualised data in 3D, we heard about precautions.

Tutor said do not make data visualisation overcomplicate. And they presented various examples that well-made, such as contour visualisation using elevation of the terrain, visualisation of data with historical facts, and visualisation of data over time. They also talked about methodologies such as data storytelling and multi-year data analysis methods.

Data Visualisation: a successful design process

This slideshow requires JavaScript.

Data visualisation context

Hal Varian, chief economist of Google, said, the ability to handle data means understanding data, creating value from data, visualising, and communicating with data. This will be a very important ability for future generations.

Data visualisation is not a new concept. Visual communication using data has existed around us for a long time. Such as lines, bar graphs, and pie charts that have been used since the 18th century.

What’s a new thing is interest and attention in the data visualisation. The importance of visualisation is particularly emphasized because of its large role in modern society. With data visualisation, people understand data rather than simply see it. This is a subtle but important difference.

Utilization of data can be something that makes the world better, or that makes a competitive gold mine. We are now living in a time of great opportunity to effectively utilize the enormous velocity, variety and volume of data.

Data visualisation is also a process for reducing selection. This is accomplished by identifying the elements that are influential, understanding the functions to be implemented, the mood of the design, the data to use, and the task of finding analytical topics. Selection and rejection will ensure clarity, and clarity will reduce the anxiety for selection.

Design is about solving problems and presenting elegant solutions. The visualisation of data can provide a beautiful solution to our society that is overloaded with data.


Visualisation as a tool for discovery.

Visualisation can be used to see the data from a new perspective, to visually see patterns, exceptions, and possible stories hidden in raw data. This approach considers visualisation as a tool for exploration.

Visual representations make it much easier to discover and identify features such as patterns, relationships, and outliers. Data visualisation is a process of discovery.


The foundation of visualisation knowledge

Looking at the higher level of convergence in many areas, data visualisation can be described as the intersection of art and science. The combination of artistic and scientific perspectives produces a delicate mixture.

To be successful in design communication in data visualisation, aesthetically, it is necessary to capture the viewer’s eyes and emotionally obtains hold on the mind for a long time. When designing visual design, it is necessary to make use of the strength of visual ability and to avoid weakness of cognitive function. The thoughts and calculations needed to read and understand the data should be kept to a minimum, then eyes will be able to work effectively and efficiently.


Definition of data visualisation

Our job as a designer is to be position of the recipient of the result. From the message, imagine, predict, and judge what viewers will find. What story do they look for? Are they trying to learn something new, or are they looking for something to convince them to be more emotionally affected? The success of data visualisation design is based on this understanding and consideration of the viewer’s needs.

The messenger must satisfy the viewer’s requirements and be delivered in the most effective and efficient form. To ensure this, when we designed visualisation we consideration of the viewer’s own visual and perceptual capabilities should be encode and decode the message most efficiently.


Do not deceive viewer

Representing data in an inefficient or inappropriate way, whether intentionally or not, leaves potential for misinformation to the viewer. Sometimes problems arise when the visualisation designer has lacks information about visual perception. Following the visualisation ethics is a must for any project. This is the basis, and the respect for the viewer and the attention to detail.


Intention Setting: Functional aspect of visualisation.

In data visualisation, “intended functionality” refers to the functional experiences created between design, data, and users. I can group the features of the visualisation into three different functions or categories.


For explanation

Data visualisation for explanatory purposes is to convey information to the viewer by describing specific and focused content.

The result is a visual experience that typically revolves around a solid storytelling. The goal of designer’s is to create a visual material that clearly expresses the story you want to tell and a graphical display that is intuitive to understand.


For exploration

The exploratory data visualisation is a bit different from the visualisations made for explanatory purposes. When designing exploratory data visualisations, you should focus on helping viewers understand and gain data easily during the visual experience. Unlike explanatory data visualisation, exploratory data visualisation is vulnerable to the delivery of specific, single narratives. This is more of a visual analysis than a visual representation of the data.

The exploratory solution aims to create a tool that acts as an interface through which the viewer can visually navigate the data. In the process of using this tool, the curiosity is stimulated. This allows viewers to make personal discoveries, find patterns or relationships. It also opens the possibility of accidental discovery by combining different visualisation screens in different ways.

If explanatory visualisations were created primarily for others, the exploration data and processes of visual analysis were created not only for others, but also for their own exploration.


For expression

Data visualisation for representation discusses designs that use data as raw material but does not include purely delivery of data information. Instead, it is more of a purpose to see it as an exhibition of personal expressions or works using data. This result can be called in terms of “data art.”

Data art is characterized by weak structured stories and they are not provided visual analysis. Instead, they focus on creating works of art, aesthetic expressions, and exhibitions. An extreme case, this visualisation focused on interesting materials or decorative purposes.

This particular attempt at data visualisation is controversial. This is contrary to the attempt to identify and define areas such as visualisation, graphic design, generative design, and creative arts.

The visualisation for representation aims to get a reaction in aesthetic sense. And it spreads in people, causing an aesthetic chain action. It is because when spreads among the people, and the emotional response and interpretation of the work becomes more diverse and richer.


Intention Setting: atmosphere of visualisation

The following questions can be asked regarding visualisation. “What is the message I want to express? What is the main storytelling I want to describe? What questions viewers can get answering by visualisation?” These questions show the level of communication through visualisation.


Importance of editing direction

The editing direction is to decide what specific message I want to talk to the viewer. This means removing noise from the data and taking responsibility for identifying the most valuable, influential or most relevant parts of the topic.

To do this, I need to gauge what viewers are interested in. Review what they think they want to know or what they find interesting. And I need to find out what stories I can use to describe data.

Do not release everything in front of the viewer. Good visualisation involves the editor’s consideration of the viewer’s level. Throw away the compulsion about use to all of data that you have.


Preprocessing and data grasping

Finishing to define story and analysis before start developing, you need to access and preprocess the data.

Whether to acquire data first or to refine the dimensions of analytical topics first depends on the context of the project.

Identifying data excludes all speculation and hope. Once you have the data, you start by identifying the nature, state, and potential story of the data.

Collecting and preprocessing data involves a tremendous amount of effort and pain. When accessing data is not a problem. Sometimes you have to work hard to refine your data and shape it as needed. Make sure you spend as much time as possible on this essential step.


Using visual analysis to find stories

“Visualisation answers questions you didn’t know you had.”

Visual analysis will be a great help in creating the particular kind of “data question”, when you want to answer about the question through visualisation.


Visualisation internal structure: data representation

When visualising data, you need to review and determine the many design attributes that will be included in the visualisation design.

– Use of color.

– Interactive function.

– Comments for explanation.

– Architecture and Placement.

Decision-making at this stage should focus on conveying additional meaning, intuition and insight for the reader or viewer.


For data representation

The most common mistake made with respect to color is often found when representing quantitative data. Especially when using colour tone.

There is no specific rule or association that governs the relationship between colour tone and some sort of structural sense or order of size. We do not think any colour is inherently bigger or smaller than others. Therefore, using colour to represent quantitative data is a mistake.

In the case of numerical data, the brightness of color can be used to effectively express a range of values. It is called a sequential colour scheme in such a way that the amount of white from the darkest colour increases sequentially. People inherently and automatically think by linking a sense of order to a sequential scale.

To avoid the clutter that can arise between the expressed data and the background, it is challenging to make the visual structure more efficient. All that needs to be done is to bring the most important signal to the fore and send less important or decorative elements to the background.

The background of colour expressions has various meanings emotionally and culturally. Colour naturally has the advantage of being used as a universal visual language, but this is only possible if universality is attained. It is likely that you have different perceptions of colour in different parts of the world, and most colours are interpreted differently in different regions, so you should be careful when using colours.


Generate an interaction

Excellent static visualisation is like as powerful photograph. This is made by carefully thinking and organizing, even though there is no movement, it is the aspect that describes the sequence or movement of the story. It is arguably the most fascinating thing in the field of data visualisation that is immersed in static visualisation.

Nevertheless, advances in technology over the last decade have created opportunities for outstanding designers to create powerful interactive visualisation designs. They drive a paradigm shift in the levels of creativity, innovation and user experience.

The best example of interaction is to make what you see invisible. In other words, interaction functions are integrated into the design intuitively, making them invisible as separate tools from the data.

Inevitably, the development of interactive designs requires technical skills. There is no way to avoid this. Without technical skills, you can’t start interactive visualisation. The ambition of the designer can be great, but you have to think realistically about what you can actually achieve, and this must already be taken into account.

Looking back at the initial idea of ​​the project’s purpose, it is also necessary to think carefully about the motivation and intent of the design. Specifically, what functional experience will you create for viewers? Is it exploratory? Is it representation? Or is it a combination of the two?

It’s important to remember that being able to create interactions doesn’t always improve the user experience of data visualisation. You should not be overwhelmed by the novelty of creating interactions, and you should not undermine the nature of visual communication by excluding static design. Conversely, if the complexity and diversity of the data structure you are working on cannot be represented in a static design, then interactive design is essential.



If you have time series-based data, you can create interesting data stories through scene transitions. It is expressed using animation technique.

One thing to keep in mind is that the viewer’s memory is not ready to remember the previous scene of the animation story. If it is important to support comparison, animation may not be the best way.

The potential of interactive or animated visualisations is a very exciting prospect for talented developers and designers, but the appropriateness and necessity of interactive work must be thoroughly explained and validated. Being able to do that doesn’t mean you have to. Interactive visualisation expands creative opportunities. But unnecessary menus can be confusing and can make data and insights difficult to understand.



Annotating the visualisation is very important in design. It’s for the reader or the viewers and it means knowing who they are and what they already know and what they don’t know yet.

If done well, annotations increase explanatory power and help viewers interpret the work. Adding a device to support the user is challenge attitude. The key goal for effective visualisation design is to help you understand the subject through intuitive design.

Titles – Eye-catching titles can help attract readers and clarify the focus of visualisation topics.

Introduction – An important element that explains the background and context of the project. Communicate goals by describing motivations and intentions.

Subtitles and Narratives.

Visual annotations – legends and keys, units, data sources, contributors.



For the final task, the designer must consider how to organize the design in terms of the layout, location, and structure of all visual elements. Intentions regarding the layout or structure of a design should be communicated as intuitively as possible.

The main purpose is to reduce the amount of work the eye must do to look around the design and decipher the sequence or structure of the display. The brain tries to minimize the amount of thought. Carefully choose and consider everything you want to show. At every level of visualisation, designers need to be able to provide the basis for their visual needs.


Last step

Antoine de Saint-Exupery Quote. Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.

As the initial quote suggests, another view is to take a step back from the design and check everything you have included in the visualisation. Justify why you should include specific features or design choices. Also decide what elements you can delete. It is an element that does not contain any message and has no functional value. These are not suitable for pursuing minimalism.


Post-release verification

Finally, you should always welcome constructive feedbacks and use them as a driving force for development. How effective did you think the project was from the designer’s own perspective? Your satisfaction is very important. This leads to future decision-making and development. Sometimes you will know whether it will be an effective outcome or a satisfactory process. Even if the result is positive, the idea might have even better.

Think too much and try not to regret. Instead, make them as a time to learn. Make it an experience for getting information that will help you prepare for future opportunities and develop your skills.


22 Jan


On the second day, we learned how to process and create a bar graph using CSV file and ‘Processing’, change colors, and write text under the graph. We also learned how to express the size of data by creating multiple grids with ‘for’ statement. Finally, we learned how to export the data visualisation I created in Processing to PDF and how to modify the exported visualisation file using Illustrator.


25 Jan / NOTE

It was the day of the data visualisation seminar. We have seen examples of data visualisation in various work. For example, visualisation with a heart rate sensor, work with Arduino, work with tapestry forms, and rising and falling of the stock price graph’s outline mapped with the mountain ridge.


– Next Monday there will be a tutorial. This session better to discuss the data with a study, which type of data I am interested in, and what I’ll be doing later.

– The data can be your personal location or data from Google’s data archive.

– I can work with processing and p5.js.

-Think about what type of data you’re working with-> Preparation for Monday tutorial.

– Worked with Arduino for real-time data.

– Self-portrait using heart rate sensor

– Data visualisation using constellation-> It seems to be possible to work with the 24 divisions of the year (in the lunar calendar) in the East Asia.

-Take a variety of ways.

-“Data is the most abundant art material we have ever created” Julie Freeman.

– What data do you own? What can I get from the data I have? etc.

– Data visualisation work using tapestry form-> Motion is detected and displayed on the screen. Colors are expressed differently according to the number of movements.

– Data humanism.

– In today’s session, we looked at and discussed various tasks.


We also learned more detail about the CSV file.

– Comma Separated File-> The file is divided by comma.

– If you open it with an Excel file, the data comes out separated. And storage is also possible.

– Read and load data files by row and column number. ex) The data in column 17 of column e is-.

– Save as PDF and edit with Illustrator.

– When using Illustrator’s release clipping mask function, data data other than the specified screen is displayed.

– Select all the data beyond the screen Press ctrl + a-> rotate 90 degrees-> Resize the screen using the artboard tool.

– Dividing the data by root 2 gives the approximate matrix size. ex) Dividing 1000 by root 2 yields approximately 32.

-Build using grid for loop. -> Double loop statement-> one for ‘x’ one for ‘y’.


29 Jan


– Json file related and other workshops.

– Learned how to use it to analyze textual data.

– Json, Mapping, Text.

– String load.

– Files such as docx except Riff have junk files in their headers, so it is recommended to save them as txt files. Don’t forget to set Unicode(UTS-P8).

– millis = millisecond function.

– IntDict = A function that pairs a string with a number. It functions like an Array. = IntDict.

– Tutors showed how to visualise the number of words written in the text.

– Use sortValue to sort in alphabetical order. + Flow chart of the number of appearances.

– srt format file-This is a subtitle format file like smi file format. See Wikipedia for details.

– srt files can be converted to txt files, I need to convert them to Unicode instead.

– Find a text editor in Windows.

– If you are more interested in personal srt files, do some personal research.

– See an example of shuffling a String.

– There are two options for exporting fonts to PDF. export to createFont or use ‘Pfont Font;’ ex) font = loadFont (“fontname”);

– loadfont is fine for viewing directly on the screen, but to save it as a PDF, you must specify createFont (“name”, size) to avoid conflicts when exporting.

– use createFont.

– Mapping the elevation of the terrain with sound.

– Pixel color of the image as the data source.

– For example, a method of projecting location data of an airport onto a real map, or simply mapping.

– Integration with processing of Google API-Integration with csv file storage location.


– Declare JSONObject as a global variable.

– Continuation of breaking data and returning data.

– I need to script my own data. The process of selecting and classifying data.


8 Feb / NOTE


There was a workshop to manipulate data with Arduino.

-From how to import data from sd card.

– Arduino ‘Adafruit feather 32u4 adalogger’ or ‘Razbay Pi’ to work

An example is the recording of tree shake. By taking data using sensors from real forest.

– There is work that works with the brightness of light. Light frequency.

– I2C / Communication Board.

– I have seen an example of LUX code. serial.print (event.light); Is the main function that communicates.

– It can work by interlocking light sensor, light and motor.


11 Feb / Tutorial NOTE


– Replace Json-> to CSV and shown the work using drawing for longitude and latitude.

– TouchOSC is not compatible with p5.js. Instead, consider map my mouse movements with latitude and longitudes?

– In the case of drawing, I just to do continue.

– If only the drawing is connected, the viewer does not know what is it and where. So, it would be nice to add something that could explain the data, such as adding latitude and longitude. For example, a signpost of data.

– Find out how to make the most of your mouse latitude and longitude. Mapping with the mouse, etc.

– I will make an outcome using form of a diary. I will try to make it control horizontally or vertically in 2D layering on the web.

– Think of latitude and longitude as drawing a grid, enabling mouse zoom-in, or organizing my work to allow the viewer to explore a bit more.


Organize idea

The workshop for data visualisation is finished. For this project core data, I will use my location data once I used in the ‘Design Domain Part 1’ project.


I considered the use of public data as well as personal data, but after the project researching public data was already well-visualised. So, I decided to use my personal data for this project that had never been used before. The idea is that I may be able to work more freely and unconventionally.


The data analysis method chosen in this project is more form of a use for presentation and for exploration. I decided to combine the two parts well and to work on the artistic side and explore myself.

Determining the type of data, my working process move on to analyzing my location data by year. My intention was to first classify the data by year, then weave them together like a chronology. The reason for the above idea came from my diary which I’ve used since I entered high school in 2012, records my life like as location information on Google Maps. I think it would be effective way to introduce myself to use e-book type biography to someone who do not know me.




This slideshow requires JavaScript.

I analyzed my Google map location data using ‘R’. It was a mapping of points on a map. However, when outputting the whole map at once, the coordinates overlapped, and the view was too far. Then I went through a map and preprocessing the location data that is a point leave out from the outside or around the map. I also examined the latitude and longitude of the analyzed points.

R code

system.time(x <- fromJSON(“locationdata.json”))

loc = x$locations
loc$time = as.POSIXct(as.numeric(x$locations$timestampMs)/1000, origin = “1970-01-01”)

loc$lat = loc$latitudeE7 / 1e7
loc$lon = loc$longitudeE7 / 1e7



loc$date <- as.Date(loc$time, ‘%Y/%m/%d’)
loc$year <- year(loc$date)
loc$month_year <- as.yearmon(loc$date)

points_p_day <- data.frame(table(loc$date), group = “day”)
points_p_month <- data.frame(table(loc$month_year), group = “month”)
points_p_year <- data.frame(table(loc$year), group = “year”)



my_theme <- function(base_size = 12, base_family = “sans”){
theme_grey(base_size = base_size, base_family = base_family) +
axis.text = element_text(size = 12),
axis.text.x = element_text(angle = 90, vjust = 0.5, hjust = 1),
axis.title = element_text(size = 14),
panel.grid.major = element_line(color = “grey”),
panel.grid.minor = element_blank(),
panel.background = element_rect(fill = “aliceblue”),
strip.background = element_rect(fill = “lightgrey”, color = “grey”, size = 1),
strip.text = element_text(face = “bold”, size = 12, color = “navy”),
legend.position = “right”,
legend.background = element_blank(),
panel.margin = unit(.5, “lines”),
panel.border = element_rect(color = “grey”, fill = NA, size = 0.5)

register_google(key = “—————————————————–“)

getmap <- get_map(location = ‘gangnamgu’, zoom = 7)

ggmap(getmap) + geom_point(data = loc, aes(x = lon, y = lat), alpha = 0.5, color = “red”) +
theme(legend.position = “right”) +
x = “Longitude”,
y = “Latitude”,
title = “Location history data points in Seoul”)



Now I thought about how to actually implement the summarized data. There were many options, including motion graphics, printing, processing sketches, etc., but I wanted to implement the Google Maps API that I discovered last time while researching the Google Cloud.





As the ancestors marking on the map and walked on the road, I wanted to make that kind of work. Along the road I passed on the map, personal memorial places drawing spread out. The places were filled with my drawings that used the feeling of the place I remembered.

Google Map API



Moving on to the technical part, the Google Maps API is based on a web language. To run it, I had to program using HTML5, CSS6, and JavaScript. Last year’s WebContext project helped. The help material for the Google Maps API was also very helpful. From using the Maps API to drawing a specific location coordinate, connecting the location coordinates with a line, and animating it inside.


And drawing took more time than I thought. I only can finish one seventh of the original plan. I tried my best.


But the last evaluation I received was not good. This was due to the large amount of time spent on implementing the Google APIs.

It was a matter of lack of storytelling and critical thinking, which I often felt lacking in my work. When I first plan, I keep thinking that I shouldn’t focus on the technology implementation in my head, but I forget when I actually work. This part I need to keep mind in next project.

DV proto

2012 1


Open Share Project

After spring break, there was an Open Share Project. It was time to take a look at what I have done for a year and make further modifications to my favorite project. I modified the “Data Visualisation” project along with other projects at that time. The fix was not just to move round circles on the screen, try to make the animation a little more dynamic and visually interesting.

When people watched this video, I tried to make viewer think and interpret a little bit through. This time, I learned personal data and public data can be very good art materials. I thought about “processing information and how to deliver it to the viewer in a fun and effective way” and think it was a good project to feel while working on it.


Final Documentation

One thought on “Data Visualisation

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s