d3.unconf(2016).recap()

Ian Johnson
8 min readDec 31, 2016

On October 16th one hundred d3.js practitioners gathered for two days of intensive sharing, learning and building at the 2016 d3.unconf. We had bigger ambitions than our previous two years, and we pushed ourselves and the community in new ways.

We took our tradition of animated badges (thanks Gifpop!) to another level this year by building a self-serve app called Badgetron to let people make their own animated designs!

The badges were sponsored by Metis, who runs a 6 week d3.js class in both SF and NYC.

One thing we want to do better next year is give everyone even more time to design their badges. Almost 40% of attendees designed their own badge, with enough time next year we should get much closer to 100%!

Day 1

After everyone got their badges and their breakfast in Galvanize’s stunning SF location, we settled in to hear the only talk of the day: Rachel Binx’s fascinating journey with d3.

Keynote: Rachel Binx

rachel binx opening up the day

Rachel got her start with d3 at Stamen and has since used it design data-driven jewelry and help coordinate Mars missions at NASA JPL. You should really watch her talk as she does a better job summarizing exciting applications of data visualization than we possibly could do in one paragraph:

Rachel’s talk set the tone of curiosity and discovery, which was perfect because the rest of the day wasn’t about listening to talks, it was about participating in discussions. We broke out into 3 sessions for about an hour at a time. Covering a variety of attendee-chosen topics ranging from GIFs to Machine Learning (detailed with links to notes at the end of this post).

Breakout sessions took place in 3 different rooms

The energy at day one was amazing, many people who only knew of each others twitter handles, github usernames or slack handles got to meet in person for the first time. We had people fly in from as far as France to join the fray and share ideas. Both beginners and experts learned from each other, shared tips and resources and traded inspiration.

The organizers know that the real magic of the event comes from the attendees, but we also know that the environment in which attendees gather can have a large impact on their experience. We put a lot of thought into they day-of experience, from the breakfast and lunch to the timing and location of sessions and chill spaces for catching a breather between constant socialization. We hired an event planner to ensure smooth logistics and more structured planning, freeing up the organizers to focus on the content and the experience as well as fundraising through sponsorships to keep our ticket prices low.

If there is one big lesson we learned this year it is to start planning even earlier. Even with 2 prior years of experience we would have loved to have more time for every aspect of the process. My biggest mistake was to block further planning on key pieces like locking down a location. In 2017 we look forward to an even better multi-day event by getting all the balls rolling in parallel!

Diversity Scholarships

Another tradition we are proud to continue is the diversity scholarships we offer to members of the community who might otherwise not be willing to attend. Whether its for financial reasons or because underrepresentation discourages some people from attending homogenous tech events we wanted to provide an avenue for encouraging everyone to attend. This year we were able to provide 17 out of 100 people with free tickets thanks to illumio’s sponsorship!

illumio meeting rachel binx and Mike Bostock

Day 2

For the first time the d3.unconf had a second day! We gathered in Google’s San Francisco office for a day of hacking and learning. We got a taste of Google’s infamous catering thanks to a sponsorship from Google Cloud.

Google SF hosted and sponsored our second day

Keynote: Mariko Kosaka

Mariko gave us an inspiring keynote with plenty of encouraging ideas. Her work with d3 is both exemplary and challenging, bringing data well outside the usual confines of a two-dimensional chart.

Mariko shows off a knitted sorting algorithm

Don’t take my word for it, watch her talk and find out:

After the keynote the room was buzzing with energy, new friends wanted to continue conversations and many people were excited to try their hands at new ideas. This was our first time trying to facilitate such a large event where people would focus on coding rather than talking. We had many questions about how this might work, how much structure should we try to impose? How do we encourage a balance between absorbing information and putting it to practice?

Noah Veltman teaching about animation

We ended up with some answers, though as usual nothing is as simple as it may seem. We heard excited praise as well as disappointment about the exact same elements of the day. One key part was a series of workshops led by members of the community. Many thanks to Noah Veltman, Fil and Kristin Henry for leading these. A lot of attendees enjoyed these workshops, which were only 45 minutes long and fairly unstructured, delighting in the spontaneity of discovering new concepts and trying new ideas. At the same time others had expectations of more structure and hopes of matching them at their skill levels. We anticipated this to an extent and had various community members lead intro-to-d3 sessions throughout the day. These were appreciated but could have benefited from more preparation on the organizers behalf.

In any case, much was learned, as can be seen in the communal notes from Noah’s workshop.

Fil’s Voronoi workshop included a fun hands-on activity drawing voronoi diagrams on paper before diving into any code. This is something we will certainly encourage future workshop leaders to do as it was a fun and engaging way to learn about this powerful technique.

Voronoi drawings by Robert, Jon and Chris

As far as I know, we didn’t learn any lessons about lunch. Good food with good company in a beautiful setting was a great way to fuel up for a full day of hacking and learning!

#d3-meta

A cornerstone of the d3.js community is learning by example and with over 18,000 examples we have an embarrassment of riches. Being a community of data visualizers, it is only natural that we would want to visualize data about our community.

Micah’s block visualizing the connection between blocks

Micah Stubbs put together a curated dataset of blocks and their meta-data for attendees to visualize. We had a room reserved for anyone to come and try their hands at visualizing the data, with guidance from Micah and myself. It was great to have an accessible dataset that was relevant to most people in the room, it removed a lot of friction for people who wanted to test new visualization skills and techniques on data they could relate to. You can see some of the outcomes of the sessions in the show-and-tell section below!

Hacking

Another important component of day 2 was simply creating space for people to hack. We had two rooms where people could find a seat at a table, plug in their laptops and start coding. Many people did just that and enjoyed a few hours of coding around like-minded individuals. We heard a lot of keyboards but also a fair amount of laughs along with several oohs and aahs.

Topics

We wanted to do a better job of capturing all the knowledge that gets shared at the unconf, so we prepared a series of Google Docs for people to take notes in. All of the sessions linked here have a wealth of examples and resources to explore!

Generative Art: Notes & Links

Generative Art

d3.v4: Notes & Links

VR/AR: Notes & Links

VR/AR

Maps: Notes & Links

Maps

Modular and Reusable: Notes & Links

GIFs: Notes & Links

GIFs

WebGL: Notes & Links

WebGL

Machine Learning: Notes & Links

Machine Learning

Clustering: Notes & Links

Clustering

You can see all of the Shared notes if you want to dig deeper!

Show-and-tell

We had an amazing show-and-tell session, a tradition we borrowed from our d3 meetups. Over 20 people shared what they have been working on lately or what they built during the hack sessions earlier in day 2.

Gangnam style: v4 by Ken Penn
Pokeballs by Krist Wongsuphasawat
d3.js API usage by redblobgames
Kai made a continuous legend prototype
Sentence drawings by Mike Freeman and Jim Vallandingham

I wish I had been able to capture all of the show-and-tell examples with links and photos, but a good part of the excitement is being there to see whats happening as people share for the first time! We even had some demos that we were asked not to capture with exclusive behind-the-scenes looks at data visualiztions used in products we know and love.

See you in 2017

With all the things we learned at our third annual event, we look forward to an even better 4th annual d3.unconf!

I can’t wait to see who we can bring together and what we can accomplish. It is such a joy to be a part of the d3.js community and I hope to see you at our next event!

Ian Johnson

pixel flipper. Data Vis Developer @ObservableHQ. formerly @Google @lever