This document discusses the principles of design known as CRAP (Contrast, Repetition, Alignment, Proximity) and adds an additional principle of "Show". It provides examples of using the D3.js library to manipulate and style elements on a web page to demonstrate these design principles. The document selects and styles elements to change the background color, text color, margins, padding, and letter spacing to illustrate how CRAP and showing elements improves visual design.

1. Design is SCRAP with D3.js
play & learn - david kim (http://goo.gl/lpVrK7)
x

2. 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

3. Setup: use Chrome browser +
let's use d3js.org
●
Bring up console: Mac (Cmd-Option-J) or PC (F12).

4. Basic d3: selectors
●
Inspect element shows the selector for h1 and images.

5. S – Show is better than no show
>
Inspect elements to see that the images are
“div#examples” then remove them in console:
d3.select(“div#examples”).remove();

6. C - Contrast
But it's so cool you can change it directly and see it!
d3.select("body").style("background-color", "black");
d3.select("h1").style("color","white");
It's a matter of taste what you like better ...

7. R - Repetition
It's more powerful, and stable-feeling to have repeat
d3.select("div#examples a.example").remove();

8. A - Alignment
Do you see what changed?
d3.select("div#body header").select("a").style("margin", "4em");
d3.select("h1").style("letter-spacing", "4px");
d3.select("div#examples").style("padding", "25px");

9. P - Proximity
The letter spacing – hard to see, but try it on your browser
d3.selectAll("p").style("letter-spacing","4px");