Creating a force directed graph in Babylon.js - javascript

I am attempting to create a force directed graph in my Babylon.js project and was wondering if anyone had suggestions as to how I should go about that. I am looking into the barycentric method and the Barnes-Hut method but am wondering if there are any simpler ways of doing so (such as how it is done in d3.js by typing d3.layout.force) or if I should continue on with one of those methods above. I need to add the nodes on top of a plane within a 3D area but the y values of the nodes will remain constant so it is more of a 2D problem.
I also looked into Springy (http://getspringy.com/) but I am not sure if it would be possible to implement that into Babylon.js due to the 3D nature of Babylon.
If anybody has a suggestion to solve this problem I would greatly appreciate it.
Thank you.

I would break this problem into multiple pieces.
Wrangle the data using an off-the-shelf algorithm into coordinates, then feed the coordinates into Babylon.
A really cheesy way to do it would be to let d3-force do its magic in a hidden SVG, then feed the graph data into Babylon.
Yes, it's a hack, but it would seem to be fast and easy!

Related

Measure element while drawing using javascript

I am implementing draw/modify features using OpenLayer in ReactJS and came across a very interesting question.
How can I draw a line and at the same time see how long it is in the real world (considering zoom and scale of the map).
So for instance when I draw a line I would like to have an info like "real world length: x meters" where x is dynamically changing while extending the line.
Is it possible to achieve such a functionality using OpenLayers and ReactJS (or just pure JS)? Is there maybe a better solution? Maybe anyone saw something that works this way?
Thanks for help in advance.
The ol-ext/Overlay/Tooltips can do it for you.
See example online: https://viglino.github.io/ol-ext/examples/popup/map.tooltip.measure.html

Framework for html5/canvas game based on hexagonal grid

I am developing html5 game based on hexagonal grid.
After some investigation I have used :
MelonJS + Tiled + this tricky thing. Everything seems good in this combination, until I started to think about dynamic showing some hexagons, that my player will be able to go.
There are few ideas that comes to mind:
Calculate coordinates and draw on canvas skipping melonjs, but it's bad idea from architecture point.
Adding custom property for each hexagon texture object, but it's too much manual work.
Adding some facade for melonjs in order to work with it or maybe it's already done?
So my question is:
What's the best way to solve this problem in scope of those technologies or maybe should I use another tool?
Depending on how much content you have already developed, did you consider to use a Tiled daily build with support for hexagonal maps?
Of course, since melonJS doesn't support this yet you would either need to implement the hexagonal renderer yourself or try to get the support from melonJS developers to add it. I've opened an issue about this.
I may have misunderstood your question a little, though. If you are talking about an overlay on top of the map that shows the player where he can walk to from his current position, then the way to go would be to draw this yourself after melonJS has rendered the map. I can't help you with exactly how to do this because I don't have that much experience with melonJS.

D3.js Flood Map Killer

Here is an example of a Flood Map using D3.js and topojson.
http://bl.ocks.org/cappelaere/6472064
https://gist.github.com/cappelaere/6472064
It is really taxing D3. Simplification of the topojson at load time does seem to hang Firefox. We really need to get this working to support our disaster management work. It would be great to have adaptive simplification as we zoom in. Any help would be greatly appreciated.
Thanks,
Pat.
Pretty much your only choice for this is to have pre-simplified data sets that are loaded according to the zoom level. That is, after each zoom you would need to determine whether to load a new, higher resolution data set for the region that the user has zoomed into. If so, you would need to clear the existing elements and add the new ones.
This would be quite a bit of effort. At this point, you might as well have pre-rendered bitmap tiles (like in Google Maps for example) and use a library like Leaflet that does the heavy lifting for you. On top of this pre-rendered map, you could still use D3 for dynamic stuff.

Violin chart in D3

Any ideas on where to even begin with making a violin chart using d3? Does it exist already?
I've looked around and have figured out how to do it using ggplot2 and was hoping there'd be a ready-made example that I could learn from but haven't found one yet.
I suppose I could do a really painful process of making various size bars on top of each other, or taking a distribution, rotating it and mirroring it. But surely there's a better way.
I needed that for myself so here it is: violin plot
As far as I know, nobody has done this before, but it shouldn't be too hard. I would start as if I was making a line chart (or boxed instead of lines) for one half of a violin. That is, create the appropriate x and y scales and add the data in. The result of this I would rotate and translate to the correct position. Then do the same thing again and mirror it as well to get the other half of the violin.
This may sound complex, but SVG has built-in support for these operations (rotating and mirroring). You should be able to approach this pretty much like drawing a line graph of the distribution with 2-3 simple operations on top of that. Wrap everything in a function and you've got something you can call to create a violin.
It of course also depends in what form you have the data to make the plot. A line plot might not be feasible because of too few data points, but then you can easily use bars instead.

Javascript library or framework for drawing charts on client side

I'm looking for an library, to generate charts on client side.
I found a lot, by searching on web and stackoverflow, like here
https://stackoverflow.com/questions/2227421/good-javascript-library-for-drawing-charts-using-json
or this very good collection:
http://sixrevisions.com/javascript/20-fresh-javascript-data-visualization-libraries/
There are so much alternatives, I'm a bit overwhelmed. Which one can use JSON data, which one is up to date, which one is easy to use (because I'm absolutely new on this topic), which one is robust, works on mobile phone (or not), which project is still alive, etc.
I need different chards, an line chart is mandatory. Also zoom in and zoom out is mandatory.
So I took a closer look on jqplot an flot.
Both providing zoom, but it looks like zooming is more an scaling. Which means: the granularity will not change by zoom in.
Because the graph will have a lot of data/points, i need to consolidate informations before sending them to the client. By zooming in, I need to rise the granularity, so the chart should be able to process new data for the zoomed area. (I hope I've made ​​myself clear.)
Thanks for any kind of attention.
Raphael.js http://raphaeljs.com/
HTML5 Graph http://chrisvalleskey.com/html5-graph/
Google Visualization API: http://code.google.com/apis/chart/interactive/docs/gallery.html
Flot: http://code.google.com/p/flot/
Unfortunately there is no helpful answer, so I like to write down, what i learned the last days for this question.
jqPlot and frot are supporting zooming at an basic level. That means, it's more an scaling.
By looking at the google groups for qjPlot and flot, the support for jqPlot is better (lot's of unanswered questions at the flot group).
jqPlot has an better axis-label-handling by zooming.
jqPlot also provides hooks. By using those hooks, it's seems to be possible to combine zooming and loading new JSON data in order to get an better granularity of the zoomed view.

Categories

Resources