iros

View this code at http://livecoding.io/9937333

iros

Keybase proof

I hereby claim:

• I am iros on github.
• I am iros (https://keybase.io/iros) on keybase.
• I have a public key whose fingerprint is 2A1B B71B 5334 5D89 2C10 A32D 9F72 C654 BE93 884C

To claim this, I am signing this object:

iros

if (document.body.requestFullscreen ||
    document.body.mozRequestFullScreen ||
    document.body.webkitRequestFullscreen
) {
    $("<button>View this chart in Full Screen</button>")
    .on('click', function (e) {
        var root = $interactive.get(0);
        if (root.requestFullscreen) { root.requestFullscreen(); }
        else if (root.mozRequestFullScreen) { root.mozRequestFullScreen(); }
        else if (root.webkitRequestFullscreen) { root.webkitRequestFullscreen(); }

iros

modes: {
  mobile : function() {
    // if the chart is less than 480 pixels wide or the 
    // screen is less than 480px wide
    return this.width() <= 480 || 
      Modernizr.mq("only all and (max-width: 480px)");
  },
}

iros

Allie, the Definitive Guide

Greetings. You have been chosen for the critical mission "Allie 3000". Congratulations! Allie Monkeyface Duchess of Central Square, a female canine, is now in your care. The fate of her universe is now in your hands. It is our hope that this guide will provide you sufficient instructions to complete the mission.

If you need to reach me at any point, my number is: 413-265-3704.

Eating

iros

Building your Stacked Line Chart

This example uses d3, miso.dataset & rickshaw to build a stacked graph.

Dependencies

• Miso dataset: http://cloud.github.com/downloads/misoproject/dataset/miso.ds.deps.min.0.4.0.js
• d3: http://d3js.org/d3.v3.min.js
• Rickshaw: http://code.shutterstock.com/rickshaw/rickshaw.min.js

iros

Building your Stacked Line Chart

This example uses d3, miso.dataset & rickshaw to build a stacked graph.

Dependencies

• Miso dataset: http://cloud.github.com/downloads/misoproject/dataset/miso.ds.deps.min.0.4.0.js
• d3: http://d3js.org/d3.v3.min.js
• Rickshaw: http://code.shutterstock.com/rickshaw/rickshaw.min.js

iros

var data = [1,4,6,9,12,13,30];
var circleChart = d3.select("div#vis")
  .append("svg")
  .chart("CircleChart")
  .width(200)
  .height(100)
  .radius(3);

// render it with some data
circleChart.draw(data);

iros

var data = [1,3,5,10,11,12,50];

var width = 500,
  height = 100,
  r = 5;

var xScale = d3.scale.linear()
  .range([5, width-r])
  .domain([1,50]);

iros

// transform around center:
// formula: matrix(sx, 0, 0, sy, cx-sx*cx, cy-sy*cy)
var b = el.getBBox();
var center = [b.x + b.width/2, b.y + b.height/2];
var factor = 1.8;
el.attr('transform','matrix(' + factor + ', 0, 0, ' + factor + ', ' +
        (center[0] - factor * center[0]) +
        ',' + (center[1] - factor * center[1])+')');