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.

card_blog_post

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:

air_quality-spectrum

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.

robot-at-work-small

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!

holiday_cards

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.

otg-blog_team

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.

Pitch Glam Shots

This month we got fancy and had a team photoshoot for an upcoming feature about us in Communication Arts. We wanted to embrace our surroundings in downtown Oakland and figured the only way to achieve this was to tether from a helicopter or get up on the rooftop of our studio building. Here’s a professional-take and an outtake for your viewing pleasure, enjoy!

IMG_3682

IMG_3686

 

 

Cheers To The New Year!

2014 was a big year for us.
Us,” perhaps being the keyword here.

Not only did we make the move from the Berkeley office to the new space in Oakland, we welcomed the addition of Samuel, Katarina and Anna, expanding our team to six. Of course, we’ve had our share of growing pains but over the last months we’ve found there’s no better way to hash these out than over a few brews in our new hood. And so, together, we explored Oakland with good food and great beers.

Screen Shot 2014-10-29 at 3.17.50 PM


Our team had been throwing holiday card ideas back and forth for the last few months to celebrate (surviving) the year. We knew for certain that we wanted to share our favorite local spots with friends that have watched us evolve over the last several years. A lot of these friends whom we have bonded with over food and drinks all over the world. In an effort to connect one step further, we took a look at where these friends call home…and where we’d drop in for a drink or a bite should we visit.

Of course, as we aren’t familiar with some of these areas, we wanted to make our best guess and choose locations that are worth the while. Ultimately, we used FourSquare data to find the most popular places visited within 1 mile* of each addressee. From there we manually curated the list to what we thought were the top 8 places. To compare the venues, we then defined an index to weight these locations by popularity (number of people who visited), rating, price tier, and distance from the home or studio.

Screen Shot 2014-10-30 at 4.33.38 PM

_1

Our designs evolved through many iterations but remained fairly simple. We plotted the locations on a map and played around with using indicators, such as cross streets, as orientation. In the end, we allowed the locations to seemingly be suspended around the origin – letting the varying sizes give a hint of depth to the visualization.

Screen Shot 2015-01-05 at 4.14.58 PM

The circle sizes generated by the index value for each location naturally emulate holiday ornaments as they hover about the origin location. The front of the card layers both Pitch Interactive locations as well as the locations of the addressee while the inside individually breaks out each visualization. The origin point remains in the same physical location on each panel and the gradient fill from the front also coincides with the location fills on the inner panels.

IMG_8672 copy

We wanted to challenge ourselves by doing a print piece in house. We manually registered, folded and scripted each address by hand. For a special touch that we thought would be appreciated, we licked the envelopes ourselves.

IMG_8677_s

We’ve enjoyed the responses received over the holidays – thank you and congratulations to all on the completion of another year. We hope 2015 will bring us together with many of you again. Should you find yourself in Oakland say, around happy hour, you know where to find us.

 

*For some locations, we extended our radius up to three miles