Visualizing China’s Energy Investments Around the Globe

There’s little doubt that China has become a growing dominant influence in global financial initiatives. Since 2000, China has provided an upwards of $160 billion in development finance to the energy sector for foreign governments across the globe. To understand the scope and breadth of these investments, we worked with Boston University’s Global Economic Governance Initiative to create an interactive visualization–The China Global Energy Database–that allows you to explore China’s global investments.

In approaching this project, we were provided a dataset of finance projects detailed with many attributes, some of which included where the project was financed, what year, who financed it, and what type of energy source and sub sector of the project’s objective. With these attributes alone, there are many ways to view this data such as trends for investments for a given country or trends for specific energy source. You may want to see how energy sources vary by region in any given year. We created cross-linked visualizations to allow you to explore each of these views and how they relate to one another.

Read a detailed policy brief about this project or go and explore the China Global Energy Database.

Several views from this project:

China's Global Investments

Total global investments between 2000 and 2016.

Energy sub-sector trends in 2016.

Energy sub-sector trends in 2016.

Energy sub-sector trends by region between 2000 and 2016.

Energy sub-sector trends by region between 2000 and 2016.

Energy source trends by region in 2016.

Energy source trends by region in 2016.

Executive Order data visualization tool to shed light on every documented order signed by a US president

Anyone watching the news lately has come across often heated discussions about executive orders. But what exactly are executive orders and what do they entail? More importantly, given the polarizing political spectrum as of late, how do executive orders of one president differ from another? In researching the answer to these questions, we came across several notable sources that would list out executive orders, such as the American Presidency Project but we wanted to have a more comprehensive tool that would let us view the orders, their differences and have the ability to research them deeper. So we built a Presidential Executive Orders data visualization tool to navigate every documented executive order and compare the patterns between presidencies. This tool also allows you to search for specific words and their use in the orders, compare political party orders, year-by-year, and to read each order in its entirety.


What are Executive Orders?

Executive Orders are legal documents issued by U.S. Presidents during their time in office. They are used to clarify law, set priorities, and influence the workings of the Federal government. Although the use of executive orders has varied during the course of U.S. history, taken together they offer a glimpse into the priorities of different presidents and the changing affairs of the U.S. government.

Why are we doing this project?

Since executive orders and published presidential memoranda have the full force of law and can have wide-ranging impacts in the United States and abroad, it is important to be able to explore and understand them in a historical context. Until now there has been no easy way to do so. This tool enables journalists, policy makers, researchers and the public to explore executive orders and search for terms of interest. Orders are sized by length and can be sorted by president, year, or party affiliation. Clicking on an order shows the full order text as well keywords relevant to the text. From there you can search the text for the keywords or search for all orders containing that word.


Example of searching orders that contain ‘Environment’

How are we doing it?

This project includes all executive orders and executive order counts published as part of the American Presidency Project hosted at the University of California, Santa Barbara. It also includes all presidential memoranda since 2000 published in the Federal Register. Order keywords were extracted and ranked with the help of IBM Watson’s Alchemy Language service. President portraits are sourced from Wikimedia Commons.


Clicking on an order allows you to read each order in its entirety with relevant details such as presidential information helpful keywords to depict the contents of the order.

This project was made by Pitch Interactive, a data visualization studio whose aim is to facilitate the understand of complex issues and relationships through visual representations to help us better educate ourselves and make more informed decisions and judgements. For any questions, please email

Happy Holidata

The holidays are upon us! 2016 has been a busy year here at Pitch, but we’ve been getting into the spirit of the season as we make our annual holiday cards.

This year’s card features a snowflake that uses two data points in its generation: how long we’ve known the recipient and the air quality where we’re sending the card. It is unique to the person we sent it to, and no two snowflakes are alike.

After getting some inspiration from dozens of photos of snowflakes, we brainstormed about the different types of symmetry and shapes that would make our design. We then generated the snowflake with a script that draws a certain number of radial spikes based on how long we’ve known the person we were sending them to. Other parameters for the generation rely on random numbers, ensuring that each generated snowflake was completely unique.


