I'm looking to implement (or use a library if one already exists) the Max Flow algorithm on a graph with directed and undirected edges, and visualize it. I am leaning toward JavaScript. I am aware that d3.js and arbor.js allow interactive graph visualization, but is there a recommended way to visualize the actual flow from node to node? This is to demonstrate some concepts in theoretical computer science.
The ideal graph would be able to show edge capacities, edge costs (different from capacities), and node names, and edges can be one-way (directed) or two-way (bidirectional, arrows pointing to both nodes, or just no arrows at all. This is not two separate directed edges).
Any advice regarding a graph visualization tool - one where you can see the flow going from edge to edge - would be appreciated.
Note: I am not opposed to using Python or some other language if someone is aware of a nice framework/library that allows this kind of visualization.
Thanks.
d3 may be the solution to what you're trying to do, but it's good to keep in mind what it is and what it is not.
What it is: a very effective tool at creating data-based graphics. What it is not: a graphing library. That being said, you CAN use it for graphs. Most of the graphs that I do in javascript are built on d3, but when doing so, expect to do write a lot of to code for setting up your plots. You can create a flow graph that will show you what you want, but d3 doesn't contain a canned flow graph that you can drop your data into.
You may want to take a look at Sankey diagram in d3.js and go through the intro in d3.js to see how to deal with that.
Related
I have been working with Looker for a while and one thing that bothers me the most is the multiple limits to its native-visualization (clustered stacked bar chart unavailable, sunburst chart with limited editing options...).
So, I figured that it is time to learn to develop visualization myself. However, I have very little to no experience handling JavaScript and visualization libraries, thus, my learning plan is as follow:
Learn JavaScript Basics (FreeCodeCamp I guess)
Learn D3.js
Adapt D3.js to Looker visualization API
My question is:
Is this plan logical ? If not, what is your suggestion ?
How long would it take if I put in 2 - 3 hours per day ? Assuming that I have a higher IQ than a monkey
Your logical order of the technologies is correct however there are important technologies missing. You are looking here at aquiring the needed skills to become a frontend developer. This is a big task, that requires a lot of study and practice.
For the basis to build charts with d3.js you at least need HTML and SVG to build the DOM structure of your documents, CSS to style the document for a proper presentation and JavaScript + d3.js for the chart generation.
JavaScript, HTML, SVG and CSS go hand in hand in so it is good to learn and use them together.
i need a javascript plugin can design an dynamic IVR diagram and in output can get object for pass to server side.
i found mxgraph but not for IVR.
Here is a sample IVR app: https://gojs.net/latest/samples/IVRtree.html
Call diagram.model.toJson() to save it as JSON-formatted text.
I don't see why mxGraph would not work for this kind of task. In fact any reasonable graph drawing library should be able to able to do that.
I know for sure that you can easily implement great looking IVR diagrams (which are mostly just simple trees with a possibly dynamic automatic layout and a custom visualization for the nodes) with yFiles for HTML. That library has been created specifically to be highly extensible and as such allows for easily adding your own specific visualization for nodes and edges. Also trees and "near-tree" can easily be laid out automatically and you can create a dynamic interactive visualization of such a tree like in this decision tree demo.
Disclaimer: I work for the company that creates the latter of the above mentioned libraries, but I do not represent my employer on SO.
There are many libraries available for IVR diagrams. You can use d3.js, Gojs and JointJs.
I'm building a dashboard receiving tons of data from MQTT in JSON format (data frequency ± 4Hz). I'm trying to visualize this data and initially picked Highcharts (http://www.highcharts.com/) but quite quickly realized that browser can't simply handle that amount of information.
I'm quite new to visualizing such amounts of data so would appreciate any advice on how to handle that amounts of data (currently arduino's post data to given topics and I receive them on the server, store in mongo and send to the browser to be updated). There's a chance my entire approach is completely wrong so please guide me to a path!
Your problem is likely that the SVG that Highcharts is creating is too large for the browser to handle in a timely manner. If you have too many data points, you'll need to do 1 of 2 things.
Switch to a charting library that uses an HTML5 Canvas instead of an SVG
Pare down your data using a best fit or some other curve interpolation.
If you switch to a Canvas based chart, you'll lose some of the cool features that SVGs have, but every data point will make it to the page. I've used jqChart for this in the past. It's not free though.
If you pare down your data, not every data point will make it to the page, but the nice features that SVGs allow will still be there. You'll still probably be able to use highcharts.
I think you need to have a look at crossfilter (filtering lib), dc.js (helper library for d3 and crossfilter) they can handle large amount of data well
After using Highcharts for more than 3 years I can recommend it even for the questioned use case. To follow recommendations to use other charting libraries might be not a good choice if you already picked Highcharts (after comparison with others) and invested quite some time in it. If you like it, stick with it.
To address this edge-case with thousands of data points the team announced the boost.js module.
It originated from this issue on Github. The discussion reveals lots of background information about the problem domain. And it demonstrates how well the Highcharts team is doing customer-/community-driven development.
Looks like you can do it with Highcharts - if you still want. :-)
Last but not least I can recommend the Highcharts Cookbook from Packt
I use grafana to visualise my time series data. I don't believe it supports mongodb at the moment. I use influxdb as the data back end.
As I understand it, Bokeh looks to provide for Python, similar capability that D3.js provides for JavaScript. Some advantages for Bokeh I can see include the use of HTML Canvas (so we can render more to the browser), Abstract Rendering and a lower barrier to entry for people familiar with Python over JavaScript but wanting to develop interactive browser based visualisations.
This is great but, where do you go (i.e. as a developer) to extend Bokeh to match the flexibility offered by D3 e.g. to add Chord diagrams, Network graphs or develop more novel visualisations such as those demonstrated at IEEE VIS or the VAST challenge?
Does the Bokeh project have aspirations to become as fully featured as D3 (appreciate D3 has been around for a while now)?
They do want to be fully featured as D3:
Its goal is to provide elegant, concise construction of novel graphics in the style of D3.js, and to extend this capability with high-performance interactivity over very large or streaming datasets. Bokeh can help anyone who would like to quickly and easily create interactive plots, dashboards, and data applications.
This is detailed in their technical vision page.
To help extend Bokeh, check the extending Bokeh page and the example of wrapping a JS library (visjs). There is also a developer guide and a enhancement proposal document.
It would be awesome to have something like D3's transitions!
I want to visualize a Neo4j database in a graphical application. (I'm doing this primarily as a learning exercise).
I want it to behave almost identically to the visualization in Neo4j's WebAdmin: When the graphic appears, I want to see the nodes moving around as they settle into their final locations, and I want the user to be able to click and drag node icons around the screen and have them stick where they are dropped, with the rest of the graph adjusting to account for the change.
I have two questions.
What are the technical terms for the three requirements crudely described in the paragraph above?
I'm a Java programmer with no experience in JavaScript, but I'm thinking that, with this project, it's time to get some - sigma.js in particular seems very powerful and relatively simple. However, ultimately this needs to be done within a Java Swing application, and while I know there are various containers I can use to embed JS/HTML content into Swing, still it seems that a pure Java solution would be ideal, and I'm curious about any frameworks that might make this possible. I'm looking into Gephi now, but it doesn't seem anywhere near as powerful or as simple to use as sigma.js. Am I wrong in this assumption?
To summarize the second question: Which would be the better investment of my time: Learning sigma.js and the various JS frameworks (which will require me to get comfortable with JS in general), or learning to use Gephi in Java? (assuming I have a general and long-term interest in graph visualization)
Java visualization
Gephi does provide a toolkit for Java and Python which doesn't contains the UI modules, so unless you want to use Gephi itself to visualise your network you cannot embed its UI in your Java/Swing application as long as I know.
The toolkit contains all the algorithms and plugin infrastructure so if you want to use some of their analysis tool embedded in your app you can use that, otherwise I don't think it's your case.
There are other Java options if you want for graph visualisation here: Java graph library for dynamic visualisation
About Gephi and sigmaJS
IMHO Gephi is far more powerful than sigma.js: it has full SNA tools, multiple layouts, a data editor, exporters, plugin-systems...
One important factor is also the size of the dataset you want to visualise: while sigmaJS can handle up to 500 nodes in the view, Gephi can layout easily 50000 nodes with GPU support as well.
Gephi is a scientific tool made for people that don't want to code to visualise a network and it does it's job. SigmaJS is one of many JS solutions to visualise graphs on a web page.
You can always export to sigmaJS from Gephi with a plugin.
What's better?
At the end of the story I guess the tool you are going to use will depends on:
do you have to visualise a big dataset? -> Java solutions will win for big ones
do you need to distribute it easily? -> Web app / SigmaJS wins for distributed
do you want to have a full integration with your app? -> Java wins
The best one I've found is Keylines, but its not cheap.
Gephi is OK, but the last time I looked it did not support Neo4j 2.0
If your a programmer Neo4j is open source, so you can fork the repository on Git and use that (you will have to check the licencing model before you commercialise any product though)