Synchronize brushes across different objects - javascript

I enhanced the original implementation of parallel coordinates https://github.com/syntagmatic/parallel-coordinates. The current visualisation looks like this http://xmashallax.xm.funpic.de/bc/test_csv.html:
Basically, there are 3 different parallel coordinate widget arranged in form of a matrix with different axes orders now.
My current target is to synchronize brushes between these rows and I don't have any idea how I could achieve this. I have 3 different objects and want them to synchronize their changes immediately (if possible). Let's say I create a brush in row 1 at cylinders. Now row 2 and 3 cylinders should apply that brush to their data.
A "brush" handler is already implemented, but my problem is to inform the other handlers with a callback or anything like this (Observer pattern crosses my mind while I'm writing this). Although I spent many hours within the original code, I still don't understand every detail and need some help.

Yeah, you should use the Observer pattern.

Related

three.js and depthFunc

From looking at the code, it seems that three does not give much control over the depthFunc. I would like to confirm that it's only set once as the default GL state, and not available say, in the material?
I'm not familiar with all examples, and was wondering if this is happening somewhere?
If not, what would be the best approach to set the depthFunc to gl.EQUAL for example, when a specific draw call is being made i.e. a mesh with a material?
Is something like toggling between scenes i.e. use one to render stuff, then use another one to render stuff on top of the first one a good solution for this? That's the only example that i've seen of tweaking the otherwise sorted objects.
It's currently in the dev branch of three.js: the pull request.

How could I compare two data sets of X,Y coordinates to look for similarities?

Pretty abstract question, but I'm conducting some research on gesture-based recognition. I've managed to get the gesture to be outputted into a series of X,Y coordinates that I can view as a scatter graph:
Here's my problem; I'm unsure on how to proceed. What is the best way to compare two data sets of X,Y coordinates and give a confidence percentage on how similar they are?
I'm currently using JavaScript and would ideally like to keep using it.
Reading about handwriting recognition software it seems that the early phases such a recognising the strokes might be helpful. Decompose the gesture into a number of elements (lines or curves) then apply some matching algorithms.
There are a couple of other questions that may be had here, for example: if a we have two identical gestures but one would be much slower than the other and take ten times the time, would they be considered similar?
Anyway, for starters I would look at each moment in time at the positions of the cursor in both gestures and determine the geometrical distance between them. Then you could compute a 'deviation' number of one gesture from the other, and if the number is big, then the gestures might not be similar. This could be a starting point.

Highcharts error when add and shift data to hidden series

So there seems to be an error when dynamically adding data to a hidden series in Highcharts.
Say I have two series on a chart that both update on the same interval of time. Say also that I'd like to ensure that neither of the two series have more than a certain number of points, therefore leading me to use the optional shift boolean during a series.addPoint() operation.
The problem I run into is that, if one of the series is toggled and made invisible for some time, when re-toggling that series, much of the data that should've been shifted is still present.
I've made an example fiddle of this (just toggle data1 in the chart legend for a few seconds and then re-toggle)
http://jsfiddle.net/mmuelle4/c00cLfs5/ (change funcToTest to see how various fixes don't quite give the "shift" look)
I'm using the latest version at the time of this post (Highcharts JS v4.0.4).
I think what I've uncovered is still an error that will need to be addressed by Highcharts, but I figured I'd ask the question - is there a better way to perform series length checking and data adding/shifting for multiple series than in the linked fiddle that would get around this issue? I can think of some clunky ones off the top of my head, but I thought I'd come to SO for some elegance :)
Link to bug on Github (for tracking): https://github.com/highslide-software/highcharts.com/issues/3420
You can workaround this issue by managing shift on your own. Simply store in some array all points and shift them there. Then call series.setData(array_of_points,redraw,animation) instead of series.addPoint(points,redraw,animation, shift).
In short:
when series is hidden use series.setData()
when series is visible use series.addPoint() with shift-param set to true|false

Drag and drop divs using AngularJS

I'm creating a simple task manager where tasks are regrouped by steps. Therefore, many steps can have many tasks. Currently, I have my angularJS model mapped properly. What I want to do right now is to be able to reorder the divs representing the steps.
For example, if I have three steps named 1,3,2 I want to be able to drag the step 2 and move it above step 3 therefore putting them in the order 1,2,3. To do so, I would have to modify my angularJs model accordingly.
What I have currently, is that the ui is responding, I can see the step changing positions, but my the array containing all the steps stays in the same order... Is there a way to reorder this array or at least a way to get the new position of the step ?
http://plnkr.co/edit/bjsgQz?p=preview
You may want to consider using ui-sortable; I've used it on one of my own projects for allowing drag-and-drop reordering, and it's worked rather well. I should point out that it does have a dependency on JQuery/JQueryUI (for the sortable widget), but it was worth it for us.

D3 Scatterplot with thousands of data points

I would like to make a scatter plot using D3 with the ability of only looking at a small section at a time using some sort of slider across the x-axis. Is there a method in javascript where I can efficiently buffer the data and quickly access the elements as the user scrolls left or right?
My goal is similar to this protovis example here, but with 10 times the amount of data. This example chokes when I make that many data points.
I have done a scatterplot with around 10k points where I needed to filter sections of the plot interactively.
I share a series of tips that worked for me, which I hope some may hopefully help you too:
Use a key function for your .data() operator as it is done at the end of this tutorial. The advantage of using keys is that you do not need to update elements that do not change.
Not related to d3, but I divided my data space into a grid, so that each data point is associated to a single cell (in other words each cell is an index to a set of points). In this way, when I needed to access from, let's say, from x_0 to x_1, I knew what cells I needed, and hence I could access a much more refined set of possible data points (avoiding iterating along all points).
Avoid transitions: from my personal experiences the .transition() is not very smooth when thousand of SVG elements are selected (it may be better now in newer versions or with faster processors)
In my case it was more convenient to make points invisible (.attr("display","none")) or visible rather than removing and creating SVG elements (I wonder if this is more time efficient too)

Categories