Best tools for multimedia reporting Fri, 31 Oct 2014 18:40:17 +0000 en-US hourly 1 https://s0.wp.com/i/webclip.png 32 32 239681374 https://geojournalism.org/2013/08/portugues-as-cidades-mais-populosas-do-mundo/ Gabriel Gianordoli Tue, 27 Aug 2013 21:33:46 +0000 Design Visualization charts cities graphs https://geojournalism.oeco.org.br/?p=351 <p>In this tutorial we will learn how to load data from an external file and we will create a graph with a population area x for the 10 most populous cities in the world. Introduction Originally created as a tool to teach programming to visual artists, Processing language now has applications in several areas, including [&#8230;]</p> <p>The post <a href="https://geojournalism.org/2013/08/portugues-as-cidades-mais-populosas-do-mundo/">Visualizing data with Processing</a> appeared first on <a href="https://geojournalism.org">geojournalism.org</a>.</p> <p>In this tutorial we will learn how to load data from an external file and we will create a graph with a population area x for the 10 most populous cities in the world.<span id="more-351"></span></p> <h2 class="summary-item" id="introduction"><a href="#introduction">Introduction</a></h2> <p>Originally created as a tool to teach programming to visual artists, <a href="https://processing.org/" target="_blank">Processing</a> language now has applications in several areas, including data visualization. Its simplified syntax is a good alternative for beginners to the coding world, and its development platform can be <a href="https://processing.org/download/" target="_blank">downloaded for free</a> online.</p> <p>In this tutorial we will learn how to load data from an external file and we will create a graph with a population area x for the 10 most populous cities in the world.</p> <h2 class="summary-item" id="processing-environment"><a href="#processing-environment">Processing Environment</a></h2> <p>When you open the program, you will find something like a text editor. That’s where we will type commands – no, there is not a “toolbar” here, since the original goal of Processing is to teach programming fundamentals.</p> <p>To run the script that we are going to write, just click on the play button at the left top corner of the window. A new window will open, empty for now, since we haven’t created any commands yet. Close it (or press the stop button) and save your file before you start programming – by default its name is the creation date, but you can choose any other name.</p> <div><img alt="Processing" class="aligncenter wp-image-352" decoding="async" fetchpriority="high" height="551" sizes="(max-width: 717px) 100vw, 717px" src="https://geojournalism.org/wp-content/uploads/2013/08/processing01-1024x787.jpeg" srcset="https://geojournalism.org/wp-content/uploads/2013/08/processing01-1024x787.jpeg 1024w, https://geojournalism.org/wp-content/uploads/2013/08/processing01-300x230.jpeg 300w, https://geojournalism.org/wp-content/uploads/2013/08/processing01.jpeg 1326w" width="717"/></div> <h2 class="summary-item" id="basic-commands"><a href="#basic-commands">Basic Commands</a></h2> <p>To begin to understand Processing syntax, type the code below and run the program:</p> <div class="et-box et-shadow"> <div class="et-box-content">size(1200, 200);<br/> ellipse(600, 100, 100, 100);</div></div> <p>You will see a window like this:</p> <div><img alt="Processing" class="aligncenter wp-image-353" decoding="async" height="226" sizes="(max-width: 614px) 100vw, 614px" src="https://geojournalism.org/wp-content/uploads/2013/08/processing02-1024x376.png" srcset="https://geojournalism.org/wp-content/uploads/2013/08/processing02-1024x376.png 1024w, https://geojournalism.org/wp-content/uploads/2013/08/processing02-300x110.png 300w, https://geojournalism.org/wp-content/uploads/2013/08/processing02.png 1828w" width="614"/></div> <p><strong>What does this mean?</strong></p> <p>These commands are called <i>functions</i>. We use two of them: <i>size</i> and <i>ellipse.</i>The first defines the size of the document we are going to work with (in pixels). The second draws an ellipse. Beside each one, inside the parentheses, we have the <i>parameters</i>: information that the program needs to know for how it will perform each function. In our case:</p> <div class="et-box et-shadow"> <div class="et-box-content">size (width of the document, height of the document);<br/> ellipse (horizontal coordinate of the ellipse, vertical coordinate of the ellipse, width of the ellipse, height of the ellipse);</div></div> <p>It means that it’s possible to translate the second line as “draw an ellipse 400 pixels from the left edge and 100 pixels from the top, 100 pixels high and 100 pixels wide”. Try to change these numbers to better understand how they work.</p> <p>At last, some details we need to be aware of:</p> <ul> <li>parameters must always be separated by commas (white space makes no difference);</li> <li>we always need a <strong>;</strong> after each command.</li> <li>It doesn’t matter if you have a space or a paragraph between these symbols, but they must be there!</li> </ul> <p>If you’re curious and want to try other ways before going ahead, take a look at the following commands:</p> <div class="et-box et-shadow"> <div class="et-box-content">line()<br/> point()<br/> rect()<br/> triangle()</div></div> <p>You will find instructions for each one on the Processing <a href="https://processing.org/reference/" target="_blank">reference web site</a>.</p> <h2 class="summary-item" id="visualizing-accuracy-vs-synthesis"><a href="#visualizing-accuracy-vs-synthesis">Visualizing: accuracy vs. synthesis</a></h2> <p>To see the density of each city here, we will use a straightforward technique: representing the total number of inhabitants as points within the city area. This feature offers a less precise notion than a bar chart would, for example – you can not tell the area or the population of the cities just by looking at the pictures below:</p> <p style="text-align: center;"><img alt="Processing" class="aligncenter wp-image-354" decoding="async" height="216" sizes="(max-width: 318px) 100vw, 318px" src="https://geojournalism.org/wp-content/uploads/2013/08/processing03.png" srcset="https://geojournalism.org/wp-content/uploads/2013/08/processing03.png 398w, https://geojournalism.org/wp-content/uploads/2013/08/processing03-300x203.png 300w" width="318"/></p> <p>Our intention, however, is simply to present a direct visual and intuitive comparison of the theme: more points, more people; larger square, the larger area. In choosing one or another way of visualizing, always think about the balance between these two variables and analyze how they can work best according to the purpose of your chart.</p> <h2 class="summary-item" id="formatting-data"><a href="#formatting-data">Formatting data</a></h2> <p>We will use data from the 2013 <a href="https://www.demographia.com/db-worldua.pdf" target="_blank">Demographia World Urban Areas</a> to draw a graph ranking the 10 most populated cities in the world (table 1).</p> <p>A simple and practical data format that can be read in Processing is the <a href="https://en.wikipedia.org/wiki/Tab-separated_values" target="_blank">tsv</a> (tab-separated values). Basically, it is a text format that works like a table, with values ​​separated by <i>tabs</i> instead of cells.</p> <p style="text-align: center;"><img alt="Processing" class="aligncenter wp-image-355" decoding="async" height="194" loading="lazy" sizes="auto, (max-width: 717px) 100vw, 717px" src="https://geojournalism.org/wp-content/uploads/2013/08/processing04-1024x277.png" srcset="https://geojournalism.org/wp-content/uploads/2013/08/processing04-1024x277.png 1024w, https://geojournalism.org/wp-content/uploads/2013/08/processing04-300x81.png 300w" width="717"/></p> <p>Transferring data from a PDF file into a table is not always an easy task, since the breaks hardly follow the format of the cells that we need.</p> <p>In the image above, we will only need the columns <i>Urban Area</i>, <i>Population Estimate</i> e <i>Land Area km2</i>. You can download the formatted file <a href="https://geojournalism.org/wp-content/uploads/2013/08/cidades.tsv">here</a> or try to create your own:</p> <ul> <li>Windows: Use <i>Notepad</i> and save the file as “cidades.tsv”.</li> <li>Mac: Use the <i>Text Edit</i>. Press <i>command + shift + T</i> to transform the file into unformatted text. When you save, select <i>Unicode (UTF-8)</i> in the <i>encoding</i> option.</li> </ul> <h2 class="summary-item" id="loading-data"><a href="#loading-data">Loading data</a></h2> <p>Drag the file to the Processing window and you will see the message <i>One file added to the sketch</i>. This just created a copy of cidades.tsv in the folder that Processing created for you. To read it in the script, add the following code and run:</p> <div class="et-box et-shadow"> <div class="et-box-content">size(1200, 200);<br/> Table tabela = loadTable(“cidades.tsv”, “header”);<br/> for(int i = 0;<br/> i &lt; tabela.getRowCount();<br/> i = i + 1){<br/> TableRow linha = tabela.getRow(i);<br/> rect(120*i, 50, linha.getInt(“área”), linha.getInt(“área”));<br/> }</div></div> <h2 class="summary-item" id="viewing-area"><a href="#viewing-area">Viewing area</a></h2> <p>Ok, what is this code doing? Let’s understand line by line:</p> <div class="et-box et-shadow"> <div class="et-box-content">size(1200, 200);<br/> // Loading the file into a table. “header” means that the first line of the file should be understood as a header.<br/> Table tabela = loadTable(“cidades.tsv”, “header”);<br/> // Creates an action that will be repeated several times,…<br/></div></div> <div class="et-box et-shadow"> <div class="et-box-content">for (int i = 0; //…from a counter that starts at zero,… i &lt; tabela.getRowCount(); // … ends on table size … i = i + 1){ // … and it increases one by one. // In short, it is as if the program started counting “0, 1, 2, 3…” up to “10”, which is the number of rows in our table. For each time it counts, it performs the action below:</div></div> <div class="et-box et-shadow"> <div class="et-box-content">// Select the row corresponding to the count (i) TableRow linha = tabela.getRow(i); <p>// It draws a rectangle at position y 50 and x according to the formula “120 times counting”.</p> <p>// It means that, in the sequence, coordinate x will be: 0, 120, 240, 360 … to 1080.</p> <p>// As our count of 10 elements starts at 0, it goes up to 9! rect(120*i, 50, It defines width and height of each rectangle the value that is read in the “area” linha.getInt(“área”), linha.getInt(“área”)); }</p></div></div> <p></p><p>In the resulting image, we can’t see the whole rectangles, because the numbers ​​of the area we have for each city are very large:</p> <p><img alt="Processing" class="aligncenter wp-image-356" decoding="async" height="157" loading="lazy" sizes="auto, (max-width: 614px) 100vw, 614px" src="https://geojournalism.org/wp-content/uploads/2013/08/processing05-1024x261.png" srcset="https://geojournalism.org/wp-content/uploads/2013/08/processing05-1024x261.png 1024w, https://geojournalism.org/wp-content/uploads/2013/08/processing05-300x76.png 300w, https://geojournalism.org/wp-content/uploads/2013/08/processing05-1160x296.png 1160w" width="614"/></p> <p>A good solution to solve this is to change the command of the rectangle to:</p> <div class="et-box et-shadow"> <div class="et-box-content">rect(120*i, 50,<br/> sqrt(linha.getInt(“área”)), sqrt(linha.getInt(“área”)));</div></div> <p>The <i>sqrt</i> function calculates the square root of a value. For us, it’s a quick and useful way to reduce the sizes:</p> <p><img alt="Processing" class="aligncenter wp-image-357" decoding="async" height="157" loading="lazy" sizes="auto, (max-width: 614px) 100vw, 614px" src="https://geojournalism.org/wp-content/uploads/2013/08/processing06-1024x261.png" srcset="https://geojournalism.org/wp-content/uploads/2013/08/processing06-1024x261.png 1024w, https://geojournalism.org/wp-content/uploads/2013/08/processing06-300x76.png 300w, https://geojournalism.org/wp-content/uploads/2013/08/processing06-1160x296.png 1160w" width="614"/></p> <p>Additionally, this patch makes the <i>areas</i>of rectangles proportional to the values ​​that we are representing, not their <i>height</i> and <i>width</i>. This is necessary to avoid distortions when we use a figure like a circle or a rectangle. If we only had to divide the area value by 100, for example, we would have a disproportionate image:</p> <p></p><div class="et-box et-shadow"> <div class="et-box-content">rect(120*i, 50,<br/> linha.getInt(“área”)/100, linha.getInt(“área”)/100);</div></div><br/> <img alt="Processing" class="aligncenter wp-image-358" decoding="async" height="157" loading="lazy" sizes="auto, (max-width: 614px) 100vw, 614px" src="https://geojournalism.org/wp-content/uploads/2013/08/processing07-1024x261.png" srcset="https://geojournalism.org/wp-content/uploads/2013/08/processing07-1024x261.png 1024w, https://geojournalism.org/wp-content/uploads/2013/08/processing07-300x76.png 300w, https://geojournalism.org/wp-content/uploads/2013/08/processing07-1160x296.png 1160w" width="614"/><p></p> <p>The picture above makes the cities look much different in area than they really are, a distortion caused by the confusion between <i>linear dimension</i> (height and width) and size<i>(square area)</i>.</p> <h2 class="summary-item" id="simplifying-the-code"><a href="#simplifying-the-code">Simplifying the code</a></h2> <p>Before leaving for the second data point of our visualization, the population of each city, we will try to simplify some things to make our algorithm more intelligible:</p> <div class="et-box et-shadow"> <div class="et-box-content">size(1200, 200); In the case of the side of the rectangle, Table tabela = loadTable(“cidades.tsv”, “header”);<br/> for(int i = 0;<br/> i &lt; tabela.getRowCount();<br/> i = i + 1){<br/> TableRow linha = tabela.getRow(i); int posX = 120*i;<br/> int posY = 50;<br/> float lado = sqrt(linha.getInt(“área”));<br/> rect(posX, posY, lado, lado);<br/> }<br/></div></div> <p>If you run the code above, you will see that the visual result does not change at all. What we did was just write the same commands in a different way: instead of calculating everything inside the function <i>rect()</i>, we defined three<i>variables</i> variables with values ​​and then used them in the drawing of the rectangle:</p> <div class="et-box et-shadow"> <div class="et-box-content">int //Specifies the creation of a variable with the same number<br/> posX <p>// Variable name, invented so I remember what it refers to<br/> = 120*i;</p> <p>// it assigns the value “120 times i” to my variable<br/></p></div></div> <p></p><p><i>float</i> means that this variable can store a fractional number, since we do not know if the result of the formula “root area” will be a whole number.</p> <h2 class="summary-item" id="viewing-the-population"><a href="#viewing-the-population">Viewing the population</a></h2> <p>As mentioned earlier, the idea here is to represent the total number of inhabitants of each city as points within the areas that we have already designed. Below the line with the command <i>rect()</i>, add the following code:</p> <div class="et-box et-shadow"> <div class="et-box-content">Contenfor(int j = 0;<br/> j &lt; linha.getInt(“população”);<br/> j = j + 1){<br/> point(posX,posY);<br/> }<br/></div></div> <p>Be aware to write this command before the last key <i>}</i> that you already had in the document. Being inside this key, Processing will understand that this command must be repeated every time it is reading a table row – which is what we want, since we are going to draw the population for each city. The structure here is similar to the previous one:</p> <div class="et-box et-shadow"> <div class="et-box-content">// From a counter “j”…<br/> for(int j = 0; <p>//… starts at zero…<br/> j &lt; linha.getInt(“população”);</p> <p>//..it goes to the read number</p> <p>//in the “population” column, of each line…<br/> j = j + 1){ // …and it increases one by one…</p> <p>//…draw a point.<br/> point(posX,posY);<br/> }<br/></p></div></div> <p></p><p>If you try to run this code, it is likely that your computer will take a long time – if not stall. This is because the number of repetitions that we are using is very large: 37,239,000 points only for the city of Tokyo! To solve this, change the second line of this section to:</p> <div class="et-box et-shadow"> <div class="et-box-content">j &lt; linha.getInt(“população”)/5000;</div></div> <p>With this, we draw 1 point for every 5,000 inhabitants (not 1 to 1).</p> <p>We still need to correct one detail: if you study carefully the command <i>point()</i>, you’ll notice that all points of each city are designed in the same place, one above another: on the x and y coordinate that corresponds to the upper left corner of the square. Change this line to:</p> <div class="et-box et-shadow"> <div class="et-box-content">point( random(posX, posX + lado),<br/> random(posY, posY + lado));<br/></div></div> <p>The command <i>random()</i> results in a random number, drawn from a minimum and a maximum value. In our case, the result is:</p> <div class="et-box et-shadow"> <div class="et-box-content">point( random number between the x coordinate of the rectangle and the same coordinate + o lado,<br/> random number between (the y coordinate of the rectangle and the same coordinate + o lado);<br/></div></div> <p>Run the program and we will have our final result:</p> <p><img alt="Processing" class="aligncenter wp-image-359" decoding="async" height="157" loading="lazy" sizes="auto, (max-width: 614px) 100vw, 614px" src="https://geojournalism.org/wp-content/uploads/2013/08/processing08-1024x261.png" srcset="https://geojournalism.org/wp-content/uploads/2013/08/processing08-1024x261.png 1024w, https://geojournalism.org/wp-content/uploads/2013/08/processing08-300x76.png 300w, https://geojournalism.org/wp-content/uploads/2013/08/processing08-1160x296.png 1160w" width="614"/></p> <p>In the end, comparisons are obvious: Tokyo and New York are the cities with the largest area, but their population density is much lower than cities like Manila and Karachi.</p> <p>If you want to save the file that you created as an image to use in another program, simply add one last line:</p> <div class="et-box et-shadow"> <div class="et-box-content">save(“cidades.jpg”);</div></div> <p>To save in another format such as <i>tif</i> or <i>png</i>, , simply change the file extension in the code above.</p> <h2 class="summary-item" id="conclusion"><a href="#conclusion">Conclusion</a></h2> <p>Programming for the first time can sound like an unfriendly task. However, as you start to understand the logic behind the commands, to deal with several languages ​​is just a matter of learning different syntaxes, some are more similar than others. It is similar to speaking several languages​​.</p> <p>Even though the work is hard in the beginning, you will see that the advantages are worth it: in the case of the file that we used, for example, you can simply change the .tsv data to generate a different version of the view, without having to make manual adjustments to the image. In addition, programming should be understood more as a language than as a tool: instead of pre-defined resources, you can build the graph how you want it to better fit your data. The possibilities are endless.</p> <p>Take a look at this example file and try to change a few parameters to customize it: background color, size, space between areas etc. From there, explore the Processing reference page and try to redo this example using another type of visualization, such as bars or lines.</p> <div class="author-shortcodes"> <div class="author-inner"> <div class="author-image"> <img alt="" src="https://si0.twimg.com/profile_images/1298845056/gabriel_2011.jpg"/> <div class="author-overlay"></div> </div> <!-- .author-image --> <div class="author-info"> I’m a graphic designer in love with numbers. <p>I am currently enrolled in the Master of Fine Arts – Design &amp; Technology program, at Parsons The New School for Design. My last job was as a senior designer for the Innovation in Technology and User Experience team at Itaú, the largest private bank in Brazil. For the past 6 years, I have been working with information and graphic design, mainly in magazines, and have won some awards.</p> <p>I have been invited as a speaker for some major events, including Campus Party, World Information Architecture Day and Pixel Show, the Brazilian largest conference on art and creativity. I also ran workshops on data visualization using the Processing programming language. </p></div> <!-- .author-info --> </div> <!-- .author-inner --> </div> .author-shortcodes <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/><p></p> <p>The post <a href="https://geojournalism.org/2013/08/portugues-as-cidades-mais-populosas-do-mundo/">Visualizing data with Processing</a> appeared first on <a href="https://geojournalism.org">geojournalism.org</a>.</p> 351