Monthly Archives: November 2012

How to Draw an Ellipse (PaperJS “freehand”)


Ever wanted to draw a really good “freehand” ellipse? Well, here’s how (you’ll need a ruler). I made this using PaperJS, but the idea came from this Wikipedia page (I never would have come up with this in a million years).


PaperJS Geneva Drive


Yesterday, while I was waiting for some LiDAR processing to complete I came across a cool blog post about GIFs That Show How Things Work. I was particularly mesmerized by the Geneva Drive, so I attempted to make my own using PaperJS. Here it is.

My First RaphaelJS Attempt


A while ago I was enjoying PaperJS. It seemed like every time I searched for something to do with PaperJS, something else about RaphaelJS showed up. These two appear to be the major players in web drawing, at the moment. While PaperJS uses new technology (the HTML5 canvas element), RaphaelJS relies on SVG, making it compatible with older browsers (although apparently not with Android devices). The thing that I really like about RaphaelJS is that it’s very easy to export complex spatial shapes from ArcMap to SVG format, and use these shapes in a web drawing (I’m not sure of the easiest way to use a spatial shape in PaperJS). Here’s an example of mine, borrowed heavily from the RaphaelJS animation demos.

My First InfoVis RGraph


Here‘s my example of an animated RGraph (stolen almost entirely from here). Although this is a pretty cool way to view data, it won’t be useful as the family tree I intend to make because it is non-directional (i.e. you lose who is the parent and who is the child immediately). So, I’ll be focusing on InfoVis Spacetrees for the time being…

My First InfoVis


While looking for new ways to visualize data, I stumbled upon InfoVis this afternoon. Two types of animated visualizations really caught my eye: the Spacetree (a highly “borrowed” example of my own can be found here), and the RGraph, which I’ll probably tackle on Tuesday. Hmmm… grizzly bear DNA-based family tree coming soon?

Random Movement, Dynamic Symbology: Part II


After another round of revisions, here is a randomized example of the grizzly bear/oil well animation (first draft here).


– swapped heat map for bread crumbs

– smoke rings appear at visited wells

– terrain map changed for satellite

– toned down oil well symbology

– improved algorithm calculating distance to wells