I'm using DC.JS scatterplots to let users select points of interest. If you use elastic axis you cannot select the highest value point. Look at the DC.JS example (https://dc-js.github.io/dc.js/examples/scatter-brushing.html). You cannot select the highest point in the left or right plot.
In several cases, the highest or lowest point(s) is exactly what people need to be able to select because those are the outliers we care about. If you disable elastic axis and make sure you specify a range that is higher than the max value, you can select the point.
Is there another solution besides setting the axis domain based on current min/max and expanding them little bit? This is sometimes ugly when the minimum=0 and now your domain needs to include some small negative number.
--Nico
Always when I face this issue, I increase the y domain by 5% manually.
For instance:
var balanceDomain = d3.scale.linear().domain([0, s.balanceDimension.top(1)[0].balance + (s.balanceDimension.top(1)[0].balance*0.05)]);
s.amountOverallScore
.width(400)
.height(400)
.x(someDomain)
.y(balanceDomain)
...
Maybe this is not the best solution, but always work for me.
Hope it helps (=.
In my application the values were always positive and I used the following to get correct behavior:
// using reductio on the all_grp to get easy access to filtered min,max,avg,etc.
totalTimeMinValue = all_grp.top(1)[0].value.min;
totalTimeMaxValue = all_grp.top(1)[0].value.max;
// now use it to scale the charts we want
detail1_chart.y(d3.scale.linear().domain([totalTimeMinValue-1, totalTimeMaxValue+1]));
detail3_chart.y(d3.scale.linear().domain([totalTimeMinValue-1, totalTimeMaxValue+1]));
This keeps both charts in sink. An additional benefit was that my rather large dots (symbolsize=15) are no longer being clipped.
Thanks Roger.
Related
I would like to create a barplot in TIBCO Spotfire with frequency on Y axis based on two factors: Stage and Genotype.
This is the standard expression that I have from Spotfire:
Count() THEN [Value] / Sum([Value]) OVER (All([Axis.X]))
It turns out, I do not want the frequency over ALL the data, but within Stage. In a way that the sum of the frequency within each is stage it will be 100%.
I watched some videos and I still did not figured out.
I tried to find a solution to your problem but could't find a working expression. This can still help you :
What I would have done in your case is :
remove the Genotype from the X Axis
set the visualization as a 100% stacked bars (with right click)
add the Genotype as a color by parameter (in the visualization options)
Has anyone added the ability to display values in a boxplot for dc.js?
Interesting answer given to this question related to matplotlib.
Adding a scatter of points to a boxplot using matplotlib
As it's currently implemented, the box plot will display any outliers as circles, and outliers are defined as the points which do not fall within the whiskers.
If you're willing to change the source, it's pretty easy to disable the whiskers and show all the data points.
You just need to change line 42:
var _whiskers = _whiskersIqr(_whiskerIqrFactor);
https://github.com/dc-js/dc.js/blob/356fccea3a1dbd49a76fb1841f280ffad87d725f/src/box-plot.js#L42
You could just set it to null, or add an accessor for whiskers. (There really should be one, looks like an oversight.)
It looks like this with no whiskers:
You'd have to dig a bit deeper and change the underlying d3-plugin if you want to display whiskers along with the data points.
I'm trying to reduce the number of points in a DC.js line chart to improve performance. The docs lead me to believe xUnits() is the way to do this:
The coordinate grid chart uses the xUnits function to calculate the number of data projections on x axis such as the number of bars for a bar chart or the number of dots for a line chart.
but xUnits does not even seem to be used:
http://jsfiddle.net/m5tguakf/2/
What am I doing wrong?
The number of points is actually determined by crossfilter - dc.js doesn't do any aggregation on its own, so it has no way to add or reduce the number of points.
That documentation may be misleading - it doesn't alter the shape of the data. xUnits is really just needed for dc.js to know the number of elements it is going to draw. It's used for two purposes:
to determine the width of bars or box-plots
to know whether the x scale is ordinal or quantitative
Could dc.js just count the number of points in the crossfilter group? Perhaps.
Anyway, to get back to your original question: if you want to reduce the number of points drawn, aggregate your data differently in your group. Usually this means creating larger bins which either sum or average the data which fall into that interval.
As a simple example, you can combine every other point in your fiddle by binning by even numbers, like so:
var BINSIZE = 2;
// ...
speedSumGroup = runDimension
.group(function(r) { return Math.floor(r/BINSIZE) * BINSIZE; })
// ...
http://jsfiddle.net/gordonwoodhull/djrhodkj/2/
This causes e.g. both Run 6 and Run 7 to fall in the same bin, because they have the same group key. In a real example, you'd probably want to average them, as shown in the annotated stock example.
I am drawing charts using dc.js.The following is a frequency VS Day Chart
I am using the following line to generate the titles:
..something.yAxisLabel("Frequency").xAxisLabel('Day');
But the problem is as you see when the frequency is so large the Y axis title is colliding with the frequency numbers. So is there any simple way to move the Y axis title left?
The layout of auxiliary elements such as axes and legends is not completely automatic in dc.js; use .margins() to adjust where necessary.
https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#marginsmargins
It would be great to figure this out automatically but it is difficult to calculate, and easy to work around, so I guess no one has gotten annoyed enough to submit a fix. :)
I am trying to create a graph based on Mike Bostock's Heirarchical Edge Bundling(here is the gist). I need to make my JSON look as readme-flare-imports.json looks, but I can't figure out what "size" is. I read the API and it didn't seem to help me. Also, it will be a dynamic JSON file based on a mySQL database, so I won't be able to set the size myself. Is anybody able to clear things up for me as to what it is or how I may be able to determine what the size should be? Thank you in advance!
cluster.size determines how large of an area the cluster will take up. You pass values to it like so
// The angle
var x = 360;
// The radius
var y = window.height / 2;
cluster.size([x, y])
x will determine how much of a circle the cluster will use to branch out children. A value of 360 will use the entire circle to display all values. A value of 180 will only use half the circle to branch out values.
y will determine how wide the circle will become in any single direction, i.e., the radius of the circle.
In the Heirarchical Edge Bundling example, I believe the size attribute in the json file is ignored as I could not find anything in the code that cared about it.