In my younger years, data was boring. Querying a database was something the mathematicians did using MySQL. I was a designer and my focus was on engaging users emotionally. When people’s faces lit up because of my designs, it wasn’t because I was using real data, or Lorem Ipsum, but rather because the layout and colors were appealing. But along came visual data, and well… things changed. Data was now being used visually or artistically, and computations became a driving force behind design. A vortex of technology and design grew stronger and began sucking a few of us in.

If you had asked me some years ago if I liked data, I would have laughed at the question. It wasn’t long ago that I began to realize the value of data. It became important as I studied user experiences and made data-driven decisions to pursue well designed solutions. But only recently have I became enthralled with the complete merge of data and design. Only recently have I come to be a computational designer. And with this came a desire for more data.

With the advent of WordPress REST API being fully integrated into WordPress 4.7, 28% of the web’s public data opened up for experimentation. I now had access to grab simple data points from a variety of sites. But, as a designer, I wasn’t quite sure how to actually use this API. This post is my exploration into the world of APIs and simple beginnings.

I was encouraged to take a look at Processing, a flexible open source software geared toward the world of visual arts. I watched a few videos and followed a couple tutorials to get acquainted with the interface and syntax. I had never coded in Java, so I spent some time on StackOverflow picking up what advice I could for any specific challenge I ran across.

 

Connecting to WordPress via the API

My first order was to connect to a WordPress site using the API. I quickly ran into a problem.

Processing error messages are fantastic!

Thanks to the clarity of Processing’s error messages, I realized the JSON file I was attempting to pull was actually an array, not an object. I swapped out MARKDOWN_HASHa525312b3b8bb848d4fa65a42aaac215MARKDOWN_HASH with MARKDOWN_HASH3b1fd82b6c439f7d66e88c053a98e445MARKDOWN_HASH and my connection was a success.

As you may have noticed, my MARKDOWN_HASH3b1fd82b6c439f7d66e88c053a98e445MARKDOWN_HASH is pulling the posts from the https://make.wordpress.org/accessibility site. You can learn more about the data points of the API from the API documentation. Needless to say, the public data… is public. 🙂

 

Looping through the objects

My next goal was to run through the data and print a piece of each post in the console. To do this, I needed to loop through each object and pick something to print to console. After looking at the JSON file, I thought pulling the MARKDOWN_HASH599dcce2998a6b40b1e38e8c6006cb0aMARKDOWN_HASH value of the post would be simple. It actually took some time, but I found the MARKDOWN_HASH9a499caceec56c05b0f6d0b9dc864f45MARKDOWN_HASH worked well.

Looks like all the posts were just that… posts. I know what you’re thinking, there’s some code and some data – looks pretty boring to me. When does this get exciting? Because of my lack of api experience, I needed to start small. Making this happen was actually quite exciting. I managed to connect to a WordPress site through the API and cycle through the default most recent 10 posts and print out their MARKDOWN_HASH599dcce2998a6b40b1e38e8c6006cb0aMARKDOWN_HASH. It’s not like mixing colors into something beautiful, but I was preparing my building blocks for something a little better.

 

Going deeper into the object

I wanted to pull something a bit more exciting… something like the title of each post. But looking at the JSON format, for a simple designer like myself, this was starting to get tricky because the title was not on the top level, but was located inside another object further in.
[
  {
   "title": {"rendered": "Testing form functionality with different assistive technology"},

 
How was I supposed to get that title? Remember how I mentioned that I spent some time on StackOverflow? Well a combination between that and Processing.org documentation helped me figure out a primitive way to accomplish this. I’m not a developer, so there’s a good chance my code could be improved. If you have a better way, please leave a comment below.

At least there’s different text showing now, right?

 

Time for sketching

Processing’s window that runs the code visually is called a sketchbook. So when you run your code, in a sense, it’s a sketch. My next choice was to figure out which piece of the data I wanted to show visually. Why not start with the most basic, the number of posts. Maybe I could draw a circle for the number of posts in the array. To do this I needed to learn how to draw circles in Processing. The tutorial I linked to there was very helpful, but my first go at it wasn’t quite what I was expecting.

I thought that while in the MARKDOWN_HASH9a499caceec56c05b0f6d0b9dc864f45MARKDOWN_HASH, drawing an ellipse would show me 10 circles in the sketchbook, but I only saw one. I believe it was because the circles were all being stacked one upon the other in the same coordinates. With a bit of positioning fixes, I got it corrected and displayed a circle for each post along an x-axis.

Now we’re getting somewhere! I’m seeing data represented visually. Sure it’s only circles, but they’re blue and spaced evenly across an x-axis! Let’s add more data points. How about adding a line coming off each post (circle), the length of which represents the amount of words for each. I agree my request for the Processing software is quite rudimentary, but this is a first attempt into what we can do with Processing and the WordPress API.

Well after some more time, and additional lines of code, I got something that looked quite nice. I managed to draw all the elements and present a visual of the date I was pulling from the API.

 

Success! We just pulled some data from a WordPress site using the WP REST API and designed a bit of it visually. It’s not much, and rather simple. But in the span of about four hours I learned how to connect to the WordPress API, use the software Processing, and display data in an visual arts sort of way. I’m a designer with front-end development skills whose never messed a lot with an API. I did it, and I encourage you to give it a try. You have data points of over 28% of the web at your disposal. Want to graph out how many Vogue articles talk about Trump? Want to design a visual representation of which authors on TechCrunch wrote the most about iOS? Want to display the trend of stock acronyms mentioned on Bloomberg Professional? Go out and do it. Share an insight you have visually with the world.

 

Afterthoughts

Of course there’s more I’d like to do here. I want to animate the lines when the sketch renders. I’d like to show the word count when you hover over a line. Maybe show the date of the post below the dot. Processing, I believe, allows for all of this. There’s so much we can do, and the WordPress REST API offers us a great opportunity to learn new things, explore new forms of visual data, and improve our coding skills.

View the code on Github