Nathan Lawrence

Scrolling-Motivated D3 Demo: An Introduction to Averages

Sat, 30 Apr 2016 07:13:33 +0000

This post is written as an example of what it might look like to tell a story using D3 that reacts as you scroll. This kind of effect can definitely be over-used, but it's great for stories when you're walking a reader through how you might have analyzed data, since it can visually clarify a process for someone even if they've never encountered statistics before.

(Yes, I'm aware most people know how averages work, this just made a good demo.)

If you're new to the world of statistics, one of the first concepts that's likely to be thrown around all the time is the concept of an average value. This may seem like a pretty straightforward thing to calculate or discuss, but there are actually a number of different things this can refer to.

The most common kinds of averages you'll encounter are the median and the arithmetic mean.

To demonstrate these, let's work on a bar chart of a random set of nine numbers:

These are generated on the fly each time this page loads. In this particular instance, they range from to .

Now, let's take a look at some averages. First up is the median.

The first recorded use of the median as a term was as early as the fourteenth century, but it really rose to promise as a maritime navigational tool when Edward Wright wrote about it in his book Certaine Errors in Navigation.

Put most simply, the median means the middle of the data. Let's calculate one.

First, we'll take our randomly generated numbers and sort them by size. (This will happen as you scroll.)

Next, let's choose the value of the middle column. It's our median. In this case, that's .

As the name implies (and as you can see), medians are the middle of the data set, but not necessarily the middle of the values associated with something. Medians are frequently used for navigation or when it's particularly important to have your average item be a member of the original data set.

But let's not leave the chart shaded and sorted! It's time to move on.

Next, let's talk about mean. The mean of a data set is typically what people are talking about when they refer to an "average" in a more general context. Usually, it's calculated by taking the sum of all items in a data set and then dividing by the number of items. Unlike median, this is unlikely to result in an "average" that is also a member of your data set.

The easiest way to visualize this is to imagine that we are taking parts of each bar in the chart above and distributing them equally until all the bars have the same height. That height is then the mean.

Let's try it now!

Hopefully, this little tutorial has given you a better idea of how averages might work. For more information, you might want to try the Wikipedia pages for median or mean.

And, of course, for more information on how to assemble scrolling-driven stories like this, stay tuned here!

Adventures in Home Automation - Part One

Mon, 14 Mar 2016 07:13:33 +0000

After months of deliberation, I’ve finally taken the plunge and invested in a SmartThings starter kit. If you’re not comfortable programming, there is still a lot of room for improvement, but the start is strong enough that you can really see where this system is going and what we can expect in the future.

The starter kit, which SmartThings calls the “Home Monitoring Kit,” comes with a motion sensor, two “multi-purpose” sensors (which can measure temperature, position and whether or not a door is closed) and a smart outlet adapter in addition to a basic hub that’s required to connect all the components.

The hub plugs in to your existing router, then your pair your individual “Things” to it in a way that’s quite reminiscent of Bluetooth. This is where things get a little more complicated. Sometimes, this pairing process can take a very long time to work properly, and sometimes it just doesn’t work at all. With these four “Things,” all packaged with the SmartThings hub and guaranteed to work with it, I still found myself spending over an hour in this pairing process. The multi-purpose sensors in particular seemed to give me a lot of trouble: One took more than five minutes to appear to the hub, and another paired immediately, but would never say the door was closed.

Eventually, I got these kinks worked out by un-pairing (which SmartThings perplexingly calls “device exclusion”) and re-pairing the sensors, but this just shouldn’t happen. If I were a less determined or technically minded person, I might have driven back to Best Buy and abandoned this endeavour.

That said, now that everything is working, I’m very happy with things. I only have one lamp responding to my actions right now, but it has already significantly improved my quality of life. I’ve bought some third-party components to test as well, and I’ll update here as I learn more about how they work.

Introducing the Markdown Cheat Sheet

Fri, 15 Jan 2016 19:13:33 +0000

After a couple of weeks of work on it in my off-time, I’m pleased to finally introduce my own implementation of an interactive Markdown Cheat Sheet to the world.

In case you’re not familiar with Markdown, it’s a lightweight markup language with syntax designed to get out of the way when you need to write with minimal distractions. It was created by John Gruber and Aaron Swartz, but has since expanded far beyond the reaches of its original intended use cases to become a part of some of the world’s most popular open source projects, including Jekyll, which runs this site. In my day-to-day work at KBIA, I use Markdown all the time, and I’ve been trying to persuade more and more of the news team here to give it a try.

Unfortunately, there is a slight learning curve. Though Markdown’s syntax and structure starts to feel very natural after a while, it initially can feel very arbitrary and strange. Even though I’ve been using it since I was writing papers in college, I still find myself having to look up some of the more esoteric elements whenever I need them, and that can be a real pain.

John Gruber provides his own Markdown syntax guide, but it’s on the long side, and seems more than a little daunting at first. Github provides one as well, but if you know exactly what you’re looking for, this still involves a shocking amount of clicking and browsing before you stumble onto what you wanted to find in the first place.

The goal of my Markdown Cheat Sheet is to completely eliminate this problem. Instead of searching through dozens of smaller pages about specific kinds of syntax, a Markdown novice or a generally forgetful person (like me) can just go to mdcheatsheet.com and start typing what they’re looking for. Through the magic of JavaScript, the cheat sheet will narrow itself down and show only what they are interested in knowing about at that second. This takes a two-minute job and reduces it to ten seconds.

The Markdown Cheat Sheet is written in Angular JS, version 1.4.8. Eventually, I could see myself upgrading this stack to Angular 2, but I just don’t see the need to do that tomorrow. Angular allowed me to put this together in a relatively small time with very little performance overhead, and thanks to its built-in requests engine and data binding, I’m able to store the table of Markdown syntax as a JSON file and add to it when a user requests more information.

Like all my mini-projects, The Markdown Cheat Sheet is 100% free and open-source. You can view the code on my GitHub page.