Here is the fiddle for a stacked bar chart. This chart filters another line chart.
To remove empty bins, I tried dc.js FAQ, this example and this.
I saw this and this for a stacked bar chart scenario, but my grouping is different.
I've tried different things but I'm not able to get it to work.
Pretty sure I'm missing something simple.
Kindly review my code. Am I doing something wrong? How do i get the remove_empty_bins() working?
var stack = dc.barChart('#stack');
var XDimension = ndx.dimension(function (d) {return d.no;});
var YDimension_before = XDimension.group().reduce(
function(p, d) {
p[d.sub_no] = (p[d.sub_no]|| 0) + +d.avg;
return p;
},
function(p, d) {
p[d.sub_no] = (p[d.sub_no]|| 0) - +d.avg;
return p;
},
function() {
return {};});
var YDimension = remove_empty_bins(YDimension_before);
stack.width(550)
.height(400)
.dimension(XDimension)
.group(YDimension, '1', sel_stack(1))
.transitionDuration(500)
.xUnits(dc.units.ordinal)
.x(d3.scaleBand())
.margins({left: 80, top: 20, right: 80, bottom: 80})
.brushOn(false)
.clipPadding(20)
.elasticX(true)
.elasticY(true)
.title(function(d) {
return [ d.key + '[' + this.layer + '] ',
d.value[this.layer]].join('\n')
});
stack.stack(YDimension, '2', sel_stack(2))
.stack(YDimension, '3', sel_stack(3))
function remove_empty_bins(source_group) {
return {
all:function () {
return source_group.all().filter(function(d) {
return d.value != 0;
});
}
};
}
I think the problem is that you are reducing to an object, so d.value never equals zero.
You could use Object.values and Array.some to check if any stack is non zero for each bin:
function remove_competely_empty_bins(source_group) {
return {
all:function () {
return source_group.all().filter(function(d) {
return Object.values(d.value).some(v => v!=0);
});
}
};
}
Warning: dc.js isn't happy if the different stacks don't have the same x values. So that's why you wouldn't want to remove just the empty stacks. Only remove the bin if all the stacks are zero.
I am working on this pie-chart in D3.js.
This is the data:
DATA.JSON
[
{
"key":"amministrazione",
"categoria":"funzioni",
"val2015":404571081,
"val2013":374545999
},
{
"key":"sociale",
"categoria":"funzioni",
"val2015":235251679,
"val2013":258973653
},
{
"key":"territorio e ambiente",
"categoria":"funzioni",
"val2015":286164667,
"val2013":274949400
},
{
"key":"viabilità e trasporti",
"categoria":"funzioni",
"val2015":144185664,
"val2013":140619534
},
{
"key":"istruzione",
"categoria":"funzioni",
"val2015":168774925,
"val2013":170016208
},
{
"key":"cultura",
"categoria":"funzioni",
"val2015":55868045,
"val2013":55735535
},
{
"key":"sport",
"categoria":"funzioni",
"val2015":27219432,
"val2013":31244800
},
{
"key":"turismo",
"categoria":"funzioni",
"val2015":9544845,
"val2013":7674419
},
{
"key":"sviluppo economico",
"categoria":"funzioni",
"val2015":14790363,
"val2013":16635868
},
{
"key":"servizi produttivi",
"categoria":"funzioni",
"val2015":4334,
"val2013":4440
},
{
"key":"polizia locale",
"categoria":"funzioni",
"val2015":99007202,
"val2013":102065987
},
{
"key":"giustizia",
"categoria":"funzioni",
"val2015":12147068,
"val2013":12880138
},
{
"key":"anticipazioni di cassa",
"categoria":"rimborso prestiti",
"val2015":304323808,
"val2013":304323808
},
{
"key":"finanziamenti a breve termine",
"categoria":"rimborso prestiti",
"val2015":0,
"val2013":0
},
{
"key":"prestiti obbligazionari",
"categoria":"rimborso prestiti",
"val2015":38842996,
"val2013":36652213
},
{
"key":"quota capitale di debiti pluriennali",
"categoria":"rimborso prestiti",
"val2015":0,
"val2013":47152
},
{
"key":"quota capitale di mutui e prestiti",
"categoria":"rimborso prestiti",
"val2015":128508755,
"val2013":329885961
},
{
"key":"spese per conto terzi",
"categoria":"altro",
"val2015":232661261,
"val2013":236921438
},
{
"key":"disavanzo di amministrazione",
"categoria":"altro",
"val2015":0,
"val2013":0
}
]
It shows how the governmental budget is allocated to different functions (i.e. "key"). A value is given for each year (e.g. "val2015", "val2013") and each function is part of a macro-category (i.e. "funzioni", "rimborso prestiti", or "altro").
I am trying to create a color() function that dynamically changes its domain and range depending on:
the colorRange arbitrarily assigned as domain: greenRange for "funzioni", redRange for "rimborso prestiti" and blueRange for "altro"
the number of functions ("key") in each category that have a positive value, thus ignoring functions for which no resources were allocate during a given year. Done through the count() function (which works)
Then creates X number of shades for each ranging depending on the count() function of point 2
And assigns the appropriate color to each of the pie's wedges
This is my starting point:
var greenRange = ["rgb(199,233,192)", "rgb(0,68,27)"]; //range for the first 12 wedges of the pie (assuming they are all >0)
var redRange = ["rgb(252,187,161)", "rgb(103,0,13)"]; //range for the following 5 wedges of the pie (same assumption)
var blueRange = ["rgb(198,219,239)", "rgb(8,48,107)"]; //range for the last 3 wedges of the pie (same assumption)
I tried two options but neither works.
OPTION 1
function draw () {
//(1) count the number of data points with value > 0 in each category - This works well!
var countFunzioni=0;
dataset.forEach (function (d) {if (d.categoria=="funzioni" && d.val2015>0) { countFunzioni += 1;}})
var countRimborso=0;
dataset.forEach (function (d) {if (d.categoria=="rimborso prestiti" && d.val2015>0) { countRimborso += 1;}})
var countAltro=0;
dataset.forEach (function (d) {if (d.categoria=="altro" && d.val2015>0) { countAltro += 1;}})
//(2) create a color method for each category based on a the count calculated above and the range I determined
var colorFunzioni = d3.scale.linear()
.domain([0, countFunzioni])
.range(redRange);
var colorRimborso = d3.scale.linear()
.domain([0, countRimborso])
.range(redRange);
var colorAltro = d3.scale.linear()
.domain([0, countAltro])
.range(blueRange);
//draw the chart
chart = d3.select("#visualizationInner")
.append("svg")
.attr("id", "visualization")
.attr("width", w)
.attr("height", h)
.append("g")
.attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");
//draw and color the paths
var path = chart.datum(dataset).selectAll("path")
.data(pie)
.enter()
.append("path")
//(3) return the appropriate color method depending on the datum's category
.attr("fill", function(d, i) {
if (d.data.categoria=="funzioni") {return colorFunzioni(i);}
else if (d.data.categoria=="rimborso prestiti") {return colorRimborso(i);}
else if (d.data.categoria=="altro") {return colorAltro(i);}
})
.style("fill-opacity", 0.75)
.attr("d", arc);
}
Which returns this result:
This goes close, however it assigns a range of red colors to the first 12 wedges (which should get the greenRange instead) and no color to the wedges pertaining to the other categoreis
OPTION 2
function draw () {
//(1) same as above
//(2) create a color method that adapts to each category's count and range
var color = d3.scale.linear()
.domain([0, function (d) {
if (d.data.categoria=="funzioni") {return countFunzioni;}
else if (d.data.categoria=="rimborso prestiti") {return countRimborso;}
else if (d.data.categoria=="altro") {return countAltro;}
}])
.range(function (d) {
if (d.cdata.ategoria=="funzioni") {return greenRange;}
else if (d.data.categoria=="rimborso prestiti") {return redRange;}
else if (d.data.categoria=="altro") {return blueRange;}
});
////(3) return the appropriate color method depending on the datum's category
.attr("fill", function(d, i) {return color(i);}
}
This does not get any coloring done.
Any idea how to solve this?
Option1 Remarks:
.attr("fill", function(d, i) {
if (d.data.categoria=="funzioni") {return colorFunzioni(i);}
else if (d.data.categoria=="rimborso prestiti") {return colorRimborso(i);}
else if (d.data.categoria=="altro") {return colorAltro(i);}
})
The trouble is the above is written as if 'i' will maintain separate tallies for the three categories. It doesn't though, it keeps an index for all elements in your selection, and as soon as the first 12 items in the selections are done, the next items are going to be out of range of any of the scales you described and return "#000000" - this is why the first 12 are coloured (and the first 12 may be red because you assign the red range to two scales, and the green range isn't used) and the rest aren't.
As a quick fix, keep a tally in the data itself of where it occurs in each category like this:
dataset.forEach (function (d) {if (d.categoria=="altro" && d.val2015>0) { countAltro += 1; d.catIndex = countAltro; }})
do this for each category
and then in the fill attr function do:
else if (d.data.categoria=="altro") {return colorAltro(d.data.catIndex);}
and again that needs done for each category.
As a separate thing, you can get rid of those else-if's by assigning the colors like this:
var colorMap = {
funzioni: colorFunzioni,
altro: colorAltro,
"rimborso prestiti": colorRimborso
}
and then later doing
.attr("fill", function(d, i) {
var scale = colorMap[d.data.categoria];
if (scale) return scale(d.data.catIndex)
})
I am trying to make a bubble chart in dc.js. It should show the total quantity per item type. So the y axis has the domain of numbers and the x axis has the domain of String Values. These string values are not known beforehand, instead they are taken from a database, so i dont know how to define the x domain.
Here is my code
var itemChart = dc.bubbleChart('#item-chart');
//the data
var data = [{
date: "2015-01-01",
itemType: "bags",
quantity: 3
}];
var items = crossfilter(data);
var parseDate = d3.time.format("%Y-%m-%d").parse;
data.forEach(function (d) {
d.date = parseDate(d.date);
d.month = d.date.getMonth();
d.year = d.date.getFullYear();
//d.day = ((d.date.getFullYear() == 0) ? 'Sunday' : ((d.date.getFullYear() == 1) ? 'Monday' : ((d.date.getFullYear() == 2) ? 'Tuesday' : ((d.date.getFullYear() == 3) ? 'Wednesday' : ((d.date.getFullYear() == 4) ? 'Thursday' : ((d.date.getFullYear() == 5) ? 'Friday' : 'Sunday'))))));
d.itemType = d.itemType;
d.quantity = +d.quantity;
});
var itemTypeDim = items.dimension(function (d) {
return d.itemType;
});
var itemTypeProd = itemTypeDim.group().reduceSum(function(d) {
return d.quantity;
});
var prod = yearDim.group().reduceSum(function (d) {
return d.quantity;
});
var rangeVal = [-10, d3.max(itemTypeProd.all(), function(d) { return d.value.quantity; }) ];
itemChart
.width(990)
.height(250)
.transitionDuration(1500)
.margins({top: 10, right: 50, bottom: 30, left: 40})
.dimension(itemTypeDim)
.group(itemTypeProd);
.keyAccessor(function (d){
return d.value.itemType;
})
.valueAccessor(function (d){
return d.value.quantity;
})
.radiusValueAccessor(function (d){
return d.value.quantity;
})
.maxBubbleRelativeSize(0,3)
.elasticX(true)
.elasticY(true)
.yAxisPadding(100)
.xAxisPadding(500)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.xAxisLabel('Item Type')
.yAxisLabel('Total Quantity')
.renderLabel(true)
.label(function (p) {
return p.key;
})
.renderTitle(true)
.title(function (p){
return [
p.key,
'itemType: ' + p.value.customer,
'Quantity:' + p.value.quantity
].join('\n');
});
dc.renderAll();
Interesting - most people use bar charts for counting ordinal values. I am not sure if this use case for bubble charts has been fully explored, but it should work since the ordinal x scale support is at the coordinate grid mixin level.
You'll want at least
.x(d3.scale.ordinal())
https://github.com/dc-js/dc.js/blob/develop/web/docs/api-latest.md#dc.coordinateGridMixin+x
https://github.com/mbostock/d3/wiki/Ordinal-Scales
Please let us know how it turns out!
I'm trying to create a dashboard using dc.js and I want to customize how a data table is visualized. So my data looks something like this
agegroup gender group scores total
18-24 M 1 0.04 1
45-54 F 2 2.23 13
25-34 M 1 0.74 6
25-34 M 2 1.47 8
18-24 F 1 2.88 7
35-44 F 2 3.98 14
When I initialize a data table, it'll look the same as my original csv. However what if I want
agegroup gender group1.scores group1.total group2.scores group2.total
18-24 M 0.04 1 0.0 0
18-24 F 2.88 1 0.0 0
25-34 M 0.74 8 1.47 8
25-34 F 0.0 0 0.0 0
Here is how I initalize and set up my data table
dataTable = dc.dataTable('#data-table');
var tableDim = ndx.dimension(function(d) {
return d.gender;
});
dataTable
.width(400)
.height(800)
.dimension(tableDim)
.group(function(d){
return "Counts"
})
.size(20)
.columns([
function(d){
return d.gender;},
function(d){
return d.agegroup;
},
function(d){
return d.group;
},
function(d){
return d.scores;
},
function(d){
return d.total;
},
])
.order(d3.ascending)
.sortBy(function(d){
return d.gender;
});
I know that crossfilter allows you to filter and subset data quickly but I'm not sure how it'll function transforming datasets. Thanks!
So far, I was able to do this for now.
var tableDim = ndx.dimension(function (d) {
return d.agegroup;
});
var dataTable = dc.dataTable("#someTable");
dataTable.width(300).height(800)
.dimension(tableDim)
.group(function (d) {
return "Counts";
})
.columns([
function (d) {
return d.agegroup;
},
function (d) {
return d.gender;
},
function (d) {
if (d.group == 1) return d.scores;
else return 0;
},
function (d) {
if (d.group == 1) return d.total;
else return 0;
},
function (d) {
if (d.group == 2) return d.scores;
else return 0;
},
function (d) {
if (d.group == 2) return d.total;
else return 0;
}]);
dc.renderAll();
Here is the JSFiddle working with the above code. Use this or make a new one next time when you are asking for such solutions on SO.
Remember, using dc.dataTable you may not be able to reduce the number of rows in the data set. If you really want to reduce the number of rows you may try group().reduce() methods and create new fields for group1.total, group1.scores etc..
Hope somebody can help me out because I can't find any reference about this error.
I was working on this piece of code:
var xMin = d3.min(data, function(d) { return d.value; });
var xMax = d3.max(data, function(d) { return d.value; });
if (0 > xMin & 0 > xMax) {
xMax = 0;
}
if (0 < xMin & 0 < xMax) {
xMin = 0;
}
x.domain(xMin, xMax).nice();
y.domain(data.map(function(d) { return d.label; }));
but I must have made some mistake cause now the loading blocks with the error message below in the web console:
"TypeError: t.map is not a function # http://d3js.org/d3.v3.min.js:2
.domain() takes an array as argument, i.e.
x.domain(xMin, xMax).nice();
should be
x.domain([xMin, xMax]).nice();
I had this error when I switched the mock data from an example.
var dataset = d3.layout.stack()(["CountPending", "CountDenied"].map(function (type) {
return data.map(function (d) {
return { x: d.Name, y: +d[type] };
});
}));
In my dataset the example data was using ["pending","denied"] while my real data used the following keys ["CountPending", "CountDenied"]
Use the right keys!
While this might not help the OP, I hope it helps someone.