Animating simpleheat.js

static heatmap image

As a POC (proof-of-concept) for a presentation, I wanted to generate a heat map, similar to the kind you see for Toronto Raptors players and for other examples, such as for airline flights or overlays on physical world maps. Because I was presenting this in front of a fairly mixed audience, I did not want to make assumptions about how well they could make the mental ‘leap’ while I explain the narrative I had built for them. In other words, for each part of the story I was telling them,…

Placeholder heatmap data

static heatmap image

I recently needed to create an interactive wireframe concept using a heatmap. This was for a presentation and I needed to walk the client through a particular story. As a result I needed just enough data to populate the heatmap but had to somehow create the data myself. Getting the right data wouldn’t be straightforward: The heatmap, using json, requires both an x-and-y coordinates, and then a third value to denote intensity of colour on it (I’m calling it z or z-value). Since this was a POC (proof-of-concept) I needed…

Exploring Etobicoke and Mississauga High Schools

Since one of my children is getting close to middle school, that puts high school on the radar. As a result, we decided to narrow our search to high schools because it would probably get too complicated to also include elementary schools (in addition to all the other factors, such as proximity to transit, ambiance and so on). In an attempt to narrow down the number of neighbourhoods that we are considering we thought it best to look at schools. I know that there is the idea of fit, finding…

Sankey Diagram using D3.js Part 2 of 2

The chart below shows the flows of money to Toronto mayoral candidates in 2006. What follows is a quick explanation and a few observations. Then I follow up with a few short tips on how I got the visualization up and running. 2006 Toronto Election Contributions By Region, Dollar Amounts and Candidate [iframe width=”600″ height=”520″ src=”https://zenbot.ca/elections.html”] Source: City of Toronto Note that I was coding anything ‘Outside Toronto’ to be more specific and got part-way (you can see Kingston and Ottawa as some locations). Basically outside Toronto extends to Mississauga,…

Sankey Diagram using D3.js Part 1 of 2

Among other things , I’ve been itching to master some D3.js tricks, mainly because the plugin lets you do some pretty gorgeous stuff, and there’s a wide variety of visualizations which are highly customizable. Recently, I finally had a few minutes to try something out. Since my work entails working with Statistics Canada data, or anything to do with start ups in Ontario I figured I would go for something that has nothing to do directly with that world. This led me to tracking down some elections donation data from…