Design is S+CRAP

478 views

Published on

My self-introduction and notes from playing around with popular JavaScript visualization library d3.

Published in: Software, Technology, Business
2 Comments
1 Like
Statistics
Notes
No Downloads
Views
Total views
478
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
2
Likes
1
Embeds 0
No embeds

No notes for slide

Design is S+CRAP

  1. 1. Design is SCRAP with D3.js play & learn - david kim (http://goo.gl/lpVrK7) x
  2. 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. 3. Setup: use Chrome browser + let's use d3js.org ● Bring up console: Mac (Cmd-Option-J) or PC (F12).
  4. 4. Basic d3: selectors ● Inspect element shows the selector for h1 and images.
  5. 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. 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. 7. R - Repetition It's more powerful, and stable-feeling to have repeat d3.select("div#examples a.example").remove();
  8. 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. 9. P - Proximity The letter spacing – hard to see, but try it on your browser d3.selectAll("p").style("letter-spacing","4px");

×