I am using crossfilter with several charts in combination with dc.js.
When filtering with ring charts, the data in the linechart disappears, but the x-axis remains unchanged and doesn't refresh.
var tempLineChartt1 = dc.lineChart("#chart-line-temp-t1");
tempLineChartt1
.width(768)
.height(480)
.elasticX(true)
.x(d3.time.scale().domain([dateDim.bottom(1)[0].dd,dateDim.top(1)[0].dd]))
.elasticX(true)
.dimension(dateDim)
.group(iotmPerDate)
.renderArea(true)
.brushOn(false)
.renderDataPoints(true)
.clipPadding(10)
.yAxisLabel("T1")
I know this has been answered a few times, but I couldn't find a reference to exactly this in a quick search.
Mostly likely you're referring to the fact that bins aren't automatically removed from crossfilter groups. So dc.js sees no reason to change the X domain - elasticX(true) will only kick in when the set of X keys changes, and here the Y values have only dropped to zero.
You can use a "fake group" to filter out these results dynamically:
function remove_empty_bins(source_group) {
return {
all:function () {
return source_group.all().filter(function(d) {
return d.value != 0;
});
}
};
}
var filtered_group = remove_empty_bins(group) // or filter_bins, or whatever
chart.dimension(dim)
.group(filtered_group)
https://github.com/dc-js/dc.js/wiki/FAQ#fake-groups
With this in place, each time the line chart is redrawn, the fake group will filter out the zeros as the data is read. Then the line chart will recalculate the domain and zoom to fit.
Related
I'm not sure how to do this. I'm developing a heatmap dc.js. I want to set a range of colors manually. For example,
var chart = dc.heatMap('#heatmapID');
chart
.width(690) //850
.height(400)
.margins({top: 10, right: 0, bottom: 50, left: 70})
.dimension(dimension)
.group(group)
.keyAccessor(function(d) { return d.key[0]; })
.valueAccessor(function(d) { return d.key[1]; })
.colorAccessor(function(d) {return d.value.rate;});
chart.data(grouphelper.dataAccessor(dimension));
chart.colors(['#30d074', '#f3cb2c', '#ffa85c', '#ff604e'])
.calculateColorDomain();
The code above works but its automatically setting the colors base on the min and the max data (I'm assuming). For the chart.colors(....) i want to set a range manually but when I tried to apply a return function, for example,
//Outside of the chart function
var colors = ['#30d074', '#f3cb2c', '#ffa85c', '#ff604e'];
function colorHeatMap() {
return d3.scale.threshold().domain([0.02,0.06,0.23]).range(colors); }
//now apply colorHeatMap function into the .color function.
chart.colors(colorHeatMap()) .calculateColorDomain();
I received a _colors.domain is not a function error. When I remove the .calculateColorDomain(), the heatmap display all black boxes. My goal is to set the range manually for the 4 colors. Please help. This approach works well with dc row charts but I cannot figure out how to do that for the heatmap.
You cannot pass an array colors to the chart.colors() function; you must pass a d3 color scale object. That's why your heatmap shows all black boxes when you remove calculateColorDomain().
I've run into a similar issue, and my solution was to create a colorDomain array and use it to access the colors. If you know which values you want to assign to each color, it's simple: just put the values in an array in that order.
var colorsDomain = [0.02, 0.06, 0.23];
var colors = ['#30d074', '#f3cb2c', '#ffa85c', '#ff604e'];
chart.colors(d3.scaleQuantize().domain([0, colors.length - 1]).range(colors))
.colorAccessor(d => colorsDomain.indexOf(d.value.rate))
It looks like you might be using d3 v3 or lower, in which case you would want to use d3.scale.quanitze() instead of d3.scaleQuantize() in the colors function. Hope this helps!
I'm new to dc.js and trying to implement a something like the "Monthly Index Abs Move" graph in the demo at https://dc-js.github.io/dc.js/
(see document source at https://dc-js.github.io/dc.js/docs/stock.html).
ie. I'm trying to implement a line chart for "zoom in" view with a bar chart for the "zoomed out" view (rangeChart).
My problem is that when I filter a date range (eg. by using the "brushOn" the bar chart) then the bars that are filtered out disappear
The demo has this working correctly - the bars outside the date range are gray and those within the date range are blue - see screenshots.
I'm using the css file used in the demo, and I'm using very similar code (see code below), so I'm not sure why this difference.
var maxDate = new Date(1985, 0, 1);
var minDate = new Date(2200, 12, 31);
events.forEach(function (d) {
d.created = new Date(d.created);
//d.last_modified = new Date(d.last_modified);
d.hour = d3.time.hour(d.created); // precaclculate for performance
d.day = d3.time.day(d.created);
if (d.created > maxDate) {
maxDate = d.created;
}
if (d.created < minDate) {
minDate = d.created;
}
});
var ndx = crossfilter(events);
var dateDimension = ndx.dimension(dc.pluck('created'));
var chatHourDim = ndx.dimension(dc.pluck('hour'));
var chatDayDim = ndx.dimension(dc.pluck('day'));
var chatsPerHourGroup = chatHourDim.group().reduceCount();
var chatsPerDayGroup = chatDayDim.group().reduceCount();
visitorsPerHour /* dc.lineChart('#visitors-count', 'chartGroup'); */
.renderArea(true)
.width(900)
.height(200)
.transitionDuration(10)
.margins({top: 30, right: 40, bottom: 25, left: 40})
.dimension(chatHourDim)
.mouseZoomable(true)
// Specify a “range chart” to link its brush extent with the zoom of the current “focus chart”.
.rangeChart(visitorsPerDay)
.x(d3.time.scale().domain([minDate, maxDate]))
.round(d3.time.hour.round)
.xUnits(d3.time.hours)
.elasticY(true)
.renderHorizontalGridLines(true)
.legend(dc.legend().x(650).y(10).itemHeight(13).gap(5))
.brushOn(false)
.group(chatsPerHourGroup, 'Chat events per hour')
.title(function (d) {
var value = d.value;
if (isNaN(value)) {
value = 0;
}
return dateFormat(d.key) + '\n' + value + " chat events";
});
// dc.barChart("visitors-count-per-day", 'chartGroup');
visitorsPerDay.width(900)
.height(40)
.margins({top: 0, right: 50, bottom: 20, left: 40})
.dimension(chatDayDim)
.group(chatsPerDayGroup)
// .centerBar(true)
.gap(1)
.brushOn(true)
.x(d3.time.scale().domain([minDate, maxDate]))
.round(d3.time.day.round)
.alwaysUseRounding(true)
.xUnits(d3.time.days);
The way dc.js and crossfilter ordinarily support this functionality is that a crossfilter group does not observe its own dimension's filters.
The range chart example in the stock example uses the same dimension for both charts (moveMonths). So, when the focus chart is zoomed to the selected range in the range chart, it does filter the data for all the other charts (which you want), but it does not filter the range chart.
If you want to use different dimensions for the two charts, I can see a couple ways to get around this.
Using a fake group
Perhaps the easiest thing to do is snapshot the data and disconnect the range chart from later filters, using a fake group:
function snapshot_group(group) {
// will get evaluated immediately when the charts are initializing
var _all = group.all().map(function(kv) {
// don't just copy the array, copy the objects inside, because they may change
return {key: kv.key, value: kv.value};
});
return {
all: function() { return _all; }
};
}
visitorsPerDay
.group(snapshot_group(chatsPerDayGroup))
However, the range chart also won't respond to filters on other charts, and you probably want it to.
Same dimension, different groups
So arguably the more correct thing is to use only one time dimension for both the focus and range charts, although it kills the optimization you were trying to do on binning. A group optionally takes its own accessor, which takes the dimension key and produces its own key, which must preserve the ordering.
Seems like it was probably designed for exactly this purpose:
var dateDimension = ndx.dimension(dc.pluck('created'));
var chatsPerHourGroup = dateDimension.group(function(d) {
return d3.time.hour(d);
}).reduceCount();
var chatsPerDayGroup = dateDimension.group(function(d) {
return d3.time.day(d);
}).reduceCount();
visitorsPerHour /* dc.lineChart('#visitors-count', 'chartGroup'); */
.dimension(dateDimension)
.group(chatsPerHourGroup, 'Chat events per hour')
visitorsPerDay.width(900)
.dimension(dateDimension)
.group(chatsPerDayGroup)
I don't know if you'll notice a slowdown. Yes, JavaScript date objects are slow, but this shouldn't be an issue unless you are converting tens or hundreds of thousands of dates. It's usually DOM elements that are the bottleneck in d3/dc, not anything on the JavaScript side.
I have a group of graphs visualizing a bunch of data for me (here), based off a csv with approximately 25,000 lines of data, each having 12 parameters. However, doing any interaction (such as selecting a range with the brush on any of the graphs) is slow and unwieldy, completely unlike the dc.js demo found here, which deals with thousands of records as well but maintains smooth animations, or crossfilter's demo here which has 10 times as many records (flights) as I do.
I know the main resource hogs are the two line charts, since they have data points every 15 minutes for about 8 solid months. Removing either of them makes the charts responsive again, but they're the main feature of the visualizations, so is there any way I can make them show less fine-grained data?
The code for the two line graphs specifically is below:
var lineZoomGraph = dc.lineChart("#chart-line-zoom")
.width(1100)
.height(60)
.margins({top: 0, right: 50, bottom: 20, left: 40})
.dimension(dateDim)
.group(tempGroup)
.x(d3.time.scale().domain([minDate,maxDate]));
var tempLineGraph = dc.lineChart("#chart-line-tempPer15Min")
.width(1100).height(240)
.dimension(dateDim)
.group(tempGroup)
.mouseZoomable(true)
.rangeChart(lineZoomGraph)
.brushOn(false)
.x(d3.time.scale().domain([minDate,maxDate]));
Separate but relevant question; how do I modify the y-axis on the line charts? By default they don't encompass the highest and lowest values found in the dataset, which seems odd.
Edit: some code I wrote to try to solve the problem:
var graphWidth = 1100;
var dataPerPixel = data.length / graphWidth;
var tempGroup = dateDim.group().reduceSum(function(d) {
if (d.pointNumber % Math.ceil(dataPerPixel) === 0) {
return d.warmth;
}
});
d.pointNumber is a unique point ID for each data point, cumulative from 0 to 22 thousand ish. Now however the line graph shows up blank. I checked the group's data using tempGroup.all() and now every 21st data point has a temperature value, but all the others have NaN. I haven't succeeded in reducing the group size at all; it's still at 22 thousand or so. I wonder if this is the right approach...
Edit 2: found a different approach. I create the tempGroup normally but then create another group which filters the existing tempGroup even more.
var tempGroup = dateDim.group().reduceSum(function(d) { return d.warmth; });
var filteredTempGroup = {
all: function () {
return tempGroup.top(Infinity).filter( function (d) {
if (d.pointNumber % Math.ceil(dataPerPixel) === 0) return d.value;
} );
}
};
The problem I have here is that d.pointNumber isn't accessible so I can't tell if it's the Nth data point (or a multiple of that). If I assign it to a var it'll just be a fixed value anyway, so I'm not sure how to get around that...
When dealing with performance problems with d3-based charts, the usual culprit is the number of DOM elements, not the size of the data. Notice the crossfilter demo has lots of rows of data, but only a couple hundred bars.
It looks like you might be attempting to plot all the points instead of aggregating them. I guess since you are doing a time series it may be unintuitive to aggregate the points, but consider that your plot can only display 1100 points (the width), so it is pointless to overwork the SVG engine plotting 25,000.
I'd suggest bringing it down to somewhere between 100-1000 bins, e.g. by averaging each day:
var daysDim = data.dimension(function(d) { return d3.time.day(d.time); });
function reduceAddAvg(attr) {
return function(p,v) {
if (_.isLegitNumber(v[attr])) {
++p.count
p.sums += v[attr];
p.averages = (p.count === 0) ? 0 : p.sums/p.count; // gaurd against dividing by zero
}
return p;
};
}
function reduceRemoveAvg(attr) {
return function(p,v) {
if (_.isLegitNumber(v[attr])) {
--p.count
p.sums -= v[attr];
p.averages = (p.count === 0) ? 0 : p.sums/p.count;
}
return p;
};
}
function reduceInitAvg() {
return {count:0, sums:0, averages:0};
}
...
// average a parameter (column) named "param"
var daysGroup = dim.group().reduce(reduceAddAvg('param'), reduceRemoveAvg('param'), reduceInitAvg);
(reusable average reduce functions from the FAQ)
Then specify your xUnits to match, and use elasticY to auto-calculate the y axis:
chart.xUnits(d3.time.days)
.elasticY(true)
I would like to make an initial range selection in some dc.js charts (bar and line).
So I add this for example:
.filter([7,10])
And the range appears well on the chart, but apparently 0 observations are selected.
I expected a few thousands observations selected. Like it does when I select the range [7,10] manually with the brush.
Any hint on what I'm missing here?
Part of my code:
var chart_globalscore = dc.barChart('#chart_globalscore');
(...)
var ndx = crossfilter(data_movies)
,all = ndx.groupAll()
(...)
,GlobalScoreDimension = ndx.dimension(function(d) { if ( !isNaN(d.GlobalScore) ) {return Math.round(d.GlobalScore*10)/10 ;} else {return -1;} })
,GlobalScoreGroup = GlobalScoreDimension.group()
(...)
;
(...)
chart_globalscore
.width(width001)
.height(height001)
.margins(margins)
.dimension(GlobalScoreDimension)
.group(GlobalScoreGroup)
.round(function(val){return Math.round(val*10)/10;})
.x(d3.scale.linear().domain([0, 10.1]))
.filter([7,10])
.centerBar(false)
.transitionDuration(transitionDuration)
.elasticY(true)
.gap(1)
.xUnits(function(){return 100;})
.renderHorizontalGridLines(true)
.yAxis().ticks(2)
;
The filter code is a bit tricky in dc.js. If you specify an array of values, it will not interpret the array as a range. (It will either interpret the array as a single value, or if the array contains another array, it will filter on the values inside that array.)
Try specifying a ranged filter object instead:
.filter(dc.filters.RangedFilter(7, 10))
I have summed up the dataset using nest,rollup and d3.sum functions and I'm able to display the pie chart properly.But I'm unable display percentage for each slice based on the summed total.Can anyone please give suggestions on this issue...
Mycode:
======
d3.csv("pi.csv", function(error, csv_data) {
var data = d3.nest()
.key(function(d) { return d.ip;})
.rollup(function(d) {
return d3.sum(d, function(g) {return g.value; });
}).entries(csv_data);
data.forEach(function(d) {
d.ip= d.key;
d.value = d.values;
});
My dataset:
=========
ip,timestamp,value
92.239.29.77,1412132430000,3190
92.239.29.77,1412142430000,319011
92.239.29.78,1412128830000,545568
92.239.29.78,1412130600000,616409
92.239.29.78,1412132430000,319087
92.239.29.76,1412130600000,616409
92.239.29.76,1412132430000,319087
Thanks in advance
So it seems that you want to display the percentage of each pie slice on the chart. All you really need to do is to calculate the the total of the values and iterate across the data variable adding in the percentage.
The data.forEach function doesn't add anything to the data variable, so I would drop that. I should also point out that the d3.nest function rolls up and sums each individual ip entry, so you're not getting sum of all values. However, this is pretty easy to do with d3, you can just use d3.sum:
var tots = d3.sum(data, function(d) {
return d.values;
});
Once you've done that you iterate across the data variable like:
data.forEach(function(d) {
d.percentage = d.values / tots;
});
You can then access the percentage on each pie slice using something like d.data.percentage
And putting it all together.
Note you could also compute the percentage from the start and end angles for each slice: (d.endAngle - d.startAngle)/(2*Math.PI)*100.