After plugging in our recipients’ data we exported the generated snowflakes to our Axidraw, a pen plotter that can draw complicated designs with any pen you put in it. Each snowflake took anywhere from 5-10 minutes to draw, depending on its complexity. The color we chose for the snowflake depended on the air quality where it would be sent to:


Our little axidraw robot did a good job of drawing all of the complicated snowflake line paths, and we even used it to draw the addresses on the envelopes and the message on the back of the card.


We love that we get to share our art and designs with our wonderful friends and clients. Thank you to you all and we wish you a very, very happy holidata!


You can see all of the snowflakes we made in this animated snowstorm. The source is available on github as well.

Tilegrams: More Human Maps

About a month ago, while plotting demographic data on a US county map, we became frustrated. The data was about employment in the financial industry, and we expected to see Manhattan light up—but on our map, Manhattan was barely bigger than a freckle. Meanwhile, thinly populated rural counties (ahem, Lincoln County, Nevada) occupied vast swaths of screen space. Much of the West was visually over-represented, while urban areas were not represented enough. There’s an essential rural bias in geographic visualizations that we needed to overcome. The perils of this kind of mis-visualization were captured eloquently by Joshua Tauberer, who concluded that, “No map at all is better than a map that perpetuates injustice.” How could we make a more just map?

The classic data visualization solution to this problem is the cartogram—a map in which each region is resized according to some dataset—typically population. Vox explains their importance. Danny Dorling told their history. Typically, they are generated by distorting a geographic map, but the trouble is that even if they’re statistically correct, they just look a little…weird.

We began to hunt for a better fit—and one type of map quickly stood out. In the UK, cartograms recently underwent a resurgence (as documented by Kenneth Field and Andy Kirk), but these cartograms had an interesting visual twist. Rather than showing bulging, stretching boundary lines, they used hexagon tiles to show constituencies in the 2015 UK General Election. The uniformity of the grid made the geographic distortions of the cartogram more palatable. We knew that if we had one for U.S. counties, then we could solve our demographic data mapping problem. We began asking around.

But the answer—about whether anyone had ever made a county-level U.S. hexagonally-tiled cartogram—was negatory. So, without thinking too much about it, we began attempting to produce our own with professional map-making software. On the advice of Mike Bostock, we ran our dataset through ScapeToad; then we loaded the resulting GeoJSON into QGIS, applied a grid with MMQGIS, and converted it into TopoJSON with ogr2ogr, and so on… The results were gratifying, yet time-consuming. We wanted to streamline the process—to democratize the means of production!

We Have the Technology

The result of our work is Tilegrams, an authoring tool to produce these sorts of maps. We decided to build it because however awesome the cartogram algorithm, these maps still demand the careful eye of the designer/statistician, to verify that the map still bears a resemblance to the geographic shape it started with—while maintaining statistical accuracy.

Starting with Shawn Allen’s cartogram.js, and plenty of our own interpretation of the TopoJSON specification, our tool began life by ingesting any US state-level dataset, generating a cartogram and then sampling the output to produce a tiled map. Because these maps require so much human validation, we then implemented a handful of classic drawing tools: drag to move, marquee selection, plus some more specialized ones. Most importantly, we added a sidebar, informing the user of the statistical accuracy of each region’s surface area. (These tools are covered in more detail in the manual.)

We call these maps “tilegrams”—from “tiled cartograms”. We made our own US state map based on 2015 population (which you can download from the tool) and incorporated others that we saw and appreciated in the media: FiveThirtyEight’s electoral vote tilegram from their 2016 Election Forecast and NPR’s one-tile-per-state tilegram.

This is just a first step. The county-level US tilegram we set out to produce is still a mammoth effort away. (Our 50-state tilegram took a day to produce; how long would a 3,000-county tilegram take?) Our great hope is that news designers will be able to produce new tilegrams for interactive and print pieces, or use the ones we are sharing. And that developers will make open-source contributions to this fledgling effort. We want to share our progress now at this historic political moment, while demographic studies rule the news.

We are also grateful to Google News Lab for joining us in this crucial effort. Simon Rogers provides an excellent introduction to the tool, too.

