Archives for category: Data + Graphics

Who’s got the biggest social network per country? The BBC charted Nielsen’s figures from June 2010 and from a year ago. Facebook had the largest audience by far in both months, while MySpace has dropped quite a bit.

What’s more interesting is the change in the amount of time people are spending on Facebook every month. I’d really like to know the demographics of the surveyed population. Anyone have info?

BBC charts Nielsen social network audience numbers.

(via BBC News)

I once knew a business editor who griped a lot about the typical story that would cross his desk: “You’re dazzling people with big numbers instead of telling them anything meaningful!”

My takeaway: Always create context around data.

When most people think of data, they think numbers. But most dictionary definitions define the term along the lines of “facts and statistics collected together for reference or analysis.” Remember that.

As the technical foundation of online journalism moves toward structured, semantic data examined by people with expertise (or at least curiosity), we will probably find ourselves wondering how many people we’re reaching and how it happens.

Site metrics is one way. Another is social network analysis.

Among the interesting tools out there is the Infochimps API, which is currently in beta. On their blog, you’ll see this:

Infochimps API in action

It shows one Twitter user’s network and the connections between them. While the example was produced by someone running a business, it could easily be applied to a journalist interested in understanding their own networks (sources, readers, colleagues, etc.).

From the Infochimps blog post:

Coupling Influencer Metrics with Trstrank would enable a promoter to identify not only the users most likely to engage, but also the most influential of those users. Throw Wordbag into the mix and a promoter could also discover if users in the active, influential target population have a potential interest in their product.

What other examples can you come up with?

Just wanted to bring your attention to some news-related projects that launched this week:

ReportingOn logo
Reporters looking for advice from other reporters should take a look at ReportingOn.

Ryan Sholin’s revamped site is like a help forum for news developers and journalists, particularly beat and local journalists. Follow ReportingOn on Twitter. You’ll find me on ReportingOn too.

Everyblock logo
The hyperlocal news and data site Everyblock released its source code, much to the delight of Django developers everywhere.

Everyblock is the brainchild of Adrian Holovaty, one of the co-developers of the Django framework. Read more about the project, poke around and see what you find.

Personally, I’d also like to see the source code for the Everyblock iPhone app, but one thing at a time.

W3C Mobile Web Initiative logo
If you want to learn more about mobile site design, consider signing up for W3C’s first-ever live training session in Cambridge, UK.

The event takes place Oct. 13. Registration — at a hefty €399.00 (about US$558 at today’s exchange rate) — includes lectures and hands-on workshops, as well as access to the nine-part course. Read the full description, register online or read more about the W3C Mobile Web Initiative.

And finally, if you’re here because of the list of “100 Best Blogs for Journalism Students,” welcome!

Feel free to browse around. A few of the most popular posts on Ricochet include:

What ideas and tools would you like to know more about? Drop a comment, or ping me on Twitter @MacDivaONA.

As promised in a previous post on learning information graphics (sometimes shortened to “infographics”), I’m posting my raw notes from Day 1 of an information graphics workshop taught last month by Alberto Cairo and Xaquin G.V., two leading practitioners.

Alberto Cairo teaches an infographics seminar by Medialab Prado on Flickr

Above, Alberto Cairo teaches a data visualization seminar at Medialab-Prado in Madrid in 2007.

Xaquin wrote about the course in his native Spanish on his site, Xocas.com (and here’s Google’s attempt at an English translation).

As for me, I’m posting my raw notes from the class. There are a lot of them (it was a 12-hour day), and because they’re raw, some bits won’t make sense. But like the process of designing information graphics itself, I’ll be culling and organizing what’s here and eventually, the patterns and lessons will become clear.

You can participate in the evolution of this post by asking questions, suggesting links, and finding the graphics discussed. Feel free to leave them in comments or email me.

Beyond Bootcamp “Creating Effective Online Infographics” Notes

RULE: In graphics, the less you know, the more abstract the representation should be.
Use simple diagrams that respect proportions, precision and accuracy.

KEY: How will infographic help inform the reader understand the story?
“Infographics is not art, it is a conveyance of information.”

Pie charts are easily distorted and require people to read additional text to understand the information the pie chart tries to convey.
Instead of pie charts, it’s better to use a bar chart to show relationships between proportions.

