1) Data Reveals that Occupying Twitter Trending Topics is Harder than it Looks! - explains the nature of Twitter’s trending topics algorithm, highlighting why OWS has never actually trended in NYC, even though its been a dominant topic, growing in volume across the board:

What we’re seeing is an outcome of a purely algorithmic mechanism, with its built in biases, hence not always intuitive or logical. The algorithm is affected by volume, changes over time, and is customized for every one of the 111 geographic regions chosen by Twitter

2) #OccupyWallStreet: Origin and Spread Visualized – A comparative mapping between the very first mentions of the movement back in July 2011, and the Zuccotti park cleanup event in October 2011. The first is a substantially slower information flow (1o days), while the latter takes place within several hours.

The data and findings on the site are based on the paper The Revolutions were Tweeted in which we extracted and analyzed prominent information flows on Twitter during the 2011 Tunisian and Egyptian uprisings.

The flows are drawn from two datasets of public tweets each shared during a period of approximately one week. The first covers the Tunisian demonstrations from January 12–19, 2011; the second covers the Egyptian demonstrations from January 24–29, 2011. We analyzed both data sets to identify different types of users who posted to Twitter regularly, sorting them into what we call “key actor types”: e.g., MSM organizations, individual journalists, influential regional and global actors, and other participants who actively posted to Twitter on these two revolutions. We look at how each actor produced and passed information over the networks of Twitter users. In each case—Tunisia and Egypt—we describe how information flowed across different actor types and discuss why we see certain patterns. We conclude by discussing the symbiotic relationship between news media and information sources.

In the following study, we analyze Twitter audiences of Al-Jazeera English, BBC News, CNN,The Economist, Fox News and New York Times, seeking to understand the makeup, behavior, interests, similarities and differences between networked audiences. We looked at measures of engagement such as the number of clicks shared urls receive, and the number of times content is retweeted by audience members. We visualized the content being clicked on in comparison to the content being shared.

The visualization below highlights different conversations happening across the Al-Jazeera English (@AJEnglish) Twitter audience during the period of an hour. The larger the node, the more prominent that topic has been during the observed period, while the closer a node is to another, the more times they appeared together in people’s tweets.

Keith Urbahn wasn’t the first to speculate Bin Laden’s death, but he was the one who gained the most trust from the network. Why did this happen?

This SocialFlow study maps out how this critically important piece of information spread across the network, beating the official White House announcement:

Keith Urbahn wasn’t the first to speculate Bin Laden’s death, but he was the one who gained the most trust from the network. And with that, the perfect situation unfolded, where timing, the right social-professional networked audience, along with a critically relevant piece of information led to an explosion of public affirmation of his trustworthiness.

Here’s a link to the full screen version (works best with chrome or safari).

Here’s an example gadgets mining all Twitter posts from the past 3 days that mention the term ‘NYTimes’:

About

Twitter, ‘the pulse of the world,’ is an incredibly rich data source used by millions across the globe. People post their thoughts, ideas and whereabouts via text-based status updates. Visually displaying trending topics can help readers better understand content and its context. By using any one of the four SocialGadgets, data flowing through the Twitter fire hose is indexed and semantically analyzed in real-time. Within minutes, major entities are identified and their relationships are displayed. The gadgets are easily configured, allowing users to choose a keyword and a template type, then copy and paste an embed code to be displayed on a website of their choice.

Give it a try!

Here’s a link to the full screen version (works best with chrome or safari).

The particle system generates particles every 10 ms from an origin point which follows the mouse location within the canvas. Each released particles is born with a given lifespan, acceleration and velocity. As the user’s mouse moves on the canvas, the particle follows along. As its lifespan ends, the particle fades and dies.

Here’s the crux of the code:

1. Create a canvas element
   Insert a canvas element into the body of your html page.

1. Instantiate the visualization class
   I use a variable called ‘viz’ to hold the visualization class, which I later use to define the particle system.

var viz = new Visualization();

1. Pointers to canvas attributes
   When rendering to the canvas we constantly need to use its context. By getting a handle to the canvas div element, we can access three super important attributes: (a) the canvas width (b) the canvas height (c) a pointer to its context

var el = document.getElementById("viz");
this.canvasWidth = el.width;
this.canvasHeight = el.height;
window.ctx = el.getContext("2d");

1. The particle system
   The particle system class is effectively an array of particles and an origin point. There are 2 main methods: (a) add a new particle (b) run the system
   Here’s the run function for the particle system:

// running the particle system
this.run = function(){
    // iterate through particles
    for (var i=viz.ps.particles.length - 1;i>=0;i--){
        var p = viz.ps.particles[i];
        p.run();
        if (p.dead()){
            viz.ps.particles.splice(i,1);
        }
    }
}

