Skip to content

Instantly share code, notes, and snippets.

@wimdows

wimdows/datafile.json

Forked from wimdows/datafile.json
Created October 21, 2011 10:25
Show Gist options
  • Save wimdows/1303518 to your computer and use it in GitHub Desktop.
Save wimdows/1303518 to your computer and use it in GitHub Desktop.
Download ZIP
a very simple pie chart
Raw
datafile.json
{"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}]
}
]
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Another try at pie</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.min.js"></script>
</head>
<body>
<div id="tjaart">
</div>
<div id="tebel">
</div>
<script type="text/javascript">
var currentComp=1;
var currentGuy=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; });
//what i am looking for is the code that generates a series of pies, each showing the category scores per person
//these three lines produce one pie for the person picked
preppedData = filterData[currentGuy].parts, function(d) { return d; };
creppedData = filterData, function(d,i) { return i.parts, function(d) { return d; }};
// preppedData = filterData, function(d) { return d.parts, function(e) { return e; }};
donutI = d3.layout.pie().value(function(d) { return d.score; });
// donutII = d3.layout.pie().value(function(d,i) { return d.parts.score[i]; });
pieData = donutI(preppedData);
// pIeData = donutII(creppedData);
// pIeData = donutI(filterData)//, function(d, i) { return d.parts[i]; });
donutIII = d3.layout.pie().value(function(d, i) { return d.parts[i].score; });
//all of these give exactly the same (wrong) result: one pie of the three persons for the first test category in the dataset
pIIeData = donutIII(filterData, function(d, i) { return d.parts[i]; });
pIIIeData = donutIII(filterData, function(d) { return d.score; });
pIVeData = donutIII(filterData, function(d) { return d; });
pIeData = donutIII(filterData);
//in a nutshell: what I get is columns of data, what I am looking for are the rows
//the data in preppeddata has not been transposed from rows to columns, just flattened...
//how do I do the same (while taking along all the other data in "data")?
console.log("preppedData");
console.log(preppedData);
console.log("creppedData");
console.log(creppedData);
console.log("pieData");
console.log(pieData);
console.log("pIeData");
console.log(pIeData);
console.log("pIIeData");
console.log(pIIeData);
console.log("pIIIeData");
console.log(pIIIeData);
console.log("pIVeData");
console.log(pIVeData);
maX = d3.max(filterData, function(d) { return d.thingy; } );
mAx = d3.max(pIIeData, function(d) { return d.data.thingy; } );
Max = d3.max(pIIIeData, function(d) { return d.data.thingy; } );
console.log(maX);
console.log(mAx);
console.log(Max);
radius.domain([0, maX]);
arc = d3.svg.arc()
.startAngle(function(d) { return d.startAngle; })
.endAngle(function(d) { return d.endAngle; })
.innerRadius(ir)
// .outerRadius(pIIeData, function(d) { return radius(d.data.thingy); });
// .outerRadius(radius(filterData[currentGuy].thingy));
// .outerRadius(function(d) { return radius(d.thingy); });
.outerRadius(r);
/*
var table = d3.select("#tebel").append("table");
var tr = table.selectAll("tr")
.data(filterData)
.enter().append("tr");
var td = tr.selectAll("td")
.data(function(d) { return d; }) // #1
.enter().append("td")
.text(function(d) { return d.score; }); // #2
*/
vis = d3.select("#tjaart")
// this does not generate three seperate pies - why not?
// .data(filterData)
.data(filterData)
.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(donutII(filterData));
.data(donutIII(creppedData))
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>
Raw
original pie.html
<!DOCTYPE html>
<html>
<head>
<title>A basic try at pie</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.min.js"></script>
</head>
<body>
<div id="tjaart">
</div>
<script type="text/javascript">
var currentComp=1;
var currentGuy=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[currentGuy].parts, function(d) { return d; };
donut = d3.layout.pie().value(function(d) { return d.score; });
pieData = donut(preppedData);
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[currentGuy].thingy));
// .outerRadius(r);
console.log("filterData");
console.log(filterData);
console.log("preppedData");
console.log(preppedData);
console.log("pieData");
console.log(pieData);
vis = d3.select("#tjaart")
.data(filterData)
.append("svg:svg")
.attr("width", w)
.attr("height", h)
.attr("transform", function(d,i) { return "translate(" + 20 + "," + (d*60) + ")"; });
arc_group = vis.append("svg:g")
.data(filterData)
.attr("class", "arc")
.attr("transform", "translate(" + (w/2) + "," + (h/2) + ")");
paths = arc_group.selectAll("path")
.data(pieData)
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>
@wimdows
Copy link
Author

wimdows commented Oct 21, 2011

I changed the paths to d3.js and d3.layout.js.
And I annotated it somewhat.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment