syntax.us Let the syntax do the talking
Blog Contact Posts Questions Tags Hire Me

Question:
What is 2015_1018 Code Challenge?

The 2015_1018 Code Challenge is a learning exercise for students attending Dan's Linux JavaScript Class at 3pm on 2015-10-18 at Hacker Dojo:

http://www.meetup.com/Dans-Linux-JavaScript-Class/events/225904509/

We start with three tasks: Install Ubuntu, enhance it, and create account named ann: Next, we learn some Emacs:
  • emacs ~ann/.emacs
  • Experiment with the controls at the top of the emacs window
  • Add this syntax to file: ~ann/.emacs
    ;;
    ;; ~ann/.emacs
    ;;
    (global-set-key "\C-xs" 'shell)
    (global-set-key "\em"   'buffer-menu-other-window)
    (global-set-key "\eR"   'rename-buffer)
    ;; end of .emacs
    
  • Figure out how to save and exit
  • Verify your work:
    cat ~ann/.emacs
  • Start 'bare' emacs:
    emacs
  • Start a shell in emacs with ctrl-x then letter 's'.
  • I should see something like this:
  • Rename the shell to SHELL1 with esc-key, then letter 'R'
  • I should see something like this:
  • List all buffers in my emacs with esc-key, then letter 'm'
  • I should see something like this:

I see the buffer-menu as similar to the Mac-Dock, Ubuntu-Launcher or the Windows-Taskbar.

The buffer-menu is my favorite emacs feature; it allows my mind to QUICKLY switch focus among three types of objects:
  • different shells
  • different files
  • different folders

The buffer-menu floats 'hot' shells, files and folders to the top.

This is useful behavior.

I mostly do 4 types of tasks on a laptop:
  • Interact with file
  • Interact with folder
  • Interact with shell
  • Interact with browser

I can do the first three types inside of emacs.

When I coordinate tasks with emacs rather than a Dock, I work much faster (because of the buffer-menu).

That sequence of creating a shell, and renaming it is the most difficult task I need to know.

All other emacs tasks can be done using mouse and arrow keys.

If I am an emacs power-user, I know two ways to use emacs to interact with folders.

The GUI-way is to click on the file-cabinet at the top.

Another way, which is quicker, is to type command ctrl-x then letter 'f'.

I should see something like this:


  • After I learn some Emacs or some other editor, I Install Node.js in this folder: ~ann/node/
  • cd ~ann
    wget https://nodejs.org/dist/v5.0.0/node-v5.0.0-linux-x64.tar.gz
    tar zxf node-v5.0.0-linux-x64.tar.gz
    rm -rf node
    mv node-v5.0.0-linux-x64 node
  • Then, I add Node.js to PATH:
    export       PATH="/home/ann/node/bin:${PATH}"
    echo 'export PATH="/home/ann/node/bin:${PATH}"' >> ~ann/.bashrc
  • Run a test:
    which node
    node -e 'console.log("hello world")'
  • Install CoffeScript to test npm:
    which npm
    npm install -g coffee-script
    ls -la /home/ann/node/lib/node_modules/
    which coffee
    coffee -e 'console.log "hello coffee!"'
  • Start work on an app:
    cd ~ann
    git clone https://github.com/danbikle/app21.git
    cd ~ann/app21
    npm install
    mkdir gems
    .  ~ann/app21/app21env.bash
    gem install haml
Now you are ready to do Rickshaw development on your laptop.

Try this shell command:
~ann/app21/http.bash

Browse this URL:

http://localhost:8080/demos.html

The above URL should resemble the content served by this URL:

https://dojo650.herokuapp.com/demos.html

If you want to deploy this repository to Heroku, follow this recipe:
  • Create an account at heroku.com website
  • Download/Install Heroku client
    cd ~ann
    wget https://s3.amazonaws.com/assets.heroku.com/heroku-client/heroku-client.tgz
    tar zxf heroku-client.tgz
    echo 'export PATH=/home/ann/heroku-client/bin:${PATH}' >> ~ann/.bashrc
    echo  export PATH=/home/ann/heroku-client/bin:${PATH}
  • I created ssh-key for ann account (assuming ann has none yet):
    ann@dev06:~$ 
    ann@dev06:~$ ssh-keygen -t rsa
    Generating public/private rsa key pair.
    Enter file in which to save the key (/home/ann/.ssh/id_rsa): 
    Created directory '/home/ann/.ssh'.
    Enter passphrase (empty for no passphrase): 
    Enter same passphrase again: 
    Your identification has been saved in /home/ann/.ssh/id_rsa.
    Your public key has been saved in /home/ann/.ssh/id_rsa.pub.
    The key fingerprint is:
    7c:73:e0:26:8b:62:f6:a4:1d:78:22:e5:cd:3a:5c:eb ann@dev06
    The key randomart image is:
    +--[ RSA 2048]----+
    |                 |
    |                 |
    |          .      |
    |       . . .     |
    |    .   S = .    |
    |   o +.. = o     |
    |  ..B.B..        |
    |   +oX..         |
    |    ooE          |
    +-----------------+
    ann@dev06:~$ 
    ann@dev06:~$ 
    ann@dev06:~$ 
    
  • I used heroku-client to "login" my shell. I gave a copy of ann public ssh-key to heroku:
    heroku status
    heroku auth:login
    heroku auth:whoami
    heroku keys:add
  • I used heroku-client to create a blank app named dojo650 at herokuapp.com
    cd ~ann/app21
    heroku create dojo650
  • git-push ~ann/app21 to heroku
    cd ~ann/app21
    git add .
    git commit -am hellodojo
    git push heroku master
  • I saw ~ann/app21 deployed at https://dojo650.herokuapp.com/demos.html

Challenge 10

Your challenge: understand what this HAML does:
!!!
%html(lang="en")
  %head
    %meta(content="text/html; charset=UTF-8" http-equiv="Content-Type")/
    %title demo10 Default renderer is 'area'
    %script(src="/app/d3.v3.min.js")
    %script(src="/app/rickshaw.min.js")
  %body
    %h1 app21/demo10 Default renderer is 'area'
    #refer
      Refer to:
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/examples/' target='x')
        http://code.shutterstock.com/rickshaw/examples/
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/examples/start.html' target='x')
        http://code.shutterstock.com/rickshaw/examples/start.html
    %hr/
    / The div-element below should be affected by rickshaw.js
    #my_rickshawchart
    :javascript
      var graph = new Rickshaw.Graph( {
          element: document.querySelector("#my_rickshawchart"), 
          width: 500, 
          height: 200, 
          series: [{
              color: 'steelblue',
              data: [ 
                  { x: 0, y: 40 }, 
                  { x: 1, y: 49 }, 
                  { x: 2, y: 38 }, 
                  { x: 3, y: 30 }, 
                  { x: 4, y: 32 } ]
          }]
      });
      graph.render();
The above HAML is deployed at this URL:
https://dojo650.herokuapp.com/app/demo10.html

Challenge 10 Questions:

  • Which version of D3 is used?
  • Where does the Rickshaw JS come from?
  • What kind of element does the chart reside in?
  • How to tell Rickshaw where to place the chart?
  • How to change size of chart?
  • How to change color of chart?
  • How is area chart different than line chart?

Challenge 11

Your challenge: understand what this HAML does:
!!!
%html(lang="en")
  %head
    %meta(content="text/html; charset=UTF-8" http-equiv="Content-Type")/
    %title demo11, Area
    %script(src="/app/d3.v3.min.js")
    %script(src="/app/rickshaw.min.js")
  %body
    %h1 app21/demo11, Area
    #refer
      Refer to:
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/' target='x')
        http://code.shutterstock.com/rickshaw/
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/guide/area-1.html' target='x')
        http://code.shutterstock.com/rickshaw/guide/area-1.html
    %hr/
    / The div-element below should be affected by rickshaw.js
    #my_rickshawchart
    :javascript
      var graph = new Rickshaw.Graph( {
          renderer: 'area',
          element: document.querySelector("#my_rickshawchart"), 
          width: 500, 
          height: 200, 
          series: [{
              color: '#888888',
              data: [ 
                  { x: 0, y: 40 }, 
                  { x: 1, y: 49 }, 
                  { x: 2, y: 38 }, 
                  { x: 3, y: 30 }, 
                  { x: 4, y: 32 } ]
          }]
      });
      graph.render();
The above HAML is deployed at this URL:
https://dojo650.herokuapp.com/app/demo11.html

Challenge 11 Questions:

  • What is the name of the Rickshaw constructor?
  • What does it construct?
  • What is the most important property of the object?
  • How to render line instead of area?
  • When an object contains a function, what is that function called?

Challenge 12

Your challenge: understand what this HAML does:
!!!
%html(lang="en")
  %head
    %meta(content="text/html; charset=UTF-8" http-equiv="Content-Type")/
    %title demo12, Stacked Area
    %script(src="/app/d3.v3.min.js")
    %script(src="/app/rickshaw.min.js")
  %body
    %h1 app21/demo12, Stacked Area
    #refer
      Refer to:
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/' target='x')
        http://code.shutterstock.com/rickshaw/
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/guide/area-2.html' target='x')
        http://code.shutterstock.com/rickshaw/guide/area-2.html
    %hr/
    / The div-element below should be affected by rickshaw.js
    #my_rickshawchart
    :javascript
      var series1 = {
        color: '#888888',
        data: [ 
          { x: 0, y: 40 }, 
          { x: 1, y: 49 }, 
          { x: 2, y: 38 }, 
          { x: 3, y: 30 }, 
          { x: 4, y: 32 } ]};
      var series2 = {
        color: '#DDDDDD',
        data: [ 
          { x: 0, y: 40 }, 
          { x: 1, y: 49 }, 
          { x: 2, y: 38 }, 
          { x: 3, y: 30 }, 
          { x: 4, y: 32 } ]};
      var graph = new Rickshaw.Graph( {
          renderer: 'area',
          element: document.querySelector("#my_rickshawchart"), 
          width: 500, 
          height: 200, 
          series: [series1, series2]
      });
      graph.render();
The above HAML is deployed at this URL:
https://dojo650.herokuapp.com/app/demo12.html

Challenge 12 Questions:

  • What is a stacked area chart?
  • Stacked vs Un-Stacked: What is the difference?
  • Does Rickshaw support stacked line chart?

Challenge 13

Your challenge: understand what this HAML does:
!!!
%html(lang="en")
  %head
    %meta(content="text/html; charset=UTF-8" http-equiv="Content-Type")/
    %title demo13, Un-Stacked Area
    %script(src="/app/d3.v3.min.js")
    %script(src="/app/rickshaw.min.js")
  %body
    %h1 app21/demo13, Un-Stacked Area
    #refer
      Refer to:
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/' target='x')
        http://code.shutterstock.com/rickshaw/
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/guide/area-3.html' target='x')
        http://code.shutterstock.com/rickshaw/guide/area-3.html
      %br/
      %a(href='https://github.com/shutterstock/rickshaw/issues/410' target='x')
        https://github.com/shutterstock/rickshaw/issues/410
    %hr/
    / The div-element below should be affected by rickshaw.js
    #my_rickshawchart
    :javascript
      var series1 = {
        color: '#888888',
        data: [ 
          { x: 0, y: 40 }, 
          { x: 1, y: 49 }, 
          { x: 2, y: 38 }, 
          { x: 3, y: 0 }, 
          { x: 4, y: 2 } ]};
      var series2 = {
        color: '#DDDDDD',
        data: [ 
          { x: 0, y: 0 }, 
          { x: 1, y: 9 }, 
          { x: 2, y: 8 }, 
          { x: 3, y: 30 }, 
          { x: 4, y: 32 } ]};
      var graph = new Rickshaw.Graph( {
          preserve: true,
          renderer: 'area',
          element: document.querySelector("#my_rickshawchart"), 
          width: 500, 
          height: 200, 
          series: [series1, series2]
      });
      graph.renderer.unstack = true;
      graph.render();
The above HAML is deployed at this URL:
https://dojo650.herokuapp.com/app/demo13.html

Challenge 13 Questions:

  • How to Un-Stack Area Charts?
  • Is it a good idea to Un-Stack Area Charts?
  • What does property, preserve:true do?

Challenge 14

Your challenge: understand what this HAML does:
!!!
%html(lang="en")
  %head
    %meta(content="text/html; charset=UTF-8" http-equiv="Content-Type")/
    %title demo14, Un-Stacked Line
    %script(src="/app/d3.v3.min.js")
    %script(src="/app/rickshaw.min.js")
  %body
    %h1 app21/demo14, Un-Stacked Line
    #refer
      Refer to:
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/' target='x')
        http://code.shutterstock.com/rickshaw/
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/guide/line-1.html' target='x')
        http://code.shutterstock.com/rickshaw/guide/line-1.html
    %hr/
    / The div-element below should be affected by rickshaw.js
    #my_rickshawchart
    :javascript
      var series1 = {
        color: '#888888',
        data: [ 
          { x: 0, y: 40 }, 
          { x: 1, y: 49 }, 
          { x: 2, y: 38 }, 
          { x: 3, y: 4 }, 
          { x: 4, y: 6 } ]};
      var series2 = {
        color: '#222222',
        data: [ 
          { x: 0, y: 0 }, 
          { x: 1, y: 9 }, 
          { x: 2, y: 8 }, 
          { x: 3, y: 30 }, 
          { x: 4, y: 32 } ]};
      var graph = new Rickshaw.Graph( {
          preserve: true,
          renderer: 'line',
          element: document.querySelector("#my_rickshawchart"), 
          width: 500, 
          height: 200, 
          series: [series1, series2]
      });
      graph.renderer.unstack = true;
      graph.render();
The above HAML is deployed at this URL:
https://dojo650.herokuapp.com/app/demo14.html

Challenge 14 Questions:

  • Where are the bugs in demo14?
  • Does demo14 change behavior after bugs removed?

Challenge 15

Your challenge: understand what this HAML does:
!!!
%html(lang="en")
  %head
    %meta(content="text/html; charset=UTF-8" http-equiv="Content-Type")/
    %title demo15 Bars
    %script(src="/app/d3.v3.min.js")
    %script(src="/app/rickshaw.min.js")
  %body
    %h1 app21/demo15 Bars
    #refer
      Refer to:
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/' target='x')
        http://code.shutterstock.com/rickshaw/
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/guide/bar-1.html' target='x')
        http://code.shutterstock.com/rickshaw/guide/bar-1.html
    %hr/
    / The div-element below should be affected by rickshaw.js
    #my_rickshawchart
    :javascript
      var series1 = {
        color: '#008800',
        data: [ 
          { x: 0, y: 40 }, 
          { x: 1, y: 49 }, 
          { x: 2, y: 38 }, 
          { x: 3, y: 4 }, 
          { x: 4, y: 6 } ]};
      var graph = new Rickshaw.Graph( {
          renderer: 'bar',
          element: document.querySelector("#my_rickshawchart"), 
          width: 500, 
          height: 200, 
          series: [series1]
      });
      graph.render();
The above HAML is deployed at this URL:
https://dojo650.herokuapp.com/app/demo15.html

Challenge 15 Questions:

  • How to change a line chart into bar chart?
  • Is it a good idea to stack a bar chart?
  • Is it a good idea to un-stack a bar chart?

Challenge 16

Your challenge: understand what this HAML does:
!!!
%html(lang="en")
  %head
    %meta(content="text/html; charset=UTF-8" http-equiv="Content-Type")/
    %title demo16 Stacked Bars
    %script(src="/app/d3.v3.min.js")
    %script(src="/app/rickshaw.min.js")
  %body
    %h1 app21/demo16 Stacked Bars
    #refer
      Refer to:
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/' target='x')
        http://code.shutterstock.com/rickshaw/
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/guide/bar-2.html' target='x')
        http://code.shutterstock.com/rickshaw/guide/bar-2.html
    %hr/
    / The div-element below should be affected by rickshaw.js
    #my_rickshawchart
    :javascript
      var series1 = {
        color: '#008800',
        data: [ 
          { x: 0, y: 40 }, 
          { x: 1, y: 49 }, 
          { x: 2, y: 38 }, 
          { x: 3, y: 4 }, 
          { x: 4, y: 6 } ]};
      var series2 = {
        color: '#222222',
        data: [ 
          { x: 0, y: 0 }, 
          { x: 1, y: 9 }, 
          { x: 2, y: 8 }, 
          { x: 3, y: 30 }, 
          { x: 4, y: 32 } ]};
      var graph = new Rickshaw.Graph( {
          renderer: 'bar',
          element: document.querySelector("#my_rickshawchart"), 
          width: 500, 
          height: 200, 
          series: [series1,series2]
      });
      graph.render();
The above HAML is deployed at this URL:
https://dojo650.herokuapp.com/app/demo16.html

Challenge 16 Questions:

  • When I render 2 series as bars, are the bars stacked by default?

Challenge 17

Your challenge: understand what this HAML does:
!!!
%html(lang="en")
  %head
    %meta(content="text/html; charset=UTF-8" http-equiv="Content-Type")/
    %title demo17 Bars, stack: false
    %script(src="/app/d3.v3.min.js")
    %script(src="/app/rickshaw.min.js")
  %body
    %h1 app21/demo17 Bars, stack: false
    #refer
      Refer to:
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/' target='x')
        http://code.shutterstock.com/rickshaw/
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/guide/bar-2.html' target='x')
        http://code.shutterstock.com/rickshaw/guide/bar-2.html
    %hr/
    / The div-element below should be affected by rickshaw.js
    #my_rickshawchart
    :javascript
      var series1 = {
        color: '#008800',
        data: [ 
          { x: 0, y: 40 }, 
          { x: 1, y: 49 }, 
          { x: 2, y: 38 }, 
          { x: 3, y: 4 }, 
          { x: 4, y: 6 } ]};
      var series2 = {
        color: '#222222',
        data: [ 
          { x: 0, y: 0 }, 
          { x: 1, y: 9 }, 
          { x: 2, y: 8 }, 
          { x: 3, y: 30 }, 
          { x: 4, y: 32 } ]};
      var graph = new Rickshaw.Graph( {
          renderer: 'bar',
          stack: false,
          element: document.querySelector("#my_rickshawchart"), 
          width: 500, 
          height: 200, 
          series: [series1,series2]
      });
      graph.render();
The above HAML is deployed at this URL:
https://dojo650.herokuapp.com/app/demo17.html

Challenge 17 Questions:

  • Do un-stacked bars have same problem as un-stacked areas?
  • When might un-stacked bars be a bad idea?

Challenge 18

Your challenge: understand what this HAML does:
!!!
%html(lang="en")
  %head
    %meta(content="text/html; charset=UTF-8" http-equiv="Content-Type")/
    %title demo18 Scatter Plot
    %script(src="/app/d3.v3.min.js")
    %script(src="/app/rickshaw.min.js")
  %body
    %h1 app21/demo18 Scatter Plot
    #refer
      Refer to:
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/' target='x')
        http://code.shutterstock.com/rickshaw/
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/guide/scatterplot-1.html' target='x')
        http://code.shutterstock.com/rickshaw/guide/scatterplot-1.html
    %hr/
    / The div-element below should be affected by rickshaw.js
    #my_rickshawchart
    :javascript
      var series1 = {
        color: '#0000FF',
        data: [ 
          { x: 0, y: 40 }, 
          { x: 0, y: 45 }, 
          { x: 1, y: 49 }, 
          { x: 1, y: 46 }, 
          { x: 2, y: 38 }, 
          { x: 2, y: 30 }, 
          { x: 3, y: 0 }, 
          { x: 4, y: 0 } ]};
      var series2 = {
        color: '#FF0000',
        data: [ 
          { x: 0, y: 0 }, 
          { x: 1, y: 0 }, 
          { x: 2, y: 22 }, 
          { x: 2, y: 26 }, 
          { x: 3, y: 30 }, 
          { x: 3, y: 37 }, 
          { x: 4, y: 36 }, 
          { x: 4, y: 32 } ]};
      var graph = new Rickshaw.Graph( {
          renderer: 'scatterplot',
          stroke: true,
          element: document.querySelector("#my_rickshawchart"), 
          width: 500, 
          height: 200, 
          series: [series1,series2]
      });
      graph.render();
The above HAML is deployed at this URL:
https://dojo650.herokuapp.com/app/demo18.html

Challenge 18 Questions:

  • When to use a scatter plot?
  • What does property, stroke:true, do?

Challenge 19

Your challenge: understand what this HAML does:
!!!
%html(lang="en")
  %head
    %meta(content="text/html; charset=UTF-8" http-equiv="Content-Type")/
    %title demo19 Legend
    %link(href="/app/graph.css"  rel="stylesheet" type="text/css")/
    %link(href="/app/legend.css" rel="stylesheet" type="text/css")/
    %link(href="/app/demo19.css"  rel="stylesheet" type="text/css")/
    %script(src="/app/d3.v3.min.js"    )
    %script(src="/app/d3.layout.min.js")
    %script(src="/app/jquery.min.js"   )
    %script(src="/app/jquery-ui.min.js")
    %script(src="/app/rickshaw.min.js" )
  %body
    %h1 app21/demo19 Legend
    #refer
      Refer to:
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/' target='x')
        http://code.shutterstock.com/rickshaw/
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/examples/legend.html' target='x')
        http://code.shutterstock.com/rickshaw/examples/legend.html
    %hr/
    / The div-element below should be affected by rickshaw.js
    #my_rickshaw_chart_container
      #my_rickshaw_chart
      #legend_container
        #smoother(title="Smoothing")
        #legend
    :javascript
      // set up our data series with 50 random data points
      var seriesData = [ [], [], [] ];
      var random = new Rickshaw.Fixtures.RandomData(150);
      for (var i = 0; i < 150; i++) {
      	random.addData(seriesData);
      }
      // instantiate our graph!
      var graph = new Rickshaw.Graph( {
      	element: document.getElementById("my_rickshaw_chart"),
      	width: 960,
      	height: 500,
      	renderer: 'area',
      	series: [
      		{
      			color: "#c05020",
      			data: seriesData[0],
      			name: 'New York'
      		}, {
      			color: "#30c020",
      			data: seriesData[1],
      			name: 'London'
      		}, {
      			color: "#6060c0",
      			data: seriesData[2],
      			name: 'Tokyo'
      		}
      	]
      } );
      graph.render();
      var legend = new Rickshaw.Graph.Legend( {
      	graph: graph,
      	element: document.getElementById('legend')
      } );      
      var shelving = new Rickshaw.Graph.Behavior.Series.Toggle( {
      	graph: graph,
      	legend: legend
      } );      
      var order = new Rickshaw.Graph.Behavior.Series.Order( {
      	graph: graph,
      	legend: legend
      } );      
      var highlight = new Rickshaw.Graph.Behavior.Series.Highlight( {
      	graph: graph,
      	legend: legend
      } );
The above HAML is deployed at this URL:
https://dojo650.herokuapp.com/app/demo19.html

Challenge 19 Questions:

  • Traditionally a legend does what to a chart?
  • In demo19 what does it additionally do?
  • To add a legend what HAML changes do I make?
  • To add a legend what CSS changes do I make?
  • To add a legend what JS changes do I make?
  • How does the legend 'know' which series has which color?

Challenge 20

Your challenge: understand what this HAML does:
!!!
%html(lang="en")
  %head
    %meta(content="text/html; charset=UTF-8" http-equiv="Content-Type")/
    %title demo20 Hover
    %link(href="/app/graph.css"  rel="stylesheet" type="text/css")/
    %link(href="/app/detail.css" rel="stylesheet" type="text/css")/
    %script(src="/app/d3.v3.min.js"    )
    %script(src="/app/d3.layout.min.js")
    %script(src="/app/jquery.min.js"   )
    %script(src="/app/jquery-ui.min.js")
    %script(src="/app/rickshaw.min.js" )
  %body
    %h1 app21/demo20 Hover
    #refer
      Refer to:
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/' target='x')
        http://code.shutterstock.com/rickshaw/
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/examples/lines.html' target='x')
        http://code.shutterstock.com/rickshaw/examples/lines.html
    %hr/
    / The div-element below should be affected by rickshaw.js
    #my_rickshaw_chart
    :javascript
      // set up our data series with 50 random data points
      var seriesData = [ [], [], [] ];
      var random = new Rickshaw.Fixtures.RandomData(150);
      for (var i = 0; i < 150; i++) {
      	random.addData(seriesData);
      }
      // instantiate our graph!
      var graph = new Rickshaw.Graph( {
      	element: document.getElementById("my_rickshaw_chart"),
      	width: 960,
      	height: 500,
      	renderer: 'line',
      	series: [
      		{
      			color: "#c05020",
      			data: seriesData[0],
      			name: 'New York'
      		}, {
      			color: "#30c020",
      			data: seriesData[1],
      			name: 'London'
      		}, {
      			color: "#6060c0",
      			data: seriesData[2],
      			name: 'Tokyo'
      		}
      	]
      } );
      graph.render();
      var hoverDetail = new Rickshaw.Graph.HoverDetail( {
      	graph: graph
      } );
The above HAML is deployed at this URL:
https://dojo650.herokuapp.com/app/demo20.html

Challenge 20 Questions:

  • Is HoverDetail easier to code than Legend?

Challenge 21

Your challenge: understand what this HAML does:
!!!
%html(lang="en")
  %head
    %meta(content="text/html; charset=UTF-8" http-equiv="Content-Type")/
    %title demo21 Legend and Hover
    %link(href="/app/graph.css"  rel="stylesheet" type="text/css")/
    %link(href="/app/detail.css" rel="stylesheet" type="text/css")/
    %link(href="/app/legend.css" rel="stylesheet" type="text/css")/
    %link(href="/app/demo21.css"  rel="stylesheet" type="text/css")/
    %script(src="/app/d3.v3.min.js"    )
    %script(src="/app/d3.layout.min.js")
    %script(src="/app/jquery.min.js"   )
    %script(src="/app/jquery-ui.min.js")
    %script(src="/app/rickshaw.min.js" )
  %body
    %h1 app21/demo21 Legend and Hover
    #refer
      Refer to:
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/' target='x')
        http://code.shutterstock.com/rickshaw/
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/examples/lines.html' target='x')
        http://code.shutterstock.com/rickshaw/examples/lines.html
    %hr/
    / The div-element below should be affected by rickshaw.js
    #my_rickshaw_chart_container
      #legend_container
        #smoother(title="Smoothing")
        #legend
      #my_rickshaw_chart
    :javascript
      // set up our data series with 50 random data points
      var seriesData = [ [], [], [] ];
      var random = new Rickshaw.Fixtures.RandomData(150);
      for (var i = 0; i < 150; i++) {
      	random.addData(seriesData);
      }
      // instantiate our graph!
      var graph = new Rickshaw.Graph( {
      	element: document.getElementById("my_rickshaw_chart"),
      	width: 960,
      	height: 500,
      	renderer: 'line',
      	series: [
      		{
      			color: "#c05020",
      			data: seriesData[0],
      			name: 'New York'
      		}, {
      			color: "#30c020",
      			data: seriesData[1],
      			name: 'London'
      		}, {
      			color: "#6060c0",
      			data: seriesData[2],
      			name: 'Tokyo'
      		}
      	]
      } );
      graph.render();
      var hoverDetail = new Rickshaw.Graph.HoverDetail( {
      	graph: graph
      } );
      var legend = new Rickshaw.Graph.Legend( {
      	graph: graph,
      	element: document.getElementById('legend')
      } );      
      var shelving = new Rickshaw.Graph.Behavior.Series.Toggle( {
      	graph: graph,
      	legend: legend
      } );
The above HAML is deployed at this URL:
https://dojo650.herokuapp.com/app/demo21.html

Challenge 21 Questions:

  • Does HoverDetail interfere with Legend?
  • Which CSS file helps HoverDetail?
  • Which CSS file helps Legend?

Challenge 22

Your challenge: understand what this HAML does:
!!!
%html(lang="en")
  %head
    %meta(content="text/html; charset=UTF-8" http-equiv="Content-Type")/
    %title demo22 Slider
    / Rickshaw RangeSlider needs jquery-ui.css
    %link(href="/app/jquery-ui.css" rel="stylesheet" type="text/css")/
    %link(href="/app/graph.css"     rel="stylesheet" type="text/css")/
    %link(href="/app/legend.css"    rel="stylesheet" type="text/css")/
    %link(href="/app/demo22.css"    rel="stylesheet" type="text/css")/
    %script(src="/app/d3.v3.min.js"    )
    %script(src="/app/d3.layout.min.js")
    %script(src="/app/jquery.min.js"   )
    / Rickshaw RangeSlider needs jquery-ui.min.js
    %script(src="/app/jquery-ui.min.js")
    %script(src="/app/rickshaw.min.js" )
  %body
    %h1 app21/demo22 Slider
    #refer
      Refer to:
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/' target='x')
        http://code.shutterstock.com/rickshaw/
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/examples/extensions.html' target='x')
        http://code.shutterstock.com/rickshaw/examples/extensions.html
    %hr/
    / The div-element below should be affected by rickshaw.js
    #my_rickshaw_chart_container
      #my_rickshaw_chart
      / element below depends on Rickshaw.Graph.RangeSlider()
      #my_rickshaw_slider
    :javascript
      // set up our data series with 50 random data points
      var seriesData = [ [], [], [] ];
      var random = new Rickshaw.Fixtures.RandomData(150);
      for (var i = 0; i < 150; i++) {
        random.addData(seriesData);
      }
      // instantiate our graph!
      var graph = new Rickshaw.Graph( {
        element: document.getElementById("my_rickshaw_chart"),
        width: 960,
        height: 500,
        renderer: 'line',
        series: [
                {
                        color: "#c05020",
                        data: seriesData[0],
                        name: 'New York'
                }, {
                        color: "#30c020",
                        data: seriesData[1],
                        name: 'London'
                }, {
                        color: "#6060c0",
                        data: seriesData[2],
                        name: 'Tokyo'
                }
        ]
      } );
      graph.render();
      // Rickshaw RangeSlider needs jquery-ui.css, jquery-ui.min.js
      var slider = new Rickshaw.Graph.RangeSlider({
          graph: graph,
          element: document.querySelector('#my_rickshaw_slider')
      });
The above HAML is deployed at this URL:
https://dojo650.herokuapp.com/app/demo22.html

Challenge 22 Questions:

  • What is jQuery UI?
  • Does Rickshaw create the slider div-element for me?
  • In demo22, which behavior is the slider missing?

Challenge 23

Your challenge: understand what this HAML does:
!!!
%html(lang="en")
  %head
    %meta(content="text/html; charset=UTF-8" http-equiv="Content-Type")/
    %title demo23 Rickshaw.Graph.Ajax
    %link(href="/app/graph.css"     rel="stylesheet" type="text/css")/
    %link(href="/app/detail.css"    rel="stylesheet" type="text/css")/
    %link(href="/app/legend.css"    rel="stylesheet" type="text/css")/
    %link(href="/app/demo22.css"    rel="stylesheet" type="text/css")/
    %script(src="/app/d3.v3.min.js"    )
    %script(src="/app/d3.layout.min.js")
    %script(src="/app/jquery.min.js"   )
    %script(src="/app/rickshaw.min.js" )
  %body
    %h1 app21/demo23 Rickshaw.Graph.Ajax
    #refer
      Refer to:
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/' target='x')
        http://code.shutterstock.com/rickshaw/
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/guide/ajax-1.html' target='x')
        http://code.shutterstock.com/rickshaw/guide/ajax-1.html
      %br/
      %a(href='/app/demo23data.json' target='j') /app/demo23data.json
    %hr/
    / The div-element below depends on rickshaw.js
    #my_rickshaw_chart_container
      #my_rickshaw_chart
    :javascript
      new Rickshaw.Graph.Ajax( {
        element: document.getElementById("my_rickshaw_chart"),
        width: 235,
        height: 85,
        renderer: 'line',
        dataURL: '/app/demo23data.json',
        onData: function(d) { d[0].data[0].y = 80; return d },
        onComplete: function(transport) {
          var graph = transport.graph;
          var detail = new Rickshaw.Graph.HoverDetail({ graph: graph });
        }});
The above HAML is deployed at this URL:
https://dojo650.herokuapp.com/app/demo23.html

Challenge 23 Questions:

  • Before demo23, where did the graph object come from?
  • In demo23, where does the graph object come from?
  • In demo23, what is the purpose of onComplete() method?
  • What happens after I remove onComplete() method?
  • The member, d[0], in onComplete() method corresponds to what?
  • The member, d[0].data[0], in onComplete() method corresponds to what?
  • The member, d[0].data[0].y, in onComplete() method corresponds to what?

Challenge 24

Your challenge: understand what this HAML does:
!!!
%html(lang="en")
  %head
    %meta(content="text/html; charset=UTF-8" http-equiv="Content-Type")/
    %title demo24 Rickshaw.Graph.JSONP
    %link(href="/app/graph.css"     rel="stylesheet" type="text/css")/
    %link(href="/app/legend.css"    rel="stylesheet" type="text/css")/
    %link(href="/app/demo22.css"    rel="stylesheet" type="text/css")/
    %script(src="/app/d3.v3.min.js"    )
    %script(src="/app/d3.layout.min.js")
    %script(src="/app/jquery.min.js"   )
    %script(src="/app/rickshaw.min.js" )
  %body
    %h1 app21/demo24 Rickshaw.Graph.JSONP (broken, why?)
    #refer
      Refer to:
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/' target='x')
        http://code.shutterstock.com/rickshaw/
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/guide/ajax-1.html' target='x')
        http://code.shutterstock.com/rickshaw/guide/ajax-1.html
      %br/
      %a(href='/app/demo23data.json' target='j') /app/demo23data.json
    %hr/
    / The div-element below depends on rickshaw.js
    #my_rickshaw_chart_container
      #my_rickshaw_chart
    :javascript
      new Rickshaw.Graph.JSONP( {
        element: document.getElementById("my_rickshaw_chart"),
        width: 235,
        height: 85,
        renderer: 'line',
        dataURL: '/app/demo23data.json',
        onData: function(d) { d[0].data[0].y = 80; return d },
        onComplete: function(transport) {
          var graph = transport.graph;
          var detail = new Rickshaw.Graph.HoverDetail({ graph: graph });
        }});
The above HAML is deployed at this URL:
https://dojo650.herokuapp.com/app/demo24.html

Challenge 24 Questions:

  • Why is demo24 broken?

Challenge 25

Your challenge: understand what this HAML does:
!!!
%html(lang="en")
  %head
    %meta(content="text/html; charset=UTF-8" http-equiv="Content-Type")/
    %title demo25 X-Axis
    %link(href="/app/graph.css" rel="stylesheet" type="text/css")/
    %script(src="/app/d3.v3.min.js")
    %script(src="/app/rickshaw.min.js")
  %body
    %h1 app21/demo25 X-Axis
    #refer
      Refer to:
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/' target='x')
        http://code.shutterstock.com/rickshaw/
      %br/

    %hr/
    #my_container
      / The div-element below depends on rickshaw.min.js
      #my_rickshawchart
    :javascript
      // Approx 45 yr converted to seconds:
      var xval0   = 45 * 365 * 24 * 3600;
      var mydelta = 24 * 3600; // 1 day
      var series1 = {
        color: '#0000FF',
        data: [ 
          { x: (xval0+mydelta*10), y: 40.1 }, 
          { x: (xval0+mydelta*11), y: 49.2 }, 
          { x: (xval0+mydelta*12), y: 45.3 }, 
          { x: (xval0+mydelta*13), y: 59.4 }, 
          { x: (xval0+mydelta*14), y: 49.5 }, 
          { x: (xval0+mydelta*15), y: 55.6 } ]};
      var graph = new Rickshaw.Graph( {
          preserve: true,
          renderer: 'line',
          element: document.querySelector("#my_rickshawchart"), 
          width: 500, 
          height: 200, 
          series: [series1]
      });
      var xAxis = new Rickshaw.Graph.Axis.Time({
          graph: graph
      });
      graph.render();
      xAxis.render();
The above HAML is deployed at this URL:
https://dojo650.herokuapp.com/app/demo25.html

Challenge 25 Questions:

  • In Rickshaw, which time format works well for the X-Axis?
  • In Linux how to get this format from current time?
  • In Linux how to convert Unix time to human readable time?
  • When I create xAxis object, how does it know the time series limits?
  • In demo25, do I need to call xAxis.render()?
  • In demo25, what exactly do the X-Axis tickmarks correspond to?

Challenge 26

Your challenge: understand what this HAML does:
!!!
%html(lang="en")
  %head
    %meta(content="text/html; charset=UTF-8" http-equiv="Content-Type")/
    %title demo26 X-Axis, Y-Axis
    %link(href="/app/graph.css" rel="stylesheet" type="text/css")/
    %script(src="/app/d3.v3.min.js")
    %script(src="/app/rickshaw.min.js")
  %body
    %h1 app21/demo26 X-Axis, Y-Axis
    #refer
      Refer to:
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/' target='x')
        http://code.shutterstock.com/rickshaw/
      %br/

    %hr/
    #my_container
      / The div-element below depends on rickshaw.min.js
      #my_rickshawchart
    :javascript
      // Approx 45 yr converted to seconds:
      var xval0   = 45 * 365 * 24 * 3600;
      var mydelta = 24 * 3600; // 1 day
      var series1 = {
        color: '#0000FF',
        data: [ 
          { x: (xval0+mydelta*10), y: 10.1 }, 
          { x: (xval0+mydelta*11), y: 79.2 }, 
          { x: (xval0+mydelta*12), y: 25.3 }, 
          { x: (xval0+mydelta*13), y: 69.4 }, 
          { x: (xval0+mydelta*14), y: 19.5 }, 
          { x: (xval0+mydelta*15), y: 75.6 } ]};
      var graph = new Rickshaw.Graph( {
          preserve: true,
          renderer: 'line',
          element: document.querySelector("#my_rickshawchart"), 
          width: 500, 
          height: 200, 
          series: [series1]
      });
      var xAxis = new Rickshaw.Graph.Axis.Time({
          graph: graph
      });
      var yAxis = new Rickshaw.Graph.Axis.Y({
          graph: graph
      });
      graph.render();
      xAxis.render();
      yAxis.render();
The above HAML is deployed at this URL:
https://dojo650.herokuapp.com/app/demo26.html

Challenge 26 Questions:

  • In demo26 do I need to call xAxis.render()?
  • In demo26 do I need to call yAxis.render()?
  • In demo26, do you like the look of the Y-Axis?

Challenge 27

Your challenge: understand what this HAML does:
!!!
%html(lang="en")
  %head
    %meta(content="text/html; charset=UTF-8" http-equiv="Content-Type")/
    %title demo27 X-Axis, Y-Axis
    %link(href="/app/graph.css" rel="stylesheet" type="text/css")/
    %script(src="/app/d3.v3.min.js")
    %script(src="/app/rickshaw.min.js")
  %body
    #my_container
      #y_axis
      #my_rickshawchart
    %h1 app21/demo27 X-Axis, Y-Axis
    #refer
      Refer to:
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/' target='x')
        http://code.shutterstock.com/rickshaw/
      %br/
      %a(href='https://github.com/shutterstock/rickshaw/blob/master/examples/y_axis.html' target='x')
        https://github.com/shutterstock/rickshaw/blob/master/examples/y_axis.html
    %hr/
    :css
      #my_rickshawchart {position: relative;left: 40px;}
      #y_axis {position: absolute;top: 0;bottom: 0;width: 40px;}
    :javascript
      // Approx 45 yr converted to seconds:
      var xval0   = 45 * 365 * 24 * 3600;
      var mydelta = 24 * 3600; // 1 day
      var series1 = {
        color: '#0000FF',
        data: [ 
          { x: (xval0+mydelta*10), y: 10.1 }, 
          { x: (xval0+mydelta*11), y: 79.2 }, 
          { x: (xval0+mydelta*12), y: 25.3 }, 
          { x: (xval0+mydelta*13), y: 69.4 }, 
          { x: (xval0+mydelta*14), y: 19.5 }, 
          { x: (xval0+mydelta*15), y: 75.6 } ]};
      var graph = new Rickshaw.Graph( {
          renderer: 'line',
          element: document.querySelector("#my_rickshawchart"), 
          height: 300, 
          width: 800,
          series: [series1]
      });
      var xAxis = new Rickshaw.Graph.Axis.Time({
          graph: graph
      });
      var yAxis = new Rickshaw.Graph.Axis.Y({
          graph: graph,
          element: document.getElementById('y_axis'),
          tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
          orientation: 'left',
      });
      graph.render();
The above HAML is deployed at this URL:
https://dojo650.herokuapp.com/app/demo27.html

Challenge 27 Questions:

  • Does the Y-Axis of demo27 look better than that of demo26?
  • How is demo27 more complicated than demo26?

Challenge 28

Your challenge: understand what this HAML does:
!!!
%html(lang="en")
  %head
    %meta(content="text/html; charset=UTF-8" http-equiv="Content-Type")/
    %title demo28 Y-Axis, tickFormat
    %link(href="/app/graph.css" rel="stylesheet" type="text/css")/
    %link(href="/app/lines.css" rel="stylesheet" type="text/css")/
    %script(src="/app/d3.v3.min.js")
    %script(src="/app/rickshaw.min.js")
  %body
    %h1 app21/demo28 Y-Axis, tickFormat
    #refer
      Refer to:
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/' target='x')
        http://code.shutterstock.com/rickshaw/
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/examples/y_axis.html' target='x')
        http://code.shutterstock.com/rickshaw/examples/y_axis.html
    %hr/
    #my_container
      #y_axis
      #my_rickshawchart
    :css
      #my_container    {position: relative;}
      #my_rickshawchart {position: relative;left: 40px;}
      #y_axis {position: absolute;top: 0;bottom: 0;width: 40px;}
    :javascript
      // instantiate our graph!
      var graph = new Rickshaw.Graph( {
        element: document.getElementById("my_rickshawchart"),
        renderer: 'line',
        height: 300,
        width: 800,
        series: [
          {
            data: [ { x: 0, y: 120 }, { x: 1, y: 890 }, { x: 2, y: 38 }, { x: 3, y: 70 }, { x: 4, y: 32 } ],
            color: "#c05020"
          }, {
            data: [ { x: 0, y: 80 }, { x: 1, y: 200 }, { x: 2, y: 100 }, { x: 3, y: 520 }, { x: 4, y: 133 } ],
            color: "#30c020"
          }, {
            data: [ { x: 0, y: 200 }, { x: 1, y: 390 }, { x: 2, y: 1000 }, { x: 3, y: 200 }, { x: 4, y: 230 } ],
            color: "#6060c0"
          }
        ]
      } );
      var y_ticks = new Rickshaw.Graph.Axis.Y( {
        graph: graph,
        orientation: 'left',
        tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
        element: document.getElementById('y_axis')
      } );
      graph.render();
The above HAML is deployed at this URL:
https://dojo650.herokuapp.com/app/demo28.html

Challenge 28 Questions:

  • If I remove, tickFormat: Rickshaw.Fixtures.Number.formatKMBT, what happens?

Challenge 29

Your challenge: understand what this HAML does:
!!!
%html(lang="en")
  %head
    %meta(content="text/html; charset=UTF-8" http-equiv="Content-Type")/
    %title demo29 Y-Axis, tickFormat, X-Axis
    %link(href="/app/graph.css" rel="stylesheet" type="text/css")/
    %link(href="/app/lines.css" rel="stylesheet" type="text/css")/
    %script(src="/app/d3.v3.min.js")
    %script(src="/app/rickshaw.min.js")
  %body
    %h1 app21/demo29 Y-Axis, tickFormat, X-Axis
    #refer
      Refer to:
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/' target='x')
        http://code.shutterstock.com/rickshaw/
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/examples/y_axis.html' target='x')
        http://code.shutterstock.com/rickshaw/examples/y_axis.html
    %hr/
    #my_container
      #y_axis
      #my_rickshawchart
    :css
      #my_container    {position: relative;}
      #my_rickshawchart {position: relative;left: 40px;}
      #y_axis {position: absolute;top: 0;bottom: 0;width: 40px;}
    :javascript
      // instantiate our graph!
      var graph = new Rickshaw.Graph( {
        element: document.getElementById("my_rickshawchart"),
        renderer: 'line',
        height: 300,
        width: 800,
        series: [
          {
            data: [ { x: 0, y: 120 }, { x: 1, y: 890 }, { x: 2, y: 38 }, { x: 3, y: 70 }, { x: 4, y: 32 } ],
            color: "red"
          }, {
            data: [ { x: 0, y: 80 }, { x: 1, y: 200 }, { x: 2, y: 100 }, { x: 3, y: 520 }, { x: 4, y: 133 } ],
            color: "green"
          }, {
            data: [ { x: 0, y: 200 }, { x: 1, y: 390 }, { x: 2, y: 1000 }, { x: 3, y: 200 }, { x: 4, y: 230 } ],
            color: "blue"
          }
        ]
      } );
      var y_ticks = new Rickshaw.Graph.Axis.Y( {
        graph: graph,
        orientation: 'left',
        tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
        element: document.getElementById('y_axis')
      } );
      var xAxis = new Rickshaw.Graph.Axis.Time({
          graph: graph
      });
      graph.render();
The above HAML is deployed at this URL:
https://dojo650.herokuapp.com/app/demo29.html

Challenge 29 Questions:

  • Do I need to place an X-Axis before I place a Y-Axis?

Challenge 30

Your challenge: understand what this HAML does:
!!!
%html(lang="en")
  %head
    %meta(content="text/html; charset=UTF-8" http-equiv="Content-Type")/
    %title demo30 USA Census Data, Stacked
    %link(href="/app/rickshaw.min.css" rel="stylesheet" type="text/css")/
    %script(src="/app/d3.v3.min.js"    )
    %script(src="/app/d3.layout.min.js")
    %script(src="/app/rickshaw.min.js" )
    :css
      #my_container {
        position: relative;
        display: inline-block;
        font-family: Arial, Helvetica, sans-serif;
      }
      #my_rickshawchart {
        display: inline-block;
        margin-left: 40px;
      }
      #y_axis {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 40px;
      }
      #legend {
        display: inline-block;
        vertical-align: top;
        margin: 0 0 0 10px;
      }
  %body
    %h1 app21/demo30 USA Census Data, Stacked
    #refer
      Refer to:
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/tutorial/introduction.html#example_06' target='x')
        http://code.shutterstock.com/rickshaw/tutorial/introduction.html#example_06
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/tutorial/example_06.html' target='x')
        http://code.shutterstock.com/rickshaw/tutorial/example_06.html
      %br/
      %a(href='https://github.com/shutterstock/rickshaw#rickshawcolorpalette' target='x')
        https://github.com/shutterstock/rickshaw#rickshawcolorpalette
      %br/
      %a(href='https://github.com/shutterstock/rickshaw/blob/master/examples/colors.html#L44' target='x')
        https://github.com/shutterstock/rickshaw/blob/master/examples/colors.html#L44
    %hr/
    #my_container
      #y_axis
      #my_rickshawchart
    #legend
    :javascript
      var palette = new Rickshaw.Color.Palette();
      var graph = new Rickshaw.Graph( {
        element: document.querySelector("#my_rickshawchart"),
        width: 550,
        height: 250,
        series: [
          {
            name: "Northeast",
            data: [ { x: -1893456000, y: 25868573 }, { x: -1577923200, y: 29662053 }, { x: -1262304000, y: 34427091 }, { x: -946771200, y: 35976777 }, { x: -631152000, y: 39477986 }, { x: -315619200, y: 44677819 }, { x: 0, y: 49040703 }, { x: 315532800, y: 49135283 }, { x: 631152000, y: 50809229 }, { x: 946684800, y: 53594378 }, { x: 1262304000, y: 55317240 } ],
            color: palette.color()
          },
          {
            name: "Midwest",
            data: [ { x: -1893456000, y: 29888542 }, { x: -1577923200, y: 34019792 }, { x: -1262304000, y: 38594100 }, { x: -946771200, y: 40143332 }, { x: -631152000, y: 44460762 }, { x: -315619200, y: 51619139 }, { x: 0, y: 56571663 }, { x: 315532800, y: 58865670 }, { x: 631152000, y: 59668632 }, { x: 946684800, y: 64392776 }, { x: 1262304000, y: 66927001 } ],
            color: palette.color()
          },
          {
            name: "South",
            data: [ { x: -1893456000, y: 29389330 }, { x: -1577923200, y: 33125803 }, { x: -1262304000, y: 37857633 }, { x: -946771200, y: 41665901 }, { x: -631152000, y: 47197088 }, { x: -315619200, y: 54973113 }, { x: 0, y: 62795367 }, { x: 315532800, y: 75372362 }, { x: 631152000, y: 85445930 }, { x: 946684800, y: 100236820 }, { x: 1262304000, y: 114555744 } ],
            color: palette.color()
          },
          {
            name: "West",
            data: [ { x: -1893456000, y: 7082086 }, { x: -1577923200, y: 9213920 }, { x: -1262304000, y: 12323836 }, { x: -946771200, y: 14379119 }, { x: -631152000, y: 20189962 }, { x: -315619200, y: 28053104 }, { x: 0, y: 34804193 }, { x: 315532800, y: 43172490 }, { x: 631152000, y: 52786082 }, { x: 946684800, y: 63197932 }, { x: 1262304000, y: 71945553 } ],
            color: palette.color()
          }
        ]
      } );
      var x_axis = new Rickshaw.Graph.Axis.Time( { graph: graph } );
      var y_axis = new Rickshaw.Graph.Axis.Y( {
        graph: graph,
        orientation: 'left',
        tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
        element: document.getElementById('y_axis'),
      } );
      var legend = new Rickshaw.Graph.Legend( {
        element: document.querySelector('#legend'),
        graph: graph
      } );
      graph.render();
