I want to create a dynamic bar chart with no of occurences on Y axis. Therefore, I need to make sure that only integer values are shown and this can be done with proper format:
chart.yAxis().tickFormat(d3.format('f'));
Right now I have only integer numbers but I have for example 1 displayed 3 times:
Is there any option to automatically display it in a nice way (i.e. to minimize number of ticks for charts with shorter range)?
chart.yAxis().tickFormat(d3.format("d"));
will work.
When you append the yAxis, define the ticks the same number as the max value of your y
svg.append("g").call(d3.axisLeft(y).ticks(maxY));
Or in your example that would be
chart.yAxis().ticks(maxY);
Or instead of defining the ticks, you could also define the exact tickValues which you can calculate from your values, this way you have the highest control.
Related
I am using dimple.v2.3.0 to create line and area chart. When creating chart with category x-axis, Dimple leaves a gap between the y-axis and the line/area. I would like to ask is there any way to remove the gap?
I'm afraid there isn't a good answer for this, it's done this way because dimple allows you to combine with bars etc. There is a time axis for dates which will not include the gap and therefore answers the majority of cases with area charts, however categorical axes will always have the gap.
There is a hacky workaround you can use in this case where you have integers on your x axis which is to treat them as dates and put them on a time axis:
var x = myChart.addTimeAxis("x", "Call", "%Y", "%-Y");
x.timePeriod = d3.timeYear;
x.timeInterval = 1;
This will parse and display your calls as years and display them on the time axis. The "%-Y" display format shows a 4 digit year with no leading zeroes. This will work for integers up to 9999. Here it is working in your fiddle:
https://jsfiddle.net/zuuaar1t/
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've written a program which reads measurements from an impedance analyzer as it sweeps over a range of frequencies or voltages, saves the data to a text file, and also creates a scatter plot. In one type of measurement, I obtain x and y values for complex impedance, neither of which are the independent parameter. Now when plotting this graph, it appears that it simply puts each x value to the right of the previous one at regular spacings resulting in x axis labels looking like, from left to right, [45000, 43000, 40000,... etc.].
I've tried forcing the x-axis to start from zero which did not change anything and haven't been able to find much else on this. Is there a way to make sure the plot reflects the actual x values of each point?
Here's my current method of creating the chart,which pulls the data from the already created table:
For Each row In table.Rows
Chart1.Series("series1").Points.AddXY(row(0), row(1))
Next
I'm trying to use d3.ticks. According to the documentation, I should be able to restrict the number of ticks displayed on the axis.
However, this doesn't seem to restrict the number of ticks at all:
xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(2)
Is it because my scale is ordinal?
JSFiddle here: http://jsfiddle.net/samselikoff/9tfD2/1/
axis.ticks only works when the underlying scale implements a ticks function, which ordinal scales do not. By default, the axis ticks for an ordinal scale are comprised of the scale's domain, but you can override this by supplying explicit tick values with axis.tickValues.
The documentation also says (in the part for scales)
The specified count is only a hint; the scale may return more or fewer values depending on the input domain.
This is what's happening here -- for the ordinal scale, all the values are taken.
You can however override this by providing explicit tick values, e.g.
d3.svg.axis().scale(xScale).orient("bottom").tickValues(["12am", "8pm"])
Let's say I have a list of values and I have already chunked them into groups to make a histogram.
Since Excel doesn't have histograms, I made a bar plot using the groups I developed. Specifically, I have the frequencies 2 6 12 10 2 and it produces the bar plot you see below.
Next, I want to add a normal distribution (line plot) with a mean of 0.136 and standard deviation of 0.497 on top of this histogram. How can I do this in excel? I need the axis to line up such that it takes up the width of the bar plot. Otherwise, you get something like I've attached.
But...the normal should be overlayed on the bar plot. How can I get this effect?
There are two main part to this answer:
First, I reverse-engineered the grouped data to come up with an appropriate mean and standard deviation on this scale.
Second, I employed some chart trickery to make the normal distribution curve look right when superimposed on the column chart. I used Excel 2007 for this; hopefully you have the same options available in your version.
Part 1: Reverse-Engineer
The column B formulae are:
Last Point =MAX(A2:A6)
Mean =SUMPRODUCT(B2:B6,A2:A6)/SUM(B2:B6)
E(x^2f) =SUMPRODUCT(A2:A6^2,B2:B6)
E(xf)^2 =SUMPRODUCT(A2:A6,B2:B6)^2
E(f) =SUM(B2:B6)
Variance =B10-B11/B12
StDev =SQRT(B13/(B12-1))
Part 2: Chart Trickery
Data table:
Column D is just an incremental counter. This will be the number of data points in the normal distribution curve.
E2 =D2/$B$8 etc.
F2 =NORMDIST(E2,$B$9,$B$14,FALSE) etc.
Chart:
Now, add Columns E:F to the chart. You will need to massage a few things:
Change the series to be an X-Y plot. This might require some editing of the chart series to force a single series to use your desired X and Y values.
Change the series to use the secondary axes (both X and Y).
Change the secondary X-axis range to 0.5-5.5 (i.e., 0.5 on either side of the column chart category values). This will effectively align the primary and secondary X-axes.
Change the secondary Y-axis range to 0-1
Format the X-Y series appearance to taste (I suggest removing value markers).
The result so far:
Lastly, you can remove the tick marks and labels on the secondary axes to clean up the look.
Postscript: Thanks to John Peltier for innumerable charting inspirations over the years.