Good information graphics do not “simplify” information. They’re not meant to degrade the data to make the information more “accessible.” Information graphics are a tool to make stories deeper and to provide context. A complex topic demands a complex graphic. Precision is key.

  • Visual Skills
  • Organization
  • Color
  • Type

RULE: “Form Follows Function” < -- most important rule.
What is the nature of the data?
If the goal of the graphic is to represent change, show change.
If the goal is to faciliate comparison, display a comparison, don’t do a map.

(Example graphic) A defesa dos Vizinhos (Brasil)
Goal is to display the relationship of quantitative data, not geographic data, which was the execution.

    Problems:

  • It’s difficult to successfully compare the numbers. Is Brasil’s army much larger than Colombia’s?
  • Variables are not visually related. Is there a correlation between populations and military expenses? Brasil is the most powerful country in absolute terms, but which i most powerful in relative terms.
  • Should the map be the key visual element of the graphic? (In this case, no. The important information is the numbers.)

In class, Cairo used a scatterplot diagram. Military x Population. On another graph, he showed military manpower-to-budget relationship.

The information could have also been well represented on three linear plots stacked one above the other:
Population, military budget, military forces.

NYT “Paper Trail” by Hannah Fairfield (data from 2005, World Resources INstitute, UN) – Multivariate scatterplot.
(Paper consumption per capita x GDP per capita, with total paper consumption and change in paper consumption.)

Exame (Brazil)
Information Graphics: The use of diagrams to transform data into information
Diagram: Visual representation of quantities, spaces or relationships.

Bayeux Tapestry depicting the Battle of Hastings (1066)
An illustration (early comic) that illustrated the battle and celebrated the Norman victory.
(Cairo suggests we read the Wikipedia entry to learn more.)

T-and-O maps (Goal: represent the world according to religious teaching)
Mappa Mundi at Hereford Cathedral (1278)
Cairo calls them “maps of the imagination.” Their purposes is not to accurately represent the physical world, but to depict the world as dictated by religious precepts.

Which leads us to: A diagram is an abstract representation of reality.

Leonardo da Vinci – Renaissance: The world could be understood by reason, not religious thinking.
Leonardo’s revolution: explanations could be conveyed by illustration in combination with text.

De Humani Corporis Fabrica,” Andrea Vesalius (XVI)
The most accurate and precise book on anatomy. The books were used until the 19th century.

John Snow (1854) Map of cholera outbreak in Soho/London
Epidemiologist was able to show the source of cholera was a contaminated water pump by noting the number of deaths per building on a street map.

William Playfair (19th cent.) “The Commercial and Economic Atlas” / “Statistical Breviary”
Playfair invented line, pie and bar charts. Ideas were based on cartography. Playfair was an engineer who knew about cartography.

NEW TOPIC: Exploring cognitive psychology
How does the brain gather, process and synthesize information?

To help people comprehend abstraction: Only keep the things that are relevant and eliminate what’s extraneous.
Why do diagrams work, even if sometimes their shape is not physically precise?
Cairo’s favorite graphic: Harry Beck’s London Tube map.
– The goal was to help people get from one point to another.
– Gave up a representation of distance for clarity.

Diagrams aid thinking by taking advantage of how the mind processes visual information.
Hierarchy
– Color is quicker to process than shape. (Highlight what’s important.)
– Brain tends to group things based on proximity
– Brain tends to group things based on similarity
– Brain tends to group things by enclosure

Orientation
– Based on assumptions about weight (density) and light (illumination)

Movement
– Don’t pair words with movement
– Do pair words with static images, then take away text when things are in motion to allow reader to focus on the action

Bubble maps (bubble graphics) are good for showing trends.
But if you’re trying to make comparisons, a bar chart will be the simplest, most effective presentation.

