rioleo/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <style type="text/css">

svg {
  font-size: 14px;
}

.line {
  fill: none;
  stroke: #000;
  stroke-width: 2px;
}

    </style>
  </head>
  <body>
    <h2>flexible transitions</h2>
    <script type="text/javascript" src="http://mbostock.github.com/d3/talk/20111116/d3/d3.js"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/talk/20111116/d3/d3.csv.js"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/talk/20111116/d3/d3.geo.js"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/talk/20111116/d3/d3.geom.js"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/talk/20111116/d3/d3.layout.js"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/talk/20111116/d3/d3.time.js"></script>
    <script type="text/javascript">
function byte2Hex(n)
  {
    var nybHexString = "0123456789ABCDEF";
    return String(nybHexString.substr((n >> 4) & 0x0F,1)) + nybHexString.substr(n & 0x0F,1);
  }
function RGB2Color(r,g,b)
  {
    return '#' + byte2Hex(r) + byte2Hex(g) + byte2Hex(b);
  }

  function hsvToRgb(h, s, v){
    var r, g, b;

    var i = Math.floor(h * 6);
    var f = h * 6 - i;
    var p = v * (1 - s);
    var q = v * (1 - f * s);
    var t = v * (1 - (1 - f) * s);

    switch(i % 6){
        case 0: r = v, g = t, b = p; break;
        case 1: r = q, g = v, b = p; break;
        case 2: r = p, g = v, b = t; break;
        case 3: r = p, g = q, b = v; break;
        case 4: r = t, g = p, b = v; break;
        case 5: r = v, g = p, b = q; break;
    }

    return [r * 255, g * 255, b * 255];
}

var allColors = new Array();
for (var i = 0; i < 30; ++i) {
    r = hsvToRgb(i / 30, 1, 0.85);
    var red = r[0];
    var grn = r[1];
    var blu = r[2];
    allColors[i] = RGB2Color(red, grn, blu);
}

var m = [80, 160, 160, 160],
    w = 1280 - m[1] - m[3],
    h = 800 - m[0] - m[2];

var x = d3.time.scale().range([0, w]),
    y = d3.scale.linear().range([h / 4 - 20, 0]),
    delay = 500,
    duration,
    rate;

var color = d3.scale.category10();

var svg = d3.select("body").append("svg:svg")
    .attr("width", w + m[1] + m[3])
    .attr("height", h + m[0] + m[2])
    .append("svg:g");

var stocks,
    symbols;


d3.csv("stocks.csv", function(data) {
  var parse = d3.time.format("%b %Y").parse,
      filter = {AAPL: 1, AMZN: 1, MSFT: 1, IBM: 1};

  stocks = data.filter(function(d) { return d.symbol in filter; });

  // Nest stock values by symbol.
  symbols = d3.nest()
      .key(function(d) { return d.symbol; })
      .entries(stocks);

  // Parse dates and numbers. We assume values are sorted by date.
  // Also compute the maximum price per symbol, needed for the y-domain.
  symbols.forEach(function(s) {
    //s.values.forEach(function(d) { d.date = parse(d.date); d.price = +d.price; });
    //s.maxPrice = d3.max(s.values, function(d) { return d.price; });
    s.sumPrice = 10;
  });

  var g = svg.selectAll("g")
      .data(allColors)
      .enter().append("svg:g")
      .attr("class", "symbol");

	start();
});

function start() {
  duration = 750;
  rate = duration / 100;
  colorPie();
}

function stop() {
  svg.selectAll("*").remove();
  svg.selectAll("g").data(symbols).enter().append("svg:g").attr("class", "symbol");
  d3.select(window).on("click", start);
}


