Skip to content

Instantly share code, notes, and snippets.

@jwhitley
Forked from wimdows/datafile.json
Created October 20, 2011 16:30
Show Gist options
  • Save jwhitley/1301600 to your computer and use it in GitHub Desktop.
Save jwhitley/1301600 to your computer and use it in GitHub Desktop.
a very simple pie chart
{"scores": [ {"naam":"David",
"comp":3,
"thingy": 80,
"parts": [{"test": "3", "score": 7},
{"test": "4", "score": 12},
{"test": "5", "score": 12}]
},
{"naam":"David",
"comp":2,
"thingy": 100,
"parts": [{"test": "3", "score": 5},
{"test": "4", "score": 16},
{"test": "5", "score": 14}]
},
{"naam":"David",
"comp":1,
"thingy": 90,
"parts": [{"test": "3", "score": 1},
{"test": "4", "score":12},
{"test": "5", "score": 16}]
},
{"naam":"Jack",
"comp":3,
"thingy": 70,
"parts": [{"test": "3", "score": 3},
{"test": "4", "score": 10},
{"test": "5", "score": 9}]
},
{"naam":"Jack",
"comp":2,
"thingy": 100,
"parts": [{"test": "3", "score": 4},
{"test": "4", "score": 9},
{"test": "5", "score": 8}]
},
{"naam":"Jack",
"comp":1,
"thingy": 40,
"parts": [{"test": "3", "score": 4},
{"test": "4", "score": 8},
{"test": "5", "score": 7}]
},
{"naam":"Peter",
"comp":3,
"thingy": 20,
"parts": [{"test": "3", "score": 3},
{"test": "4", "score": 6},
{"test": "5", "score": 10}]
},
{"naam":"Peter",
"comp":2,
"thingy": 80,
"parts": [{"test": "3", "score": 2},
{"test": "4", "score": 15},
{"test": "5", "score": 20}]
},
{"naam":"Peter",
"comp":1,
"thingy": 75,
"parts": [{"test": "3", "score": 10},
{"test": "4", "score": 19},
{"test": "5", "score": 17}]
}
]
}
<!DOCTYPE html>
<html>
<head>
<title>Another try at boulderpie</title>
<script type="text/javascript" src="../../D3/d3.js"></script>
<script type="text/javascript" src="../../D3/d3.layout.min.js"></script>
</head>
<body>
<div id="tjaart">
</div>
<script type="text/javascript">
var currentComp=1;
var currentStep=0;
var w = 50,
h = 50,
r = w/2,
ir = 0;
var tweenDuration = 400;
var pieData = [];
var oldpieData = [];
var radius = d3.scale.linear().range([0, w/2]),
color = d3.scale.ordinal().domain(["3","4","5"]).range(["red", "green", "blue"]);
d3.json("datafile.json", function(ingelezen) {
filterData = ingelezen.scores.filter(function(d) { return d.comp==currentComp; });
preppedData = filterData[currentStep].parts, function(d) { return d; };
// preppedData = filterData, function(d) { return d.parts, function(e) { return e; }};
console.log(preppedData);
donut = d3.layout.pie().value(function(d) { return d.score; });
// donut = d3.layout.pie().value(function(d, i) { return d3.values(d.parts[i]); });
pieData = donut(preppedData);
// pieData = donut(filterData, function(d, i) { return d3.values(d.parts[i]); });
// pieData = donut(filterData, function(d, i) { return d.parts[i]; });
// pieData = donut(filterData, function(d, i) { return d3.values(d.parts[i]); });
maX = d3.max(filterData, function(d) { return d.thingy; } );
radius.domain([0, maX]);
arc = d3.svg.arc()
.startAngle(function(d) { return d.startAngle; })
.endAngle(function(d) { return d.endAngle; })
.innerRadius(ir)
.outerRadius(radius(filterData[currentStep].thingy));
// .outerRadius(function(d) { return radius(d.thingy); });
// .outerRadius(r);
vis = d3.select("#tjaart")
.data(filterData)
// .data(filterData, function(d) { return d; })
.append("svg:svg")
.attr("width", w)
.attr("height", h)
.attr("transform", function(d,i) { return "translate(" + 20 + "," + (i*60) + ")"; });
arc_group = vis.append("svg:g")
.attr("class", "arc")
.attr("transform", "translate(" + (w/2) + "," + (h/2) + ")");
paths = arc_group.selectAll("path")
.data(pieData)
// .data(donut(preppedData))
// .data(donut(filterData, function(d) { return d.parts; }));
// .data(donut(filterData, function(d) { return d3.values(d.parts); }));
paths.enter().append("svg:path")
.style("fill", function(d) { return color(d.data.test); })
.style("stroke", function(d, i) { return d.data.score > 0 ? d3.rgb(color(i)).darker() : null; })
.transition()
.duration(tweenDuration)
.ease("bounce")
.attrTween("d", pieTween);
// Interpolate the arcs in data space.
function pieTween(d, i) {
var s0;
var e0;
if(oldpieData[i]){
s0 = oldpieData[i].startAngle;
e0 = oldpieData[i].endAngle;
} else if (!(oldpieData[i]) && oldpieData[i-1]) {
s0 = oldpieData[i-1].endAngle;
e0 = oldpieData[i-1].endAngle;
} else if(!(oldpieData[i-1]) && oldpieData.length > 0){
s0 = oldpieData[oldpieData.length-1].endAngle;
e0 = oldpieData[oldpieData.length-1].endAngle;
} else {
s0 = 0;
e0 = 0;
}
var i = d3.interpolate({startAngle: s0, endAngle: e0}, {startAngle: d.startAngle, endAngle: d.endAngle});
return function(t) {
var b = i(t);
return arc(b);
};
};
});
</script>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment