enjalot’s data driven journey


I’ve selected a collection of links to data visualization projects and prototypes I’ve made to highlight my thought process and motivation when working with data. If you enjoy thinking or working similarly let me know!

Bay Area d3.js meetup

link

When we reached 1,024 members, a few of the organizers collaborated to make a celebratory visualization of all the members joining and the events we had had so far. You can see the visualization (written in d3.js of course) here: http://enjalot.github.io/1024/

link

Through the meetup we have been able to harness the energy of the community and try to make a difference with data visualization. As a group we made several visualizations to dig deeper into the issues around the BART strike in mid 2013: http://enjalot.github.io/bart/

Tributary

link

I built Tributary with the help of several friends over the last 2 years. It’s a web-based code editor for d3.js that shows you what you’re doing as soon as you type it. The inspiration for Tributary comes from Bret Victor, specifically his Inventing on Principle talk. Make sure to click on any number or color you see in any of the tributaries!

link

I use Tributary as a tool to help myself understand and communicate how things work. Sometimes those things are the fundamental building blocks of digital technology like binary and hexadecimal numbers.

link

Other times it is how web technologies like SVG, HTML5 and d3.js can be used together in interesting ways.

link

I also use Tributary to prototype ways of turning data into visual representations. There are so many ways to encode data into time and space, it’s useful to be able to try them out quickly to see what might work.

link

I’m a big fan of remixes, and the above map is what happened when I saw an animated gif of data that I knew I could map with a cartogram. Thanks to a great d3 library all I had to do was glue together some data and a few lines of JavaScript to get a fun way to represent some unhealthy data.

link

The more I use d3 and the more I work with data visualization, the more I see things in terms of their underlying data being independent of their representation. An image is essentially just a large array of pixel values. Those values are normally represented by little colored squares. What if instead we represent them as monospaced characters that we color appropriately? What if we could play with what those characters are for density and other properties?

link

Sometimes I try to communicate my understanding of something like trigonometry by building a visualization toy for people to play with. The idea is to expose only a few of the fun parameters in a GUI rather than expecting people to dig into the code.

link

One thing I’ve become a huge fan of is building tools for myself. I’ve found that there are things like layouts which are often best done manually, but most “direct manipulation” tools don’t expose a way to work with data. Using Tributary I’m able to quickly build my own tools. The above example lets you manually place the “centroid” for each country by clicking the map or dragging the dots. This way you could place labels in aesthetically pleasing ways.

link

A tool I built recently was a nice way to prove to myself visually that a simple algorithm I wanted to use would work. I had written out some logic for checking if two time periods overlapped, and rather than going over all the scenarios in my head one by one, I quickly made this tool and could see clearly it behaved as intended.

DerbyJS

link

Most recently I’ve been using a data-driven web framework to accelerate my development of interactive visualizations (as well as building applications at Lever).

Derby boasts several powerful features, including a real-time syncing data store and a nice component building syntax. The above charts example demonstrates building a simple data visualization using a combination of d3.js and DerbyJS.

link

The real-time data syncing feature is nice but it requires a server to run, it is also possible to use DerbyJS on the client-side only as a replacement for a framework like Angular. The above example is just that, hosted on GitHub pages I use components (some built with d3) to explain how phonetic writing works in Chinese.

link

My most recent experiment is still an early prototype, I’m playing with the idea of visualizing and interacting with series of images as if they are just another data set. Here again I’m using the client-side only version of Derby along with some of the most useful utility functions from d3.js.

That’s all folks! If you like reading what I have to write, or playing with the ideas I put out please sign up for my mailing-list! I have a variety of d3.js educational materials on my homepage. I make videos about d3 and have a bunch of d3 meetup talks on my YouTube channel as well as on the viSFest channel. I also have slides online for talks and workshops I’ve given about d3.

Show your support

Clapping shows how much you appreciated Ian Johnson’s story.