Beyond Traditional Design Tools: A Transit Map Experiment
Today’s web is full of amazing stuff from amazing people. The catch is that most of it is only accessible for people who code. Say, D3.js. There are well over 2000 examples and demos, yet, there are not many options to give it a play for those who do not write code.
Transit Map
I am going to pick a Transit Map Experiment by Brian Foo and show how we could bring these goodies to everyone.
This guy is a talented artist and programmer. What a great combination! Brian made the whole thing pretty reusable out of the box. All I needed to do was to connect it to datamatic.io which took a couple of Saturday mornings.
Datamatic.io
Datamatic.io is my recent pet project. It is an editor that connects d3.js, properties panel and tree data editor using awesome Google Realtime API. Note: You can experiment without signing in to Google but you won’t get editing history or exporting options as this API requires users to be signed in.
Let’s focus on individual parts of the experiment now:
1. Data
Brian’s experiment uses JSON file to feed the data. For example, the following piece of code makes the transit map above:
In the editor, you could enter your data in the same way as if you are editing a spreadsheet:
The data editor handles any kind of hierarchical data by editing one level at a time and navigating through the breadcrumb at the top. You can also use CTRL+LEFT/RIGHT, which makes it a bit faster and easier to navigate. This experiment constraints the editor to stations and lines only.
2. Backgrounds
By adding a nice background, the whole look and feel changes instantly and adds a bit of emotion to the result. The Web is luckily full of endless resources. This demo is using background images by Artem Svitelskyi and graphicburger.com (thanks again guys!):
You can also drop in any image from the web. This example shows an image from WikiMedia Commons:
3. Colors
Choosing the right palette can be a piece of art. If you have that in-build in your brush, you can create shiny stuff just by matching palettes with the rest. The editor integrates colorbrewer2.org palettes, and there is no reason why we couldn’t use APIs from colorlovers.com and search, say, for “Christmas” to get nice set of colors for the season.
This example shows another background together with a matching purple palette. I did not need to change each line’s color individually, d3.js applies color palettes dynamically based on given data.
4. Properties
Play time! Changing colors, opacity, backgrounds, line widths, radius, typography, positioning etc. can give you unexpected results.
Let’s have a look at what we can remix in few minutes:
5. Themes
Themes is a great example of separation of concerns and they promote reusability. Designers can craft beautiful themes with matching styles while somebody else can focus on the data:
6. Export
There are two export options in the editor at the moment: SVG and PNG. The third could be a web component package, which would make embeddability easier and allow further customization.
Code editor?
Being able to remix is great but it all has limits. Sometimes, you want to hack something in a way that was not originally expected, so being able to access raw code is essential. I am planning to add a code view to the editor. That would open a new world of possibilities and potentially generate a few other beautiful experiments. Feel free to shoot me an email if you are working on something cool and potentially editable.☺
What’s next?
There is a lot of space to go forward. One area that excites me is visualizing geographical data. D3.js is well equipped to handle this so the next experiment might be around mapping. Stay tuned!
