init rendering

mhausenblas · Jul 27, 2012 · 679e0d0 · 679e0d0
1 parent ed5dcdc
commit 679e0d0
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 14 deletions.
diff --git a/index.html b/index.html
@@ -6,6 +6,11 @@
 	<link rel="stylesheet" href="style.css" />
 </head>
 <body>
+	<div id="info">
+		Contact: <a href="http://github.com/mhausenblas/">Michael Hausenblas</a> |
+		Last update: 2012-07-27 | 
+		Source: <a href="http://github.com/mhausenblas/turtled">GitHub repo</a>
+	</div>
 	<div id="top">
 		<h1>turtled</h1>
 		<p>
@@ -41,16 +46,11 @@ <h1>turtled</h1>
 				<div id="status">Status: waiting for user input</div>
 			</div>
 		</div>
-		<div id="out">
-
-		</div>
+		<div id="out"></div>
 	</div>
-	<footer>
-		Contact: <a href="http://github.com/mhausenblas/">Michael Hausenblas</a> |
-		Last update: 2012-07-27 | 
-		Source: <a href="http://github.com/mhausenblas/turtled">GitHub repo</a>
-	</footer>
+
 	<script src="jquery-1.7.2.min.js"></script>
+	<script src="vivagraph.min.js"></script>
 	<script src="rdf_store_min.js"></script>
 	<script src="turtled.js"></script>
 </body>

diff --git a/style.css b/style.css
@@ -1,7 +1,7 @@
 body {
 	font-family: 'Metrophobic', sans-serif;
 	font-size: 16pt;
-	margin: 0 auto;
+	margin: 4em;
 	background: #fafafa;
 	padding: 0;
 	width: 45%;
@@ -33,10 +33,9 @@ textarea {
 }
 
 
-footer {
+#info {
 	font-size: 50%;
-	text-align: center;
-	margin: 4em 0 0 1em;
+	text-align: left;
 }
 
 
@@ -76,7 +75,8 @@ footer {
 
 
 #out {
-	clear: left;
+	width: 100%;
+	text-align: center;
 }
 
 .ctrl-item {

diff --git a/turtled.js b/turtled.js
@@ -1,4 +1,17 @@
+var graph = Viva.Graph.graph();
+var graphics = Viva.Graph.View.svgGraphics();
+var layout = Viva.Graph.Layout.forceDirected(graph, {
+	springLength: 30,
+	springCoeff: 0.0008,
+	dragCoeff: 0.009,
+	gravity: -1.2,
+	theta: 0.8
+});
+
 $(document).ready(function(){
+
+	$("#out").css('margin-left', $("#in").width() + 10);
+
 	rdfstore.create(function(store) {
 
 		$("#vis").click(function(event){
@@ -9,6 +22,8 @@ $(document).ready(function(){
 			store.load("text/turtle", tinput, function(success, results) {
 				if(success){
 					status("Valid RDF Turtle. Loaded <strong>" + results + "</strong> triples.");
+					graph.addLink(1, 2);
+					renderGraph("out");
 				}
 				else {
 					status("<span style='color:red'>Invalid RDF Turtle :(</span>" );
@@ -34,4 +49,16 @@ function listTriples(){
 	    }       
 	  }
 	});
-}
+}
+
+function renderGraph(containerID){
+	var renderer = Viva.Graph.View.renderer(graph, {
+		layout: layout,
+		graphics: graphics,
+		renderLinks: true,
+		container: document.getElementById(containerID)
+	});
+	renderer.run();
+}
+
+
diff --git a/vivagraph.min.js b/vivagraph.min.js