Creating a Force Layout using D3

I am extremely interested by data visualization so I wanted to start experimenting with D3. After reading the book Interactive Data Visualization for the Web by Scott Murray (link), I thought a perfect beginner project would be to create a Force Map.

1) The Starting Idea

This is a new project I have been working on for fun. At first, I had big ideas for it and wanted to create a force map to illustrate the connection between Montreal’s metro stations by not the underground metros, but by the exterior bus. There is actually a dataset of all STM transportation information so I thought it was going to be easy to connect all the information together. Sadly, I was wrong. After opening each file and creating tables for them in a SQL database, I started writing queries to connect the tables together. However with more than 2 millions trips scheduled everyday, the SQL queries took forever to run. After trying extremely long, I finally decided to give up. Indeed, this was not the only problem with the idea. With 66 stations out there, the Force Map was bound to become a messy project. Even if I was able to create edges between these stations based on the bus connecting them, the information will be too scattered to have a good view.

2) Creating the Force Layout

Hence, I decided to recreate the original STM map, but using a Force Layout representation.

The code is based on a tutorial from the original book. I had to play around a bit to change the colors, the size of the circles, and add text on top of it. I also twerked variables around to get a final presentation I would be satisfied with. You can download my code directly on my Github to try it out (and I will host it on my own website soon). If you want to run the code, make sure you download the whole repository since you will need a good version of the D3 library in the same folder as your code.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.