I'm new to crossfilter.js. Whenever I used the range selector I get the strange blocky highlighted area on my bar chart outside of my filter range. I can't figure out what I'm doing wrong.
How I can prevent this blocky section from highlighting outside my range?
d3.csv("mydata.csv", function(data) {
data.forEach(function(d) {
d.conf = d3.round(+d.Conf,1);
console.log(d.conf);
});
var facts = crossfilter(data); // Put data into crossfilter
var confDim = facts.dimension(function (d) { return d.conf;}); // conf # filter
var confTotal = confDim.group().reduceCount(function (d) { return d.conf;});
var confChart = dc.barChart("#conf-chart");
confChart
.width(500).height(200)
.dimension(confDim)
.group(confTotal,"Confidence Number")
.x(d3.scale.linear().domain([0,5]).range([10,400]))
.yAxisLabel("Number of data points")
.brushOn(true);
dc.renderAll();
});
This line that you've commented as being a filter is actually just setting up the dimension in its entirety:
var confDim = facts.dimension(function (d) { return d.conf;}); // conf # filter
You need to define a filter using one of the filter functions. See the documentation here.
Be careful to read the documentation for dimension.group carefully as it contains a gotcha where the filter on the dimension being grouped won't be applied. To work around this you may need to actually define 2 dimensions that are identical and use one for filtering and the other for grouping.
Related
I'm trying to create a bubble chart with dc.js that will have a bubble for each data row and will be filtered by other charts on the same page. The initial bubble chart is created correctly, but when items are filtered from another chart and added or removed from the group it looks like they are being applied to the wrong group. I'm not sure what I'm messing up on the grouping or dimensions. I've created an example fiddle here
There's simple pie chart to filter on filterColumn, a bubble chart that uses identifer1, a unique field, as the dimension and xVal, yVal, and rVal to display the data, and a dataTable to display the current records.
I've tried other custom groups functions, but switched to the example from the FAQ and still had problems.
var
filterPieChart=dc.pieChart("#filterPieChart"),
bubbleChart = dc.bubbleChart('#bubbleChart'),
dataTable = dc.dataTable('#data-table');
var
bubbleChartDim=ndx.dimension(dc.pluck("identifier1")),
filterPieChartDim=ndx.dimension(dc.pluck("filterColumn")),
allDim = ndx.dimension(function(d) {return d;});
var filterPieChartGroup=filterPieChartDim.group().reduceCount();
function reduceFieldsAdd(fields) {
return function(p, v) {
fields.forEach(function(f) {
p[f] += 1*v[f];
});
return p;
};
}
function reduceFieldsRemove(fields) {
return function(p, v) {
fields.forEach(function(f) {
p[f] -= 1*v[f];
});
return p;
};
}
function reduceFieldsInitial(fields) {
return function() {
var ret = {};
fields.forEach(function(f) {
ret[f] = 0;
});
return ret;
};
}
var fieldsToReduce=['xVal', 'yVal', 'rVal'];
var bubbleChartGroup = bubbleChartDim.group().reduce(
reduceFieldsAdd(fieldsToReduce),
reduceFieldsRemove(fieldsToReduce),
reduceFieldsInitial(fieldsToReduce)
);
filterPieChart
.dimension(filterPieChartDim)
.group(filterPieChartGroup)
...
;
bubbleChart
.dimension(bubbleChartDim)
.group(bubbleChartGroup)
.keyAccessor(function (p) { return p.value.xVal; })
.valueAccessor(function (p) { return p.value.yVal; })
.radiusValueAccessor(function (p) { return p.value.rVal; })
...
;
This was a frustrating one to debug. Your groups and reductions are fine, and that's the best way to plot one bubble for each row, using a unique identifier like that.
[It's annoying that you have to specify a complicated reduction, when the values will be either the original value or 0, but the alternatives aren't much better.]
The reductions are going crazy. Definitely not just original values and zero, some are going to other values, bigger or negative, and sometimes clicking a pie slice twice does not even return to the original state.
I put breakpoints in the reduce functions and noticed, as you did, that the values were being removed from the wrong groups. How could this be? Finally, by logging bubbleChartGroup.all() in a filtered handler for the pie chart, I noticed that the groups were out of order after the first rendering!
Your code is fine. But you've unearthed a new bug in dc.js, which I filed here.
In order to implement the sortBubbleSize feature, we sort the bubbles. Unfortunately we are also sorting crossfilter's internal array of groups, which it trusted us with. (group.all() returns an internal data structure which must never be modified.)
The fix will be easy; we just need to copy the array before sorting it. You can test it out in your code by commenting out sortBubbleSize and instead supplying the data function, which is what it does internally:
bubbleChart.data(function (group) {
var data = group.all().slice(0);
if (true) { // (_sortBubbleSize) {
// sort descending so smaller bubbles are on top
var radiusAccessor = bubbleChart.radiusValueAccessor();
data.sort(function (a, b) { return d3.descending(radiusAccessor(a), radiusAccessor(b)); });
}
return data;
});
Notice the .slice(0) at the top.
Hope to fix this in the next release, but this workaround is pretty solid in case it takes longer.
Here is a fiddle demonstrating the workaround.
I am looking for a way to get Dc.js charts to be added to a dashboard by user choice of chart in a palette.
End of the day I want the user to be able to do 2 things.
Part 1: User should be able to select and add various charts from charts palette into a dashboard by selecting respective target variable(x,y fields) which are nothing but fields in csv, one by one for each chart.
Part 2 : These charts which form a kind of dashboard should be reactive or interactive(change in one chart reflects change in all other charts) which is not the case now.
I have already achieved the 1st part by below code , but the main challenge is 2nd part. Charts are no more coordinated visualizations(by change of a pie in one chart , other charts do not reflect the change)
I have added all charts in 1 function with a switch case statement. Everything works fine up to adding the charts to the dashboard or respective div but this does not make the charts reactive(click on one chart does not affect other charts).
Little note about the below code and its intentions.
-I am dynamically creating div’s and assigning ids.
-here num in my function is a random number assigned in calling function to make sure there are no duplicate divs with same id.
-Targetvar is a field chosen by the user.
-arrayofobject is the actual data.
-ctype is the charttype chosen by user.I have declared 2 charts(pie and row) for example sake.Their are more charts in the palette for user to choose.
Please let me know what change I need to make to get charts be reactive.
function charts_all(targetvar1,arrayOfObject,num,ctype){
var selname="#divid"+num;
switch(ctype){
case "pie":
var SevPieChart=dc.pieChart(selname);
data=arrayOfObject;
var ndx = crossfilter(data);
var all = ndx.groupAll();
var targetvariable1=targetvar1;
var SevDim = ndx.dimension(function(d){ return d[targetvariable1]; })
;
var Sevgroup=SevDim.group();
SevPieChart
.height(400)
.width(1200)//1200
.radius(150)
.innerRadius(20)
.dimension(SevDim)
.group(Sevgroup)
.transitionDuration(1000)
.legend(dc.legend().x(950).y(40)) //LEGEND CODE x=950
.externalLabels(0)
.renderLabel(true)
.label(function(d) { return d.key +" (" + Math.floor(d.value / all.value() * 100) + "%)"; })
.title(function(d){return d.Sevgroup;});
//dc.renderAll();
alldefault();
break;
case "row":
var Rowchart = dc.rowChart(selname);
data=arrayOfObject;
var ndx = crossfilter(data);
var all = ndx.groupAll();
var targetvariable1=targetvar1;
var SaDim = ndx.dimension(function(d){ return d[targetvariable1]; })
;
var SAgroup=SaDim.group();
Rowchart
.width(1000)
.height(1000)
.dimension(SaDim)
.group(SAgroup)
.renderLabel(true)
.label(function(d) { return d.key+" (" + Math.floor(d.value / all.value() * 100) + "%)"; })
.data(function(group){ return group.top(40);}) ;
//Rowchart.filter = function() {};
//dc.renderAll();
alldefault();
break;
default:
}
dc.renderAll();
}
In DC.JS I have a rowChart of Top 10 variance of A minus B with the following dim/group:
.dimension(dateDim)
.group(grp)
Relevant Variables are:
var dateDim = ndx.dimension(function (d) { return d.DATE; });
var dateFormat = d3.time.format("%d/%m/%Y");
For the group, this works fine:
var grp= dateDim.group().reduceSum(function(d) {return Math.abs(d.A - d.B);});
However, what I'd like to do is only show items that are up to today only.
I tried the function below but this is not working. It may just be syntax.
Any Ideas?
var grp2= dateDim.group().reduceSum(function(d) {
if (dateDim > dateFormat(today))return dateDim; else return Math.abs(d.A- B.plan);
Thanks, stutray
This is addressed in the dc.js FAQ: https://github.com/dc-js/dc.js/wiki/FAQ#how-do-i-filter-the-data-before-its-charted
So ... originally I said the above. But what you actually want to do is filter out records that don't match a particular pre-defined filter so that they are not aggregated into your groups for this chart? In that case you need to use custom filter functions and I would recommend using a helper library like Reductio, which provides a filter function.
var dAct = reductio().filter(function(d) {
// Here `d` is the actual data record. Return a boolean by testing
// d against your filter criteria. Return true to include the record and
// false to exclude it.
return d.STARTDATE !== "10\/Sep\/2016";
})
.sum(function(d) {return Math.abs(d.A - d.B);})(dateDim.group());
If you use Reductio, you'll also need to use a valueAccessor function on your chart in dc.js:
rChart
...
.valueAccessor(function(d) { return d.value.sum; })
Updated example on Codepen: http://codepen.io/anon/pen/oxrPJv
Documentation: https://github.com/crossfilter/reductio#aggregations-standard-aggregations-reductio-b-filter-b-i-filterfn-i-
I need to add several vertical lines (say 10 or 20) to an nvd3 line chart.
The question here suggests adding a series for this, but I would need to add 20 series, overcrowding the legend and the interactive tooltip.
From what I understand this can't be done out-of-the-box (please correct me if I'm wrong), so my question is what is the easiest way of doing this:
Add D3 lines to the DOM (how would I go about scale, positioning them horizontally, etc?)
Add generic support for this in nvd3
Add support for hiding specific series from the legend and from the tooltip, and add 20 series
Any other idea?
Well, it turns out that it wasn't that hard. I chose option #3, and the following code changes to nv.d3.js got the job done:
In the legend model, change
function chart(selection) {
selection.each(function(data) {
... to
function chart(selection) {
selection.each(function(dataUnfiltered) {
var data = dataUnfiltered.filter(function (d) {
return !d.disableLegend;
});
and in the lineChart model, change:
interactiveLayer.dispatch.on('elementMousemove', function(e) {
lines.clearHighlights();
var singlePoint, pointIndex, pointXLocation, allData = [];
data
.filter(function(series, i) {
series.seriesIndex = i;
return !series.disabled;
})
... to
interactiveLayer.dispatch.on('elementMousemove', function(e) {
lines.clearHighlights();
var singlePoint, pointIndex, pointXLocation, allData = [];
data
.filter(function(series, i) {
series.seriesIndex = i;
return !series.disabled && !series.disableTooltip;
})
(Obviously this second change would have to be done to each chart model you want to support, say also cumulativeLineChart and `stackedAreaChart).
This will enable you to specify, in addition to color, key, values, etc. also disableTooltip: true and/or disableLegend: true.
Hope this helps someone.
edit See here for the non-working example of what I'm trying to do: http://bl.ocks.org/elsherbini/5814788
I am using dc.js to plot data collected from bee hives at my university. I am pushing new data to the graphs on every database change (using the magic of Meteor). When the database is over 5000 records or so, rerendering the lines gets really slow. So I want to use simplify.js to preprocess the lines before rendering. To see what I'm talking about, go to http://datacomb.meteor.com/. The page freezes after a couple of seconds, so be warned.
I have started to extend dc.js with a simpleLineChart, which would inherit from the existing dc.lineChart object/function. Here is what I have so far:
dc.simpleLineChart = function(parent, chartGroup) {
var _chart = dc.lineChart(),
_tolerance = 1,
_highQuality = false,
_helperDataArray;
_chart.tolerance = function (_) {
if (!arguments.length) return _tolerance;
_tolerance = _;
return _chart;
};
_chart.highQuality = function (_) {
if (!arguments.length) return _highQuality;
_highQuality = _;
return _chart;
};
return _chart.anchor(parent, chartGroup);
}
simplify.js takes in an array of data, a tolerance, and a boolean highQuality, and returns a new array with fewer elements based on it's simplification algorithm.
dc.js uses crossfilter.js. dc.js charts are associated with a particular crossfilter dimension and group. Eventually, it uses the data from someGroup().all() as the data to pass to a d3.svg.line(). I can't find where this is happening in the dc.js source, but this is where I need to intervene. I want to find this method, and override it in the dc.simpleLineChart object that I am making.
I was thinking something like
_chart.theMethodINeedToOverride = function(){
var helperDataArray = theChartGroup().all().map(function(d) { return {
x: _chart.keyAccessor()(d),
y: _chart.valueAccessor()(d)};})
var simplifiedData = simplify(helperDataArray, _tolerance, _highQuality)
g.datum(simplifiedData); // I know I'm binding some data at some point
// I'm just not sure to what or when
}
Can anyone help me either identify which method I need to override, or even better, show me how to do so?
dc.js source: https://github.com/NickQiZhu/dc.js/blob/master/dc.js
edit:
I think I may have found the function I need to override. The original function is
function createGrouping(stackedCssClass, group) {
var g = _chart.chartBodyG().select("g." + stackedCssClass);
if (g.empty())
g = _chart.chartBodyG().append("g").attr("class", stackedCssClass);
g.datum(group.all());
return g;
}
And I have tried to override it like so
function createGrouping(stackedCssClass, group) {
var g = _chart.chartBodyG().select("g." + stackedCssClass);
if (g.empty())
g = _chart.chartBodyG().append("g").attr("class", stackedCssClass);
var helperDataArray = group().all().map(function(d) { return {
x: _chart.keyAccessor()(d),
y: _chart.valueAccessor()(d)};})
var simplifiedData = simplify(helperDataArray, _tolerance, _highQuality)
g.datum(simplifiedData);
return g;
}
However, when I make a simpleLineChart, it is just a linechart with a tolerance() and highQuality() method. See here: http://bl.ocks.org/elsherbini/5814788
Well, I pretty much did what I set out to do.
http://bl.ocks.org/elsherbini/5814788
The key was to not only modify the createGrouping function, but also the lineY function in the code. (lineY gets set to tell the d3.svg.line() instance how to set the y value of a given point d)
I changed it to
var lineY = function(d, dataIndex, groupIndex) {
return _chart.y()(_chart.valueAccessor()(d));
};
The way lineY was written before, it was looking up the y value in an array, rather than using the data bound to the group element. This array had it's data set before i made my changes, so it was still using the old, pre-simplification data.