function colorPie() {
	var color = d3.scale.category10();

var g = svg.selectAll(".symbol");
      g.append("svg:circle");


  x = d3.scale.ordinal()
      .domain(symbols.map(function(d, i) { return i; }))
      .rangeRoundBands([0, w], .2);

  y.domain([0, 10]);

  var pie = d3.layout.pie()
      .sort(null)
      .value(function(d) { return 10; });

  var arc = d3.svg.arc();

  g.append("svg:path")
      .style("fill", function(d,i) { return allColors[i]; })
      .data(function() { return pie(allColors); })
      .transition()
      .duration(7500)
      .tween("arc", arcTween);


  function arcTween(d,i) {
    var path = d3.select(this),
        x0 = i*20,
        y0 = h;

    return function(t) {
      var r = h / 2 / Math.min(1, t + 1e-3),
          a = Math.cos(t * Math.PI / 2),
          xx = (-r + (a) * (x0 + x.rangeBand()) + (1 - a) * (w + h) / 2),
          yy = ((a) * h + (1 - a) * h / 2),
          f = {
            innerRadius: r - x.rangeBand() / (2 - a),
            outerRadius: r,
            startAngle: a * (Math.PI / 2 - y0 / r) + (1 - a) * d.startAngle,
            endAngle: a * (Math.PI / 2) + (1 - a) * d.endAngle
          };

      path.attr("transform", "translate(" + xx + "," + yy + ")");
      path.attr("d", arc(f));

    };
  }

  //setTimeout(donutExplode, duration + delay);
}

    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<style type="text/css">

	svg {
	font-size: 14px;
	}

	.line {
	fill: none;
	stroke: #000;
	stroke-width: 2px;
	}

	</style>
	</head>
	<body>
	<h2>flexible transitions</h2>
	<script type="text/javascript" src="http://mbostock.github.com/d3/talk/20111116/d3/d3.js"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/talk/20111116/d3/d3.csv.js"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/talk/20111116/d3/d3.geo.js"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/talk/20111116/d3/d3.geom.js"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/talk/20111116/d3/d3.layout.js"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/talk/20111116/d3/d3.time.js"></script>
	<script type="text/javascript">
	function byte2Hex(n)
	{
	var nybHexString = "0123456789ABCDEF";
	return String(nybHexString.substr((n >> 4) & 0x0F,1)) + nybHexString.substr(n & 0x0F,1);
	}
	function RGB2Color(r,g,b)
	{
	return '#' + byte2Hex(r) + byte2Hex(g) + byte2Hex(b);
	}

	function hsvToRgb(h, s, v){
	var r, g, b;

	var i = Math.floor(h * 6);
	var f = h * 6 - i;
	var p = v * (1 - s);
	var q = v * (1 - f * s);
	var t = v * (1 - (1 - f) * s);

	switch(i % 6){
	case 0: r = v, g = t, b = p; break;
	case 1: r = q, g = v, b = p; break;
	case 2: r = p, g = v, b = t; break;
	case 3: r = p, g = q, b = v; break;
	case 4: r = t, g = p, b = v; break;
	case 5: r = v, g = p, b = q; break;
	}

	return [r * 255, g * 255, b * 255];
	}

	var allColors = new Array();
	for (var i = 0; i < 30; ++i) {
	r = hsvToRgb(i / 30, 1, 0.85);
	var red = r[0];
	var grn = r[1];
	var blu = r[2];
	allColors[i] = RGB2Color(red, grn, blu);
	}

	var m = [80, 160, 160, 160],
	w = 1280 - m[1] - m[3],
	h = 800 - m[0] - m[2];

	var x = d3.time.scale().range([0, w]),
	y = d3.scale.linear().range([h / 4 - 20, 0]),
	delay = 500,
	duration,
	rate;

	var color = d3.scale.category10();

	var svg = d3.select("body").append("svg:svg")
	.attr("width", w + m[1] + m[3])
	.attr("height", h + m[0] + m[2])
	.append("svg:g");

	var stocks,
	symbols;


	d3.csv("stocks.csv", function(data) {
	var parse = d3.time.format("%b %Y").parse,
	filter = {AAPL: 1, AMZN: 1, MSFT: 1, IBM: 1};

	stocks = data.filter(function(d) { return d.symbol in filter; });

	// Nest stock values by symbol.
	symbols = d3.nest()
	.key(function(d) { return d.symbol; })
	.entries(stocks);

	// Parse dates and numbers. We assume values are sorted by date.
	// Also compute the maximum price per symbol, needed for the y-domain.
	symbols.forEach(function(s) {
	//s.values.forEach(function(d) { d.date = parse(d.date); d.price = +d.price; });
	//s.maxPrice = d3.max(s.values, function(d) { return d.price; });
	s.sumPrice = 10;
	});

	var g = svg.selectAll("g")
	.data(allColors)
	.enter().append("svg:g")
	.attr("class", "symbol");

	start();
	});

	function start() {
	duration = 750;
	rate = duration / 100;
	colorPie();
	}

	function stop() {
	svg.selectAll("*").remove();
	svg.selectAll("g").data(symbols).enter().append("svg:g").attr("class", "symbol");
	d3.select(window).on("click", start);
	}


	function colorPie() {
	var color = d3.scale.category10();

	var g = svg.selectAll(".symbol");
	g.append("svg:circle");


	x = d3.scale.ordinal()
	.domain(symbols.map(function(d, i) { return i; }))
	.rangeRoundBands([0, w], .2);

	y.domain([0, 10]);

	var pie = d3.layout.pie()
	.sort(null)
	.value(function(d) { return 10; });

	var arc = d3.svg.arc();

	g.append("svg:path")
	.style("fill", function(d,i) { return allColors[i]; })
	.data(function() { return pie(allColors); })
	.transition()
	.duration(7500)
	.tween("arc", arcTween);


	function arcTween(d,i) {
	var path = d3.select(this),
	x0 = i*20,
	y0 = h;

	return function(t) {
	var r = h / 2 / Math.min(1, t + 1e-3),
	a = Math.cos(t * Math.PI / 2),
	xx = (-r + (a) * (x0 + x.rangeBand()) + (1 - a) * (w + h) / 2),
	yy = ((a) * h + (1 - a) * h / 2),
	f = {
	innerRadius: r - x.rangeBand() / (2 - a),
	outerRadius: r,
	startAngle: a * (Math.PI / 2 - y0 / r) + (1 - a) * d.startAngle,
	endAngle: a * (Math.PI / 2) + (1 - a) * d.endAngle
	};

	path.attr("transform", "translate(" + xx + "," + yy + ")");
	path.attr("d", arc(f));

	};
	}

	//setTimeout(donutExplode, duration + delay);
	}

	</script>
	</body>
	</html>