Precentage of several values in a Pie Chart

32 views
Skip to first unread message

soren

unread,
Dec 17, 2017, 1:49:01 PM12/17/17
to dc-js user group
Hello user group,

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...
How do I get correct values?

Field2 is region name (string)
Field7 to 9 is numbers...

Regards
Soren

{

<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>
}

Gordon Woodhull

unread,
Dec 19, 2017, 12:20:38 PM12/19/17
to dc.js user group
Hi Soren,

It's hard for me to tell what you're trying to do here. Is it possible to create a running example, using e.g. jsFiddle or bl.ocks.org/blockbuilder.org? 

Also if you can describe more precisely what calculation you are trying to perform, that would help a lot.

My guess is that you want to get the (sum of all field7) / (sum of all field6), in which case you'd need to use a custom reduction which sums field7 and field9 separately, sort of like in the annotated stock example [1], but simpler. I.e.

group = dimension.group().reduce(
  function(p, v) {
    p.sumField6 = (p.sumField6 || 0) + v.field6;
    p.sumField7 = (p.sumField7 || 0) + v.field7;
    return p
  },
  function(p, v) {
    p.sumField6 = (p.sumField6 || 0) + v.field6;
    p.sumField7 = (p.sumField7 || 0) + v.field7;
    return p
  },
  function() { return {sumField6: 0, sumField7: 0}; }
);

You would put off calculating the ratio until the chart needs that data, by using chart.valueAccessor, like

chart.valueAccessor(function(kv) {
  return kv.sumField7 / kv.sumField6;
});

But again, this is only a guess, since it's more common to need the ratio of the sums rather than the sum of the ratios. Please explain further.

Cheers,
Gordon



--
You received this message because you are subscribed to the Google Groups "dc-js user group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dc-js-user-gro...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/dc-js-user-group/06319c19-6211-476e-ae76-bd6de1bcbe33%40googlegroups.com.

soren

unread,
Dec 19, 2017, 5:28:43 PM12/19/17
to dc-js user group
Hello Gordon,

Perhaps easier this way...

field1 = regions
field2 = amount of yellow apples
field3 = amount of red apples
field4 = amount of green apples
field5 = total of everything

example:
North,25,50,50,500
North,25,20,30,600
East,20,20,50,800
East,40,30,25,600
West,30,25,50,900
West,25,30,50,700
South,50,40,50,500
South,30,50,40,700


How to get the % of yellow apples from total apples for each region or red apples from total of everything?
I feel I get the wrong numbers on the Pie chart or my calculations is wrong but I do get it "correct" in excel... :)

Thanks
Soren

Gordon Woodhull

unread,
Dec 19, 2017, 5:32:06 PM12/19/17
to dc.js user group
I think that's what I described above. Ratio of the sums.


--
You received this message because you are subscribed to the Google Groups "dc-js user group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dc-js-user-gro...@googlegroups.com.

Gordon Woodhull

unread,
Dec 19, 2017, 5:38:33 PM12/19/17
to dc-js-us...@googlegroups.com
Except i made an obvious copy/paste mistake, and the second reduce function should subtract instead of adding:

group = dimension.group().reduce(
  function(p, v) {
    p.sumField6 = (p.sumField6 || 0) + v.field6;
    p.sumField7 = (p.sumField7 || 0) + v.field7;
    return p
  },
  function(p, v) {
    p.sumField6 = (p.sumField6 || 0) - v.field6;
    p.sumField7 = (p.sumField7 || 0) - v.field7;
    return p
  },
  function() { return {sumField6: 0, sumField7: 0}; }
);

soren

unread,
Dec 22, 2017, 3:28:45 AM12/22/17
to dc-js user group
Thanks Gordon,
I will have a look at it.
Happy holidays
Regards
Soren
Reply all
Reply to author
Forward
0 new messages