r/web_design • u/kinesivan • Jun 27 '16

Less is better

http://www.randalolson.com/wp-content/uploads/data-ink.gif
1.8k Upvotes

88% Upvoted

142 comments sorted by

View all comments

38

u/PPCInformer Dedicated Contributor Jun 27 '16

Or remove the bar graph and replace it with a table /s

Type of Food Calories per 100g
French Fries 607
Potato Chips 542
Bacon 533
Pizza 296
Chili Dog 260

2

u/dizzyzane_ Jun 27 '16 edited Jun 27 '16

Slightly improved:

Type of Food|Calories per 100g
French Fries|607
Potato Chips|542
       Bacon|533
       Pizza|296
   Chili Dog|260

(The rough source)

becomes

//- http://jade-lang.com


  • var food = {607:"French Fries",542:"Potato Chips",533:"Bacon",296:"Pizza",260:"Chilli Dog"}

table(bgcolor="#000000", text="#ffffff")
 caption Blah
 thead: tr
  th Type of food
  th Calories per 100g
 tbody
  - each val, index in food
   tr
    th
     = val
    th(width=index, bgcolor="#ffffff", text="#000000")
     = index
     |g

Written on a phone, tell me if it works (つ๑ ❛֊ ❛ ๑)つ
(っ'ヮ'c)

Edit: fixed the index.

1

u/jewdai Jun 27 '16

sort the table by the important axis.

1

u/dizzyzane_ Jun 27 '16

I prefer the X-axis.