INFSCI  2415  Information  Visualization  Homework  1  

Report    

Team  Members:    Yitian  Fan  (yif11)  

Ruoxuan  Cheng  (ruc18)  Sanchuan  Jin  (saj74)  

 Contribution  of  each  Member:  We   work   as   a   team   for   this   whole   project,   which   means   we  discussed   every   key   point   for   all   the   three   visualization  together.   Also,   to   raise   the   efficiency,   we   had   our   own   main  responsibilities   for   different   parts,   Sanchuan   Jin   for   the  visualization   1,   Yitian   Fan   and   Ruoxuan   Cheng   for   the  visualization  2,  Yitian  Fan  for  the  visualization  3  and  Ruoxuan  Cheng   for   the   Report   and   suggestions   of   modifications,   in  which  Yitian  also  contributed  a  lot  of  her  ideas  and  drafts.    Brief  Introduction  for  our  three  visualizations:  Visualization1:  Use   the   time-­‐series   line   chart   to   show   the   growth   rate   for  educational  attainment  of  three  categories.    Visualization  2:  Create  three  different  charts  for  different  states.  Also  have  an  extended  design  which  contains  the  visualization    in  one  page.    Visualization  3:  We  choose  the  choropleth  map  to  show  the  data  across  states  and  categories.  

   

Report  For  Visualization  1    

1.  Motivation:    To   compare   data   across   categories   and   over   time   for   three  time  points:  1999,  2000,  2009.      2.  Goals:  (What  we  intend  to  show)  1)  The  trend  for  each  category  during  time.    2)  The  detail  education  attainment  data  for  each  category  in  a  certain  time  point    3)   The   correlation   of   the   trend   of   different   categories   during  different  time  point    4)   The   comparison   of   the   education   attainment   in   different  time  points    5)  The  growth  rate  for  each  category  by  different  time    3.  Rationale  for  this  Design:  The  line  chart  is  also  accessible  through:  http://pitt.edu/~saj74/Chart-1.2.html  1)  We  use   the   line  chart   to  show  the   time-­‐series  visualization  that  is  clear  and  easy  to  get  direct  attention.    2)  We  decide  to  put  the  three  categories  in  the  same  line  chart  in  which  the  viewers  can  see  the  overall  situation  together.    3)   In   the   same   line   chart,   also   can   let   the   viewers   see   the  correlation  and  comparison  clearly  by  the  direct  overview.    

4)   We   use   different   colors   for   the   different   lines,   which   are  easy  to  distinguish  and  related  to  the  different  categories.    5)  We  show  the  visualization  for  the  different  colors  with  their  corresponding   categories   in   the   right   of   the   page   to   let   the  viewers  check  directly.    6)   For   each   category   in   a   certain   time   point,   we   give   the  viewers   the  detail  percentage  data,   the  growth  rate  and  other  related   information   as   long   as   the   viewers   click   on   the   time  point.    7)   We   choose   to   show   the   growth   rate   because   the  visualization   is   good   and   clear,   compared   with   showing   the  percentage  directly.  (We  will  show  in  the  following  examples.)    4.  Examples    Fig  1.1  (Our  previous  attempt  which  we  gave  up  later)  Our   previous   attempt   to   use   the   percentage   for   each   level’s  education  attainment  during  time.    

 Fig  1.1  

For  Fig  1.1,  we  discussed  and  found  two  big  disadvantages:  (a)  Two  lines  seem  as  parallel,  but  they  are  actually  not.  (b)  One  line  is  nearly  coincident  with  the  x-­‐axis.    They   are   unacceptable   for   a   good   visualization.   So   we   must  change!    Fig  1.2  It  is  our  final  line  chart  for  task  1.  We  analyze  the  disadvantage  of  Fig  1.1,  and  choose  the  growth  rate  to  show.  Reasons:  (a)  No  parallel-­‐like   lines.  The  correlation  and  comparison  can  be  seen  very  clearly.  (b)  Different   colors   show  different   data  with   the   relationship  information  listed  in  the  right  side  that  is  easy  to  check  (c)  Detailed  growth  rate  information  can  be  seen  when  clicking  a   selected   time   point,   as   well   as   the   percentage   data   for   the    category  in  this  time  point.  So   we   get   all   information   we   need   as   well   as   a   very   clear  visualization!    

 Fig  1.2  

