README.md

## README.md

      
        

          Raw
        
        
          
            
          
          
            
              README.md
            
          
        
      
    
  
    Flower shape chart designed by setting the origin at the 6 O'Clock position and have the value of the arcs be positive (going left) and negative (going right). Initial code  adapted from Mike Bostock's "Arc Tween (clock)". 

  

  

## index.html
<!-- code is adapted from:
	https://gist.github.com/mbostock/1098617
	Make dual time zone??
-->

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Flower Shape</title>
		<script src="http://d3js.org/d3.v3.min.js"></script>
  </head>

  <style type="text/css">
  	#chartArea {
			border: 2px dashed black;
			height: 500px;
			width: 500px;
		}
		path {
		  fill-rule: evenodd;
		  fill: #aaa;
		  fill-opacity: .7;
		  stroke: #666;
		  stroke-width: 5.5px;
		}
		#valueOutput{
			fill:maroon;
		}
  </style>

	<body>
		<div id="chartArea"></div>
	</body>

<script type="text/javascript">
	var divH = parseInt( d3.select("#chartArea").style("height") );
  var divW = parseInt( d3.select("#chartArea").style("width") );

	var margin = {top: 10, right: 10, bottom: 10, left: 10};
	var w = divW - margin.left - margin.right;
		h = divH - margin.top - margin.bottom;
	  x = d3.scale.ordinal().domain(d3.range(3)).rangePoints([0, w], 2);

	var fields = [//left
	  {name: "secondsL", value: 35, size: 60, order: 0},
	  {name: "minutesL", value: 45, size: 60, order: 1},
	  {name: "hoursL", value: 20, size: 24, order: 2},
	  //right
	  {name: "secondsR", value: -35, size: 60, order: 0},
	  {name: "minutesR", value: -45, size: 60, order: 1},
	  {name: "hoursR", value: -20, size: 24, order: 2}
	];
	var outerRadiusInit = w / 2.2;
	var arcWidth = 35;
	var innerRadiusInit = outerRadiusInit - arcWidth;

	var arc = d3.svg.arc()
	    .innerRadius(function(d) { return innerRadiusInit - d.order * arcWidth ; })
	    .outerRadius(function(d) { return outerRadiusInit - d.order * arcWidth ; })
	    .startAngle(Math.PI)
	    .endAngle(function(d) { return (d.value / d.size) * Math.PI + Math.PI; });//starts chart at 6 O'Clock position

	var svg = d3.select("#chartArea").append("svg:svg")
	    .attr("width", w + margin.left + margin.right)
	    .attr("height", h + margin.top + margin.bottom)
	  .append("svg:g")
	    .attr("transform", "translate(" + margin.left + "," +(margin.top + h/2)+ ")");

	svg.append("text")
		.attr("id", "valueOutput")
		.attr("text-anchor", "middle")
		.attr("transform","translate(" + w / 2 + ",0)");

  for(var i = 0; i < fields.length; i++)
    fields[i].previous = fields[i].value;

  d3.select('#valueOutput').html("Flower Chart?");

  var path = svg.selectAll("path")
      .data(fields.filter(function(d) { return d.value; }), function(d){return d.name; })

  path.enter().append("svg:path")
      .attr("transform", function(d, i) { return "translate(" + h/2 + ",0)"; })
    .transition()
      .attrTween("d", arcTween);

  function arcTween(b) {
	  var i = d3.interpolate({value: b.previous}, b);
	  return function(t) {
	    return arc(i(t));
	  };
  }
</script>
</html>

## thumbnail.png

      
        

          Raw
        
        
          
            
          
          
            
              thumbnail.png