Social media popularity, revisited

Social media popularity, revisited

Ilan Man

You might remember my post on Twitter mentions in New York Times articles from a few months back. I simply accessed the NYT API and plotted a graph showing the rise in mentions over the past few years. At the time, I used R's very popular plotting library, ggplot to chart it. It's great, easy to use and intuitive.

There was one big problem though - it was a static graphic. That is, it didn't move. It wasn't interactive. No feedback. And if I tried to show both Twitter and Facebook mentions on the same graph, it would've been overwhelming and cluttered for the reader. Basically, it wasn't cool. Maybe good enough for scientific journals, but not for the interwebz.

And while R does have interactive functionality, we're going to continue exploring d3 in this post and see if we can't do better that this:

NYTimesTwitterCount.png

Let's start with a basic line chart, showing Facebook and Twitter mentions at the same time:

Great, now we have an interactive chart. However, it looks pretty awful. What are some changes we can make to enhance it?

The first obvious candidate is to add some color to the lines. We can do that by overriding the default color and setting each path to be a different color:

sectionEnter.append("path")
  .attr("class", "line")
  .attr("d", function(d) { return line(d.values); })
  .style("stroke", function(d) { return color(d.name); });

Another is to smooth out the lines. Right now each point is being interpolated linearly which results in jagged edges at each year. d3 has many interpolation options including one called basis, which smooths it out.

  var line = d3.svg.line()
       .interpolate("basis")
       .x(function(d) { return x(d.year); })
       .y(function(d) { return y(d.stat); });

One easy and cool change is to highlight each line whenever you hover your mouse over it. This provides more feedback for the user. There are many ways to do this, but in this example I created a style type for the lines and changed the opacity whenever you hovered over it:

<style type="text/css">

.data {opacity: 0.3;}
.data:hover {opacity:1;}

</style>

Another big one for me is the transition. When you go from Facebook to Twitter, it would be nice is the chart moved smoothly instead of instantaneously. This is simple. We just need to add in a transition whenever the menu toggle is changed.

Let's create a change() function that has these features:

function change() {
  d3.transition()
    .delay(100)     
    .duration(1500)  
    .each(redraw);     
}

Lastly, let's changes the y-axis whenever the data is changed. d3 employs the concept of domain mapping. Basically, you can set your graphic to adjust to whatever size data you're feeding it, using some scale. All we have to do is tell d3 what the input domain is bounded by and d3 uses the scale function to return the appropriate sized y-axis:

y.domain([
    d3.min(transpose, function(c) 
           { return d3.min(c.values, function(v) 
                           { return v.stat; }); }),
    d3.max(transpose, function(c) 
           { return d3.max(c.values, function(v) 
                           { return v.stat; }); })
  ]);

With those 5 changes, our visualization now looks like this:

Not bad. This is barely scratching the surface - there's tons more you can do with d3. I just wanted to show you how a few simple changes can do a long way.

Doing Yeoman's work

Doing Yeoman's work
Want to work with me? Count to 3.

Want to work with me? Count to 3.