Keeping Track of Your Unicorn
We’ve all seen the “Unicorn Zone” video right? You know, the one where this guy who usually talks about guns explains how “all women are at least a ‘4′ crazy.” Here’s a link if you haven’t seen it.
One of the things he suggest that you do as an experiment on your woman, is to take a copy of the chart and plot data points throughout a period of time. After a while, you will begin to see the points cluster and that will tell you where you perceive this woman to be; which zone she is in.
Well I had some time to kill so I thought about this a bit, it seems to be an interesting experiment. Thing is though, you really want to have the map laid out and then plot your data points on top of that, but to reduce the scoring bias it is best to separate the data points from the map. Ok, so I’m thinking I’ll get a sheet of tracing paper. draw an axis and plot data points on it as I go, then print out a copy of the Zone chart and compare it every now and then. That would work. I’m a technologist though, I use technology to solve my problems. This got me thinking about a program that can graph data sets, which so many programs do.
So I opened up a Google Sheet, jotted down some data points, and turned it into a scatter plot with just a handful of clicks. Cool. Now I’ve got a visualization of the data. (That line, by the way, is the linear average. Just something I like to add to my scatter plots.)
What about comparing that to the Zone chart though? This is where it gets pretty tricky. Sheets doesn’t actually let you use real transparency so you can’t just put the image as an underlay. My solution was to snap together a quick HTML page and use CSS to overlay the Data and Zone charts. Open up your options for the chart and click “publish” making sure to select it as an image. That gave me a bit of iframe HTML nonsense, all I really want from it is the resource URI. Open up your favorite HTML editor and create a new file, drop that URI into an <img> tag for safe keeping and then let’s go look for a Zone chart.
<img src= "https://docs.google.com/spreadsheets/d/<your_doc_id_here>/pubchart?oid=1574162655&format=image"
style=" opacity:0.7;
z-index:1;
position:fixed;
width: 600px; left:5px;
height:371px; top: 10px;
"/>
I grabbed one from google, and transformed it a bit here and there before uploading it to Imgur. The Zone chart is actually a raw image now, and the Data chart kind of is, but Google exports it in a fantastically static, non-malleable way. So in my new HTML document, I load up the Data chart, set it to be transparent, and in the front z-layer, giving it a default set of sizes and then put in the Zone chart, opaque, and set it to the back z-layer. (feel free to use my Imgur upload, or do your own.)
<img src="http://i.imgur.com/ZxvDb08.png"
style=" z-index:0;
position:fixed;
left:70px;
top: 65px;
transform: scale(0.92,0.94);
"/>
From there its just a few minutes of trial and error to get the locations lined up. I also needed to do a bit more scaling on the Zone chart to get the axes to line up exactly. Put it all together and you’ve got yourself a nifty little HTML widget that will live update with new data points as you add them to your spreadsheet; Google takes about 5-30 seconds to publish changes (which can be done from a mobile phone, immediately after your date ;).
For simplicity sake, mine looks like this:
DISCLAIMER: These data points are fake and do not represent any woman I know. I used this information as an example to show the function of my implementation.
Here’s the full HTML if you want to be lazy and just copy my work.
<!DOCTYPE html>
<html>
<!-- Created by Humor4Fun -->
<body>
<img src="https://docs.google.com/spreadsheets/d/<your_doc_id_here>/pubchart?oid=<another_id>&format=image"
style="
opacity:0.7;
z-index:1;
position:fixed;
width: 600px; left:5px;
height:371px; top: 10px;
"/>
<img src="http://i.imgur.com/ZxvDb08.png"
style="
z-index:0;
position:fixed;
left:70px;
top: 65px;
transform: scale(0.92,0.94);
"/>
</body>
</html>
