biovisualize/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This variation of a donut chart demonstrates how to update values. Clicking on the radio buttons changes the displayed metric.
Next: Animation

  
## data.tsv

          
            apples
            oranges

            
              53245
              200

            
              28479
              200

            
              19697
              200

            
              24037
              200

            
              40245
              200

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 960px;
}

text {
  font: 10px sans-serif;
}

form {
  position: absolute;
  right: 10px;
  top: 10px;
}

</style>
<div id="pie-chart"></div>
<form>
  <label><input type="radio" name="dataset" value="apples" checked> Apples</label>
  <label><input type="radio" name="dataset" value="oranges"> Oranges</label>
</form>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

function pieChart() {
  var width = 960,
      height = 500,
      radius = Math.min(width, height) / 2,
      color = d3.scale.category20(),
      accessor,
      pie = d3.layout.pie(),
      arc = d3.svg.arc(),
      path;

  function chart(selection) {
    selection.each(function(data) {

      pie.value(accessor)
        .sort(null);
      arc.innerRadius(radius - 100)
        .outerRadius(radius - 20);

      var svg = d3.select(this).selectAll("svg").data([data]);

      var gEnter = svg.enter().append("svg").append("g");

      svg
          .attr("width", width)
          .attr("height", height)

      var g = svg.select("g")
          .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

      path = g.datum(data).selectAll("path")
          .data(pie)
        .enter().append("path")
          .attr("fill", function(d, i) { return color(i); })
          .attr("d", arc);

    });
  }

  chart.change = function(d, i) {
    pie.value(accessor); // change the value function
    path = path.data(pie); // compute the new angles
    path.attr("d", arc); // redraw the arcs
  };

  chart.accessor = function(_) {
    if (!arguments.length) return accessor;
    accessor = _;
    return chart;
  };

  return chart;

}

d3.tsv("data.tsv", type, function(error, data) {
  var myChart = pieChart()
      .accessor(function(d) { return d.apples; });

  d3.select("#pie-chart")
      .datum(data)
      .call(myChart);

  d3.selectAll("input")
    .on("change", myChart.change);

  var timeout = setTimeout(function() {
    myChart.accessor(function(d) { return d.oranges; })
    myChart.change();
  }, 2000);

});

function type(d) {
  d.apples = +d.apples;
  d.oranges = +d.oranges;
  return d;
}

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: auto;
	position: relative;
	width: 960px;
	}

	text {
	font: 10px sans-serif;
	}

	form {
	position: absolute;
	right: 10px;
	top: 10px;
	}

	</style>
	<div id="pie-chart"></div>
	<form>
	<label><input type="radio" name="dataset" value="apples" checked> Apples</label>
	<label><input type="radio" name="dataset" value="oranges"> Oranges</label>
	</form>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	function pieChart() {
	var width = 960,
	height = 500,
	radius = Math.min(width, height) / 2,
	color = d3.scale.category20(),
	accessor,
	pie = d3.layout.pie(),
	arc = d3.svg.arc(),
	path;

	function chart(selection) {
	selection.each(function(data) {

	pie.value(accessor)
	.sort(null);
	arc.innerRadius(radius - 100)
	.outerRadius(radius - 20);

	var svg = d3.select(this).selectAll("svg").data([data]);

	var gEnter = svg.enter().append("svg").append("g");

	svg
	.attr("width", width)
	.attr("height", height)

	var g = svg.select("g")
	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

	path = g.datum(data).selectAll("path")
	.data(pie)
	.enter().append("path")
	.attr("fill", function(d, i) { return color(i); })
	.attr("d", arc);

	});
	}

	chart.change = function(d, i) {
	pie.value(accessor); // change the value function
	path = path.data(pie); // compute the new angles
	path.attr("d", arc); // redraw the arcs
	};

	chart.accessor = function(_) {
	if (!arguments.length) return accessor;
	accessor = _;
	return chart;
	};

	return chart;

	}

	d3.tsv("data.tsv", type, function(error, data) {
	var myChart = pieChart()
	.accessor(function(d) { return d.apples; });

	d3.select("#pie-chart")
	.datum(data)
	.call(myChart);

	d3.selectAll("input")
	.on("change", myChart.change);

	var timeout = setTimeout(function() {
	myChart.accessor(function(d) { return d.oranges; })
	myChart.change();
	}, 2000);

	});

	function type(d) {
	d.apples = +d.apples;
	d.oranges = +d.oranges;
	return d;
	}

	</script>