Combining Illustrator and JavaScript for Data Visualization

The ability to visualize data is an important skill for designers. In data visualization, it is common to map particular aspects of data to specific parameters in graphics. Code can act as an efficient means of mapping the data to those parameters, which could save designers from the meticulous task of individually setting values for a large number of graphic elements. In my first effort to use code as a data visualization tool, I mapped annual precipitation and average temperature data from Colorado between 1917 and 2016 to the diameter and color (respectively) of a grid of circles. I used this for a 24x36 printed poster. To do so, I used Adobe ExtendScript Toolkit to combine JavaScript with Illustrator.

What is Adobe ExtendScript Toolkit?

ExtendScript Toolkit is a scripting IDE that pairs with Adobe Creative Suite products. It may not automatically appear as an available app in Creative Cloud, but it can be downloaded from https://www.adobe.com/products/extendscript-toolkit.html

ExtendScript allows you to use JavaScript to reference and manipulate tools and elements in Adobe Creative Suite products.

My First Steps:

I started by following this tutorial to get started with ExtendScript Toolkit. I then found data for annual precipitation and average temperatures in Colorado using this tool from the National Centers for Environmental Information. This allowed me to refine my dataset and retrieve it in XML format. I saved separate XML files for precipitation and temperatures to the folder in which I saved my first ExtendScript Toolkit file.

The Code:

The JavaScript and XML for this project can be seen here. I tried to be thorough in commenting my code, so I hope it is not too difficult to follow. The code begins by connecting with a document (24"x36" for print) that I have open in Illustrator. It follows by setting some global variables like the inside dimensions and margins of the poster. Then I call a function to load the data from each of my two XML files (the functions are at the bottom of the code).

Once I have access to all of the data points (there are 100 in each of my XML files), I start a for loop with another for loop nested within it (the nested loop runs 10 times each of the 10 times the primary loop runs). Almost all of the work is done within these loops. I use them to move through each location in my 10x10 grid of circles, retrieve each value from my XML files, and map those values to the size and color of each circle in the grid.

So What?

By pairing JavaScript with Illustrator, I managed to efficiently and accurately map a large dataset to graphic parameters. Code can act as an extremely powerful tool in data visualization, especially considering the fact that large amounts of data can be accessed in code-friendly formats like XML files. I would strongly encourage any designer to consider learning this approach. It is useful in itself, and it is never a bad idea to improve your coding skills.

I hope that this explanation was helpful, and if you have any questions about anything you think I could answer, please respond to this post. I will do my best to be helpful.