PROJECT

PROCESS
NOISE
Hannah Deering
ArtGr 478 - Feb 2013

PROJECT DEFINITION
2

PROJECT OVERVIEW

PROJECT SCOPE

Noise is a highly contested term. It means a variety of things to

different people and different situations. The law has a set of
ideas about what should be labeled noise. Individuals have a
sense for what a noise is. Communications specialists,
photographers, musicians, advertisers, designers, urban
planners, architects, interior designers, biologists, educators,
health practitioners, engineers, etc all of specific noise-related
issues that they embrace and deal with in their work.

For this project you will design and build a 5 screen project that
utilizes the web in a significant way. Your project must contain
text and images but it also may optionally contain videos,
sounds and interactive modules built in JavaScript or Flash.
Reducing screen count in exchange for larger efforts in other
areas (such as working with video) can be discussed with the
instructor.

Using a dictionary definition of a word such as noise proves to

be of little
value in the matter. According to the Oxford English Dictionary,
the first entry for noise is the aggregate of sounds occurring in
a particular place or at a particular time. It can mean an
unwanted sound or a less desirable sound that must be
tolerated for some other larger reason such as air travel or
trash removal. There is also the idea of noise as it relates to a
process or sequence where it becomes interference and affects
an outcome. Beyond sound and process, noise can be thought
of as a way to discuss that which has gotten so full, so
saturated that it is hard to discern any specific or isolated
message or experience in a variety of mediums and contexts
resulting in a massive impact on communication.
As more things are designed and introduced into our
environment, we
are presented with increasing amounts of noise that is audio,
visual and experiential. This applies in the form of sounds like
alerts, announcements, hums, rumbles and sirens and extends
to the visual saturation created by

All text in HTML pages must be text (not image) unless

discussed in advance.

PROJECT PHASES AND DEADLINES

A: Research / write / define topic and direction present 3
options for discussion - due 2/4
B: Site architecture + wireframe
jpgs posted to flickr - due 2/4
C: Sketch [ & Prototype ]
D: Design
jpgs posted to flickr - design crit 2/11
E: Refine [ & Prototype ]
F: Build
Final critique: 2/27
Final due: 3/4

a highly mediated environment. Political arguments, advertising

schemes, media messages, and increasing streams of
information and disinformation result in a great deal of noise in
which it can be hard to find the signal. Sometimes the noise is
the signal. Making noise as a way of being heard, of expressing
opinions and of standing up to oppression gives noise an
entirely different value.
For this project, noise is the point of departure. It is up to you
to determine what type of content you want to make or collect
and what type of web-based project you are going to create as
a result. A few directions are suggested below. Find an aspect
of noise in something that you are interested in or identify
something about noise that you want to learn more about.

 THE LESS
YOU TALK,
THE MORE YOU'RE
LISTENED TO.
ABIGAIL VAN BUREN

TWITTER IS A NOISY GEM-FIELD

With 36% of all the Internets worldwide users[1], and an average of 340 million Tweets sent
per day (as of March 2012) [2], Twitter can safely be called a noisy place. The Twitter
firehose (a term used in their documentation[3]) inundates users with a constant stream of
the latest Tweets from the people they follow. Buried in this stream could be important
announcements from friends, breaking current events, and relevant, interesting articles. The
lists feature, introduced in 2009, helps sort the flow a little, however, the problem remains
that the prolific Tweeters obscure the more reserved, and the mundane often drown out the
profound.
The goal of this webapp is to cut through the noise of Twitter and emphasize the lesser
heard voices, important events, and worthwhile links.

[1] http://www.businessinsider.com/twitter-blew-out-facebook-in-last-nights-super-bowl-2013-2#ixzz2JwgvKbAt
[2] http://blog.twitter.com/2012/03/twitter-turns-six.html
[3] https://dev.twitter.com/tags/firehose

Spam
4%
Self Promotion
6%
Retweets
9%
News
4%

Conversational
38%

Pointless Babble
41%
From a 2009 Pear
Analytics Report
6

From a 2009 Sysmos Report:

