I have a jsD3 area graphic, data contains daily values of some metric, for many days I have the same values, so my graph have peaks at certain points when the values goes up or down, and horizontal line for the dates the value is the same. How to highlight with circles only the "peaks" (when data is different from previous days, increase or decrease)?
If I render circles for same data, they repeat one close to the other for the dates with same values.
For example consider this sample: http://bl.ocks.org/mbostock/3883195 but using this data:
date close
14-May-14 10
15-May-14 10
16-May-14 12
17-May-14 12
18-May-14 10
19-May-14 10
20-May-14 10
21-May-14 10
22-May-14 28
24-May-14 39
25-May-14 39
26-May-14 49
27-May-14 49
28-May-14 59
28-May-14 48
30-May-14 49
This is the rendered chart:
I would like to get highlight the value changes only so the resulting chart is like this:
This is pretty late I guess but I've recently been doing research into similar things:
d3.select('#chart1 svg').selectAll("circle.nv-point")
.data(testdata[0].values)
.filter(function(d) {return d.y > 20000; })
.style("fill-opacity",1);
The above is what I've been using so far, it highlights all the points whose values are greater than 20000 (of course this would be different for yours) and makes the points visible.
Hopefully this helps some, I'm new to d3 and have been trying to find answers to a similar problem as yours.
Related
I am writing an application for Windows 10 using Delphi 11 and Steema TeeChart pro 11 components.
I use AddXY(….) to plot a DateTime series of about 1000 values as points in Chart1 with BottomAxis set to DateTime and the Leftaxis set to float.
Thereafter I zoom in a small part of the data in Chart1 using the mouse wheel or drawing a rectangle.
Then I want to plot a new time series (AddXY(….)) of 1000 values in Chart1, keeping the zoomed in min and max values for the bottom axes, but use automatic scaling for LeftAxis. Before plotting the second series I delete the first.
The second series have the same DateTime values as the first series, but the Y values are sometimes very different compared with the first series and may not be visible in the graph.
Now the problem occurs. The Left axis will be automatic scaled based on all the data points and not on the points only falling within the zoomed X boundaries.
Does TChart have a simple method to find the min and max Y-values for the second series within the zoomed in time period. I thought of using the LeftAxis.AdjustMinMax() procedure for rescaling the left axis?
Of course I could scan through all the Y-values within the zoomed in period and calculate the min and max value. Then, how do I know the starting and ending valueindex of the data points falling within the zoomed in time period? I hoped to avoid using this method due to speed resons if number of points are > 1000.
Hopefully someone more experienced TeeChart programmer than I am can give me some suggestions of the best way to achieve this.
I am working with a vertical bar chart. Each vertical bar represents a day. The user can select a date range and thus there are X amount of columns (vertical bars) in the chart. This is fine for perhaps about 50 days. When you start having more days than that the labels for the dates (also vertical) start to overlap each other. I know I can perhaps set the small and large tick amount to be a great value based on the date range and thus show fewer dates, but that is not what I am looking for. I know that I can set the width of the chart area to anything I want, but the date range the user picks could be different.
So, I was wondering if there is a set with width of each vertical bar (day) and if I can set it to a value? Then I would have a containing div that has a horizontal scroll bar. Thus, for 30 days it may fit without scrolling but 50 and 60 and 150 will scroll. No matter how many days are in the range, the column (day) width is consistent.
Is this possible?
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/
Check out this quick and dirty example that I threw together: http://zoopoetics.com/d3/irregular_layout.html
d3 is doing its job admirably, laying out the columns at irregular intervals because months are of irregular durations. As we all know, a month can last from 28 to 31 days.
Thing is, the irregular layout is unsettling to the eye. I want the columns to lay out at regular pixel intervals along the horizontal axis.
Looked all over the googles for an answer and found very little about this problem, which suggests that I may be missing something obvious.
Has anyone else been here and surmounted the problem? Thanks!
My first approach would be to use the time x axis but render the bars against a different scale of lets say 365/12 intervals.
The x scale I think should have the month name labels in the middle of each month as well as a tick at the middle:
Here is my version of your file
here
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.