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

Transcript

1. Noobs  on  JSON
   a  PHP  developer’s  journey  to  the  front  
   end
   Wednesday, 24 July 13
   

   View Slide

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

   View Slide

3. And  I  am  a  PHP  developer
   Hello,  my  name  is  Ben  Greenaway
   • @blgreenaway
   • www.bgreenaway.com
   • facebook.com/bgreenawayDevelopment
   Wednesday, 24 July 13
   

   View Slide

4. But  one  day,  
   they  wanted  to  look  at  my  data
   !
   • !
   • !!
   Wednesday, 24 July 13
   

   View Slide

5. &  I  became  very  afraid....
   But  one  day,  
   they  wanted  to  look  at  my  data
   !
   • !
   • !!
   Wednesday, 24 July 13
   

   View Slide

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

   View Slide

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
   

   View Slide

8. My  familiar  aggregate  funcQons  were  
   contained  within  MySQL  &  PHP
   Wednesday, 24 July 13
   

   View Slide

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
   

   View Slide

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
    

    View Slide

11. d3’s  JSON  hurdles
    remoteness  ::  JSON  as  a  string  of  data  for  
    moving  data  between  client  and  host.
    Wednesday, 24 July 13
    

    View Slide

12. d3’s  JSON  hurdles
    JSON  evaluates  to  a  JavaScript  Object
    eval - parse - http://jsonviewer.stack.hu
    Wednesday, 24 July 13
    

    View Slide

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
    

    View Slide

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
    

    View Slide

15. d3’s  JSON  hurdles
    inspecQon  ::  
    alert(JSON.stringify(jsonResponse));
    Wednesday, 24 July 13
    

    View Slide

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

    View Slide

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
    

    View Slide

18. d3’s  JSON  hurdles
    reading  JSON  summary  ::  
    you  don’t  read  JSON,  you  access  objects  evaluated  from  it  
    Wednesday, 24 July 13
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide