Design is SCRAP with D3.jsplay & learn - david kim

x

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:d3.select(“div#examples”).remove();

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

R - Repetition

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

A - AlignmentDo 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");

P - ProximityThe letter spacing – hard to see, but try it on your browser

d3.selectAll("p").style("letter-spacing","4px");