{"id":9683,"date":"2012-09-19T08:00:31","date_gmt":"2012-09-19T12:00:31","guid":{"rendered":"http:\/\/blog.shareaholic.com\/?p=9683"},"modified":"2014-10-06T11:40:15","modified_gmt":"2014-10-06T15:40:15","slug":"shareaholic-big-data-visualization","status":"publish","type":"post","link":"https:\/\/www.shareaholic.com\/blog\/shareaholic-big-data-visualization\/","title":{"rendered":"[Tech] How to Visualize Big Data"},"content":{"rendered":"

\"Shareaholic<\/p>\n

With a publisher network of 200,000 websites who reach 300 million people every month, Shareaholic\u00a0has access to\u00a0quite<\/em> a bit of data. You’ve read about it before in our previous data reports<\/a>, but it’s sometimes hard to grasp the full magnitude of our data set without seeing it in action.<\/p>\n

As we are planning to go to the MIT Career Fair<\/a> later this week (psst…we’re hiring<\/a>), we thought it would be a great chance to give you all a glimpse into the world of big data by creating a visualization of our own. Check it out below along with a behind-the-scenes\u00a0look at the data visualization process from our\u00a0Data Scientist,\u00a0Joseph Kibe<\/a>:<\/p>\n

What does the data visualization show?<\/h3>\n

\"\"<\/p>\n

A few weeks ago, our team tasked me with a project: whip up something interesting to show the fresh-faced folks visiting our booth at the MIT Career Fair<\/a> for this week. We threw ideas back and forth until settling on something fairly simple: a data visualization summarizing the pageview data we receive.<\/p>\n

The result allows us to observe some of the state of our pageview data stream. We see, for a given window, the total pageviews processed; the velocity of pageviews over time; the density of pageviews by country; and a few dozen of the top-viewed pages across our network.<\/p><\/blockquote>\n

How does the data visualization work?<\/h3>\n

Unfortunately, it wasn’t feasible to hook my data visualization into our raw data stream to do a truly real-time visualization \u2014\u00a0that’s a topic for another post \u2014\u00a0but I was able to do the next best thing: stream in the raw data logs we store in S3, which weigh in at roughly a gigabyte per hour, uncompressed.<\/p>\n

Both the streamer \u2014 the component that reads the log files \u2014\u00a0and the visualizer, which accepts the data and presents it, are written in Python. The former component is really quite simple: a script that opens, reads and parses the log file data, and then pushes it to the visualizer.<\/p>\n

The visualizer is a bit more complicated. It uses the Tornado Web framework, which provides built-in support for Web sockets to “push” data from the visualizer server to any client browsers rendering the visualization. At one end, it accepts the pageview data as it is streamed in. The summary data is simply stored in memory, though I use count-min sketching to track the top viewed pages. The visualization layer is all done via HTML, JavaScript and CSS with a lot of help from the excellent d3.js framework for working with data-driven documents.<\/p>\n

All of this went quite smoothly until I decided to make the new data load with some degree of elegance in the user-facing HTML, CSS, JavaScript amalgam. Doing a bit of design to present the data was not especially problematic. My many hours spent perusing art museums has done me some good. Making new data enter the page properly, by contrast, proved a relative challenge. Perhaps because it was so much more unpleasant, whether due to inexperience or by virtue of some intrinsic property of doing animations, the animation bit felt as though it took 90% of the time I spent on the data visualization.<\/p>\n

But in the end, I pulled it out, and we wound up with something neat to show off the growing stream of data we process.<\/p><\/blockquote>\n

If you’re an MIT student, come chat big data with Joseph Kibe<\/a>, our Data Scientist, and Robby Grossman<\/a>, our Tech Lead, on Friday, September 21 at the MIT Career Fair<\/a>. We’d love to meet you!<\/p>\n

\n
Shareaholic<\/div>\n

Intrigued by big data? We’re always looking for talented people to join our team! Click here to see our latest opportunities.<\/a><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

With a publisher network of 200,000 websites who reach 300 million people every month, Shareaholic\u00a0has access to\u00a0quite a bit of data. You’ve read about it… 
Continue Reading<\/a><\/p>\n","protected":false},"author":40,"featured_media":9756,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[525],"tags":[528,529],"_links":{"self":[{"href":"https:\/\/www.shareaholic.com\/blog\/wp-json\/wp\/v2\/posts\/9683"}],"collection":[{"href":"https:\/\/www.shareaholic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.shareaholic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.shareaholic.com\/blog\/wp-json\/wp\/v2\/users\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shareaholic.com\/blog\/wp-json\/wp\/v2\/comments?post=9683"}],"version-history":[{"count":0,"href":"https:\/\/www.shareaholic.com\/blog\/wp-json\/wp\/v2\/posts\/9683\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.shareaholic.com\/blog\/wp-json\/wp\/v2\/media\/9756"}],"wp:attachment":[{"href":"https:\/\/www.shareaholic.com\/blog\/wp-json\/wp\/v2\/media?parent=9683"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shareaholic.com\/blog\/wp-json\/wp\/v2\/categories?post=9683"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shareaholic.com\/blog\/wp-json\/wp\/v2\/tags?post=9683"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}