Pop Viz: 4 Years of Reddit and Using the JS API

April 14, 2014
Happy Cakeday to ME!

Last Saturday was my 4th “Cakeday” on everyone’s favorite time waster, Reddit! To celebrate another year of distraction, I wanted to update my Cakeday Karma Count dashboard from last year. I’ve learned a lot of tricks since then, so this new and improved dashboard has a couple of upgrades:

  1. Getting the data was way easier.
    Last year (and I shudder thinking about this) all my data was hand inputted into a spreadsheet. Now that I’ve learned a little more about the beautiful world of web scraping via import.io, I was able to get all this data in just a couple minutes!
  2. I learned how to use Imgur URL Parameters.
    This is actually a fairly new discovery for me. I found out about it when one of the students in my DDJ class was playing with Reddit data and wanted an easy way to resize all the Imgur links. Just adding an “m” to the end of the ID made it easy for me to switch between the three images that change in the URL object without having to manually resize all of them.
  3. I learned how to use Tableau’s Javascript API to have URL actions work both on a Web page object on the dashboard and in a new tab!
    This is by far the best discovery. Mad props to JSAPI genius Michael Kovner for helping me with this solution. When I made the dashboard last year, I wanted people to be able to open up the links to my posts, but it would load where the image changed instead of in a new window. Turns out just a few lines of javascript can fix it! More about the solution after the viz!

If you click on a bubble, you’ll notice the picture change. If you click on the box/arrow symbol thingy in the table, it’ll open up the link to that post in a new window (pop-up blockers may mess with this). Try it out!



So here’s how the double URL action works.

I created a normal URL action that changes the picture while editing the dashboard. The action that controls opening a post in a new tab is done completely in the Javascript API. All I had to do before publishing is make sure that the sheet that I wanted to control this action had the proper URL dimension I wanted to use.

After I published the dashboard, I created a javascript file called reddit.js that looked like this:

window.onload = function() {

var sheetDiv = document.getElementById("visualization");
var sheetURL = "http://public.tableausoftware.com/views/reddit/4years";
var sheetOptions = {
hideTabs: true,
hideToolbar: true,
width: "900px",
height: "1200px",
onFirstInteractive: function() {
}
};
viz = new tableauSoftware.Viz(sheetDiv, sheetURL, sheetOptions);

viz.addEventListener('marksselection', function(event) {
if(event.getWorksheet().getName() === "Post table") {
event.getMarksAsync().then(function(marks) {
if(marks.length === 0) {
return;
}
link = marks[0].getPairs().get('Link').value;
window.open(link, '_blank');
});
}
});
};

Let’s dissect what some of these parts are. The first section there is really just setting up that this script is generating a viz and we are going to do stuff to it. If you wanted to re-purpose this code for your own viz, you would replace the “sheetURL” with your viz and the width and height with what your dashboard is sized to. The second part is the event that controls the URL action. This function tells the viz to open a URL dimension named “Link” from a sheet called “Post Table” in a new window. If you wanted to use this on your own dashboard it would look like this:

viz.addEventListener('marksselection', function(event) {
if(event.getWorksheet().getName() === "SHEET NAME HERE") {
event.getMarksAsync().then(function(marks) {
if(marks.length === 0) {
return;
}
link = marks[0].getPairs().get('URL DIMENSION NAME HERE').value;
window.open(link, '_blank');
});

Once you have the code written, you’ll need to save the javascript file somewhere on your site. Then, when you are embedding, you’ll reference the Javascript API and your javascript file and call up the visualization like this:

(script src="http://public.tableausoftware.com/javascripts/api/tableau_v8.debug.js")(/script)
(script type="text/javascript" src="reddit.js")(/script)
(div id="visualization")(/div)

Note: all the parentheses are supposed to be triangle brackets… I can’t put them in that way or WordPress will think I’m trying to actually use them. šŸ˜›

That’s pretty much it! Thanks again to Michael Kovner for the awesome script and to my pal Josh Buchacher who helped me figure out how to embed this properly on my blog!

Tags
#Main #Pop Viz #Tutorials
1 Comment
February 16, 2016 @ 6:21 am

Thanks for leaving all this code to use and a good explanation to go along with it. Just a quick note – some of the links are broken now. I remember ‘trying’ to tackle the double link in @ tableau per customer request, that was a good day :)! Thanks again!

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *


*