Design is SCRAP - tinkering with D3.js

Not long ago, I browsed a book on design, The Non-designers Design Book.   The author offers a memorable mnemonic for principles of good typographic design. CRAP.  That's right.  Good design is CRAP!

S - Show is better (I added this one)
+
C - Contrast
R - Repetition
A - Alignment
P - Proximity

And get this.  The author of the book is someone named Robin Williams.  Go figure.

For me, design kindles thoughts about visualization.  While back, I had heard about a JavaScript library called D3.js.  Well, I just had to try CRAP with D3.js ... mainly because it was funny and I kept saying it in my head.  So, the following is what I have learned, tinkering with style element of D3, on the D3 website. And I added S, for show.  I guess the important point is that you can have a lot of fun learning when you mash things up, and that fun will help reinforce your learning.

Setup & Basics:
The nice thing about something like D3 and JavaScript is that it's built into your modern browser.  I prefer Chrome.  And on Windows, just hit F12 key, and you bring up bunch over developer tools, including a console where you can type in JS code directly.  I will show illustrate a few examples and then include a link to the slides.


Full-slide here for details:
http://www.slideshare.net/kimdkim/design-is-scrap


S - Showing is better

Having pictures is clearly better than not having pictures - want proof?  See the next picture!

Type this into the console > d3.select(“div#examples”).remove();

C - Contrast

The original with dark text and white background - let's say you want to try a different contrast

Isn't this cool?

 To change the color scheme as above:

> d3.select("body").style("background-color", "black");
> d3.select("h1").style("color","white");

Neat, huh?