D3 Multiline Chart with transition - javascript

I’m working on a pure d3 implementation of a multiline chart with transitions. It works quite well with a little exception. Using transitions with a line drawn as path seems quite difficult. I found some solutions using clipping paths and so on and always combined with the warning, that these solutions are quite performance consuming.
Is there any easier solution of showing progress in the multiline chart as a real point to point drawing (at least in users perception).
You can inspect my current code under http://bl.ocks.org/m99coder/136db7134df6fdc3e3cf
With kind regards
Marco
Update 2015-07-14 14:14:00 CET
I refactored some parts of my code: http://bl.ocks.org/m99coder/8a9fab35b8f47ab8844c. But unfortunately I couldn’t get it to work as smooth as you given tutorial link (http://bost.ocks.org/mike/path/). Any advices? Maybe it’s related to the defined range, which avoids values outside of „viewport“.
Update 2015-07-14 14:57:00 CET
Getting closer but not perfect yet: http://bl.ocks.org/m99coder/136db7134df6fdc3e3cf/a53f06a0334bada96e1f892c886c5b68fe3c0a05. It looks like the path is hopping back to the right after smooth transition to the left.
Update 2015-07-14 17:37:00 CET
Harmonizing durations of updates and transitions didn’t solved it too. Now it’s hopping to the left: http://bl.ocks.org/m99coder/8a9fab35b8f47ab8844c/cd25a9d33839f52974780b1c142922cbbf8f64f4

I managed it to work as expected. It was a timing issue. Data was modified before the transition was done. The new approach uses a callback to get informed when the transition is over and shifts data afterwards.
http://bl.ocks.org/m99coder/54d6e0130064c699e6e4/06149dd1ab22cebf5b307bab3ec90079e356bce9

Related

Smooth all data-points in a chart in nodejs/javascript

I have a chart which line I wish to be able to make as smooth as possible. The line should still keep the overall pattern and as close to the original line as possible - but I need to be able to smooth all "bumbs" 100% away / to the degree I wish.
When I say "100% smooth" - I mean something like this (try to draw a curved line in the square): http://soswow.github.io/fit-curve/demo/
The line must only go up or down (while the main trend is up/down-wards) - E.g. like a Sine curve. Now imaging you added a lot of noise/bumps of different sizes/freq. to the Sine curve - but you like to "restore" the curve without changing the curve's overall pattern. That is exactly my need. The ideal: If I could filter away exactly the selected level of noise/freq. I wish to remove from the main trend.
SMA is lagging in nature and I need something which is a lot closer to the actual data-points in time.
I know the lagging feature of SMA is normally accepted - but I don't accept it ;) I strongly believe it would be possible to do better than that :) DMA can shift the data-points itself - but has no effect of the data-points info in real time which is what I'm looking for as well...I know I have to hack/compensate - and I can also come up with 100s of ways myself (mixing all the algos I know, running them multiple times etc.) But I guess someone out there is way smarter than me and that it has already been solved - and I would definitely wonder if not a standard algorithm for exactly this issue exist?
I have looked into many different algorithms - but none of them worked satisfyingly (Moving Averages, Median, polynomial regression, Savitzky Golay etc.). But the result is still way too "bumby" and "pixelated" and otherwise it again becomes too lagging.
Lastly I have found: Bezier Cubic and quadratic which seems pretty interesting but I don't know how apply it on all my data-points and I can't find a suitable NPM (I can only find libraries like this: https://www.npmjs.com/package/bezier-easing which only takes 1 data-point which is not what I'm looking for).
Savitzky G. is better than regular MA - but I still believe it lags too much when it is as smooth as I consider acceptable.
The task is pre-processing and noise-reduction of temperature, price and similar charts in real-time before it is handled over to an IA which looks for abnormalizes (too much noise seems to confuse the AI and is also unnecessary for the most parts). The example with the drawing was only an example - just as well as me mentioning a "Sine curve" (to illustrate my point). The chart is in general very arbitrary and doesn't follow any pre-defined patterns.
I like to emphasize again that the primary prerequisite of the selected algorithm/procedure must be - that it generates a chart-line which minimizes lagging from the main chart's overall trend to an absolutely minimum and at the same time makes it possible to adjust at what level the noise-reduction should take place :-)
I have also made this small drawing in paint - just so you easily would understand my point :-) screencast.com/t/jFq2sCAOu The algo should remove and replace all instances/areas in a given chart which matches the selected frequency - in the drawing is only shown one of each - but normally there would exist many different areas of the chart with the same level of noise.
Please let me know if all this makes sense to you guys - otherwise please pin-point what I need to elaborate more about.
All help, ideas and suggestions are highly appreciated.

Paperjs problem with using custom paths as styling handles/segmentPoints

