tonydisera/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    piechooser

  
## index.html
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
  <script src="https://iobio.io/public/js/iobio.viz.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://iobio.io/public/css/iobio.viz.min.css">

  <style type="text/css">
    body {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      margin: auto;
      position: relative;
      width: 960px;
    }

    #piechooser-viz { text-align: center; }
    #piechooser-viz .iobio-pie .iobio-percent { font-size: 20px;}
    #piechooser-viz .iobio-pie .iobio-count { font-size: 12px;}
    #piechooser-viz .arc text { fill: white; font-size: 10px; font-weight: normal; }
    #piechooser-viz circle#all-circle:hover { fill: #F7F3BA;}
    #piechooser-viz circle#all-circle.selected { fill: #F7F3BA; stroke-width: 1.5px;}

  </style>

</head>
<body>


    <div id="piechooser-viz">
    </div>

  <script>

    var m = [15, 35, 25, 15],
        w = 230,
        h = 230,
        r = Math.min(w, h) / 2;

    var color = d3.scale.category20b();

    var pie = d3.layout.pie()
                       .sort(null)
                       .value(function(d,i) {return d.value});
    var references = [
      {name: 'chr1', value: +20},
      {name: 'chr2', value: +14},
      {name: 'chr3', value: +15},
      {name: 'chr4', value: +17},
      {name: 'chr5', value: +23},
      {name: 'chr6', value: +24},
      {name: 'chr7', value: +30}
    ];

    var selection = d3.select("#piechooser-viz").datum( pie(references) );
    var chart = iobio.viz.pieChooser()
        .radius(r)
        .innerRadius(r*.5)
        .padding(30)
        .color( function(d,i) {
          return color(i);
        })
        .on("click", function(d,i) {
          console.log("chr clicked " + d );
        })
        .on("clickall", function(d,i) {
          console.log("click all " + d);
        })
        .tooltip( function(d) {
          return d.data.name;
        });
    chart( selection );


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

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
	<script src="https://iobio.io/public/js/iobio.viz.min.js"></script>
	<link rel="stylesheet" type="text/css" href="https://iobio.io/public/css/iobio.viz.min.css">

	<style type="text/css">
	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: auto;
	position: relative;
	width: 960px;
	}

	#piechooser-viz { text-align: center; }
	#piechooser-viz .iobio-pie .iobio-percent { font-size: 20px;}
	#piechooser-viz .iobio-pie .iobio-count { font-size: 12px;}
	#piechooser-viz .arc text { fill: white; font-size: 10px; font-weight: normal; }
	#piechooser-viz circle#all-circle:hover { fill: #F7F3BA;}
	#piechooser-viz circle#all-circle.selected { fill: #F7F3BA; stroke-width: 1.5px;}

	</style>

	</head>
	<body>


	<div id="piechooser-viz">
	</div>

	<script>

	var m = [15, 35, 25, 15],
	w = 230,
	h = 230,
	r = Math.min(w, h) / 2;

	var color = d3.scale.category20b();

	var pie = d3.layout.pie()
	.sort(null)
	.value(function(d,i) {return d.value});
	var references = [
	{name: 'chr1', value: +20},
	{name: 'chr2', value: +14},
	{name: 'chr3', value: +15},
	{name: 'chr4', value: +17},
	{name: 'chr5', value: +23},
	{name: 'chr6', value: +24},
	{name: 'chr7', value: +30}
	];

	var selection = d3.select("#piechooser-viz").datum( pie(references) );
	var chart = iobio.viz.pieChooser()
	.radius(r)
	.innerRadius(r*.5)
	.padding(30)
	.color( function(d,i) {
	return color(i);
	})
	.on("click", function(d,i) {
	console.log("chr clicked " + d );
	})
	.on("clickall", function(d,i) {
	console.log("click all " + d);
	})
	.tooltip( function(d) {
	return d.data.name;
	});
	chart( selection );



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