Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Design is S+CRAP

548 views

Published on

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

Published in: Software, Technology, Business

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

×