Report  For  Visualization  2    1.  Motivation  Compare   data   across   states   and   categories   in   2009   by   using  three  bar  charts    2.  Goals:  (What  we  intend  to  show)  1)  The  data  of  different  states  in  each  category.    2)   The   sequence   in   a   descending   order   for   the   bar   charts   of  different  states  in  each  category.    3)   The   comparison   of   any   group   of   different   states’   data   for  each  category.    4)   The   detail   education   attainment   data   for   all   the   states   in  each  category    5)  The  comparison  of  the  data  of  each  state  to  the  USA  average  level  based  on  a  certain  degree    3.  Rationale  for  this  Design:  The  bar  charts  are  also  accessible  through:  http://www.pitt.edu/~yif11/DataViz/Bar1/chart1h.html http://www.pitt.edu/~yif11/DataViz/Bar1/chart2b.html http://www.pitt.edu/~yif11/DataViz/Bar1/chart3a.html  1)   We   use   three   different   bar   charts   to   show   the   education  attainment  of  each  degree  based  on  different  states.    2)   We   put   the   states   in   a   descending   order,   because   people  normally  think  education  is  the  higher  the  better.  It  is  suitable  for  people’s  expectation  and  easy  for  them  to  understand.    

3)  We  show  the  detail  percentage  data  when  mouse  hovers  on  a  certain  state  to  let  the  viewers  know  it  clearly.    4)  We  change   the   color   to   a  bright  orange   color  when  mouse  hovers  on  a  certain  state  by  which  we  think  is  a  good  design  to  get  the  viewers’  attention.    5)  We  create  the  USA  average  level  bar  for  each  bar  chart  with  a   red   color   and   detail   percentage.   The   viewers   can   see   the  comparison  for  the  data  of  each  state  to  the  USA  average  level  by  which  we  think  has  important  meaning.    Also,  the  viewers  can  click  to  let  it  disappear  at  any  time.    6)  We  use  different   color   for   the   three  bar   charts   and  darker  shows  higher  education.  We  think   it   is  related  to   the  viewers’  expectation  and  attention.    7)  We  choose  the  different  percentage  range  for  each  category  based  on   their   data   to   get   the  better   visualization   effect.   (We  will  show  it  and  our  previous  attempt  in  the  example  part.)    4.  Examples:    

 Fig  2.1  

In  Fig  2.1,    (a)  Our  bar  chart  it  clear  to  identify  and  understand.    (b)  You  can  see   the  descending  order  directly   to  help  you  get  the   overall   understanding   and   comparison   for   different   state.  (c)  You  can  also  easily  check  the  detail  data  when  you  hover  on  a   certain   state,   as   well   as   the   relationship   between   the   USA  average  level  and  it.      In  Fig  2.2,  You  can  see  our  previous  attempt.    The  bar  charts  are  also  accessible  through:  http://www.pitt.edu/~yif11/DataViz/Bar2/  By   using   the   0-­‐100%   percentage   range,   you   can   see   the   bar  charts   seem   in   the   same   level  which   is   hard   to   compare   and  distinguish.  So  we  must  change!      

 

In  Fig   2.3,  we  make   the   improvement   change   that   is   also   the  key   point   for   this   visualization.   By   using   the   different  percentage  range,  we  get  the  good  visualization  effect.    Fig  2.2  

 

 

 Fig  2.3    5.  Our  extended  design  for  this  visualization  task  The  bar  charts  are  also  accessible  through:  http://www.pitt.edu/~yif11/DataViz/Bar3/  5.1  The  disadvantage  for  the  three  bar  charts  design  (a)   Can’t   see   the   correlation   and   comparison   of   the   different  categories.    (b)  Can’t  see  the  data  of  a  certain  state  for  different  categories  in  the  same  time    

(c)   The   high   school   data   contains   the   bachelor   and   higher  education.   Can’t   check   clearly   for   the   correlation   of   different  categories.    5.2  Our  attempts  to  improve  it  (a)  Try  to  include  the  three  bar  charts  in  the  same  page    (b)  When  hovering  in  a  certain  state  in  a  category,  the  data  of  this  state  for  all  categories  will  show  together.    (c)  Change  the  data  to  which  does  not  contain  others’  data.    (d)  Use  a  pie  chart  in  the  left  corner  to  show  the  relationship  of  the  four  categories.    5.3  Examples  for  improved  bar  charts    Fig  2.4    We  use  a  pie  chart  to  show  the  percentage  for  a  certain  state  in  different  categories.  We  can  see  the  interesting  data  correlation  for  different  states.    AK   has   65%   high   school   graduates,   while   it   only   has   27%  bachelor  or  higher  education  graduates.    DC  only  has  39%  high  school  graduates,  because  the  other  49%  high   school   graduates   go   to   college   or   higher   education  institutes!    

 

 Fig  2.4    

 

 Fig  2.5  

