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)".
Last active
August 14, 2016 08:53
-
-
Save lsquaredleland/a107b307413079e17380 to your computer and use it in GitHub Desktop.
Flower Shaped Pie Chart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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="https://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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment