I'm new to d3, dc and crossfilter. I have data I want to map to multiple dynamic pie chart and bars, but first I need to understand a few things that is not working for me.
I used the Pie Chart example and it works fine for using one field but when I want to calculate it gives me wrong numbers....
This is what I am using...
Field7 to 9 is numbers...
{
<link rel="stylesheet" type="text/css" href="css/dc.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="js/crossfilter.js"></script>
<script src="js/d3.js"></script>
<script src="js/dc.js"></script>
</head>
<body>
<h1>Data 2017</h1>
<div class="container">
<div id="test">
<script>
var chart = dc.pieChart("#test");
d3.csv("sum_2.csv", function(error, experiments) {
var ndx = crossfilter(experiments),
runDimension = ndx.dimension(function(d) {return ""+d.field2;})
speedSumGroup = runDimension.group().reduceSum(function(d) { return d.field7 / d.field6; });
COMMENTS: with this above settings I can't get the precentage (%) correct also if I want to use field7 to field9 like ((=field7+field8+field9) / field7) to get the precentage of the value from field7
chart
.width(768)
.height(480)
.slicesCap(10)
.innerRadius(100)
.dimension(runDimension)
.group(speedSumGroup)
.legend(dc.legend())
// workaround for #703: not enough data is accessible through .label() to display percentages
.on('pretransition', function(chart) {
chart.selectAll('text.pie-slice').text(function(d) {
return d.data.key + ' ' + dc.utils.printSingleValue((d.endAngle - d.startAngle) / (2*Math.PI) * 100) + '%';
})
});
chart.render();
});
</script>