Example
Video Example
The lack of selection styling in paperjs makes you improvise and one way to style them, is to create them yourself ( recommended on this post).
But the huge con with this is the performance! Where canvas quickly goes from usable 60fps to terrible 20 within seconds. Now the only method I thought would work to style your handles/points, is now useless.
Now I'm out of ideas as to how style them and I'm trying to seek the help of stackoverflow... The main thing that I want to achieve is the hover effect on handles/points . At this point I coded the most of the stuff in paperjs, and I really wouldn't want to switch everything to something else like PixiJs.
P.S Any help is appreciated!
In your video, the frame rate goes down because you draw a lot of paths and this would also happen at some point even with the native Paper.js selection.
So your only chance is to try to have as few as possible shapes in your scene.
Maybe you can take advantage of the less known features of Paper.js to reduce them a bit:
item.selectedColor
paper.settings.handleSize
Then, there is also the possibility of using SymbolItem for repeted shapes (like your circles) that should have better performances than regular paths.
Finally, if you're out of solutions, you could also fork the library and hook into the selection drawing code to adapt to your needs :).

Animated buffergeometry with morphattributes not updating shadow

I have converted the MD2 code from the library to use THREE.BufferGeometry instead of THREE.Geometry to vastly improve memory footprint. To do this I just convert the model to THREE.BufferGeometry after it is done loading. I also had to modify the MorphBlendMesh code to use attributes for the morphTargetInfluences.
This is working great except for issue: the shadows don't update during animation, it always uses the shadow from the first frame of the animation.
I haven't seen any documentation on morphTargetInfluences attributes, so I don't have much to go on.
I can't really post the code since it is too much spread out across the code base.
I am just hoping that someone out there might have some insight as to how shadows get updated during morph animation, and maybe point me in the right direction on how to research this issue.
I have found the problem, and a workaround!
The code in the shader renderer is checking to see if geometry.morphTargets has a non-zero length before it decides to set the 'usemorphing' flag. The converted buffergeometry does not have a .morphTargets field since this information appears to have moved to .morphAttributes for buffergeometries.
My hack workaround is to add a fake .morphTarget list like so:
Buffergeometry.morphTargets = [];
Buffergeometry.morphTargets.push(0);

Raphael.js image fill not updating constantly

I do have a Paper.path() in Raphael that is filled with a simple texture:
var fill = screen.path(Iso.topFacePath(top)).attr({
fill: 'url(http://www.example.com/mytexture.jpg)',
});
The path can be altered by the user via drag and drop. For this I use Element.drag() to bind the handlers.
The problem that I encouter now is that while the onmove-handler function is called the element in question will be recalculated and has to be drawn again. Apparently this is "too much" for raphael and the fill pattern will disappear randomly (flicker) and appear again some time later (at latest onend).
The actual code I use is a little too much to post here but I built a fiddle where you can see what's going on (you can drag the upper sides of the quadrangle).
Is there a simple fix to this?
I am used to canvas much more than raphael (actually this is the first time I really use raphael) so maybe my approach of redrawing everything everytime sth changes is plain wrong?
EDIT: I just found out that seems to be somehow browser-related as well. Chrome and Firefox will produce the flicker where Safari seems to do everything just fine.
This seems to be caching issue (raphael.js does not cache the bitmap fill and will reload it on every change) and is fixed (for me) by this pull request on GitHub that is (as of 08/14/2012) still pending.
Raphael is pretty hard / impossible to build oneself as the make file points to local and/or inexistent files, but you can either concatenate everything by hand, modify the build script or use the modified build that is used in the example to get hold of the fix.
Let's hope it will find its way into a future release of Raphael.

Highcharts hover bug - with video to demonstrate

I recently posted an issue regarding unpredictable hover on points in Highcharts, but the question didn't get much traction. Probably because it's difficult to explain.
I now posted a video here
http://www.youtube.com/watch?v=LovfLWpVVtc
showing this behavior.
It happens both on Chrome and Firefox (the video was done on FF on a high spec MacPro).
The video was done using this JsFiddle from the docs.
http://jsfiddle.net/HnwbQ/1/
As you can see, when approaching the first or last point from outside of the chart, no tootlip is shown. However if the cursor enters the chart and then approaches the first/last point, then a tooltip is rendered. This is erratic, and sometimes a tooltip is rendered when coming from the outside, sometimes it's not.
Any ideas what's the issue?
MORE INFO
This seems to occur mostly when using xAxis: {type: 'datetime'},
I am using Highcharts v2.1.9.
There is no need in 'hack' - just use the latest version of Highcharts http://jsfiddle.net/WdVtE/
OK I think I found a hackish solution to this.
It seems to me this is a bug related to the fact that
xAxis: {type: 'datetime'}
pushes the first and last datapoint to the limits of the plot area (this doesn't happen when using category).
So the way around this problem is to create some padding using
x-axis: {
minPadding:0.02,
maxPadding:0.02
}
Then hover behaves correctly, similar to when x-axis is category.
Note that minPadding and maxPadding have to be > 0.02. If you use 0.01 you'll have a buggy hover.

Categories