Posted on by & filed under Content - Highlights and Reviews, Programming & Development.

A guest blog post by Tom Barker, a software engineer, an engineering manager, a professor and an author who can be reached at @tomjbarker.

In my last few posts I explored bringing data visualization to the Web with JavaScript libraries. I covered D3 and gave a taste of the depth that it offers, and I explored InfoVis and showed how to create different types of charts that InfoVis supports. In this article we’ll look at Processing.js as an option for crafting data visualizations for the web.

Processing.js is an open source project created in 2008 by John Resig available for download http://processingjs.org/download/ and for contribution https://github.com/processing-js/processing-js/.

Processing.js takes native Processing code and converts it into JavaScript to render the sketch (sketches are what Processing developers call their applications) onto a canvas element on the page. That in itself would be interesting, but since the sketch is JavaScript running on the page, the objects in the JavaScript global namespace are visible to the Processing code, and functions in the sketch are also exposed to JavaScript via the Processing instance. This opens up what you can do with Processing.js from just presentation to interactive data visualizations.

This is great, but what is Processing? Processing is both a language and a programming environment. Syntactically it is like Java (because it is Java-based) but with a simplified drawing API. Ben Fry and Casey Reas created Processing in 2001. You can download the latest build of Processing at http://processing.org/download/.

At a high level:

  • All Processing programs are called sketches, since the philosophy of Processing is to sketch with code.
  • Processing is a strictly typed Java-based language.
  • All sketches have a setup()and a draw() function. The setup() function initializes application state and the draw() function is like a game loop – it iterates and redraws the stage in each pass.

Crafting a full-fledged Processing tutorial is beyond the scope of this particular article, but if you are interested in exploring the language, the online reference can be found at http://processing.org/reference/.

Loading an External Sketch

Let’s explore loading and rendering an external sketch with Processing.js. First we’ll create a sketch that renders a bar chart based upon an array of integers.

You would create the array the same way that you would in Java. In the setup() function you would set the size and background color of the stage.

In the draw() function we will call the drawBarChart() function that draws rectangles for the values in each index.

Running the above code in the Processing environment generates this chart:

fig1

You can embed this bar chart in an HTML page by including the Processing.js library and creating a Canvas tag with the data-processing-sources attribute pointing to the Processing file – in this case article_example.pde.

This is great, but it is essentially the same as embedding a static image, just more costly. What if you wanted to access page level objects from Processing?

You can create a global variable in your JavaScript and reference it from your Processing code. Instead of passing the myNumbers Processing array, you can reference the global variable that we created in JavaScript, like so:

If you run your updated Processing code in the Processing environment, you will get an error because Processing has no idea what vis_data is. But if you run the page in your browser you can see the chart below being rendered:

fig2

This is interesting and opens up the possibilities of what you can start to do. Think updating data in real time. But now what if you wanted to call Processing functions from JavaScript?

To communicate with the Processing code from JavaScript you must first create a reference to the sketch. To do this you call Processing.getInstanceById and pass in the id of the Canvas tag that holds the sketch.

The important thing here is that the Processing instance is only accessible once JavaScript runs and executes the sketch in the Canvas. If you try to access the Process instance before it is available, JavaScript won’t complain, but you will get a TypeError if you try to call functions from your undefined Processing reference.

In order to be sure that you are only communicating with the Processing instance after it is ready, you can wrap your JavaScript code in a function that we will call init() and call this init() function from the Processing code.

In the init() function we will check to make sure that the processingInstance variable hasn’t already been instantiated. We do this because we’re going to call the init() function from the draw() function.

Below we just change our Processing code to call the JavaScript init() function in from the draw() function.

Pros and Cons

Processing.js is an efficient and painless way to bring your sketches to the web, and it allows you to add a level of interactivity to the experience, from taking user input to loading data at run time.

If you aren’t already using Processing, it may be inefficient to learn Processing just to model your data. The level of effort that goes into creating data visualizations with Processing is equivalent to the level of effort using D3. Personally, I prefer D3 because it uses SVG, which means that all of the shapes in the visualization are part of the DOM, so you can style them with CSS instead of explicitly in the code.

For more details about data visualization, see the resources below from Safari Books Online.

Not a subscriber? Sign up for a free trial.

Safari Books Online has the content you need

Pro Data Visualization using R and JavaScript by Tom Barker, makes the R language approachable, and promotes the idea of data gathering and analysis. You’ll see how to use R to interrogate and analyze your data, and then use the D3 JavaScript library to format and display that data in an elegant, informative, and interactive way. You will learn how to gather data effectively, and also how to understand the philosophy and implementation of each type of chart, so as to be able to represent the results visually.
Developing a D3.js Edge is aimed at intermediate developers, so to get the most from this book you need to know some JavaScript, and you should have experience creating graphics using D3. Many examples created in the real world with D3, can best be described as “spaghetti code.” So, if you are interested in using D3 in a reusable and modular way, which is of course in line with modern development practices, then this book is for you!
Getting Started with D3 teaches you how to create beautiful, interactive, browser-based data visualizations with the D3 JavaScript library. This hands-on book shows you how to use a combination of JavaScript and SVG to build everything from simple bar charts to complex infographics. You’ll learn how to use basic D3 tools by building visualizations based on real data from the New York Metropolitan Transit Authority.
Visual Storytelling with D3: An Introduction to Data Visualization in JavaScript provides readers with a strong framework of principles for making well-conceived and well-crafted infographics, as well as detailed and practical instructions for how to really wield D3, the best tool for making web infographics available. An extended example is used in the book to explain how to put theory to practical use.
Pro JavaScript Performance: Monitoring and Visualization by Tom Barker, gives you the tools to observe and track the performance of your web applications over time from multiple perspectives, so that you are always aware of, and can fix, all aspects of your performance.

About the author

TomBarker_biosmall Tom Barker is a software engineer, an engineering manager, a professor and an author. Currently he is the Senior Manager of Web Development at Comcast, and an Adjunct Professor at Philadelphia University. He has authored Pro JavaScript Performance: Monitoring and Visualization, Pro Data Visualization with R and JavaScript, and Technical Management: A Primer, and can be reached at @tomjbarker.

Tags: D3, Data Visualization, java, Javascript, Processing, Processing.js,

Comments are closed.