student student - 3 months ago 12
Javascript Question

Avoid negative axes values for dc powered d3 bubble chart with crossfilter

We're using the below dc powered d3 bubble chart with crossfilter



var payerBubbleChart;

payerBubbleChart = dc.bubbleChart('#payer-chart');

var dateFormat = d3.time.format('%m/%d/%Y');
var numberFormat = d3.format('.2f');

var PracticeId = GetPracticeId(),
CityId = GetCityId(),
FromDate = GetFromDate(),
ToDate = GetToDate(),
ProviderId = GetProviderId();

var filteredData = source1.filter(function(d) {

if (CityId != "0" && ProviderId != "0" && PracticeId != "-- ALL -- ") {
return (
d.claimDate >= FromDate &&
d.claimDate <= ToDate &&
d.city == CityId &&
d.provider == ProviderId
/*&&
d.practice == PracticeId*/
);
} else {
return (
d.claimDate >= FromDate &&
d.claimDate <= ToDate
);
}
});

var source1CF = crossfilter(filteredData);
var payerDim = source1CF.dimension(function(d) {
return d.drug;
});

var payerGroup = payerDim.group().reduce(
function(p, v) {
++p.count;
p.denialCount += v.denialCount;
p.claimCount += v.claimCount;
p.revenue += v.revenue;
return p;
},
function(p, v) {
--p.count;
p.denialCount -= v.denialCount;
p.claimCount -= v.claimCount;
p.revenue -= v.revenue;
return p;
},
function() {
return {
count: 0,
revenue: 0,
denialCount: 0,
claimCount: 0
}
}
);

payerBubbleChart
.width(450).height(chartHeight).transitionDuration(1500).margins({
top: 20,
right: 50,
bottom: 30,
left: 40
})
.dimension(payerDim)
.group(payerGroup)
.colors(colorbrewer.RdYlBu[9])
.colorDomain([0, 100])
.colorAccessor(function(d) {
return (d.value.denialCount / d.value.claimCount);
})
.keyAccessor(function(p) {
return p.value.denialCount;
})
.valueAccessor(function(p) {
return p.value.revenue;
})
.radiusValueAccessor(function(d) {
return (d.value.claimCount / 1000);
})
.maxBubbleRelativeSize(0.3).x(d3.scale.linear()).y(d3.scale.linear())
.r(d3.scale.linear().domain([0, 500]))
.elasticY(true).elasticX(true)
.yAxisPadding(1000000).xAxisPadding(1000000)
.renderHorizontalGridLines(true).renderVerticalGridLines(true)
.xAxisLabel('Denial Amount').yAxisLabel('Revenue')
.renderLabel(true).label(function(p) {
return p.key;
})
.renderTitle(true)
.title(function(p) {

return [p.key,
'Revenue: $' + formatNumber(p.value.revenue, 1000, "k"),
'Claims: ' + formatNumber(p.value.claimCount, 1000, "k"),
'Denials: $' + formatNumber(p.value.denialCount, 1000, "k")
]
.join('\n');
})
.yAxis().tickFormat(function(v) {
return "$" + formatNumber(v, 1000, "k");
});
payerBubbleChart.xAxis().tickFormat(function(v) {
return "$" + formatNumber(v, 1000, "k");
});

<div id="payer-chart">
</div>





For some unknown reasons, the axes are showing negative values

enter image description here


  • there're no negative values in the
    json

  • tried removing some negation code
    --p.count; p.denialCount -= v.denialCount; p.claimCount -= v.claimCount; p.revenue -= v.revenue;
    from reduce



We're pretty new in this, can someone guide us please?

Answer

From Github

chart.xAxisMin = function() { return 0; };
chart.yAxisMin = function() { return 0; };