Noob on JSON : Data for d3.js documents.

Noob on JSON : Data for d3.js documents.

A back-end developer of PHP journeys to the front-end and builds some simple visualizations for his data. Talk given to London d3.js meetup July 23rd 2013

983a9815b8f76cb27ff29af5562a8633?s=128

Ben Greenaway

July 24, 2013
Tweet

Transcript

  1. Noobs  on  JSON a  PHP  developer’s  journey  to  the  front

      end Wednesday, 24 July 13
  2. Hello,  my  name  is  Ben  Greenaway • @blgreenaway • www.bgreenaway.com

    • facebook.com/bgreenawayDevelopment Wednesday, 24 July 13
  3. And  I  am  a  PHP  developer Hello,  my  name  is

     Ben  Greenaway • @blgreenaway • www.bgreenaway.com • facebook.com/bgreenawayDevelopment Wednesday, 24 July 13
  4. But  one  day,   they  wanted  to  look  at  my

     data ! • ! • !! Wednesday, 24 July 13
  5. &  I  became  very  afraid.... But  one  day,   they

     wanted  to  look  at  my  data ! • ! • !! Wednesday, 24 July 13
  6. d3.js  gave  me  a  means  to  display  it   (beyond

     the  confines  of  phpMyAdmin) Wednesday, 24 July 13
  7. d3.js  gave  me  a  means  to  display  it   (beyond

     the  confines  of  phpMyAdmin) (once  I’d  newly  re-­‐learned  my  data  mangling  techniques) Wednesday, 24 July 13
  8. My  familiar  aggregate  funcQons  were   contained  within  MySQL  &

     PHP Wednesday, 24 July 13
  9. This  maVered  because  equivalent   facts  were  not  equivalently  

    syntaxed  by  JavaScript My  familiar  aggregate  funcQons  were   contained  within  MySQL  &  PHP Wednesday, 24 July 13
  10. This  maVered  because  equivalent   facts  were  not  equivalently  

    syntaxed  by  JavaScript My  familiar  aggregate  funcQons  were   contained  within  MySQL  &  PHP AND  now  my  data  was  now   remote  data! Wednesday, 24 July 13
  11. d3’s  JSON  hurdles remoteness  ::  JSON  as  a  string  of

     data  for   moving  data  between  client  and  host. Wednesday, 24 July 13
  12. d3’s  JSON  hurdles JSON  evaluates  to  a  JavaScript  Object eval

    - parse - http://jsonviewer.stack.hu Wednesday, 24 July 13
  13. d3’s  JSON  hurdles type  ::  eval and parse the string

    once you have it The string must be wrapped in parenthesis. Wednesday, 24 July 13
  14. d3’s  JSON  hurdles type  ::  eval and parse the string

    once you have it The string must be wrapped in parenthesis.  http://jsonviewer.stack.hu Wednesday, 24 July 13
  15. d3’s  JSON  hurdles inspecQon  ::   alert(JSON.stringify(jsonResponse)); Wednesday, 24 July

    13
  16. d3’s  JSON  hurdles inspecQon  ::   accessing  properQes Wednesday, 24

    July 13
  17. d3’s  JSON  hurdles wriQng  JSON  summary  ::   JSON  is

     a  string  which  evaluates  to  an  object   you  write  it  like  a  string, concatenate  it  like  a  string, evaluate  it  like  a  piece  of  code  in  order  to  use  it! (do  this  safely  with  an  in-­‐browser  Parse  funcQon  to  keep  your  day  job) (browser-­‐naQve  Parse  funcQons  are  also  in  fact  faster  than  JavaScript’s  eval) Wednesday, 24 July 13
  18. d3’s  JSON  hurdles reading  JSON  summary  ::   you  don’t

     read  JSON,  you  access  objects  evaluated  from  it   Wednesday, 24 July 13
  19. d3.js  gave  me  a  means  to  display  it   but

     required  me  to  understand   JSON  (and  other  things) Wednesday, 24 July 13
  20. d3.js  gave  me  a  means  to  display  it   but

     required  me  to  understand   JSON  (and  other  things) PresenQng  this  talk  at  d3.js  London  taught  me  a  few  more!   (updates  to  include  use  of  Map  soon) Wednesday, 24 July 13
  21. My  first  d3.js  project... • Measurey  Web  Stuff  -­‐  performance

     graphs  for  DNS Wednesday, 24 July 13
  22. My  first  d3.js  project... • Measurey  Web  Stuff  -­‐  performance

     graphs  for  DNS Wednesday, 24 July 13
  23. • code.hazzens.com/d3tut/lesson_1.html • jsonviewer.stack.hu • mikeheavers.com/main/code-­‐item/svg_path_animaQons_with_d3 Hope  you  enjoyed  my

     talk • @blgreenaway • www.bgreenaway.com • hVp://speakerdeck.com/blgreenaway tools  in  demo Wednesday, 24 July 13