A small minority creates most
of the activity. A steep curve of
a small minority of actively
engaged content creators
generating most of the activity
on a site is common among
social networks, but it is
steeper and more pronounced
on Twitter. 5% of users
account for 75% of all activity,
and 10% of users account for
86%. This seems to suggest
that the site has managed to
engage a mass audience
beyond those who typically
engage with social media.
Half of all Twitter users are not
active. If you take a general
description of being active
on Twitter to mean that you
have posted a tweet at some
point in the last 7 days (1
week), then the survey
learned that 50.4% of all
Twitter users fit this category.
If you remove the 21% from
point #1 [accounts that have
never posted], this leaves
about 30% of users who have
an account and have tweeted
before, but happen to be
inactive now.
7

RESEARCH
8

TWITTER FEEDS
9

10

11

12

TWISTORI
http://twistori.com/

13

TRICKLE
https://followize.appspot.com
passive Twitter client

14

FOLLOWIZE
https://followize.appspot.com
list organized by people

15

SLICES
16

PULSE
https://www.pulse.me/
News client

17

FLIPBOARD
http://flipboard.com/
News / Twitter Client

18

19

FLICKR
1 per person

20

DATA VIZ
21

VIZIFY
22

FLICKR LOCATION VISUALIZATION

Visualization of photos uploaded to flickr

23

TWITTER BLOCKS
24

HIDDEN INFORMATION
http://blog.blprnt.com/blog/blprnt/twitterprivacy-and-lawrence-waterhouse
Jer Thorp
plot of tweets ordered by day horizontally and by
time vertically
can see when he moved time zones by first text
of the day

25

JUST LANDED
http://blog.blprnt.com/blog/blprnt/just-landedprocessing-twitter-metacarta-hidden-data
Jer Thorp
Visualization of Tweets with Ive landed and
where they went

26

GOOD MORNING
http://blog.blprnt.com/blog/blprnt/goodmorning
Jer Thorp
Visualization of Tweets with Good Morning

27

NEWS MAP
http://blog.blprnt.com/blog/blprnt/goodmorning
presentation of Google News
size and color dependent on number of similar
articles and how recent the update

28

AVERAGE CONSUMER SPENDING 2008

http://www.nytimes.com/interactive/2008/05/03/business/
20080403_SPENDING_GRAPHIC.html

29

DIGG VISUALIZATIONS
30

DIGG VISUALIZATIONS
31

CIRCULAR TREEMAPS
http://lip.sourceforge.net/ctreemap.html

32

33

FIZZ
visualization that clusters tweets around authors
hover delay

34

LETTER PAIR ANALYSIS

http://www.m-i-b.com.ar/letters/en/
bubbles are movable

35

TECH TOOLS/API
36

GOOGLE CHART API

https://code.google.com/apis/ajax/playground/?
type=visualization#tree_map
generate dynamic charts

37

PROCESSING
http://www.processing.org/learning/
http://processingjs.org/
http://www.processing.org/learning/
gettingstarted/
http://blog.blprnt.com/blog/blprnt/quicktutorial-twitter-processing

38

TWITTER API
https://dev.twitter.com/docs/platform-objects/
users

https://dev.twitter.com/docs/
using-search
http://www.jquery4u.com/apicalls/calculate-twitter-time-tweetjavascript/
https://dev.twitter.com/console

REST API

Streaming API

39

http://forum.processing.org/topic/
help-random-distribution-of-nonoverlapping-circles

Code by Amnon Owed

http://amnonp5.wordpress.com/
http://amnonp5.wordpress.com/
2012/01/28/25-life-saving-tips-forprocessing/

40

PROCESS
41

WIREFRAMES
42

title

filters
timeline scro!s horizonta!y ->

bubble size dependent on frequency of user posts

spaced by time

selected tweet

filters
- lists (show posts from various lists)
- who (celeb, friend, professionals)
- type (link, photo, text, reply)

prioritize
- direct replies/mentions
- softer speakers
- fewer posts
- longest time since last post
- trending topics?

context
could be replies, others with same hashtag, previous posts by same user

read/unread tweets emphasized by color brightness

43
2/2/2013

title

filters

vertical timeline
typographic emphasis
selecting a tweet highlights others by the same
author, with same hashtag

44
2/3/2013

title
filters

