 So, hi everyone. This is Uttam. I work as an artist for the startup called R2. Today I will be speaking about data visualization and the Java-based scripting pool called Processing. I would just like to give you a brief kind of attention such to all of you that this talk is going to be really different from other things that you are going to hear throughout the day. So, probably it might be very eccentric too. So, I will just start with this attention that so please listen to this talk with an open mind so that you get inspired and then get excited into the world of data visualization. So, first I will start off with data. There is a definition, a dictionary definition that you all can find in dictionaries. Data is a collection of facts and in today's social media dominated world everyone thinks that if I want to visualize something I need to look up for cool sources, I mean look up cool sources for data like Facebook, Twitter, Google or it might be any other social media platform. But in my personal opinion, I feel data is everywhere around you. It's in the voice you hear, it's in the things you see, it's in the thoughts you get and so on. So, it's basically data is everywhere around you, it's up to you to kind of innovate and imagine like what you want your data set to be. And giving you a couple of examples like the things that interested me like astronomical data that is data that is related to the planets, oceans of stars and sun and biological data that you guys might have seen. Outside like there's a lot of genome data and other data that are being analyzed and being tried to visualize to get some insights and other value information. And there is the obvious social data and stock market data. But there is an interesting domain of data that I have encountered recently, it is called personal data. With personal data, I mean there is a habit that is being practiced by certain people by trying to kind of observe their personal self and try to monitor might be their sleep cycles, their food habits or might be blood glucose levels or it might be behavioral patterns. So, they have a certain purpose to observe their personal data like might be to cope certain chronic problems or it might be to just kind of visualize their data sets and try to get a better understanding of their personal self. So, the group of people called this technique called self quantization or quantified self. And after this I will go into the my favorite part visualization and visualization can be your digital entity or it can be a physical form. So, majority of the examples that I am going to give you today is going to cover the physical part of visualization because people hardly are covering physical side of visualization in this event. So, again, to me visualization is anything that is capable of producing a visual stimulus. So, which obviously means it cannot just be a digital entity and the type of medium or the pixel you choose to represent your data will convert your visualization into a digital one or a physical one. So, I will go ahead with certain examples which will definitely excite you to create some of the cool stuff that I am going to show you here. So, one example that I have taken is photographs. Everyone look at photographs as a memory or a souvenir or might be like a hobby or like art form but I see photographs as realization. Like it is a camera is capturing a lot of transient data which is position of an object or might be a person or it can be a static object as well. The example that I am going to give you now. This is a visualization. It is actually a photograph taken by a student who is doing her like masters in art at University of Hertfordshire. So, what she has done is she has tried to visualize the position of sun by taking six months of data. If you see this picture has a lot of streaks and a couple of breaks in between. So, all the bright lines you see is the streak produced by moment of sun from dawn to dusk. And the lowest is like June 21st that is the summer solstice and the utmost is like winter solstice at December 21st. So, this visualization shows you data of six months and the intermittent breaks that you see for in a streak that is because the sun got obscured by clouds. So, this is one interesting visualization that might be out of the box thing for people like who are in the digital age. And another object that I would like to look at is mirrors. Mirrors are reflection. Mirrors have a unique property of showing real objects in a virtual world. So, if you want to create your visualization that has got something to do with the real objects, you can explore mirrors and try to generate might be symmetric patterns like in a kaleidoscope. So, this might or might not be like for a specific data set, but the reason I have given you this example is just to give you a possibility where people can explore and try to bring some interesting or insightful visualization sort of physical objects. And since I am an artist and predominantly a visual artist, I would like to see art as a form of visualization. So, what an artist does? An artist tries to kind of put his thoughts or emotions on a canvas or a medium of his choice. And the colors, the medium, the technique the artist chooses will actually decide the end result of a visualization. So, in a way art is also visualization of mnemonic data. Mnemonic data is like memories. You try to recollect something and try to put onto your medium of choice. So, in this example, this is a painting titled A Starry Night by Dutch post impressionist painter called Vincent Van Gogh. This can also be called as a pointillistic technique painting. The reason I pointed out this example is to highlight the rich palette that he has used, the vibrant blue colors and the mysterious sky that he has envisioned. He actually made this painting when he is in a sanatorium and this actually came to him as a vision like how he is viewing the world. Or this also has an artistic meaning that this painting represents his volatile state of mind. And in the second example, this is a painting by an American artist called Jackson Pollock. He has titled this Autumn Rhythm. Until with him, all the previous artists that has come has used in some way or the other like especially in like when the medium is paint, they try to touch the brush to the canvas and then try to make street strokes and like other techniques. But he is the only person who has used wet medium paint without touching the brush to the canvas and then trying to use it like a drip medium and then make this painting. The reason is, if this painting actually signifies, he wanted to convey the heroic nature of an American by looking inward of himself. Like if you see there are a lot of people might call this childish art or just like scribbling. But there is a way, I mean, but there are a lot of other people who try to look it as like how we have tried to control his constraint and unconstrained movements of the brush and then try to create this contrasting black and white dots on this canvas. And the next example is actually a sculpture. It is by Michelangelo, is a Renaissance sculptor. The title is La Pita, it's an Italian which translates to Pitti. Until him, all the previous artists have chosen the death of Jesus and like Virgin Mary as some sort of a pityful or some sort of thing which is evoking pity. But this particular sculpture of Michelangelo actually evokes divinity and spirituality rather than just pity. And the medium that has chosen is a marble sculpture. This stands at St. Peter's Basilica. If you would like to get some sense of the form, this is again like the famous Da Vinci kind of like exploration of the form which is a pyramidal shape where it starts off with like Virgin Mary's head and then it ends with the drape or the clothing of Virgin Mary. The reason I showed all of these physical examples is you don't necessarily need quantifiable data to make a visualization. People often tend to think I need a CSV file or it might be needing a text file to make cool something which is visual in nature might be a visualization. So you don't necessarily need data in numbers to arrive in making your visualization. And now I'll quickly come to quantifiable data. Quantifiable data is something which you can represent in the form of numbers or might be in the form of values. So these are couple of examples I'd like to show you like first one is like some sort of relational mapping that's again some sort of quantifiable data that has visualized. And the other one is a point cloud. Again the sizes of each word represents the popularity or like might be the frequency of the using that data set. And this is again like demographic data that has been visualized on a map and that is a three dimensional data which is again like coordinates which is again like quantifiable. And I would like to concentrate on the color picker which is also quantifiable data. The reason why I've chosen again this color picker is everyone might have used at least once in our lives a color picker but not many of us know that it's also a visualization. And there is a specific reason why yellow is placed between red and green or blue is placed between magenta and cyan. So as all of you know like digital colors are essentially groups of numbers. Let it be RGB or CMYK or let it be HSV. They are displayed through pixels and color picker is actually a three dimensional data like RGB is like three dimensions right. It is tried to kind of reduce it to a two dimensional form by making a color picker. So what exactly they did is there are certain algorithms that they do to reduce three dimensional data in two dimensional form. While retaining the same partition distance in higher order. With partition distance I mean like the distance between red and yellow is preserved even in two dimensional space as well as in three dimensional space. So every color picker that you see is a visualization of numerous sets of RGB value. And now again like with quantifiable data again like some of the physical examples of visualizations. So the first one you see is a push pin art that people have used the push pins that use on billboards to create the visuals. And the next one is actually a portrait or a form created using stapler pins. The artist has tried to punch stapler pins on a wall to create this physical form of visualization. I mean right now like these are like static forms of visualization they do not be static they can be tried to make interactive. And that will actually depend on your imagination like how do you want your data to be represented in a physical form yet making it interactive. And here I have a short video to show you. So this is actually a kinetic sculpture placed at BMW Museum in Munich. They have used an array of metal balls and strings to create these wonderful visualizations. People might call this interactive art but I call it I think you just got like some sense of how it looks. I'm sorry I mean there's some problem with the internet but so this is how like they have produced the BMW car using a series of metal balls and strings. And this is again another example of physical visualization it's actually a water fountain in a Japanese mall. They have used droplets of water in intermittent breaks to create this visualization. It's actually one of my favorite things to get inspired and try to explore more of such sort of like physical visual forms for like representing data. So it's actually an image that is being encoded onto a water fountain. And then the gaps that is actually breaks in the water that is dripping from top. These are like all the kind of examples that I have chosen to excite you into the world of visualizations and to be more specific the physical side of visualization rather than just a digital side. I have almost come to the second part of my talk where I would be speaking about a digital tool, a tool called processing which can be used to make digital visualizations. So there are other, so processing is a Java based scripting tools so Java is like object oriented and all like it has a lot of the common support and stuff that you guys know. And there are like other equivalent frameworks which are in C++. It's called Open Frameworks and there are a lot of JavaScript libraries if you want to create digital visualizations. So processing is a Java programming language for artists or designers and it is founded by Ben Fry and Casey Lee's Wired MIT media lab. I will quickly show you how processing ID looks like. So this is how basic processing ID looks like. It's very minimalistic in design which has very basic options like whether you can run your code, stop, you can save and export your code. So the processing program is called a sketch. It primarily has two parts. One is a setup and the other one is a draws. The setup method runs a single time and you can use it to finish your data. And the draw method loops endlessly until you call the no loop function and you can use it to handle animation. I would like to explain more about processing by taking an example that I have done as a part of a pool. Like I am part of a studio called Lucid. It is a studio for speculative art. In Bangalore they headed by Priyas Abhinav who is a faculty at Srishti School of Art and Design. We meet monthly or bimonthly to create interesting stuff and like hack a couple of softwares to create visual art. So one of the pool that I have been to is like organic digital. At this particular pool I tried to visualize the input of a microphone. And I have visualized the microphone input like a volcano. Whatever you speak are the particles of lava of a volcano. And even I will first show you the thing that I have done. So you get better idea on what exactly looks like in this case. So this is how it works. So each particle you see is actually for like one specific frequency in the input signal. And the size of each particle defines the magnitude. I mean the amplitude at that particular instant where I am sampling it. And if you can see like whenever I am speaking there are a lot of particles coming out. And also the mountain is shaking. I mean I have taken a threshold. If the threshold is more than that particular thing the mountain actually vibrates. So this is essentially a particle system. So each particle has a lifetime and a position and like certain style attributes that are associated with each particle. It also has velocity. And if you guys can see that there is gravity that I have placed in this particular drawing for the particles to fall downwards. So just to clear it with this window so that you guys can see while I am speaking. So yeah as I have told you like probably I will just place this code on a notepad so that you can see the pictures. So yeah this particular piece of code requires a couple of libraries that you may be importing. To get the audio signal from the microphone. So one of the audio libraries is called Minim Audio Library and Minim Analysis for processing the input audio signal and get the frequency out of it. And this library called processing.video can actually be used to capture the video stream that is being generated on the renderer. I think these are couple of initializing variables. Like I have defined a particle system and like couple of variables for the colors. And if you guys can see like in the setup I have tried to initialize the size of the window, the color mode and the particle system. And like it has two things like if you don't use smooth method the graphics that are being produced like the geometries like circle or it might be the basic of they won't be smooth. They have a rough edge. So I have used smooth method to get a better resolution of the objects. And then FFT is a fast Fourier transform. I have used that to sample the incoming signal and then try to get the frequency from the left channel of the incoming signal. And this part covers the initialization part of it and this is the method draw where I have actually defined the background color, the shape. And here this part is actually the mountain. If you guys can see like I have defined a basic curve which is essentially a curve that is obtained by joining a couple of vertices. I have placed like where I want each vertex and then I have kind of rotated in certain degree to kind of get that vibration or like shaking moment. So this is where I am getting the frequency from the input channel. And this is the in that buffer size is the buffer size of the incoming signal and kind of looping it in a thing so that the visualization runs while the input is on. And you can see like I have added last thing called mm is a movie maker object and I have written like add frame. So what it essentially does is it takes each frame of the visualization and captures it into a dot and movie file. And once I press a spacebar key like I can get the movie saved. I would like to show you the settings that you can specify like while recording the movie probably like I'll show you on the next example that I have for you guys. So this is basically like how I try to visualize the input of a microphone in a more artistic and like organic form. I mean the green color represents organic and the way each particle pulsates in a sine wave is also like has got to do something with analog rather than digital. So that that's my idea behind making this visualization and the next example that I for you guys is the example that I made the visualization I made during hack night. I tried to visualize the marks of 10th and 12th grade students in Bangalore. Not marks rather whether they have password failed enough in their final board exams. To me password fail is just kind of a label and has got nothing to do with the student stability or like how he can perform better in anything. And school is a place is rich of opportunities. So I try to visualize school like an egg which is rich of potential and like and it's rich of opportunities. So unless if you give a chance to students so you can actually make them create wonders. So this is how the business actually looks like. So each circle that you are seeing here represents a school and red represents the number of students who have failed in their board exams and white represents. The number of students who have passed in their board exams. So the larger the circle the larger is the number of students in that particular school. And this actually process like the data of one lakh students of schools all over Bangalore north and south of Bangalore. I have limited my domain to just like urban Bangalore. It's because of the constraints that I had while processing like 230 MB of data using processing. So this is one of the kind of you can say mutations of crossing it cannot handle like very heavy data sets. So the data set that I've used right now is around like 100 MB which spans like one lakh students over a couple of hundred schools in Bangalore. So each circle is like an egg. And once the visualization finishes we can actually see how many potential centers are in and around Bangalore. The positions are chosen randomly. They don't have any significance. I actually tried to map this on like a map but that has become too complex for people to read the circles as well as the demographic data. So I just tried to put it on a blank piece of canvas. Yeah, it's kind of overriding. So it's also like kind of I have tried to add a Z index that unfortunately I cannot show you right now. What happens is like you can actually use your mouse to kind of swap through and then see them like a stack. So all the circles are not in a single plane. So they are in different z-directional planes. It's actually it has a transparency. So whatever gray you are seeing is actually a red overlaid on white. So that's why like it is bringing that difference in the tone of shade you can see. So usually I had to kind of against using quantifiable data to make visualizations but I have ended up using quantifiable data. So I'll just show you like what is the data set. Right. Actually every time the space is limited. Right. So can we use the can we change the color intensity from light to dark to visualize more in a limited area? I mean can we use different colors? I mean like if you are talking about the real estate of the canvas where like the objects are getting hidden or it might be the space. It's actually spanning across I mean way beyond the boundaries. I have tried to add a padding to my visualization. Unfortunately the circles are much bigger. You can see the padding is obvious on the left hand side corner of this particular part. Like they have added a little padding but like certain circles in their randomly portion they are gone beyond the boundaries. Yeah probably you can do that. So that can be easily done with this parameter. I mean to me like I would like to see both data and visualization as two separate entities. I want people to get inspired by data as such in its raw form and visualizations as such in raw form and then try to come to a common ground and blend two of them. That's the reason why I've shown you like certain examples which need not necessarily be a data visualization examples. But they are in a way are capable of getting linked to data sets and then create cool visualizations. So that's the reason why I've taken different examples for data sets and visualization. So again this visualization is put up into like setup method and the draw method in the setup. I have defined the size, the background and this is where like I have loaded the data from a CSV. So it's the data for like 2011 and this is just kind of a subset of the bigger data sets I was seeing in that way. And what essentially I did is the CSV contains a lot of parameters for individual students. I try to get parameters that I'm interested in and try to put in a two dimensional array and then try to read the values of each element and then try to increase or decrease the radius and place them randomly. So if you look at the draw method that's what essentially it is. I try to count the number of students who fail, number of students who have passed and sorry the comment thing doesn't have a syntax highlight so that's becoming the normal ones. So yeah but I think that's majorly like broadly covering like what I've done using the data and like my perspective on like how it is visualized like artistically. So I think I've almost come to the end of my talk. So it's one of the small lines that I would like to kind of remind everyone that don't let the kid in you guys explore, dream and discover.