Wikipedia's entry says balloon tree layouts are one of the common types, but I can't find any javascript drawing library that seems to support it out of the box. Am I missing one? A cheap or open source Flex/ActionScript library works too. I don't really know anything about graph drawing. Would it be easy to use an algorithm from a paper with d3.js or something?
I've implemented a balloon layout for d3 for my uni honours project. Its currently in my d3 fork, but I'm hoping to send a pull request upstream some time after the honours rush (provided the d3 folks want it). Its definitely still a work-in-progress and in need of review, but here it is.
You can check out this bl.ock of mine that uses it.
Related
I'm looking to create some visualisations for my neo4j data, and there are some really nice settings in use in the browser that's bundled with it, but there seem less than straightforward to emulate when using d3 - my setup was based on the neo4j visualisation guide at http://neo4j.com/developer/guide-data-visualization/ but this guide doesn't really get you anywhere near what the browser achieves.
For example, I'm looking to emulate:
multiple curved path between nodes
paths which end at the edge of the node, and not the center
graph initialised in a static position (though could probably just hide until d3 presumably fires some event)
I've not seen any official CSS/JS release to get the same effects, so I guess it's assumed the user will code from scratch. Are there any other options for quickly achieving this?
Many thanks
I think that's kind of the holy grail. If you make it, would you share it with us? ;)
In the meantime, sigma.js is a pretty nice library. Linkurious even released a set of tools on top of it to do even more:
https://github.com/Linkurious/linkurious.js
So I have a simple tree graph that is broken down into categories which may change later.
This will be strictly for ipad/chrome, so dont worry about legacy.
I would like the branches(lines) to kind of grow from each category(Voice/video Chat) to following nodes(hangouts, skype etc). I'm pretty sure that canvas is the best way to implement this. The data for the nodes and categories will be fetched from a javascript/json factory/model in angularJS. Can anyone at stack help me with a solution that could scale for changes and make clicks and animations simplistic for rapid changes.
If possible, extra comments in the realm of canvas (where I know almost nothing).
This is a preemptive strike for me; so If, I'm asking for too much sorry.
D3 would probably be the way to go. It often comes with a steep learning curve though (at least for me, not having worked with SVGs before).
Mike Bostock has a similar example: http://bl.ocks.org/mbostock/4339083
The nodes are interactive and have several layers of nesting. It's done as a left-right tree, rather than top - down like you're wanting. So it'll require modification to get it how you want.
Another example from Mike Bostock is: http://bl.ocks.org/mbostock/999346. This is a top-down.
I am trying to make a browser-based tool that lets you inspect dependency graphs as they appear in module systems of programming languages and Makefiles.
I am looking for a visualization framework that does the drawing for me.
The requirements are that the toolkit can
label nodes (and hopefully edges)
automatically space out the graph to the right size (I don't have to guess good dimensions) given that I have infinit space (scroll bars are fine)
layout the graph nicely so that it doesn't look as messy
be fine with <= 5000 nodes
run with JS only (no Flash or desktop apps)
Optionally, it would be nice if it made it easy to move nodes around and highlight or hide parts of the graph for better overview.
It does not matter much what backed is used (SVG, canvas, all fine).
I have looked at quite a few libraries so far (especially from Graph visualization library in JavaScript), but not found a fitting one yet:
d3 is nice but the only node-graph it delivers is a force graph, which is focused on real time physics. Once loaded, you have to wait and watch for the physics engine to stabilize. I don't need animations nor the Force, and want to show the graph right away.
GraphDracula's examples are pretty much what I am looking for, but already with 70 nodes and 400 edges, the drawing performance becomes really bad. It also has very little documentation (being a 35 line code example).
Do you know something that meets my requirements? Thanks!
In a commercial scenario you might want to consider yFiles for HTML:
Regarding your requirements it can:
Add any number of labels to nodes and edges
Provide virtually infinite scrolling/panning/zooming area
Layout your graph automatically using a great variety of automatic layout algorithms. For dependency graphs, the Hierarchic Layouter is very well suited
works nicely on desktop browsers with larger numbers of nodes. Depending on the visual complexity and graph structure, 5000 elements might proove difficult with todays browser implementations, though.
It's a pure Javascript library with no dependencies whatsoever
Uses SVG as the main backend, but can also leverage Canvas
The library is well documented, which is necessary given its complexity
Here is a screenshot showing some of the above features in action - the layout was calculated automatically:
Disclaimer: I work for the company that creates the library. On SO/SE I do not represent my employer. This is my own post.
Dagre works pretty well for graph layout (horizontal/vertical alignment, labels, etc.) and has D3 renderer.
https://github.com/cpettitt/dagre-d3 (check images at the end)
https://github.com/cpettitt/dagre
I want to build a drawing program in JS. (jQuery preferred but not mandatory).
Anyway, my vision is a big, blank, white canvas with a simple grid. The user could drag "layers" to the grid (such as icons, pictures, etc). Also, it would support drawing curves, lines, boxes, etc.
Think of Adobe Illustrator but much simpler. Honestly, it will be used to do database diagrams more than art (unless database diagrams are art to you...lol)
Is there anything out there like that?
Thanks
I'm sorry to inform you you won't be first with the idea.
Check out these
- diagramo.com (html5/canvas)
- lucidchart.com (html5/canvas)
- gliffy.com (flash)
There are few more in the wild, though new addition is always good for competition!
For vector graphics I would suggest using inline SVG rather than something like canvas.
To get you started here is something I wrote a long time back (before I knew about jslint, so it's not as neat as it should be) http://jsfiddle.net/ctrlfrk/mZzVD/
Here is a jquery svg library (I had it bookmarked, but haven't tried it): http://keith-wood.name/svgRef.html
The mozilla reference: https://developer.mozilla.org/en/SVG_Reference
And the actual spec: http://www.w3.org/TR/SVG11/index.html
As a keen windsurfer, I'm interested in how windy the next few weeks are going to be. To that end, I've been writing a little app to scrape a popular weather site (personal use only - not relaying the information or anything) and collate the data into a single graph so that I can easily see when's going to be worth heading out.
I have the back end working but need a way to display the data. My scraper currently gives me two series of data which tell me how strong the general wind is and how strong it's likely to gust to. What I'd like to do next is display those two data sets as a pair of lines in a graph and shade the region between them.
I was considering using something like the flot library to display the data. The only problem is that I can't see a way to shade an area between two lines?
If anyone has suggestions of how to do this in flot or other libraries or graphing techniques (I have DJango on my server so anything pythonic or javascripty should be fine), I'd be interested to hear them. Ideally this will be a javascript solution to avoid having to serve up images.
Take a look at the Google chart API's. They make this sort of thing pretty easy. Without some example code, I would have a hard time giving you an example, but Google has nice one on the docs.
You should check out Dojo. It looks like it'd be pretty easy for you to do, just plot the bottom line with the same fill color as the background. That should get you the effect you're going for.
http://dojocampus.org/explorer/#Dojox_Charting_2D
I'd use open flash chart, you just have to create a JSON with the data and then you've to all the flashy coolness in your page....
http://teethgrinder.co.uk/open-flash-chart-2/