Creating living infographics by combining PHP
with Processing.js
For the last tutorial in this series we are going to look at an example of integrating PHP with Processing.js to create a dynamic infographic. We will keep it very basic, but we'll create something that could be used in the “real world.”
A SPECIAL NOTE TO RSS READERS:
Due to the complex nature of this tutorial (mainly the examples) you have to go to the post to see the rest.
Note: As mentioned in the introduction of this series (though included as an addendum), IE support is currently not included with these tutorials.
Post Time
For this example I'm going to make a small infographic that shows the most common times at which posts are published. So first I need to get my raw data, the publish time for each post I've made on this site. In Figure 5.1 – using Habari's templating system – I create an array that contains all of the publish times.
Note: There is most certainly a better way to construct all of the PHP code in the examples that follow. I am not a programmer – I just use PHP to do what I want to do (for lack of a better way to say it).
- public function add_template_vars()
- {
- $this->assign('di_archives', Posts::get(array('content_type' => 'entry', 'status' => Post::status('published'), 'limit'=>1000)));
- parent::add_template_vars();
- }
Setting the PHP variable from which to build the array; this code must go in theme.php. (Note: This is particular method is specific to Habari).
Download Source processing-f5.1.txt
Separating and Categorizing
For the sake of our infographic we need to know the number of posts that occur in each hour and the average number for each hour. In Figure 2 we take the collection of post times in Figure 1 and sort them quantitatively by hour. Then at the end we also calculate an average.
- $di_post_hour = array(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0);
- foreach ($di_archives as $di_archive)
- {
- $di_post_time = $di_archive->pubdate_timedata;
- $di_post_time_hour = substr($di_post_time, 0, 2);
- $di_post_time_min = substr($di_post_time, 2, 2);
- if ($di_post_time_hour == "00") $di_post_hour[0]++;
- if ($di_post_time_hour == "01") $di_post_hour[1]++;
- if ($di_post_time_hour == "02") $di_post_hour[2]++;
- if ($di_post_time_hour == "03") $di_post_hour[3]++;
- if ($di_post_time_hour == "04") $di_post_hour[4]++;
- if ($di_post_time_hour == "05") $di_post_hour[5]++;
- if ($di_post_time_hour == "06") $di_post_hour[6]++;
- if ($di_post_time_hour == "07") $di_post_hour[7]++;
- if ($di_post_time_hour == "08") $di_post_hour[8]++;
- if ($di_post_time_hour == "09") $di_post_hour[9]++;
- if ($di_post_time_hour == "10") $di_post_hour[10]++;
- if ($di_post_time_hour == "11") $di_post_hour[11]++;
- if ($di_post_time_hour == "12") $di_post_hour[12]++;
- if ($di_post_time_hour == "13") $di_post_hour[13]++;
- if ($di_post_time_hour == "14") $di_post_hour[14]++;
- if ($di_post_time_hour == "15") $di_post_hour[15]++;
- if ($di_post_time_hour == "16") $di_post_hour[16]++;
- if ($di_post_time_hour == "17") $di_post_hour[17]++;
- if ($di_post_time_hour == "18") $di_post_hour[18]++;
- if ($di_post_time_hour == "19") $di_post_hour[19]++;
- if ($di_post_time_hour == "20") $di_post_hour[20]++;
- if ($di_post_time_hour == "21") $di_post_hour[21]++;
- if ($di_post_time_hour == "22") $di_post_hour[22]++;
- if ($di_post_time_hour == "23") $di_post_hour[23]++;
- }
- $di_post_sumtotal = array_sum($di_post_hour);
- $di_post_average_hour = round($di_post_sumtotal / 24, 0);
- foreach ($di_post_hour as $i=>$value)
- {
- $di_post_hour[$i] = round($di_post_hour[$i] / $di_post_sumtotal, 2) * 100;
- }
- $di_post_hours = implode(",", $di_post_hour);
Building the PHP array (Note: This is particular method is specific to Habari).
Download Source processing-f5.2.txt
Visualize It
Now we have a working array that we can pass to Processing.js to create the visualization (Figure 5.3).
- <!DOCTYPE html>
- <html>
- <head>
- <title>Processing.js Examples</title>
- <script type="text/javascript" href="/js/processing.js"></script>
- <!--[if IE]>
- <script type="text/javascript" href="/path/to/excanvas.compiled.js">
- <![endif]-->
- <script type="text/javascript" src="/js/init.js"></script>
- </head>
- <body>
- <div class="example">
- <script type="application/processing">
- // Setup canvas
- void setup()
- {
- size(564,564);
- background(255);
- }
- // Draw elements
- void draw()
- {
- int diameter = 84;
- int pie_scale = 16;
- // Draw the gray background (average time) pie slices
- fill(#cdcdce);
- stroke(255);
- strokeWeight(1);
- int bg_pie_slice_length = <?php echo $di_post_average_hour; ?>;
- float last_angle = radians(0);
- for (int i=0; i<24; i++)
- {
- arc(282, 282, pie_scale*bg_pie_slice_length, pie_scale*bg_pie_slice_length, last_angle, last_angle+radians(14))
- last_angle += radians(15);
- }
- fill(#4dbceb);
- stroke(255);
- strokeWeight(1);
- int[] the_post_hour = {<?php echo $di_post_hours; ?>};
- float last_angle = radians(180);
- for (int i=0; i<24; i++)
- {
- arc(282, 282, diameter+(pie_scale*the_post_hour[i]), diameter+(pie_scale*the_post_hour[i]), last_angle, last_angle+radians(14))
- last_angle += radians(15);
- }
- fill(255);
- ellipse(282, 282, 84, 84);
- exit();
- }
- </script>
- <canvas width="564" height="564"></canvas>
- </div>
- </body>
- </html>
Inserting PHP output into Processing.js.
Download Source processing-f5.3.txt
To perhaps state the obvious, the beauty of mixing PHP with Processing.js is that this infographic will change everytime I publish a post. It's a “living” infographic that does not need continual maintenance.
The (Premature) End
This tutorial brings us to a close for the working examples on Processing.js. In the final installment I'll provide links to more resources for further learning.