The Hidden Power of Javascript Michelle Minkoff Medill School of Journalism, Northwestern University
Web-Language Triangle <ul><li>HTML – gives us the content </li></ul><ul><li>CSS – lays out the content </li></ul><ul><li>J...
Javascript + mobile <ul><li>Supports these browsers: </li></ul><ul><ul><li>Opera Mobile (>= 8.x, not Opera Mini) </li></ul...
What kind of interactivity? <ul><li>Caution: Novice perspective ahead! </li></ul><ul><li>Coolest line of code so far: </li...
Google Viz API <ul><li>Data-driven apps drive exploration </li></ul><ul><li>Use mobile to kill time </li></ul><ul><li>Reac...
Node Display <ul><li>Two lines: </li></ul><ul><ul><li>Axis </li></ul></ul><ul><ul><li>Value </li></ul></ul><ul><li>Efficac...
Types of Charts <ul><li>Interactive chart types (not all-inclusive): </li></ul><ul><li>Bar (horizontal) </li></ul><ul><li>...
<ul><li>DEMO </li></ul>
Upcoming SlideShare
Loading in …5
×

NICAR 2010: Hidden Power of Javascript

2,473 views

Published on

Learn why Javascript is useful, and how simple coding can help you navigate the world of the Google Visualization API -- esp for deadline-driven graphs useful for journalism.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,473
On SlideShare
0
From Embeds
0
Number of Embeds
1,289
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

NICAR 2010: Hidden Power of Javascript

  1. 1. The Hidden Power of Javascript Michelle Minkoff Medill School of Journalism, Northwestern University
  2. 2. Web-Language Triangle <ul><li>HTML – gives us the content </li></ul><ul><li>CSS – lays out the content </li></ul><ul><li>Javascript – lets user interact with the content </li></ul><ul><ul><li>Uses tags like HTML and CSS </li></ul></ul><ul><ul><li>Always goes in the head </li></ul></ul><ul><ul><ul><li>Easier to separate content </li></ul></ul></ul>
  3. 3. Javascript + mobile <ul><li>Supports these browsers: </li></ul><ul><ul><li>Opera Mobile (>= 8.x, not Opera Mini) </li></ul></ul><ul><ul><li>Internet Explorer Mobile (WM 5.0/2003) </li></ul></ul><ul><ul><li>S60 3rd edition (WebKit/KHTML core) </li></ul></ul><ul><ul><li>Minimo (Gecko-based) </li></ul></ul><ul><ul><li>OpenWave (>=Mercury) </li></ul></ul><ul><ul><li>NetFront (>=3.4) </li></ul></ul><ul><ul><li>Safari Mobile (iPhone) </li></ul></ul>
  4. 4. What kind of interactivity? <ul><li>Caution: Novice perspective ahead! </li></ul><ul><li>Coolest line of code so far: </li></ul><ul><li><A HREF=&quot;javascript:javascript:history.go(-1)&quot;>Click here to go back to search results.</A> </li></ul>
  5. 5. Google Viz API <ul><li>Data-driven apps drive exploration </li></ul><ul><li>Use mobile to kill time </li></ul><ul><li>Reach people where they want your content </li></ul><ul><li>Can explore nodes on a graph </li></ul>
  6. 6. Node Display <ul><li>Two lines: </li></ul><ul><ul><li>Axis </li></ul></ul><ul><ul><li>Value </li></ul></ul><ul><li>Efficacy of popup depends on you! </li></ul>
  7. 7. Types of Charts <ul><li>Interactive chart types (not all-inclusive): </li></ul><ul><li>Bar (horizontal) </li></ul><ul><li>Column (vertical) </li></ul><ul><li>Pie </li></ul><ul><li>Scatterplot </li></ul><ul><li>Line </li></ul><ul><li>Dygraph (zoomable time series) </li></ul>
  8. 8. <ul><li>DEMO </li></ul>

×