I have data that I want to visualize as a stacked bar chart (or whatever might be suitable):
{
"ep1": {
"avi": 29,
"mov": 17,
"mp3": 19
},
"ep2": {
"avi": 13,
"mp3": 49,
"mp4": 37,
"xyz": 5
},
...
}
However, looking at various D3 as well as NVD3 examples (e.g. http://bl.ocks.org/mbostock/3943967), I'm not sure how to transform my data - whose groups are not the same across different columns - into the required data structure.
I'd be grateful for a simple example.
If you write a method to normalize a bit your data (eventually setting the xyz attribute of your ep1 object to zero for example), you can use the stack layout offered by D3. You will need to change the data structure from an array of objects to an array of arrays (as explained here) with all 2nd dimensional arrays having the same length, hence the need to set xyz to zero in the example.
Related
I am using data driven styling to style a Mapbox vector layer for a choropleth map. However, rather than getting the data strictly from the layer properties, I need to use statistic data from a separate object (pulled from our database). This separate object contains one statistic value for each polygon in the vector layer. The object maps the stat values to the vector layer polygons by a variable called "GEOID". In order to marry the polygon with its data, I would like to use a Mapbox expression to get the GEOID value from each polygon in the vector layer and pass this id to a separate function to get the statistic value for the polygon having this GEOID. Is this possible?
vectorLayer: {
id: "fooLayer",
type: "fill",
"source-layer": "foo-layer-dvf1ci",
paint: {
"fill-color": [
"rgba",
100,100,100,
this.getStatForDistrict(["get", "GEOID"])]
]
}
},
getStatForDistrict(districtId) {
console.log("districtId: " + districtId);
let alphaValue = fetchDataForThisDistrictFromDatabase(districtId)
return alphaValue;
},
I see that currently, I am passing ["get", "GEOID"] into the function getStatForDistrict when what I actually need is to pass the computed Mapbox expression.
More on Mapbox-GL's paint property: https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#paint-property
More on Mapbox-GL's expressions syntax: https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/
No, there is not any way to call arbitrary functions from within expressions, which look up data that doesn't exist within the feature in question.
There are several ways to make choropleths. I'd suggest you start by looking at the mapbox-choropleth library.
I've got 2 pie charts with data like:
data: [
{diseaseType: 'Cancer', diseaseDetails: 'Lung cancer', quantity: 100},
{diseaseType: 'Diebetes', diseaseDetails: 'Unspecific', quantity: 650},
{diseaseType: 'Cancer', diseaseDetails: 'Breast cancer', quantity: 80}
]
i'm tying to get list of filters and able to remove them by user like (it's only controlled test code):
this.diseasePieChart.filters().splice(0, 1)
dc.renderAll()
it's updating first chart, but second (connected with first) not, it's stay like it was before remove filter.
Second chart i'm rendering like this:
self.diseasePieChart.on('filtered.monitor', function (chart) {
// create dimensions etc and render second chart
}
I also tried to do again crossfilter(data) after filter remove. When i'm calling dc.filterAll all filters are reset.
thanks for any help !
The correct entry points for changing filters are chart.filter() or chart.replaceFilter(), depending on whether you are trying to toggle individual items or change the entire array of filters at once.
As you found out, manipulating the array of filters inside the chart might affect the way the chart draws, but it won't convey the change to the crossfilter dimension and the other charts.
Note that as documented in the link above, the accepted type for the parameter for each of these functions is a little surprising:
The filter parameter can take one of these forms:
A single value: the value will be toggled (added if it is not present in the current filters, removed if it is present)
An array containing a single array of values ([[value,value,value]]): each value is toggled
When appropriate for the chart, a dc filter object such as
dc.filters.RangedFilter for the dc.coordinateGridMixin charts
dc.filters.TwoDimensionalFilter for the heat map
dc.filters.RangedTwoDimensionalFilter for the scatter plot
null: the filter will be reset using the resetFilterHandler
So if you want to get the array, remove an item, and then set it back, you could either:
var filters = chart.filters().slice(0); // copy the array of filters
filters.splice(0,1)
chart.replaceFilter([filters])
.redrawGroup();
or (using the toggle feature):
chart.filter(chart.filters()[0])
.redrawGroup();
Note that you usually want to redraw, not render, after changing a filter. This will allow the animated transitions to display, and is a little bit quicker.
Also, chart.redrawGroup is the same as dc.redrawAll() but it's a little safer in case you have more chart groups in the future.
I am trying to filter data on my choropleth chart from a bargraph. Strange thing is that it is not showing correct value on selecting a bar from the accompanying bar chart.
Here is the jsfiddle: https://jsfiddle.net/anmolkoul/jk8LammL/
The script code begins from line 4794
If i select WIN004 from the bar chart, it should highlight only five states and the tooltip should reflect the values for the data. Some states are highlighted for whom WIN004 does not exist.
I changed the properties of the choropleth from
.colors(d3.scale.quantize().range(["#F90D00", "#F63F00", "#F36F01", "#F09E01", "#EDCB02", "#DDEA03", "#ADE703", "#7EE404", "#50E104", "#24DE05", "#05DB11"]))
.colorDomain([-1, 1])
To
.colors(d3.scale.linear().range(["green", "white", "red"]))
.colorDomain([-2, 0, 2])
But i get a lot of white states where its hard to discern what has been highlighted. The tool tip for some white-ed-out states show -0.00 :/
Here is the fiddle http://jsfiddle.net/anmolkoul/jk8LammL/1/
So i guess either its a problem with my color range or how my data is getting parsed.
I would ideally like to specify the data ranges in the .colorDomain based on the top and bottom values of the riskIndicator dimension. My functions are not working though. Should i use d3.max or riskIndicator.top here?
EDIT:
I got the color domain dynamic by using the min and max values but still the graph is not performing as expected? Could this be an issue with the geochoropleth chart? I further took a working geochoropleth example and ported my data to it and even that gave me the same issue of representing data incorrectly. I thoughit could be a data problem but i validated using a couple of good BI tools and their map charts displayed data correctly.
Could this be an issue with the dc choropleth?
Thank you.
Anmol
This has the same root cause as the issue in this question:
Crossfilter showing negative numbers on dc.js with no negative numbers in the dataset
In short, floating point numbers don't always cancel out to zero when added and subtracted. This "fake group" will ensure they snap to zero when they get close:
function snap_to_zero(source_group) {
return {
all:function () {
return source_group.all().map(function(d) {
return {key: d.key,
value: (Math.abs(d.value)<1e-6) ? 0 : d.value};
});
}
};
}
Added it to the FAQ!
I'm working on a visualization tool for time series with multiple dimensions.
To simplify my case, each data-point has a dimension on type, clusterId and a set of months:
{
type: "green",
clusterId:42,
months:[1392185580000, 1394604780000, 1397279580000]
}, {
type: "red",
clusterId:43,
months:[1392185580000]
}
Now I would like to show the dates in a dc.barChart, which shows the months of all datasets as keys(bars), and the number of observations of each month as value of the bar.
In the given case, it would result in 3 bars, the first one with a height of 2, and the other with a height of 1.
How can I create this dimension and implement the grouping/reducing function?
You don't have to worry about filtering by this dimension, I already have a custom filter for this dimension. The only thing is displaying the bars on the barChart.
If i get this correctly, you need some code, that outputs: 1392185580000: 2, 1394604780000: 1, 1397279580000:1?
arr.forEach(function(d) {
d.months.forEach(function(month) {
if (!store.hasOwnProperty(month)) {
store[month]=0;
}
store[month]++;
});
});
demo fiddle
I'm trying to visualize 2 series but when I visualize them together, the dates don't go in sequential order anymore.
Here is the fiddle: http://jsfiddle.net/hohenheim/6R7mu/21/ Notice the weird x-axis.
Is there a way to fix the x axis on nvd3?
The data looks like this:
data1 = [{
"date": 1396828800,
"impressions": 49145385
}, {
"date": 1396915200,
"impressions": 46704447
} ....
The NVD3 "multiBarChart" uses an ordinal (category) scale, so it will only display the x-values you give it, in the order in which they are added to the scale. Because your two series only partially overlap on the x axis that's causing problems.
Unlike other NVD3 chart types, the multiBarChart doesn't give you the option of setting your own scale -- it needs to use an ordinal scale in order to generate even widths for the bars. However, you can set the x domain (the list of categories to use for each bar), by calling chart.xDomain(arrayOfXValues).
The array will need to be an ordered array of Date values that spans your data. In order to generate it, you'll need the d3 time intervals range functions. You might also need the d3.extent function to find your max and min values.