6 ms·

Interactive Twitter Visualization: Election 2012 (made with d3.js)

86 points by huangm 15y ago

jfager 15y ago
This looks great. One thing that's a little annoying is how the vertical axis automatically scales to the range of the data. It makes it hard to compare peaks that don't occur within the same view range.
- joshma 15y ago
  I noticed that too, although I'm not sure how they'd deal with an overly large peak distorting the rest of the data, even years later.
- mbostock 15y ago
  The aspect ratio is also problematic with taller windows; best practice is to bank to 45º: http://vis.berkeley.edu/papers/banking/ http://vis.berkeley.edu/papers/banking/ It's hard to pick the right aspect ratio without knowing the data beforehand, but you could make some reasonable assumptions about how spiky the peaks are. Given those assumptions, you could choose a fixed-height (say, 400px), and then adjust the visible time range if you still want variable-width. This would allow the chart to increase in size without compromising the aspect ratio. Alternatively, you could use a responsive layout and just choose between two or three fixed sizes.
  - huangm 15y ago
    Thanks for the suggestions - it's certainly an issue we're thinking about and looking to improve. Also, d3.js is a pleasure to work with. Really appreciate all the work you've put into it.
joshma 15y ago
Really cool, any plans to add other data sources? FB might be harder, but I think G+ has a public search API. I see it's just a demo for now, but a dashboard view would be great as that "go-to source" for top breaking news.
quasistar 15y ago
Very slick UX and very informative as well! I would love to be able to create custom topics, such as 'D3.JS' and generate timelines with top tweets. Quick question: how did you obtain the real-time metric "# of tweets per hour"? Are you sampling to determine an estimate using the Search API, or do you have access to a proverbial "firehose"?
- huangm 15y ago
  We're actually using the Twitter Streaming API, which has pretty high limits even with access levels lower than the full firehose.
djb_hackernews 15y ago
Looks real nice, but the information is pretty useless. * When events unfold, twitter users predictably react. * Some events are bigger than others.
- callil 15y ago
  Yes, but how much bigger? whose getting the attention? that is what's interesting about this visualization.
jmjerlecki 15y ago
This would be great as a map and if people tweeted a certain hashtag, color the map according to their vote. You could really see what direction the twitter audience is leaning. this is a neat implementation though.
minikomi 15y ago
If you can, please do the same for Wikipedia / SOPA.. it'll be interesting to see the difference in volume between tech media reporting and general outcry..

86 points by huangm 15y ago

This looks great. One thing that's a little annoying is how the vertical axis automatically scales to the range of the data. It makes it hard to compare peaks that don't occur within the same view range.

joshma 15y ago
I noticed that too, although I'm not sure how they'd deal with an overly large peak distorting the rest of the data, even years later.
mbostock 15y ago
The aspect ratio is also problematic with taller windows; best practice is to bank to 45º: http://vis.berkeley.edu/papers/banking/ http://vis.berkeley.edu/papers/banking/ It's hard to pick the right aspect ratio without knowing the data beforehand, but you could make some reasonable assumptions about how spiky the peaks are. Given those assumptions, you could choose a fixed-height (say, 400px), and then adjust the visible time range if you still want variable-width. This would allow the chart to increase in size without compromising the aspect ratio. Alternatively, you could use a responsive layout and just choose between two or three fixed sizes.
- huangm 15y ago
  Thanks for the suggestions - it's certainly an issue we're thinking about and looking to improve. Also, d3.js is a pleasure to work with. Really appreciate all the work you've put into it.

joshma 15y ago

Really cool, any plans to add other data sources? FB might be harder, but I think G+ has a public search API. I see it's just a demo for now, but a dashboard view would be great as that "go-to source" for top breaking news.

quasistar 15y ago

Very slick UX and very informative as well! I would love to be able to create custom topics, such as 'D3.JS' and generate timelines with top tweets. Quick question: how did you obtain the real-time metric "# of tweets per hour"? Are you sampling to determine an estimate using the Search API, or do you have access to a proverbial "firehose"?

huangm 15y ago
We're actually using the Twitter Streaming API, which has pretty high limits even with access levels lower than the full firehose.

djb_hackernews 15y ago

Looks real nice, but the information is pretty useless. * When events unfold, twitter users predictably react. * Some events are bigger than others.

callil 15y ago
Yes, but how much bigger? whose getting the attention? that is what's interesting about this visualization.

jmjerlecki 15y ago

This would be great as a map and if people tweeted a certain hashtag, color the map according to their vote. You could really see what direction the twitter audience is leaning. this is a neat implementation though.

minikomi 15y ago

If you can, please do the same for Wikipedia / SOPA.. it'll be interesting to see the difference in volume between tech media reporting and general outcry..