Tag Archives: jQuery

2011 Canadian Census Profile, By Province


As so often is the case with these side-projects, I blindly followed my nose to produce this map, which maps the 2011 Canadian Population Census, Census Profile (data here). There are 472 attributes in all, dealing with population, age, sex, dwellings, families, marital status and language.

The province squares idea came from Bill Dollins’ US States as Squares project, although I could have just as easily used the province boundaries.

I’m still definitely learning Mapbox JS – feel free to leave tips in the comments!



Multiplayer Hangman


Still on my Firebase kick. Here is a live, multiplayer game of hangman I came up with. There are unlimited guesses, and really no amazing payoff to winning – it was more of a personal exercise in JavaScript/jQuery/Firebase than anything else.

The cool thing about it is you can see live changes other players are making. Since there will hardly ever be two people playing at once, you can convince yourself that it’s live by opening two browser windows to the page. Enjoy.

Antipode Code


Last night, lying in bed, I found myself wondering what was on the far side of the Earth (apparently that point is called an antipode). So, today, I made this map to find out. It actually turned into a pretty amazing ride down a CSS-riddled rabbit-hole, and now the map is complete with flipped and mirrored maps, jQuery opacity slider (at the bottom), and animated PaperJS lat/long display.

There are surprisingly few places where you could dig straight through the centre of the Earth and emerge on dry land. If you’re going to try it, here are a few relatively safe places:

  • Fiji to Mali
  • Auckland, NZ to Seville, Spain
  • A large portion of Argentina/Chile to China/Mongolia
  • Bermuda to Perth, Australia (you’ll emerge in shallow water, so bring some swimming trunks)
  • Philippines to Brazil
  • Hawaii to Botswana

Disappointingly, if I dug straight through the Earth to other side, I’d end up about far as possible in the middle of the Indian Ocean.

There are lots of similar maps out there, but I’ve yet to find another one with interactive transparent overlay maps (possibly by design – it gets a little overwhelming). If you find other cool antipode maps, feel free to link to them here.

edit: now includes custom map style!

edit: does not seem to work in Safari or IE.

Hinton Nordic Centre Distance Calculator


Here (http://darrenwiens.net/nordiccentre_animated.html) is an old project I made last year and updated over the holidays. It’s a map of the Hinton Nordic Centre, with the handy feature of calculating the length of your route. Click and drag the green points to change the start and end positions. Click and drag anywhere on the blue highlighted route to move that part of the path. Oh, if you notice an error in the trails (for example, it doesn’t exist), go ahead and change it using Google Map Maker.

Disclaimer: this was something I did for fun, because I love skiing at the Hinton Nordic Centre, and I hate calculating my distances. This is not any sort of official product of the Nordic Centre. Also, this map does not work well in old browsers like Internet Explorer 8, but if you are using it, it’s time to upgrade anyway.

Alberta Urban Population Density Map: Gomitoli


OK, this is the last visualization of Albertan Urban Population Density for a while. Again, inpired by this Gomitoli chart designed for Excel, I made this example using Albertan cities. The circle area roughly approximates the true city area, and there is a random point on the circle circumference drawn for every 1000 people in the city’s population. Smoothed PaperJS lines connects the points. Finally jQuery UI sliders and PaperJS buttons enable zoom and pan.

Alberta Urban Population Density Map


Inspired by the Gomitoli visualization (found here), I made this map to show population density in Albertan cities. I admit it’s not nearly as nice as the Gomitoli example, but it demonstrates nice features such as navigating the underlying Google Map with jQuery sliders and PaperJS buttons, and redrawing the cities in the correct pixel coordinates on zoom/pan. Dots represent 5000 people (red lines connect the dots). The city rectangle area is mostly arbitrary.