Tweet Report

Tweet Report takes a twitter stream and renders it as an interactive infographic poster. Instead of the usual focus on the textual content of tweets, the Tweet Report treats the entire tweet stream as a dataset. Looking at an example of the json data that the Twitter API delivers, it is apparent that it already contains various classifications and values: statuses count, friends count, followers count, created date, etc. In addition to using these existing values, the Tweet Report performs a significant amount of data processing of the json object, creating totals for things like hashtags, mentions, retweets, replies, etc, and recording relationships between totals and those who contributed to them.

With its infographic aesthetic, is particularly inspired by the work of Nicholas Felton whose “Feltron Annual Reports” are seminal works in the data graphics field. The Feltron Reports present the minutia of Felton’s daily life as beautifully crafted info-graphic posters. My Tweet Report draws some obvious cues from Felton’s work and shares his focus on quantifying the unlikely and overlooked.

While at first it presents as a static poster, the Tweet Report is an interactive work that rewards the inquisitive reader. Clicking different elements reveals their relationships to other elements within the polls, charts and lists.

Tweet Report
The red highlighting indicates the relationships between different items.

Attributes such as author, time, words, hashtags and links can all be used as keys. Once clicked, the Report uses CSS classes to target related elements within a group. The resulting index of CSS classes is quite complex but remarkably the HTML DOM manages it without issue. Using jQuery to highlight a group of elements via their CSS class is typically achieved like so:

$('.target_css_class').css('background-color', 'red');

However, jQuery cannot target SVG elements (such as the slices in a pie chart, or lines on a graph) via their CSS class. As a work-around I use temporary global CSS styles – adding a style to the head of the html document, adding styling attributes for a particular class and letting the browser do the highlighting work on both HTML and SVG elements. For example:

$('head').append('<style type="text/css" id="highlightStyles"></style>');
$('#highlightStyles').append('.target_css_class { background-color: red; }');

 

G R I D S

In addition to a typical horizontal column structure, the layout also employs a vertical grid. Implementing the vertical grid requires additional processing as standard CSS does not currently address modular vertical spacing. The default elastic boxes of the DOM expand as required unless given specific width/height values, resulting in ragged alignment across columns. In the case of a vertical grid we need to maintain elasticity to accommodate content but want to step any expansion to a minimum line-height value, avoiding the ragged vertical alignment across columns.

Vertical Grid
On the left, the height of each element is based on its content. On the right, the height of each element is conformed to a regular line-height.

The content is rendered to the DOM as per the illustration to the left. A script then checks the height of each element and normalises it to a set line-height increment, as per the illustration to the right. So, if the line height is 25 pixels, height 19 becomes 25, height 32 becomes 50, height 71 becomes 75, etc. You can also see the vertical grid at work in GRIDS.

 

SYSTEMS

Programming the vertical grid is just one example of computationally codifying graphic design conventions – looking for the patterns and formulas embedded within graphic artefacts and design processes and automating them with computer code. There are many examples of programmatic, systemised approaches in “traditional” graphic design (which I write about elsewhere in these Notes). For example, Gerstner’s 1964 book “Designing Programmes” describes programmatic approaches to design and layout. Tschichold was another pioneer of systemised design, with the Penguin Classics epitomising his approach (see Twitter Modern Classics).

Designing Programmes spread
A spread from “Designing Programmes” (www.thinkingform.com)

My point here is that graphic design has a rich tradition in systemised design approaches which are ideally suited to the computational context. By connecting with those traditions we can learn a great deal but also negate common print versus screen tensions. While I’m personally excited by notions of computational design, I don’t mean to suggest that imagination, expertise and aesthetic judgement can all be computationally codified – but I do think there is value in attempting to understand the rules inherent in design practices. Close examination of design practices can reveal implicit programmatic processes which we can then attempt to automate in the computer context. If all of this makes you feel paranoid that some software will soon be doing your design work, I think it’s worth highlighting that analysing traditional design processes tends to emphasise the sophistication of the discerning human designer – it’s common to find that things easily achieved by hand are extremely difficult to automate with code.

 

TECHY BITS

Tweet Report is entirely generative and does not use any external graphics (apart from fonts). The bar charts are made using HTML DOM elements and the pie charts are rendered in SVG with some help from the D3.js. The Report uses Masonry to assist with transitioning the layout in response to changes in the browser width, and also makes extensive use of Kernit for the fine-grained kerning of heading text and the large numerals.

 

Links: http://gravitron.com.au/report | D3.js | Masonry.js | Kernit.js