terbo/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <div id='pie'></div>
  <script>
   var sensors = [
      {'name':'sensor1','orientation':'NW','ppm':'1.7'},
      {'name':'sensor2','orientation':'SW','ppm':'0.8'},
      {'name':'sensor3','orientation':'SE','ppm':'0.9'},
      {'name':'sensor4','orientation':'NE','ppm':'1.2'}
    ]

   div = d3.select('#pie')
   pieUsage(div,pie,{width: 500, height: 500, radius: 250})

   function pieUsage(dom, data, options) {
      var color = d3.scale.category20c()
      this.radius = options.radius || 250
      this.height = options.height || 500
      this.width = options.width || 500

      var arc = d3.svg.arc()
          .outerRadius(this.radius)

      var pie = d3.layout.pie()

      svg = d3.select(dom).append('svg')
      						.attr('width', this.width)
       						.attr('height', this.height)
      						.data(data)
      						.enter()

      svg.selectAll('g.arc')
      					.append('g')
      					.attr("transform", "translate(" + this.width / 2 + "," + this.height / 2 + ")");

      var arcs = svg.selectAll('g.arc')
      							.filter(function(d) { return [d.name, d.ppm ]})
      						  .data(data)
						        .enter()
      							.append('g')
     					 			.attr('class', 'arc')
      arcs.append('path')
        .attr('fill', function (d,i) {
            	return color(i) })
      }
  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v3.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	</style>
	</head>

	<body>
	<div id='pie'></div>
	<script>
	var sensors = [
	{'name':'sensor1','orientation':'NW','ppm':'1.7'},
	{'name':'sensor2','orientation':'SW','ppm':'0.8'},
	{'name':'sensor3','orientation':'SE','ppm':'0.9'},
	{'name':'sensor4','orientation':'NE','ppm':'1.2'}
	]

	div = d3.select('#pie')
	pieUsage(div,pie,{width: 500, height: 500, radius: 250})

	function pieUsage(dom, data, options) {
	var color = d3.scale.category20c()
	this.radius = options.radius \|\| 250
	this.height = options.height \|\| 500
	this.width = options.width \|\| 500

	var arc = d3.svg.arc()
	.outerRadius(this.radius)

	var pie = d3.layout.pie()

	svg = d3.select(dom).append('svg')
	.attr('width', this.width)
	.attr('height', this.height)
	.data(data)
	.enter()

	svg.selectAll('g.arc')
	.append('g')
	.attr("transform", "translate(" + this.width / 2 + "," + this.height / 2 + ")");

	var arcs = svg.selectAll('g.arc')
	.filter(function(d) { return [d.name, d.ppm ]})
	.data(data)
	.enter()
	.append('g')
	.attr('class', 'arc')
	arcs.append('path')
	.attr('fill', function (d,i) {
	return color(i) })
	}
	</script>
	</body>