The above HAML is deployed at this URL:
https://dojo650.herokuapp.com/app/demo30.html

Challenge 30 Questions:

  • In Rickshaw, what is a color palatte?
  • Why might I call palette.color()?
  • Where in the JS code do I specify the color of an area, line, or bar?
  • How is the legend in demo30 is different than the legend in demo19?
  • The X-Axis in demo30 shows decade values and in demo 29 I see seconds, why?

Challenge 31

Your challenge: understand what this HAML does:
!!!
%html(lang="en")
  %head
    %meta(content="text/html; charset=UTF-8" http-equiv="Content-Type")/
    %title demo31 USA Census Data, Stacked-Lines Radio Buttons
    %link(href="/app/rickshaw.min.css" rel="stylesheet" type="text/css")/
    %script(src="/app/d3.v3.min.js"    )
    %script(src="/app/d3.layout.min.js")
    %script(src="/app/rickshaw.min.js" )
    :css
      #my_container {
      	display: inline-block;
      	font-family: Arial, Helvetica, sans-serif;
      }
      #my_rickshawchart {
      	float: left;
      }
      #legend {
      	float: left;
      	margin-left: 15px;
      }
      #offset_form {
      	float: left;
      	margin: 2em 0 0 15px;
      	font-size: 13px;
      }
      #y_axis {
      	float: left;
      	width: 40px;
      }
  %body
    %h1 app21/demo31 USA Census Data, Stacked-Lines Radio Buttons
    #refer
      Refer to:
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/tutorial/introduction.html#example_06' target='x')
        http://code.shutterstock.com/rickshaw/tutorial/introduction.html#example_06
      %br/
      %a(href='http://code.shutterstock.com/rickshaw/tutorial/example_06.html' target='x')
        http://code.shutterstock.com/rickshaw/tutorial/example_06.html
      %br/
      %a(href='https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener' target='x')
        https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
      %br/
      %a(href='https://developer.mozilla.org/en-US/docs/Web/API/Event/type' target='x')
        https://developer.mozilla.org/en-US/docs/Web/API/Event/type
      %br/
      %a(href='http://www.w3schools.com/jsref/met_document_addeventlistener.asp' target='x')
        http://www.w3schools.com/jsref/met_document_addeventlistener.asp
    %hr/
    #my_container
      #y_axis
      #my_rickshawchart
      #legend
      %form#offset_form.toggler
        %input#lines(checked="checked" name="offset" type="radio" value="lines")/
        %label.lines(for="lines") lines
        %br/
        %input#stack(name="offset" type="radio" value="zero")/
        %label.stack(for="stack") stack
    :javascript
      var palette = new Rickshaw.Color.Palette();
      var graph = new Rickshaw.Graph( {
      	element: document.querySelector("#my_rickshawchart"),
      	width: 540,
      	height: 240,
      	renderer: 'line',
      	series: [
      		{
      			name: "Northeast",
      			data: [ { x: -1893456000, y: 25868573 }, { x: -1577923200, y: 29662053 }, { x: -1262304000, y: 34427091 }, { x: -946771200, y: 35976777 }, { x: -631152000, y: 39477986 }, { x: -315619200, y: 44677819 }, { x: 0, y: 49040703 }, { x: 315532800, y: 49135283 }, { x: 631152000, y: 50809229 }, { x: 946684800, y: 53594378 }, { x: 1262304000, y: 55317240 } ],
      			color: palette.color()
      		},
      		{
      			name: "Midwest",
      			data: [ { x: -1893456000, y: 29888542 }, { x: -1577923200, y: 34019792 }, { x: -1262304000, y: 38594100 }, { x: -946771200, y: 40143332 }, { x: -631152000, y: 44460762 }, { x: -315619200, y: 51619139 }, { x: 0, y: 56571663 }, { x: 315532800, y: 58865670 }, { x: 631152000, y: 59668632 }, { x: 946684800, y: 64392776 }, { x: 1262304000, y: 66927001 } ],
      			color: palette.color()
      		},
      		{
      			name: "South",
      			data: [ { x: -1893456000, y: 29389330 }, { x: -1577923200, y: 33125803 }, { x: -1262304000, y: 37857633 }, { x: -946771200, y: 41665901 }, { x: -631152000, y: 47197088 }, { x: -315619200, y: 54973113 }, { x: 0, y: 62795367 }, { x: 315532800, y: 75372362 }, { x: 631152000, y: 85445930 }, { x: 946684800, y: 100236820 }, { x: 1262304000, y: 114555744 } ],
      			color: palette.color()
      		},
      		{
      			name: "West",
      			data: [ { x: -1893456000, y: 7082086 }, { x: -1577923200, y: 9213920 }, { x: -1262304000, y: 12323836 }, { x: -946771200, y: 14379119 }, { x: -631152000, y: 20189962 }, { x: -315619200, y: 28053104 }, { x: 0, y: 34804193 }, { x: 315532800, y: 43172490 }, { x: 631152000, y: 52786082 }, { x: 946684800, y: 63197932 }, { x: 1262304000, y: 71945553 } ],
      			color: palette.color()
      		}
      	]
      } );
      var x_axis = new Rickshaw.Graph.Axis.Time( { graph: graph } );
      var y_axis = new Rickshaw.Graph.Axis.Y( {
      	graph: graph,
      	orientation: 'left',
      	tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
      	element: document.getElementById('y_axis'),
      } );
      var legend = new Rickshaw.Graph.Legend( {
      	element: document.querySelector('#legend'),
      	graph: graph
      } );
      var offsetForm = document.getElementById('offset_form');
      offsetForm.addEventListener('change', function(e) {
      	var offsetMode = e.target.value;
      	if (offsetMode == 'lines') {
      		graph.setRenderer('line');
      		graph.offset = 'zero';
      	} else {
      		graph.setRenderer('stack');
      		graph.offset = offsetMode;
      	}	
      	graph.render();
      }, false);
      graph.render();