Please do let us know (@pitchinc) if you use these tilegrams, or make your own.

Happy (socially just) map-making!

Flying through data views

How do you make a cinematic experience out of real-time dashboard data? If it’s bound to geographic locations, it can be graphically mapped onto a virtual 3D landscape, which you could fly over and through, as on a virtual helicopter tour. Or peer directly down onto it, as on a virtual satellite. And since we’re in a virtual universe, why not have a virtual aircraft that moves seamlessly between both modes?

These are the questions we were asking as we began brainstorming what would become Norfolk Southern PULSE, the large-scale data art installation we created for the lobby of the train company’s Atlanta offices. Our dataset consisted of train “movements”—when a given train passed a given station. On one hand, we knew that we wanted to provide a bird’s-eye “overview” (pun intended) for context—but that we’d also want to dive down to individual trains on the ground, to convey their physical momentum. And since this was a non-interactive installation, the movement of the virtual camera needed to feel natural as it glided around and hovered. We would need to automate our motion design, down to every camera rotation and movement.

The system we came up with was to model different camera “behaviors”. Each behavior models a dynamic camera movement around some point, whether it’s a fixed aerial location or an animation on the surface. A central controller, the same one in charge of fetching and rendering data, was responsible for assigning camera behaviors one at a time. A behavior has no knowledge of what came before, so its first responsibility is to transition smoothly from any possible position/rotation to its own holding pattern, which might be a standstill or some kind of continuous motion (like a revolving movement, for example).

Some Sample Code

We cooked up a small, open-source example, including the “Overhead” bird’s-eye view discussed above, plus another fixed “Landscape” behavior, and two dynamic ones: “Spin” and “Trail”. Check it out on GitHub and give it a spin. Fork it, build some new behaviors (or clean up our hasty implementation), and let us know!

In the sample code, each behavior is encapsulated as its own class in the behaviors/ directory, and each implements two handlers: begin(), which sets up the transition tween from the previous camera location/rotation, and animate(), which handles the frame-by-frame animation. The main work in each case is determining where the camera should head to (__toPosition) and what it should be looking at (__toLookAtPosition). The rest is fairly boilerplate: __storeFromPosition makes a note of where the camera is and what it’s looking at, and then all that remains is to kick off the tween in __beginAnimation.

The basic THREE.js scene is set up in World.js, which is also responsible for calling animate() on the current camera behavior. The buttons for switching behaviors are implemented as a simple React component called <Selector />.

Some Special Challenges

  • The camera is special among objects, since you need to manage not just its position, but the point in space to “look at”. These two points can move independently, but their timing must be well coordinated so that the camera doesn’t glance the wrong way at any point during the transition.
  • Dynamic camera rotation was an especially mind-bending problem. It was easy in the beginning to end up with a camera that was upside-down, or pointing out to space, or pointing upside-down into space! The globe turned out to be a grounding reference, however, once we realized that the camera’s “up” direction should always be parallel to its position vector, as the globe was positioned at the origin of the Euclidean space.
  • We used tweening functions to give a more physical feel to the motion, stopping well short of implementing any kind of Earth-like physics. That said, tweening the X, Y, and Z coordinates at the same rate can often feel stiff and unnatural to anyone who’s experienced gravity, or air travel. Rather than try to perfect a master global physics, we found that ad hoc solutions based on specific animation requirements were a sounder time investment.

This was a huge learning experience for us in the game-like realms of physics and motion design, but applied to data visualization. We were guided by a desire to present not just information but a bit of visual delight in a busy area, where workers take their brown bag lunches or casual meetings. Whatever story the data may tell, we hope to make the telling always feel smooth and unhurried.

Ricky Watts Does a Mural in our Oakland Office

2015 treated us well at Pitch. We worked on some amazing and challenging projects and built a cohesive team we shaped by working hard to define our values. We’ve also matured on so many levels. If there were a key word to define 2015 it would be “gratitude” and we have plenty to give.

