HTML 5 supports SVG image in HTML document, and recently it was implemented in Firefox 3.6.
I wrote a dynamic graph data visualizer with SVG and Javascript in 2007, and now I can use it in HTML. Hooray!
A sample of it is shown below.
Currently you need to use Firefox 3.6 and enable HTML 5 to see it.
The way to enable it is:
- Input "about:counfig" to the location bar
- Change the value of "html5.enable" to "true"
The arrangement of nodes bases on attraction repulsion model, and you can drag and drop each of them.
Here is the script file.
SVG Graph Generator (Apache Licence 2.0)
All you need to write in your HTML file is like this.
<!-- Include the script file. -->If it appeals to you, please create something with it!
<script src="URL_TO_THE_SCRIPT"></script>
<!-- Add svg element to HTML. "id" attribute is required. -->
<svg viewBox="0 0 200 150" id="svg"></svg>
<script>
// Create a graph object.
// The argument is the id of svg element.
var graph = new Graph("svg");
// Add Nodes to the graph object.
// The argument is text appears on it.
// Each node is assigned an ID which starts with 0.
graph.addNode("Alice"); // Node ID 0
graph.addNode("Bob"); // Node ID 1
graph.addNode("Charlie"); // Node ID 2
graph.addNode("Dave"); // Node ID 3
graph.addNode("Eve"); // Node ID 4
// Connect nodes.
// The arguments are two node IDs
// and connection strength (between 0 and 1)
// Currently connection strength has
// no influence on the graph.
graph.joint(0, 1, 1);
graph.joint(1, 2, 1);
graph.joint(1, 3, 1);
graph.joint(3, 4, 1);
// Start to move.
// You can stop it by "graph.sleep()"
graph.wake();
</script>
投稿
