You've learned a lot about visual encodings and visual perception.
Now hear from Johnathan as he breaks down a very complex graphic
from The New York Times.
>> Thanks Chris.
The visualization that I'm going to be focusing on comes from
The New York Times, and was created by Jeremy Eskinouse, Matthew Block,
Shan Carter, and Amanda Cox.
This entire visualization was built in D3 and
can be found in at the URL in my browser at the top here, and
all you need to play with the graphic is simply any modern web browser.
I really suggest that you go to the page to play with the interactive graphic.
I'm just going to talk through a few visual encodings and
elements of why I think this is a very effective visualization, but
you do not really get the full effect until you experience it yourself.
As you can see here, if you hover over each circle,
you should get more information about each company.
And at the top here, are next bud ins to progress through the animation and
the narrative of this visualization.
One of the quickest, easiest, and clearest ways to communicate with your
reader and audience is through the effective use of a title.
As you can see here, the visualization is very obviously trying to
communicate how Facebook's IPO compares to the IPOs of
every other tech company in recent if not all of history.
Of the visual encodings we talked about earlier, this visualization uses size,
shape, x and y position, and color to encode its information.
Though this visualization uses five visual encodings to convey its
information and data, not all these encodings I would say are equal.
Two of these encode the same information and
was typically referred to in visualizations as double encoding.
In this case, the y axis, representing company value,
is encoded both in the y coordinate or
y position of its circle, but also in the size or radius of that circle.
The greater a company's value,
the larger its circle will be, and the higher it will be placed on the y-axis.
This double encoding of the company value,
really emphasizes its importance in this visualization, especially since,
as Chris just covered, positional encodings are the most accurate encoding.
Also in this case, the x axis, or x position, encodes the year of the IPO,
but also color, at the far left, is encoded by the brightness of the red and
at the far right we have the bluest blues.
So, in this case, color and
x position both encode the year that the company IPOed.
In this visualization,
shape does not encode any concrete information since there are only circles.
Since you always have to choose a shape for a bubble chart like this, a circle
is a neutral shape, at least until you start using other shapes in conjunction.
But if there were circles, squares, maybe triangles,
each of those can encode a different type of company maybe by its industry but
in our case, again, since there's only circles,
shape does not encode much concrete or valuable information.
A fifth encoding that we haven't explicitly covered and
is sometimes not formally thought of as a visual encoding is opacity.
Opacity is very similar to color saturation or
density, as we covered previously, but it is not exactly the same.
The opacity in this case, refers to how transparent each of the circles are.
And while the opacity doesn't communicate any information about the data points,
in our case it does allow us to se the relative distribution of
the data points and how they overlap.
Since there is many companies that apparently IPOed in the year 2000,
they all had relatively small company values at the time.
We see a very dense dark purple, but if you notice as we go up,
we have a few circles where we can notice the overlap, and
some circle that are off on their own, with no overlap.