Fig  2.5  It  is  a  key  design  for  this  improved  visualization.  It   shows   all   data   of   a   selected   state   for   all   categories   when  hovering   any   bar.   We   design   this   because   we   believe   the  viewers  need  to  get  the  overall  situation  of  a  certain  state.  It  is  very  straightforward  and  clear  to  satisfy  the  users’  needs.    In   the   example   figure   below,   Nevada   is   good   for   the  fundamental  education,  but  it  doesn’t  have  a  good  performance  in   higher   education   area.   DC   has   less   high   school   graduates  because  most  of  them  go  to  college!    

 

 Fig  2.6  

Fig  2.6  Get  the  comparison  to  the  USA  average  level  clearly  for  all  the  categories.  By  this,  users  can  find  the  detailed  correlation  and  the  clear  analysis  for  further  use.    For  example,  The  data  for  Texas  is  below  average  for  all  the  categories.  Oregon  seems  not  have  a  good  performance,  but  it  is  one  of  the  fewer  states  which  performance  better   than   the  average   level  for  all  parts!                                                  

Report  For  Visualization  3    1.  Motivation  Show   how   the   data   change   between   2000   and   2009,   across  states  and  categories.  No  type  restriction.  Use  creativity.    2.  Goals:  (What  we  intend  to  show)  1)  All   data   change  between  2000  and  2009  across   states   and  categories  in  one  page    2)   The   comparison   of   educational   attainments   of   different  states  for  a  certain  category  and  a  certain  year    3)   The   comparison   of   educational   attainments   of   the   same  state  by  different  time    4)  The  correlation  of  educational  attainments  of  the  same  state  during  the  time  passing    5)   The   comparison   of   educational   attainments   of   the   same  state  in  a  certain  year  with  different  categories    6)  The  overall   change   trend  of   the  USA   for  a   certain   category  along  with  time.    7)  The  overall  comparison  of  the  USA  for  the  different  category  in  the  same  time.    8)   The   detailed   information   for   each   state   for   a   selected  category  in  a  certain  time    9)   Should  be   easy   to   see   the   change   and   clear   to  understand.  No  visual  cluster.  

3.  Rationale  for  this  Design:  The  map  is  also  accessible  through:  http://www.pitt.edu/~yif11/DataViz/Map/  Based   on   the   goals   above,   we   decided   to   use   the   choropleth  map,  which  we  think  can  help  us  achieve  our  goal.    1)   We   display   the   year   and   category   information   above   the  map,  in  which  we  can  choose  the  year  and  category  we  want  to  look  up.    2)  We  use  the  same  kind  of  color  to  show  the  same  category.  But  we  show  the  differences  among  states  by  using  the  darker  color  represents  more  percentage.    3)   The   title   above   will   also   change   to   show   the   according  information  while  we  select  a  certain  category  and  time.    4)  There  is  a  color  explanation  besides  the  map  which  can  help  the  viewers  check  the  color  representation.    5)   The   detailed   state   name   and   percentage   data   will   show  when  mouse  hovering  on  a  certain  state  location  of  the  map.    4.  Examples:    Fig  3.1    The   comparisons   between   states   in   a   selected   time   and   a  selected  degree  We  can  see  through  the  figure  below:  For  the  fundamental  education  (such  as  high  school),  the  north  part  of  USA  does  better  than  the  south.  But  they  have  similar  performance  for  higher  degree,  while  the  east  ocean  side  has  a  better  result.  

 Fig  3.1    Fig  3.2  The  comparison  for  a  certain  degree  through  time  passing  (For  a  certain  state,  or  the  USA  overall  analysis)    For   example,   we   can   see   very   clearly   that   the   high   school  graduates   have   grown   from   2000   to   2009,   almost   for   every  state  by  a  direct  color  visualization.  It’s  also  convenient  if  we  want  to  see  the  detailed  data.  

 Fig  3.2    Fig  3.3  The   comparison   and   correlation   for   different   categories   in   a  certain  year  From  the  figure  below,  we  can  conclude  that:  (a)   Good   fundamental   education   is   not   equal   good   higher  education.   North   America   performance   similar   and   good   for  high   school   degree,   but   they   show   different   percentage   for  bachelor  and  higher  degree.  (b)   Performances   for   bachelor   and   higher   degree   have  correlation   for   different   states.   If   a   state   has   a   good  performance  of  bachelor  education,  it  is  very  likely  it  will  have  a  good  performance  for  higher  degree.  

 Fig  3.3