Design is SCRAP with D3.js
play & learn - david kim (http://goo.gl/lpVrK7)
S + CRAP … Principles of Design
It's not what you are thinking …
CRAP comes from a book called The Non-Designer's
Design Book, ironically by a guy named Robin Williams!
C – Contrast
R – Repetition
A – Alignment
P – Proximity
To that bedrock of CRAP, I add S – Show
And it was just a way to learn some basic D3.js
Setup: use Chrome browser +
let's use d3js.org
Bring up console: Mac (Cmd-Option-J) or PC (F12).
Basic d3: selectors
Inspect element shows the selector for h1 and images.
S – Show is better than no show
Inspect elements to see that the images are
“div#examples” then remove them in console:
C - Contrast
But it's so cool you can change it directly and see it!
It's a matter of taste what you like better ...
R - Repetition
It's more powerful, and stable-feeling to have repeat
A - Alignment
Do you see what changed?
d3.select("div#body header").select("a").style("margin", "4em");
P - Proximity
The letter spacing – hard to see, but try it on your browser