Grouping/stacking area charts with independent x value data series
- Dominant language
- JavaScript
- Stars
- 9.3k
- Forks
- 1.4k
- Avg merge
- 6d 16h
- Merged PRs (30d)
- 1
Description
Hi there,
I was hoping to get some help! I have searched around extensively on Google Groups and Github issues, and I didn't find an answer anywhere.
I'm having an issue where I'm trying to plot a stacked area graph. I am using data groups that are plotting timeseries on the x axis, and both the data groups have different sets of dates they are plotting.
The problem I think is that the code is adding together the values for the points that have the same date (x-value).
Where there is no x-value for the second dataset (i.e. no value for that date), it is dropping down on the stacked version of the chart. What I feel it should be doing is interpolating where the lower line is, and adding that onto it’s value to get a better stacked representation.
Here is a fiddle, showing a non stacked version (top) and a stacked/grouped version (bottom).
http://jsfiddle.net/pt1ccbzL/1/
The non stacked version renders as I would expect. The problem on the second graph is around the third data point for each series, where the stacking doesn't seem to make sense.
I'd appreciate any help or pointers in the right direction. Thank you!
Contributor guide
Research direction
Start with the linked JSFiddle and reproduce the stacked and non-stacked charts using the two time series with different date sets. Trace the stacking behavior for the third data point in each series and compare it with the expected interpolated lower value. Done means the stacked chart represents independent x-values consistently without breaking the non-stacked rendering.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- d3, javascript
- Domain
- data-visualization
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100