LINEAR GRAPHICS (Used to illustrate a process)
There’s still room for linear graphics, e.g., Intro > Step 1 > Step 2 > Step 3 > secondary information.

    Tips for creating linear explanations:

  1. In print you create hierarchy by using sizes and colors (or shades or gray). In an online graphic, you have an additional tool: time.
  2. Put the newsworthy information first. The secondary (background) elements, should be placed at the end of the animation. Place the main information on the main timeline. Use rollover buttons for complementary data.
  3. Don’t show too many elements at each step of the action. As a general rule, each stop in the movie should explain just one fact.
  4. Don’t show large blocks of text and a moving object at he same time. Otherwise, the reader won’t know where to look.
  5. The more complex the thing you have to explain, the more steps you will need to do it, but be careful. Use as few steps as you can without jeopardizing the depth of the graphic.

    BREAKING NEWS ONLINE GRAPHICS
    All graphics produced in the last 10 years of elmundo.es have been stored online. Look. Learn.

    If you want to have one desk doing graphics for all platforms, use technologies and software that facilitate the transition between platforms.
    - Cairo suggests using 3D software for modeling illustrations (rather than 2D drawing). Several versions of the same graphic can be rendered and exported to various media/platforms. He uses Maya or 3D Studio Max.
    - Blender is open source. Cairo says it’s not as powerful as Maya or 3D Studio Max, but it’s still a good tool.

    Don’t think about one platform first. Think about all platforms available simultaneously.

    While Vu Nguyen was a UNC student, he created a 3D model for White City Stories. Cairo says it’s beautiful and informative. The story took 2-3 weeks (total) of full-time work to produce the piece. Nguyen is now at MSNBC.

    NEW NARRATIVE FORMS
    Look through “The Met’s New Greek and Roman Galleries” (NYT)
    Video, photographs, 360 views, audio

    Look at “Chasing Crusoe” (UNC-CH/U-Andes project)
    Wanted to show the fictional story, the real person and culture the story is related to, and the link between the two.

    Identify which media will tell the story best.

    South of Here

    PROVIDING CONTEXT
    Create layers of depth
    – Series
    – Collections
    Spanish Royal Wedding 2004
    Athens Olympic Games

    NEW PARADIGM
    Some graphics can be software tools.
    Whatever data is in binary format can be represented in multiple ways; infographics journalists become developers.
    The tools become a way for readers to interact with the information.
    Ex: NYT: Is it better to buy or rent?
    Some of the most effective infographics tools come from public transport providers. Ex: Madrid Metro trip planner

    THREE KINDS OF INTERACTION
    Instruction – User issues commands to a system with the goal of releasing a response or achieving a goal
    calorie calculator (ElMundo.es)
    The Ancient Way” about Galicia, Spain.

    Manipulation – The user changes the physical (virtual) settings of objects in the virtual scene: sizes, positions, colors, etc.
    How would you live in a 25 square meter apartment? (ElMundo.es)
    NYT campaign finance map

    Exploration – The user can move freely around a virtual scene.
    Online games (RPGs)
    The work of Second Story Interactive Studios
    Monticello Explorer, an interactive site from the Thomas Jefferson Foundation

    Programming allows the separation of design from content and the creation of dynamic presentations.
    In traditional infographics (as what’s produced in Illustrator), design and content (data and its shape) are in the same file.
    With programming, you can create a template, then dynamically load the data into the file, allowing for faster collaborative development of the infographic.
    – XML (Data)
    – Flash graphic

    Photo: Medialab_Prado/Flickr

Do you remember what it was like to be in school? About 40 journalists are reliving the college experience at the University of Miami Beyond Bootcamp multimedia workshop, directed by visual journalism guru Rich Beckman.

Over the last few months, I’ve met a number of his former students who tell stories of being cajoled and terrified of their former professor, and for good reason: The workshops are no joke: Twelve-hour days. Hands-on exercises. And in some cases, field work.

It may not be a picnic, but it is fun. For the time we’re here, we’re getting uninterrupted in-person access to an international group of highly accomplished photographers, reporters, editor-producers and thinkers. And that’s just the students.

Even if you can’t be in Miami, you can still get a taste of what it’s like to be at Bootcamp. For the next few days, you can check the ongoing tweet stream (hashtag #bootcamp).

And from noon to 2 p.m. ET Jan. 8-10, you’ll be able to watch a live stream of the lunchtime presentations below (livestream management courtesy of University of Miami journalism student Greg Linch).

  • Thursday: Paige West, Director of Interactive Projects, MSNBC.com
  • Update Friday: Panel discussion on multimedia practices and ethics.
  • Saturday: Rob Covey, SVP Content/Design, National Geographic Digital Media

Switch to our mobile site