aaaronic/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Shows use of .transition() with .transform()

  
## index.html
<html>
  <head>
    <style>
    body{
      overflow: hidden;
      padding: 0;
      margin: 0;
    }
    path{
      fill-opacity: 0.2;
      stroke-width: 2;
    }
    #controls{
      position:fixed;
    }
    </style>
  </head>
  <body>
    <div id="controls">
      <button id="collapse">Collapse</button>
      <button id="make_data">New Data</button>
    </div>
    <!-- Firefox doesn't assume the SVG is as big as its contents -->
    <svg width="100%" height="100%"></svg>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="script.js"></script>
  </body>
</html>

## script.js
var svg = d3.select("svg"),
  color = d3.scale.category10(),
  width,
  height,
  collapsed = 0;

var data = make_data();

function make_data(){
  var rows = 4,
    cols = 4,
    points = 100;

  return d3.range(rows).map(function(){
    return d3.range(cols).map(function(){
      return d3.range(points).map(function(){
        return Math.random();
      });
    });
  });
}

// scales: (r)ow (c)ell (p)ath
var y_r, x_c, x_p, y_p;

var area = d3.svg.area()
  .interpolate("basis")
  .x(function(d, i) { return x_p(i); })
  .y1(function(d) { return y_p(d); });


function update_scales(){
  width = window.innerWidth - 1;
  height = window.innerHeight - 12;

  y_r = d3.scale.linear()
    .domain([0, data.length])
    .range([0, height]);

  x_c = d3.scale.linear()
    .domain([0, collapsed ? 0 : data[0].length])
    .range([0, width]);

  y_p = d3.scale.linear().range([0, y_r(1)]);
  x_p = d3.scale.linear()
    .domain([0, data[0][0].length - 1])
    .range([0, 100]);

  area.y0(y_r(1))
}

function tx(mode){
  return function(x, y){
    return mode + "(" + x + "," + y + ") ";
  }
}
tx.t = tx("translate");
tx.s = tx("scale");

function tx_row(rows){
  rows.attr("transform", function(d, i){return tx.t(0, y_r(i));});
}

function tx_cell(cells){
  cells.attr("transform", function(d, i){
    return tx.t(collapsed ? 0 : x_c(i), 0) + (
      tx.s((collapsed ? width : x_c(1))/100, 1)
    );
  });
}

function render(){
  update_scales();
  var outer = svg.selectAll("g.outer")
      .data([1]),
    outer_init = outer.enter()
      .append("g")
      .attr("class", "outer"),

    rows = outer.selectAll("g.row")
      .data(data),
    row_init = rows.enter()
      .append("g").attr("class", "row")
      .call(tx_row),

    cells = rows.selectAll("g.cell")
      .data(function(row){return row;}),
    cell_init = cells.enter()
      .append("g").attr("class", "cell")
      .call(tx_cell),

  path = cells.select("path"),
  path_init = cell_init.append("path")
    .style("stroke", function(d, i){return color(i);})
    .style("fill", function(d, i){return color(i);})
    .attr("d", area)
    .attr("vector-effect", "non-scaling-stroke");

  path
    .transition()
    .ease("back")
    .attr("d", area);

  cells
    .transition()
    .call(tx_cell);
}


d3.selectAll("button")
  .on("click", function(){
    switch(d3.select(this).attr("id")){
      case "collapse":
        collapsed = !collapsed; break;
      case "make_data":
        data = make_data(); break;
    }
    render();
  });

d3.select(window)
  .on("resize", render);

render();
	<html>
	<head>
	<style>
	body{
	overflow: hidden;
	padding: 0;
	margin: 0;
	}
	path{
	fill-opacity: 0.2;
	stroke-width: 2;
	}
	#controls{
	position:fixed;
	}
	</style>
	</head>
	<body>
	<div id="controls">
	<button id="collapse">Collapse</button>
	<button id="make_data">New Data</button>
	</div>
	<!-- Firefox doesn't assume the SVG is as big as its contents -->
	<svg width="100%" height="100%"></svg>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="script.js"></script>
	</body>
	</html>
	var svg = d3.select("svg"),
	color = d3.scale.category10(),
	width,
	height,
	collapsed = 0;

	var data = make_data();

	function make_data(){
	var rows = 4,
	cols = 4,
	points = 100;

	return d3.range(rows).map(function(){
	return d3.range(cols).map(function(){
	return d3.range(points).map(function(){
	return Math.random();
	});
	});
	});
	}

	// scales: (r)ow (c)ell (p)ath
	var y_r, x_c, x_p, y_p;

	var area = d3.svg.area()
	.interpolate("basis")
	.x(function(d, i) { return x_p(i); })
	.y1(function(d) { return y_p(d); });


	function update_scales(){
	width = window.innerWidth - 1;
	height = window.innerHeight - 12;

	y_r = d3.scale.linear()
	.domain([0, data.length])
	.range([0, height]);

	x_c = d3.scale.linear()
	.domain([0, collapsed ? 0 : data[0].length])
	.range([0, width]);

	y_p = d3.scale.linear().range([0, y_r(1)]);
	x_p = d3.scale.linear()
	.domain([0, data[0][0].length - 1])
	.range([0, 100]);

	area.y0(y_r(1))
	}

	function tx(mode){
	return function(x, y){
	return mode + "(" + x + "," + y + ") ";
	}
	}
	tx.t = tx("translate");
	tx.s = tx("scale");

	function tx_row(rows){
	rows.attr("transform", function(d, i){return tx.t(0, y_r(i));});
	}

	function tx_cell(cells){
	cells.attr("transform", function(d, i){
	return tx.t(collapsed ? 0 : x_c(i), 0) + (
	tx.s((collapsed ? width : x_c(1))/100, 1)
	);
	});
	}

	function render(){
	update_scales();
	var outer = svg.selectAll("g.outer")
	.data([1]),
	outer_init = outer.enter()
	.append("g")
	.attr("class", "outer"),

	rows = outer.selectAll("g.row")
	.data(data),
	row_init = rows.enter()
	.append("g").attr("class", "row")
	.call(tx_row),

	cells = rows.selectAll("g.cell")
	.data(function(row){return row;}),
	cell_init = cells.enter()
	.append("g").attr("class", "cell")
	.call(tx_cell),

	path = cells.select("path"),
	path_init = cell_init.append("path")
	.style("stroke", function(d, i){return color(i);})
	.style("fill", function(d, i){return color(i);})
	.attr("d", area)
	.attr("vector-effect", "non-scaling-stroke");

	path
	.transition()
	.ease("back")
	.attr("d", area);

	cells
	.transition()
	.call(tx_cell);
	}


	d3.selectAll("button")
	.on("click", function(){
	switch(d3.select(this).attr("id")){
	case "collapse":
	collapsed = !collapsed; break;
	case "make_data":
	data = make_data(); break;
	}
	render();
	});

	d3.select(window)
	.on("resize", render);

	render();