ricky_portraitAbout our values, we believe that it’s crucial that you not only find time to do work  you are personally passionate about, but to also support others whose work moves you. With this in mind, we commissioned Ricky Watts, our favorite muralist, to paint an entire wall in our studio. We gave Ricky total free rein and asked only that he do whatever he wanted on the wall. To go crazy: He did just that. The work is an amazing example of allowing artists to have their creative autonomy. Sure, sometimes we need constraints, but even with constraints, artists need to be trusted. Our most successful projects are the ones where we’ve had creative autonomy and full trust from our clients.

Ricky created this mural in 3 days entirely freehand with spray cans. One of the most rewarding aspects about this work is that we get to experience it every day we come to work. Not only an amazing piece of creative inspiration, but the satisfaction knowing that we were able to support another artist to create this. Ricky detonated a rainbow for us. Thanks Ricky.

Ricky Watts mural


Out of the Office, On the Grid

otg-blog_tribune-towerotg-blog_webpagePitch put Oakland On the Grid Monday. By grid, we literally mean “On the Grid” (OTG), an international guide of designers’ neighborhoods. It’s an ongoing project by Hyperakt, a Brooklyn-based design agency, to help people “travel the world through the eyes of creatives”. We saw OTG as a chance to represent Oakland and gain a deeper knowledge of its unique attractive offerings. Also, the position comes with the title “Ambassador”. Hard to resist, no? Being an Ambassador comes with a few responsibilities. We had to select which neighborhoods to include in Oakland’s guide. Next, we asked creative agencies to represent each neighborhood. They have the role of curating spots and writing reviews. Finally, we picked one of the neighborhoods to curate. Loyalty trumped novelty and we chose our backyard, Downtown Oakland/Old Oakland. 

otg-blog_muralWe quickly filled our list with restaurants and bars, many from recent memory. (We tend to share lunch and happy hour more often than fitness and shopping dates.) To fill out the selection, we did some research online and through another handy guidebook, This is Oakland. From there, the physical “work” began.

We ate lunch out, took photos, met owners, sipped drinks and took more photos. We browsed, roamed and conversed. We awkwardly staged plates and discovered Adam’s knack for hand modeling. We devised a pitch (imagine!) and were up-front about our cause. And now, we’re excited to share our exploration with you.


You can peruse our section, along with dozens of other cities’ on the OTG site. Check back to see other Oakland entries soon!

Communication Arts’ Feature on Pitch

Communication Arts Design Annual 56 Features Pitch InteractiveWe’re super excited about the latest Communication Arts 56th Design Annual featuring our studio’s piece entitled Pitch Interactive the Art of Data. 

We anxiously awaited to see what CommArts’ take on our team would be after hanging out with us for a day in our studio in March 2015, so we applaud and appreciate how well they captured our culture and team dynamics. We are honored to share our projects and company story on 8-pages of their magazine and to be credited with being Pitch Interactive Featured in Communication Arts Design Annual 56masters of the Art of Data. Ok, maybe they didn’t call us masters, but we’re pretty thrilled regardless! Big thanks to Communication Arts and Jessica Huval for the wonderful write up and opportunity to be featured.

Pick up a copy to get a peek into our studio and team. In the mean-time check out some of our favorite quotes from the feature that we feel represent the core of who we are at Pitch Interactive:Pitch Interactive Featured in Communication Arts Design Annual 56

The firm thrives on passion projects and mission driven client work, and it’s driven by the volatile, yet fruitful marriage of statistics and art.

Grubbs likes to tell his team that statistics are human stories that have been digitized.
“It’s our job to re-humanize it,” he says.

The team’s warmth and joyous geekiness have charmed its clients.

They snicker over GIFS shared on the communication software Slack, but their minds are always hovering around data and design even for jokes. Adam Florin wonders whether he should bring a jacket, but concludes he has, “insufficient research for that data point.”

Communication Arts Design Annual 56 feature on Pitch Interactive

Pitch Interactive's Work Featured in Communication Arts Design Annual 56

Teaching at Anderson Ranch

