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
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