The above HAML is deployed at this URL:
https://dojo650.herokuapp.com/app/demo31.html

Challenge 31 Questions:

  • In HAML, how to make a radio button?
  • In demo31, which values does the JS expect from radio buttons?
  • In demo31, how does the JS get data from radio buttons?
  • How many event listeners does demo31 have?
  • In demo31.haml, how to move radio buttons to below legend?
  • In demo31, do you like the look of the Y-Axis?

Challenge 32

Your challenge: understand what this HAML does:
!!!
%html(lang="en")
  %head
    %meta(content="text/html; charset=UTF-8" http-equiv="Content-Type")/
    %title demo32 d3.time.scale(), Drag-Slider
    %link(href="/app/graph.css" rel="stylesheet" type="text/css")/
    %link(href="/app/lines.css" rel="stylesheet" type="text/css")/
    %script(src="/app/d3.v3.min.js"    )
    %script(src="/app/rickshaw.min.js" )
  %body
    %h1 app21/demo32 d3.time.scale(), Drag-Slider
    #refer
      Refer to:
      %br/
      %a(href='https://github.com/shutterstock/rickshaw/blob/master/examples/timescale.html' target='x')
        https://github.com/shutterstock/rickshaw/blob/master/examples/timescale.html
      %br/
      %a(href='https://github.com/shutterstock/rickshaw/blob/master/src/js/Rickshaw.Fixtures.RandomData.js' target='x')
        https://github.com/shutterstock/rickshaw/blob/master/src/js/Rickshaw.Fixtures.RandomData.js
      %br/
      %a(href='https://github.com/mbostock/d3/wiki/Time-Scales' target='x')
        https://github.com/mbostock/d3/wiki/Time-Scales
      %br/
      %a(href='https://github.com/mbostock/d3/wiki/Quantitative-Scales#sqrt' target='x')
        https://github.com/mbostock/d3/wiki/Quantitative-Scales#sqrt
      %br/
      %a(href='https://github.com/shutterstock/rickshaw/blob/master/src/js/Rickshaw.Graph.Axis.X.js' target='x')
        https://github.com/shutterstock/rickshaw/blob/master/src/js/Rickshaw.Graph.Axis.X.js
    %hr/
    #my_rickshawchart
    #rickshaw_slider
    :javascript
      var seriesData = [ [], [] ];
      var random = new Rickshaw.Fixtures.RandomData(1500000);
      for (var i = 0; i < 900; i++) {
      	random.addData(seriesData);
      }
      var graph = new Rickshaw.Graph({
      	element: document.getElementById("my_rickshawchart"),
      	width: 960,
      	height: 500,
      	stroke: true,
      	strokeWidth: 0.5,
      	renderer: 'area',
      	xScale: d3.time.scale(),
      	yScale: d3.scale.sqrt(),
      	series:[
      		{ color: 'steelblue', data: seriesData[0] },
      		{ color: '#99d4ee', data: seriesData[1] }
      	] 
      });
      graph.render();
      var xAxis = new Rickshaw.Graph.Axis.X({
      	graph: graph,
      	tickFormat: graph.x.tickFormat()
      });
      xAxis.render();
      var yAxis = new Rickshaw.Graph.Axis.Y({
      	graph: graph
      });
      yAxis.render();
      var slider = new Rickshaw.Graph.RangeSlider.Preview({
      	graph: graph,
      	element: document.getElementById('rickshaw_slider')
      });