Wes and his students.I just returned from a week-long workshop at the Anderson Ranch in Snowmass Village, Colorado, where I taught a workshop on making art with data. It was such an amazing experience to see artists with no programming experience turn into creative coders in under a week. The workshop consisted of 10 students and an intern, mostly coming from backgrounds in the arts and with little programming experience.

I started the workshop with a day away from the computer. Hiking in the the Rockies! Hiking in the Rockies While hiking, students collected data samples on the trail from which we would tell a story at the end of our hike.

On the second day, the group assembled Arduino environmental sensors that collected noise and light data that the students collected from various locations around Snowmass Village.

By Day 3, everyone was ready to hunker down and get to work, learning the basics of Processing and the key aspects of how to manipulate visual elements and tie those to the data collected (we grew a deep affection towards the map() function).

ArtworkFinally by the end of the fifth day, we all had art made in Processing from our data! This was a great opportunity to introduce artists not only to code as a medium, but also the use of actual data.

The focus was not on finding insights (though some were found) as much as it was how to explore visual ways of representation for purely creative purposes. And the outcomes were pretty amazing, especially considering this was an entry-level for students with little coding experience.

One of the highlights of the experience was that I rode my motorcycle from Oakland all the way to Snowmass Village (about 1,200 miles each way). Highway 50 through Nevada and Utah was a new discovery that boasted the beauty of the West.

Utah Hwy 50

Seeing Climate Change through Google Search

We recently released a project in collaboration with some brilliant folks at Google Trends and WebGL extraordinaire Michael Chang. Google Trends, based on Google Search data, takes searches (terms and queries) and shows how often that search is entered compared to the total search volume across various regions of the world. These outputs can also be seen as time series data since 2004 and the search’s related terms or topics.

Big Data Snapshot

When Simon Rogers approached us earlier this summer and asked if we’d be interested in a complex project with a lot of moving parts and unpredictability on a short timeline— we said yes. Google Trends wanted to create an experience based on Climate Change queries to unveil their new API to the public at the GEN Summit conference in Barcelona.

The Global Editors Network (GEN) is a community of editors and innovators dedicated to creating programs in order to reward, encourage and provide opportunities for media organizations and journalists in the digital newsroom. GEN Summit is an annual conference that brings together the “leading minds of the media industry to discuss the future of news” and showcase some of the innovations being made in the space.

So, a slightly different audience than we are used to. How could we create an interactive experience geared toward journalists? How could we layer billions of searches from all over the globe and add some visual flare all the while respecting journalism’s obligation to inform clearly?

The data from Google Trends is anonymized, aggregated and normalized, allowing reporters to find and compare salient points in worldly matters. We compiled a list of related topics to climate change searches (like Drinking Water, Air Pollution and Wildlife) and we compared the quantitative data (volume of searches over time) with the major cities of the world to see how ‘important’ topics were in these places. We also had really interesting qualitative data: the literal queries entered into the search field.

Query Data Large Snapshot

New York

While the detailed data on small towns and volume of searches in major cities were really interesting, these queries were the home run, so to speak. In caring about the civic health of our cities and nations, journalists would have the potential to identify some of the trending questions before major issues bubble to the surface without a proper platform to debate them.

Our final interactive experience is a linked experience between a multi-touch wall and four Chromebook Pixels.

Screen Shot 2015-06-17 at 10.47.56 AM

The multi-touch wall shows queries popping up as the globe spins. Using real data, the piece simulates the activity of users constantly querying Google on our eight topics around global warming. The Chromebook Pixels allowed users to dive into some of the more qualitative data and excerpts of recent publications on topics in these major cities and towns around the world.

Screen Shot 2015-06-18 at 2.17.20 PM Screen Shot 2015-06-18 at 2.17.44 PM

As expected, we were prototyping and tweaking visual and interaction design daily during the final two weeks leading up to the GEN. All our work paid off though, and the Summit went smoothly and the piece was well received. Thanks to our collaboration with Chang, another version of the Chrome Experiment of the multitouch wall was showcased a few days later in New York City.

setting_the_scene_1024 slack_for_ios_upload_1024-1

See the project here.
You can also read the write up about the project in the Washington Post here.