1. A particle
   Each particle has a location (x,y coordinates), acceleration, velocity and size attributes. Additionally, every particle has a lifespan (this.timer) which defines how many iterations the particle will display, before it fades and dies. The main particle loop is comprised of two important functions:

(a) update the particle movement and remaining life span

this.update = function(){
    // particle loop: acceleration, velocity, location update
    this.vel.add(this.acc);
    this.loc.add(this.vel);
    this.timer -= 1;
}

(b) render the particle to the canvas. Here I’m making it fade by setting it’s alpha value to decline as its remaining lifespan (this.timer) diminishes.

this.fill = "rgba(255,255,255,"+this.timer/300+")";
this.drawCircle(ctx,this.loc.x,this.loc.y,this.r/2,this.fill);

this.drawCircle = function (ctx, x, y, r, fill) {
    ctx.fillStyle = fill;
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.arc(x, y, r, Math.PI * 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fill();
}

• Run the draw loop
  This is the most important piece of the puzzle. By using the setInterval function, the draw function will be called every 25ms. This is very similar to what you do in processing (draw loop function). The loop is enabled by ‘setInterval’, while the draw function first clears the screen and then calls the particle system run function. There’s a neat effect when clearing the screen with such small alpha value. It creates a smearing effect which makes the circles have less defined borders. It is also computationally intensive, so beware…

// draw loop
this.timeUpdateInterval = setInterval(draw, 25);

function draw(){
    clear();
    viz.ps.run();
}

function clear(){
    ctx.fillStyle = "rgba(0,0,0,0.1)";
    ctx.fillRect(0, 0, viz.canvasWidth, viz.canvasHeight);
}

That’s it. Put it all together, add the jquery library, and you have yourself a simple particle system.

See the full size version here.

And download the full code here.

Give it a try!

About

It is still unclear if and how Twitter made an actual difference for people on the ground in Iran. There is not enough information to claim that Iranians had been using Twitter as a means to organize the protests. However, it is unquestionable that Twitter’s unique characteristics prompted distributed reactions on a scale never seen before, engaging people all around the world. By far, the messages with imminently important information, received an overwhelming amount of retweets: from posting proxy IP addresses to passing on a plea to wear green. However, as the events played out, users learned to post messages without linking to the origin as a means of protecting the Iranian sources. It is clear that retweeting is revolutionizing the way people connect to news and newsworthy events.

The ReTweet Revolution applet displays 372 of the most popular threads extracted from a pool of over 230,000 messages posted on Twitter between June 14th and June 24th. It is important to remember that this is only a sampling of the Twitter data polled from the public timeline at regular intervals. Nevertheless, the content is substantial enough to identify trends and get a sense for people’s practices.

The visualization begins on the 14th of June, displaying twitter messages as they come in throughout the night after election day in Iran. Each tweet is analyzed and placed within its corresponding thread, which then grows taller. As the time moves forwards, it is possible to see the different threads appear from the right. By clicking on one of the threads, the applet enters a focus screen that displays the chosen thread’s network structure. The yellow node in the middle represents the earliest published tweet, corresponding to this thread, that was found by the ReTweet Revolution script. Many times it serves as the central node – the starting point of the conversation. When focusing on a thread, it is possible to see how a message was ReTweeted from one user to another, along with how the message content was changed as it was passed.

About

The earliest writings were carved in stone or scratched in clay and tree-bark. By 2400 BCE people had begun rolling papyrus sheets into scrolls. These remained the most popular written form for the next three thousand years, until the Chinese invented paper and European scholars began to bind parchments sheets into codices. It would take thirteen more centuries for these two technologies to come together to form the book, and another hundred years, until around 1440, for the printing press to be invented and the modern industrial book object to be born. Since then, for over 500 years, the book has been the dominant form for written communication.

The printed book has transformed modern society, helping to bring about the Protestant Reformation, the scientific revolutions of the Renaissance, widespread literacy, etc. Today books are ubiquitous. We read them on subways, build shelves for them into our houses, and sell them in bookshops, cafes, and on the banks of the Seine.

But, after six centuries of world-changing influence, is the printed book about to join the clay table, the scroll, and the parchment codex as a historic, but obsolete, writing technology?

Electronic books make it possible to carry an entire library in one device. They can be annotated and animated. Today’s devices are still clunky and primitive — but they will revolutionize reading and writing. Today’s books are still written for paper – tomorrow’s will be written for a networked computational device, changing how we think about linearity, permanance and the soon to be archaic idea of reading as a solitary and private experience.

The Future of the Book is an installation marking this turning point in the history of the written word.

Exhibitions

• Commissioned by the Boston Book Festival, 2009
• Berkeley Center for New Media, April 2010

Created in collaboration with Judith Donath and Martin Wattenberg.