A Tool for Exploring Annual Revenue with AdSense

The other day, I came across a site that was discussing what you need in order to make \$100k/year in AdSense revenue. It was simple math, as the amount can be broken up into the number of views/year and the average revenue per ad. It turns out that you need a healthy number of views to make money like this - say about 100,000/day. Again, simple math, but a surprising bit of sober reality.

It got me to thinking about making a tool that would allow the user to explore the revenue space, starting with a desired revenue per year, and breaking this up into the needed ad views per day and the RPM, or revenue-per-thousand-ad-impressions (this is a Google AdSense-ism, and I assume anyone who has taken a look at AdSense reports is familiar with it in this context).

So, I made a beta version of a little tool to do just this. It is embedded below, and is available at http://learnforeverlearn.com/adsense/.

A simple tool to explore AdSense

It's built with d3.js and the lovely Bootstrap, along with the awesome AutoNumeric jquery plugin by Robert Knothe that seriously eases the hassle of obtaining numeric input from a user.

It should adjust itself on window resize, seemed to look ok on tablets, and I made some adjustments for iPhone/Galaxy S screen sizes (tested via Chrome's slick Device Mode/Mobile Emulation). I've checked it on an iMac with Chrome, Firefox, Safari, and on an iPad, iPhone5, and a Google Nexus 7. Further, it seemed to display OK on IE10 and IE11, checked via the wonderful http://www.webpagetest.org/.

CSS ID's Create Javascript Globals

Wow. I learned something interesting the other day. Namely, that css ID's become part of the javascript global namespace. I'm not quite sure how I feel about this (not that it matters how I feel about it). I had never really thought about where it stored the relevant information. But it seems a little weird. And I imagine this could result in some head-scratcher bugs if you used an ID that overwrites something you are depending on. However, I don't remember ever being bitten by this.

Anyway.

Here's a snippet that you can use to confirm for yourself (jsfiddle for this is at http://jsfiddle.net/90rwhoy6/10/):


<html>
<body>
<div id="heyThere">This is something</div>
<script>
alert(heyThere); //it's in the global namespace(!!)
</script>
</body>
</html>

Boy - it seems like you could really cause odd problems
for yourself with carelessly defined ID's

Reflection after the Latest Visualization Effort

I am always surprised at the things I learn or appreciate when working little side projects.

My most recent project consisted of more than thirty interactive visualizations to explore various preattentive attributes, all created with d3.js.

Slow to Launch - Perseverance

It took me a while to get any momentum on actually starting to implement this thing. I hadn't seen that a site existed with a bunch of interactive visualizations that demonstrated preattentive attributes, I figured one was needed, and I didn't want to abandon the idea. I had a vague notion of what I wanted, but for some reason I wasn't hitting on anything that got me really moving. I had to keep circling around for a week or so, reading the literature, before I hit a point that I realized that I needed to start moving up the little mountain. Things then starting clicking as momentum built up, and the form started to reveal itself. Whew.

Robert Floyd's Algorithm Pops Up Again

All of the visualizations required picking a random set of points on a grid. It's not a hard problem, but I had to think about it for a second after seeing a stackoverflow post about it. The basic idea is to treat the grid of points as a single list of points, and then randomly pick without replacement using Robert Floyd's beautiful (tiny!) algorithm, which I have written about before. I had first come across this when implementing the "When Will I Win the PowerBall" interactive visualization.

Prior to this visualization, I had not used much of the animation capabilities "built-in" to the svg spec. The magic word here is animateTransform, and it turned out to be a simple way to get the animation I wanted: the animation itself is nicely and powerfully customizable, too.

Workflow: WebStorm, yeoman, bower, grunt...

I was already a WebStorm devotee, but had only recently been making use of the maturing javascript toolchain of yeoman and friends. This time I included the deployment itself as a grunt task, and became more familiar with the workflow in general. Despite new little bottlenecks to deal with at some point (such as the change/build/see-result-of-change delay), it feels pretty good.

Bootstrap Rocks

Gawd, the beautifully designed twitter bootstrap makes page layout/arrangement so easy and nice. Love it.

Ain't This Fun?

I have done a good bit of programming in my life, both server-side and front-end. Every now and then I would find myself doing visualization-ish stuff, but it hasn't been until the last couple of years that I have been slowly finding a comfortable "home" pursuing various visualization efforts, situated at the confluence of awesome browser features and the staggering capabilities of javascript and javascript libraries.

This stuff is great fun.