Rapid Visualization of a d3.js Meetup Group Milestone

The Bay Area d3 User Group recently turned 6 months old, having amassed 500 members and held 10 Meetup events to date. We wanted a quick way to communicate the growth of the group, so we made this simple graphic to display at the 10th event:

What is notable here is not so much the output as the process that was used by three Mainstem members to produce a visualization using d3.js in about 6 hours of combined effort.

The first task was creating a JSON file with the necessary data from the Meetup API.  Ian determined the “group ID” (found by running this query) so that we could pull the list of group members and events.  Once a group ID is obtained, you can get its members with this query and its events with this one.

The results were downloaded manually in 5 pages and stitched together with a python script into a 1mb JSON file. To get a feel for the data we plotted the member join dates as blue lines and the event dates as red lines on this timeline:

However, these rapid prototypes are uploaded to a gist every time work is saved in our tool, Tributary, and 1mb of data made for sluggish uploads over a slow Starbucks connection.  To reduce the file size, Kai made a quick script to pull out only the keys we wanted from the member data which reduced things to a manageable ~64kb. 

Armed with a rough view of the data, Paul mocked up the above design. Knowing that we wanted to show the growth of the group he suggested a cumulative line graph to show how members joined over time. 

The cumulative line was calculated by summing the individuals that joined by date, and in the process we practically got a histogram for free (blue bars). The above screenshot (see live in Tributary) also shows the events as red circles plotted on top of the line, which was accomplished by looking up the cumulative value on the date of each event.

One of the fun things about Tributary is how easy it is to experiment — a little bit of playing around can result in nice discoveries. This “shadow” effect on the histogram was done in a few minutes by adding a rotate transform to each of the bars and playing with the angle interactively, though we choose not to use it in the final version.

With the events and the line graph working technically, it was time to style them up to match the mock. This was done by tweaking the code in Tributary, saving gists, and sending links back and forth until we were satisfied with the styling. 

One specific example of rapid iteration was the placement of labels for the event tooltips. We were able to lay out the labels as seen in the screenshot by making a data array with an X,Y pair for positioning each of the 10 labels. Then we interactively modified the X,Y coordinates by playing with the sliders until we were satisfied with the positions.  

In the mockup, all the event names and locations were displayed on the graph simultaneously, but this turned out to be visually crowded with the real data. So, we turned the event labels into tooltips that pop up when hovering over the event circles. With this change, we easily tweaked the label positions again using the same technique used the first time.

While Paul was finalizing the style and layout of the graphs Ian began working on showing displaying avatars of all the users in the Meetup group. This was done by laying out a grid square for each member and populating it with an image from their profile data.

We found a plain vanilla grid to be a little boring, so we added mouse interaction which shows the members’ names as well as a fisheye distortion on the images near the mouse. One trick that was useful in this part of the prototyping process was limiting the list of members to 50 while developing rather than the full 500. This saved loading and processing time while experimenting.

With the charts done, we created an HTML version of the mock using a Google Font and connected it to the code built in Tributary. This was a painless process as the code developed in Tributary can be pasted into separate JavaScript files and loaded by the HTML page. We added two separate SVG elements with different ID’s to the HTML. The only thing needed to complete the connection was to make the two SVG ID’s from Tributary match the ID’s in the HTML document. Simple!

From conception to completion, the process took us a total of about 6 hours distributed over 3 evenings and we had a nice graphic to show to the ~90 members who showed up for the 10th event.

You can see the final visualization here. Feel free to check out the code behind it here, and please follow us on Twitter!

Reblog

  1. enjalot reblogged this from hellomainstem
  2. hellomainstem posted this