The above HAML is deployed at this URL:
https://dojo650.herokuapp.com/app/demo32.html

Challenge 32 Questions:

  • What does this call do: Rickshaw.Fixtures.RandomData(1500000)?
  • What does this call do: random.addData(seriesData)?
  • What does this call do: d3.time.scale()?
  • What does this call do: d3.scale.sqrt()?
  • What does this call do: tickFormat: graph.x.tickFormat()?
  • How is the demo32 slider different than the demo22 slider?
  • Is the demo32 slider better?
  • How to make the demo32 slider more slender?

Challenge 33

Your challenge: understand what this HAML does:
!!!
%html(lang="en")
  %head
    %meta(content="text/html; charset=UTF-8" http-equiv="Content-Type")/
    %title demo33 Rickshaw.Graph.Ajax
    %link(href="/app/rickshaw.min.css" rel="stylesheet" type="text/css")/
    %script(src="/app/jquery.min.js")
    %script(src="/app/d3.v3.min.js")
    %script(src="/app/rickshaw.min.js")
  %body
    %h1 demo33 Rickshaw.Graph.Ajax
    #refer
      Refer to:
      %br/
      %a(href='https://github.com/shutterstock/rickshaw/blob/master/src/js/Rickshaw.Graph.Ajax.js' target='x')
        https://github.com/shutterstock/rickshaw/blob/master/src/js/Rickshaw.Graph.Ajax.js
      %br/
      %a(href='https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener' target='x')
        https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
      %br/
      %a(href='https://developer.mozilla.org/en-US/docs/Web/API/Event/type' target='x')
        https://developer.mozilla.org/en-US/docs/Web/API/Event/type
      %br/
      %a(href='http://www.w3schools.com/jsref/met_document_addeventlistener.asp' target='x')
        http://www.w3schools.com/jsref/met_document_addeventlistener.asp
    %hr/
    / The div below depends on rickshaw.min.js
    #my_container
      #my_rickshawchart
      %button#refresh refresh
    :javascript
      var dataURLs = ['/app/demo33data0.json', '/app/demo33data1.json'];
      var ajaxGraph = new Rickshaw.Graph.Ajax( {
      	element: document.getElementById("my_rickshawchart"),
      	width: 400,
      	height: 200,
      	renderer: 'line',
      	dataURL: '/app/demo33data0.json',
      	series: [
      		{
      			name: 'New York',
      			color: '#c05020',
      		}, {
      			name: 'London',
      			color: '#30c020',
      		}, {
      			name: 'Tokyo',
      			color: '#6060c0'
      		}
      	]
      } );      
      document.querySelector('#refresh').addEventListener('click', function() {
      	ajaxGraph.dataURL = ajaxGraph.dataURL === dataURLs[0] ? dataURLs[1] : dataURLs[0];
      	ajaxGraph.request();
      });
The above HAML is deployed at this URL:
https://dojo650.herokuapp.com/app/demo33.html

Challenge 33 Questions:

  • How is demo33 different than demo23?

That could be considered an adequate code challenge for a two hour Meetup.

If you have questions, e-me:

bikle101@gmail.com


syntax.us Let the syntax do the talking
Blog Contact Posts Questions Tags Hire Me