Hi, thank you for coming out.
I thought I'd go through a handful of things today.
Actually, we'll start with processing just briefly,
and then we'll talk about a couple of things that we're doing at Fathom,
which is our design studio in Boston,
and then finish up with this larger China project that we've been working on
that helps encapsulate a lot of the things about how I like to think about data
and working with visualization work and things like that.
First things first, so processing.
Casey and I started this processing project in 2001.
We finally just released a Processing 2 version just 48 hours ago.
You should all clap at Casey's later today too,
and also thank all the random people that worked on it as well.
The software itself, I think a handful of folks should be fairly familiar with it,
but we've been updating the UI,
adding some other features, making it easier to install modes and tools and libraries.
It's significantly faster.
We have completely redone OpenGL and video support that Andreas Kolubri put together for us.
It's really been this incredible effort by a lot of people.
This is what the GitHub commits look like going all the way back
to almost exactly 12 years ago when I did the first workshop using
the very first version with a group of students at a university in Japan.
This is also the please don't ask me if I'm still working on processing anymore plot.
There's also this code anti-code character.
This is the previously mentioned Andreas Kolubri.
He's been doing an incredible amount of work for us on this GLN video stuff.
If you see him buy him a beer,
depending on the time of day,
you may get two different versions of Andreas,
the poetic low-key version or the slightly more festive depending.
Over on the website of the processing project as well,
the same type of thing we've got.
Casey doing a ton of work with just how processing interfaces with
the overall community and folks like Dan Schiffman doing a ton of contributions there as well.
This almost even looks like these are shorter than the other plots,
until you realize that the top of the plot is actually five times higher.
So that's something like two,
Casey does these binge commits apparently.
There's like 200 and 250 and so on.
So the guys are freak.
So at Fathom, so the last three and a half years,
I've been running a design studio in Boston,
really trying to put into practice things that I started with
my masters and PhD work that I did at the Media Laboratory from 98 to 2004.
But really trying to take this idea of if you're going to work with data,
it has to happen in this cross-disciplinary way where onto the same roof,
you need to have people doing the design,
the development and the writing and the narrative and how you pull all these things together.
That by its very nature, it's going to require
this number of disciplines brought to bear to actually work with it.
There's no get the data,
it's all happily clean and ready for you,
and then we just have to pretty it up on the design side.
But rather, it's this very messy thing as we heard in the last talk that
we really have to do a great deal of work with and part of
that process of how you work with the data initially,
really guides what the final outcome is.
So we can talk a little bit about that and the actual projects here.
But I wanted to start with showing a couple of the things that we've been doing internally.
Primarily, we're doing client work and then in between that,
we have other self-directed types of things that we like to work on.
As I've said in the past,
it's this thing where design is this excuse to work on just whatever you're curious about.
Even more so in code because it's like,
oh, it's data and it's important.
So we start with James.
James Grady is working with us essentially as a designer,
always extremely dapper.
James was curious about all in the family,
so enjoyed all in the family as a kid and also this idea of how all in the family had
actually led to all these individual spinoffs in other shows.
You also may have heard Edith who had just passed away within the last couple of days.
It's also near to my heart for Rob Reiner who is Marty DeBerge and Spinal Tap,
the director and just all around excellent fellow.
So James started out with trying to plot out what the trajectory of these different shows were.
Look at like Nielsen ratings or something like that to say,
can we show this, well,
the spin-offs never really quite do the same thing and then they really start doing poorly.
As the years go on,
so we've got all in the family spinning off to Maude and the Jeffersons and then good times off of Maude,
and so on and so forth.
But this was still feeling like data that he was then looking at the individual actors
who were part of each of the shows and trying to map those across the shows themselves.
This started looking like something a bit more interesting until he finally had
this brilliant realization that all in the family tree and so build this tree,
each of these leaves are an individual person.
For one of the shows, we have the color based on each of the different shows.
So here we can see Sally Struthers showing up and the initial all in the family,
and then also Archie Bunker's place and then later Gloria.
But interactively, this is really important analysis.
We can switch through the different shows to see Archie Bunker's place a bit limited.
Or we can get back to the full tree.
So we like to do this sort of thing to try out different ideas,
sort of see how we might interact with things,
kind of look at something that might peak our curiosity or
otherwise be like some technology thing that we might like to sort out.
We'll look at Mark next.
Mark Schifferly, the emperor of Beacon Hill here.
This is an in progress project that he was doing looking
at jazz musicians who worked with Miles Davis.
So left to right, this is Miles Davis and his entire collection or discography.
And looking at sessions versus actual releases.
So much older, we have four sessions and that actually leading to 20 different releases.
So four sessions of people actually sitting and playing together,
but then that resulting in a large number of releases.
Tape was expensive, studio time was expensive.
Fast forward a few years and we get 16 releases out of 24 sessions.
That starts shifting a little bit.
And then the height of these dots being how many people or
I'm sorry, how many times folks worked with Miles.
Here's the man himself.
And then we can do some searching.
It's like if there's anybody named John in jazz and sort of track people down.
So this is a good example though of something where we're trying to take a data set.
See if there's actually something interesting in it.
There's a thread that Mark wants to pull out of it about how people worked with him.
So we had some of these other things that come out of it like the sort of darker years.
Sort of a bit of a drug induced haze perhaps.
And trying to have something that actually pulls out that thread and that.
So right now this isn't quite ready to go because mostly we're looking at form and
we're looking at these lines and connections and things like that.
But it doesn't quite get to that story or
that doesn't quite get to the narrative that Mark is after just yet.
So we'll see how this evolves over time.
And finally, we'll talk about Katie.
So Katie Harris has been with us for a while.
And Katie, dear sweet Katie, who had the idea we should have a pumpkin carving.
She also showed up with a power drill.
And we had just finished,
I think we had been doing some finance work and things like that.
And she's like, there's this author, 200 titles.
100 bestsellers, 280 million books.
We're talking about Nora Roberts.
This is really gruesome stuff.
So in anticipation of Valentine's Day,
this is our Valentine's Day from Fathom to the Internet by way of Katie and
Mark who kind of pitched in on some coding and
had like this pink burned in his mind for the next several weeks.
So this is Nora Roberts and her sort of canon.
Thankfully, there are a large number of Nora Roberts fans with hundreds of
millions of books out there.
There's bound to be some fans, especially on the internet.
And they've actually gone through and
sort of mapped out the different books and the different characters that are in
each of them.
So here we see the sort of tree of characters making
their way through different books within the series.
And so we can look at a particular book there, kind of flip through this.
So this was all about learning, or doing some CSS transitions work.
HTML5, JavaScript, et cetera.
And what else do we have in here?
I encourage you to spend some time with this.
But I mean, this is, I don't know, this stuff is, so
landlocked in Manhattan, rough and ready seamen, Zachary Muldoon,
needed a street smart two fisted attorney to save his kid brother's delinquent hide.
What he got was a long-legged lady lawyer, clad in sophisticated silks.
Public defender, Rachel Stanislaski, made Zach's blood boil.
And his loin's ache.
No endless voyage had ever had him hungering for a female the way one day in
court with this woman did.
He'd have to give Rachel a wide berth before she trimmed his sails forever, and
anchored him with unquenchable desire.
So that's Nora, and it's pink.
So with that, we'll switch over to China.
So this China project connected China.
It was a tablet app primarily developed for the iPad, but
also sort of works across the web, old HTML5, JavaScript base.
We were contacted by Thomson Reuters in the fall of 2011, and
basically they had this group of, they had already built a team of journalists who
were starting to research publicly available data about essentially who runs China.
So the hundreds or even sort of thousands of individuals and
their connections to one another and kind of trying to give some transparency to
Chinese politics and how it goes together.
And we're really excited about this because it represents a really interesting
combination of things in terms of how we work with data.
So there's obviously going to be some quantitative information there.
So there's thousands of connections.
There's some qualitative information about who is connected to whom.
It's this sort of social aspect of things.
It also is curated, so instead of it being, there's a lot of visualization work
that exists essentially because it's easy to get the data and easy to make an image of it.
And so at the moment, we have kind of a preponderance of things on the web where
it's really about, boy, there's a really simple API to do this.
And as a result, we have a visualization of it.
And so we're always, and I think fundamentally when working with data that
no matter how big this big data stuff gets, it really comes down to people doing
a lot of legwork to actually get decent data.
And it's sort of the uncomfortable truth about how much information is out there
that it requires some human intervention, it requires some curation,
and people kind of putting this information together.
And so in particular, this was a nice example of where they were going to start
with five and 10 reporters who were going to be entering all this information into
a database setup that they had, be able to set connections,
source this against a number of different places.
And then the output would be this interactive tool that you could use and
sort of look at trying to understand how Chinese politics work,
be able to, again, bring some transparency to that, but
also have that changing over time.
So it needed to be an actual live set of information that needed,
it could be updated daily, weekly, whatever was appropriate based on
sort of what was happening and changes on the ground.
I mean, even while we were working on the project itself,
the overall ruling body changed from nine members to seven members,
which required a bit of recoding that these nine most important people just
became, they lost to.
So the, let's see, the app itself.
Okay.
So this is the app itself.
The rundown is we have this 101 section.
This is just your basic introduction.
Next we have the social power, which is all about the loose connections between
people.
This person knows this, is a friend of, worked with, etc.
Institutional power is kind of how everything actually works on paper.
That this is the org chart and the interesting transition is understanding
institutional power, what's actually happening there versus social power.
This sort of soft version of the way those connections work.
Career comparison is about the Chinese politics.
There is a very specific and very tiered system of how people are promoted.
And basically, we can track how their folks are promoted and
at what age that happens and what that means for their career for the future.
And then future stories is probably the most like what Thompson Reuters
typically does where they're at least on the news side where they're doing
breaking news and but also the features in particular.
These are about actual investigative reporting and
sort of larger features themselves.
So within the 101 section, this just a basic introduction to these different
pieces, also some history.
So just having some way to anchor.
Well, okay, I know I've heard about Tiananmen Square.
So here's a little bit about Tiananmen Square.
We have 1949, the establishment of the PRC.
So when the Communist Party takes over China, be able to jump out to video.
I'm not the internet here, but be able to see some of these photos,
images and things.
Richard Nixon visiting China, so in 72 the US normalizing relations
with China.
And so just trying to bring folks in that way a bit.
And then some of these other background pieces.
So the seven, as I mentioned, that they had been the nine.
Guangxi, which is an important aspect of social power we'll get to in a second.
And an interactive map just showing the different provinces and
some of the socioeconomic indicators for each.
So starting with social, one of the things that we found was that we couldn't.
It was fairly disorienting to go from here's this application to
dropping people into a visualization.
And I think this is another thing that we see a lot of in terms of getting
visualization away from kind of here's a little piece of your screen that's
carved out that does some really pretty data thing and
then a bunch of other stuff that's happening around it.
And instead, how we start getting data more integrated with larger systems,
larger pieces of software.
One of the ways that we looked at that was essentially having these guides at
the side here where we have a bit of text to actually introduce the topic.
And this can take folks through step by step to try and
get themselves oriented a bit, so social power, it's all about family.
So we have these princelings, so the powerful leaders,
their kids have a significant leg up, as you might imagine.
That's this group, Golden Sons and Law, same thing on the just with the gender
switched, the party itself, the seven in particular are made up of two,
primarily these two coalitions, the Tuan Pai and the Shanghai Click.
And Shanghai Click is kind of led by Zhang Zemin and
then Hu Jintao and his folks are the Tuan Pai.
And that there's a bit of a balance for
people who are part of the seven, Li Keqiang is a bit caught between that.
Zhang Zemin are on the outside.
The size of these different elements, one got away.
The size of the different elements being based on their relative importance
to compare to the others.
And so here just trying to introduce this idea of party elders, these kingmakers.
So even though you have folks like Hu Jintao and Zhang Zemin who are in fact
retired, you can see in the key at the bottom, they are still kingmakers and
have significant influence on these different rising stars and individuals of the seven.
And then Guangxi, which I had mentioned, it's this accumulated social capital.
You're familiar with this in general, but I believe in China it is just that much
more, that much more particular and that much more specific.
And then finally Xi Jinping, so we've been hearing about,
Obama will be meeting with Xi Jinping Friday, I guess it's tomorrow.
And who is this guy and who is he connected to and
what's the background for his actual network?
And so now here we are in the actual visualization of Xi Jinping and his network.
These connections here, these are all his first degree connections.
So in-laws, relatives, folks he's reportedly close to.
Again, this is the, actually where the journalists have gone and
sourced this information, figured out who is connected to whom, and
being able to source that across two different locations.
Mishu's are a sort of, a bit like a personal secretary,
but it's a significant sort of way of kind of accelerating up the ladder of power.
Because you have the ear of somebody who's that important.
If I want to look at just Xi Jinping's network, here's this explainer,
which just gives me some background about who he's connected to.
And so Xi's father is the third key to a crucial power block.
So parents, siblings, et cetera, have a huge role in Chinese politics.
And also, his actual spheres of influence.
So in terms of how his power is derived, that sort of size of his relative importance.
So some of it comes from an internal state affairs.
So his personal network, shown in green, his family, shown in blue.
And then his extended network shown in that lighter blue.
And so if I click one of these, I can see who's contributing to that set.
So internal party affairs, foreign overseas affairs,
these are his connections who have a role in that.
And that's where he's getting power from.
Or I can, if I move into this first degree, so on the iPad,
this is a whatever they call this opposite pinch thing.
The, as I roll over each one of these people,
we actually have this short blurb about what that connection actually means.
And so one of the things that we tried to do here is we don't want to overwhelm
with information at this point.
But instead to have a great deal of extra that people can just kind of keep
digging and keep digging and learn more about what this network is made of
and how this works.
Here we're looking at his social view.
We can jump over to the profile.
This is his basic bio.
I can see some of his associations showing off his sweet soccer skills.
And things like a full bio.
Each of these things are linked in.
So if I have, we're talking about the president and general secretary.
This drops me over to a glossary that gives some background there.
So essentially just how do we try and layer these pieces of information together?
But also, so I mentioned here we are in the social view.
I want to move over to this institutional view and say, and
where is he located within that power structure?
And so I can actually jump directly to his location within the central committee.
I can see the other people who are part of the central committee.
But we'll back up a little bit.
So now I was just switching to the view of institutional power.
This is again the sort of org chart version of how the party is put together.
Or really the Communist Party and how it interacts with the military and the government.
And then we have this pull up your standing committee sitting over them.
Within each of these smaller, top level org structures that we have here.
We see the different roles for the seven who are part of the standing committee.
So here's Xi Jinping, but he also has this role within the military,
as the chairman of the Central Military Commission.
He's a member of the pull up bureau.
He's the, actually that's just a duplicate.
The, within the government, he's the, he's the president, but also
is part of the, is chairman of the state, Central Military Commission as well.
Li Keqiang, we see where he pops up across each of the networks.
And so this happens across all of the seven.
So there's a number of different roles in the overlap and
interesting and often confusing ways.
Here we switch over to just breaking out military, party, and government.
And we can, you know, from here actually interact with the full org chart.
So here's the central office.
I want to get the profile central office, we can do that.
Discipline commission, etc.
So just a, you know, several thousand node network of this organizational structure.
And, you know, how do you get folks into it so they can, you know,
interact with it, but then also be able to, you know,
go further and learn a little bit more.
The next primary section for the, for the app is this issue of career comparison.
So I had mentioned the tiers and how folks' careers change over time.
So if you think about somebody like Hu Jintao, he was identified early in his
career and promoted very quickly.
This is overlaying Xi Jinping and his career on top of that.
And now we've also switched to age as the axis across the top.
And also that there's this issue of retirement age as well.
So there's a de facto retirement age of 68.
It also depends on what level that you're at within the system.
And so, you know, here in the actual app itself with,
I can compare it or say Xi Jinping, Li Kecheng, another, and basically Xi,
you know, so this is in terms of age, you know, how things, you know,
so look how far to the left Xi Jinping is and then, you know,
the actual year that it happened.
So in terms of the year that things happened,
the National Party Congress across the bottom, basically with this being,
you know, once a decade, that also has a significant impact on, you know,
retirement age and, you know, can you actually get in under the line
and get promoted and that sort of thing.
So, and finally, the featured story.
So the app is up and online and available for free.
It's connectedchina.royters.com, you know, works within Chrome,
as you've been seeing here and other modern browsers.
The, you know, as far as background for this,
one of the things that we really enjoy in the projects that we do is be able
to work with a new domain or a new set of information that we're curious about,
that we're, you know, that's more interesting.
We saw a little bit of that in the personal projects.
This book by Richard McGregor was, you know, sort of one of the things
that we started with as a studio, it was recommended by our main client contact,
Irene Liu, who is running things in the Thomson Reuters side.
She was part of Reg Troyes' organization that basically they're looking
at data journalism and the future of data journalism within their organization.
You know, but it's getting this sort of domain knowledge is, you know,
a lot of, really helps drive kind of what happens with the final project itself.
You know, that the data we're dealing with there, it's, you know, tens of thousands
of entities, 30,000 different individual relationships
and 1.5 million words spilled, you know, just all of these descriptions of connections,
all these featured stories, all this information, just be able to put that together
into one place that's easily navigable.
As we start a project, this is an example of, this is actually the raw data
for the social network view and this is kind of exactly what we don't want to show.
So the, Mark initially, you know, built this out to do some tests to basically say,
you know, do we need one degree, do we need two degrees, what's going to be the right amount
of detail to actually, you know, explain the way that somebody's network works.
And the thing that we found was that within a degree, most of the folks
who were important enough had a kingmaker and so as a result, the connections at least
at that, you know, top level, the top, you know, 100 or the top, I guess up to 3,000
is kind of what they've been looking at, that will have enough, that will be collapsed
enough to, you know, work with this sort of focusing on the first degree and then also,
you know, having the second degree is sort of a supplemental thing.
Based on that exercise, you know, and then going back and doing some design with it,
this was an initial version of kind of what the network itself looks like before it actually
made it into the app.
So this and then the previous were both, you know, processing based sketches, essentially,
the, you know, basically gives us a way to do something that's interactive, works with
a bunch of data, we don't have to fight with, you know, performance and stuff just yet.
And then the app itself is all just straight HTML5, JavaScript, no libraries, all written
from scratch, for better or worse.
And we built a number of these tools along the way.
So this is the app that we built to look at importance.
So the size of those different dots within that social view, we wanted to be able to
weight different people and the tiers that they were in and try and figure out how to
get decent groups, decent groupings of people for these different sizes.
And so up in the corner there, we have a table of weights that we can tweak and then as you
roll over each one of these individual dots, it's one person within the network.
And, you know, using this and sitting with our contact Irene, Mark was able to, you know,
basically figure out what's the right, you know, what are the right set of weights in
terms of, you know, grouping these people together, at least amongst the people who
really need to work and at least amongst the set that the numbers and the sizes really
need to be accurate for.
And then we also did a ton of backend work for this.
So one of the things that we really enjoy is cases where we can build stuff all the way
from, in this case, it's all the way up from an Amazon EC2 server or several of them to
this front end thing that people are going to be using on the iPad.
And so this is the sweet HTML 2.0 UI that deals with building out the actual app, pulling
in updates from the database after that's been.
Those changes have been made and creating an app that's completely kind of, you know,
standalone and bulletproof and can be run through a content delivery network so that
it's nice and speedy for the kind of traffic that they're anticipating.
So after launch, they had over a quarter million users in the first week.
Over a third of those were from China, which is kind of amazing because in spite of the
fact that it was banned within the first 24 hours, a lot of people still got through.
So a quarter million people across 140 countries and really kind of fun to see a lot of different,
you know, it was incredibly gratifying, for instance, to see people in China actually
using this app that we had been working on for many months and sort of see where that
winds up.
The process for how the different sections came together, it's very technical.
This is an example of, you know, the institutional power view, that sort of org chart.
This was the, one of the first sketches that Katie developed, you know, again, this is
kind of taking the domain knowledge from the book, other research we did, and working with
our contact to say how do these connections work and what should this look like.
This was the next round of that.
This was a later round.
This was the first round that we actually shared with sort of a group of executives
that we needed to do a proof of concept for within, I believe, the first six weeks of
the project to just kind of show this is what it would look like, you know, like see it
on an iPad, have it be some static images that they can move through it, but it needed
to work structurally in terms of the, it needed to be supported by the actual data.
One of the things that we run into when doing any of these, you know, projects that are
based on data, we, to the extent that it's all about the things that are unique and interesting
that are found within the data, it's essential that we actually have to start with raw data,
raw information from the outset.
And so, and this is a perfect example of why, because this is a really messy problem, you
know, that it's kind of like, oh, we have an org chart, and it just kind of have these
different trees, and here we go, and instead it's, well, it's this org chart, and then
the people kind of all overlap, as we saw with the, you know, heads that you can roll
over in that guide view, actually that's it there, so this is where that wound up in
the actual app, and you saw the interactive version of it.
This also is subject to a lot of, you know, internal review that we pass things around.
One of my favorites, this is the pink hand of doom that appeared, I think there was
something wrong with the rollover, and so this frightening magenta hand with French
cuffs appeared to point out exactly what was going wrong interaction-wise.
And even the front page was also something that we did a lot of rounds of just in terms
of how, what they expected to see, and how much text was appropriate.
This was one of the first ones that we did that we figured, you know, it's gonna have
these three main sections, and this was, you know, based on our work with Irene, that it's
all about this, you know, changing command, this sort of, this once in a decade story,
it's about social connections and then understanding the party system, you know, so can we have
these three different ways, you know, primary ways of getting into it and then have some
subsections.
Another one was, you know, here we're starting to sort out what the individual sections are.
Still some text on the left, we have this featured story at the bottom, the latest news
at the very bottom, you know, this kind of still feels like Reuters may have done this.
And they said, well actually we kind of want to move away from the text and we didn't really
believe them, and so we did this one as kind of a bit of a hedge as well, along with what
became the final, but like, really, are we really gonna be able to take all the text
off the front?
And in fact, in the end, we were able to, and so we had this very straightforward way
of jumping into the app and then, you know, trying to traverse people through it from
there.
So with that, we're set.
Thanks.
Thank you.