vertical timeline
typographic emphasis
selecting a tweet highlights others by the same
author, with same hashtag

45
2/3/2013

title

filters

tweet

tweet

tweet

tweet

tweet

tweet

tweet

tweet

tweet

tweet

tweet

tweet

tweet

tweet

tweet

tweet

tweet

tweet

tweet

tweet

tweet

tweet

tweet

tweet

tweet

tweet

tweet

tweet

treemap with 3 levels of hierarchy

infinite scro!ing

tweet

tweet

tweet

tweet

tweet

tweet

tweet

tweet

tweet

tweet

tweet

tweet

tweet

tweet

46
2/3/2013

title

filters

tweet

tweet

tweet

tweet

tweet

tweet

tweet

tweet

tweet

tweet

tweet

tweet

tweet

tweet

display the last tweet from each person you fo!ow

ordered by latest one

47
2/5/2013

SITE ARCHITECTURE
48

Twitter Data
Twitter API

Timeline

filter by type

2/4/2013

filter by lists

filter by people

filter by trending

49

PROTOTYPE SKETCHES
50

PROCESSING SKETCH 1
plots the last 100 tweets
color indicates user
x-axis is time-based ordering
y-axis is users tweets per day
hovering reveals the tweet beneath

2/4/2013

51

PROCESSING SKETCH 2
plots the last 100 tweets
color indicates user
x-axis is time since tweet
y-axis is users tweets per day
hovering reveals the tweet beneath

2/5/2013

52

PROCESSING SKETCH 2
plots the last 100 tweets
color indicates user
x-axis is time since tweet
y-axis is users tweets per day
hovering reveals the tweet beneath

2/5/2013

53

PROCESSING SKETCH 3
plots the last 100 tweets
color indicates user
x-axis is time since tweet
y-axis is time since users previous tweet
hovering reveals the tweet beneath

2/5/2013

54

PROCESSING SKETCH 4
plots the last 100 tweets
color indicates user
x-axis is time since users previous tweet
y-axis is users tweets per day
hovering reveals the tweet beneath

2/5/2013

55

BALL SKETCH
balls position and adjust based on gravity

2/7/2013

56

PROCESSING.JS TEST
rollovers and drawing on canvas

2/7/2013

57

BUBBLE
Bubbles dynamically placed
shows image on rollover

2/11/2013

58

BUBBLE IN JS
Bubbles dynamically placed
shows image on rollover

2/13/2013

59

DESIGN PROCESS
60

last tweet from each user

could be ordered based on the time of the last
tweet or the importance of the tweet/user

2/5/2013

61

latest tweet interface

color auras indicate tweets by the same user or
that have similar topics
size is based on some algorithm factoring in
tweets per day, time since tweet, retweets

Notes from Alex:

float the info box next to the bubble
show the data that goes into the size
limit each person to a max number of tweets
shown (6?)

2/6/2013

62

added detailed stats

tone down borders

floating tweet & details

2/6/2013

63

midnight purple

light bright blue

slate blue

dark bright blue

2/6/2013 64

playing with identity

nav bar

friend tiles

2/6/2013 & 2/7/2013

65

refined friend page

2/7/2013 66

CLASS DESIGN CRITIQUE

Notes from Class:
use the bubbles on the friends page to create texture that directs the eye
is there a login page?
like the bright blue color scheme, best contrast in that and the deep
purple
friends profile pic feel too large?
only put image in the active bubble

2/11/2013 67

login page

shrink user profile bubbles

2/13/2013 68

DEVELOPMENT PROCESS
69

2/18/2013 70

planning responsive layout for friends page

2/19/2013

71

testing responsive design

2/19/2013 72

CLASS CRITIQUE NOTES

nav bar too heavy, make thinner
go with the smaller profile pics
0.0 should be just 0
curve speech bubble
nav bar link font weight
play with borders
2/20/2013 73

bubbles integrated with Twitter feed using the PHP

TwitterOAuth library

2/26/2013 74

login page
in the future clicking on the login button
would prompt OAuth and possibly pull up to
reveal the bubble page

2/27/2013 75

instruction & loading page

3/2/2013 76

exploration with profile pictures in bubbles

3/2/2013 77

SOLUTION
78

79

80

81

82

83