tsenga · December 3, 2012 20:33 · Dec 3, 2012 · Dec 3, 2012 · Dec 3, 2012
diff --git a/README.markdown b/README.markdown
@@ -0,0 +1,2 @@
+An example of attaching multiple visualisation components to the same source data.
+
diff --git a/assumptions.js b/assumptions.js
@@ -0,0 +1,16 @@
+// mock-up some data
+
+var data = [
+	{ finished_at: 2, result: 3, duration: 5, config: "1" },
+	{ finished_at: 4, result: 6, duration: 10, config: "2" },
+	{ finished_at: 8, result: 9, duration: 20, config: "3" },
+	{ finished_at: 16, result: 12, duration: 40, config: "4" },
+	{ finished_at: 32, result: 15, duration: 80, config: "5" }
+];
+
+// original sample seemed to have x, y1, y2 translators
+
+var x = function (value) { return 10*value; }
+var y1 = function (value) { return 10*value; }
+var y2 = function (value) { return 10*value; }
+
diff --git a/example.js b/example.js
@@ -0,0 +1,28 @@
+// get chart root
+
+var svg = d3.select("#chart svg");
+
+// use 'g' as element root and not 'circle'
+
+var elementRoot = svg.selectAll("g")
+	.data(data)
+.enter().append("g");
+
+// now anything we attach to elementRoot, is per element of the join with data
+
+elementRoot.append("circle") 
+	.attr("class", "dot")
+	.attr("cx", function(d) { return x(d.finished_at); })
+	.attr("cy", function(d) { console.log(d.result); return y1(d.result); })
+	.attr("r", 3)
+	.on("click", function(d, i) { alert("Builds Config : (result) " + d.config); }); // click on circle point to see the config of that selected build
+
+elementRoot.append("circle")
+	.attr("class", "dot")
+	.attr("cx", function(d) { return x(d.finished_at); })
+	.attr("cy", function(d) { console.log(d.duration); return y2(d.duration); })
+	.attr("r", 3)
+	.on("click", function(d, i) { alert("Builds Config : (duration) " + d.config); }); // click on circle point to see the config of that selected build
+
+
+
diff --git a/index.html b/index.html
@@ -0,0 +1,19 @@
+<html>
+	<head>
+		<title>D3 Multi-Visualise demonstration</title>
+
+		<script src="http://d3js.org/d3.v2.min.js"></script>
+	</head>
+
+	<body>
+		<h1>Vis Exploration - D3 - Multiplot</h1>
+
+		<div id="chart">
+			<svg>
+			</svg>
+		</div>
+	</body>
+
+	<script src="assumptions.js"></script>
+	<script src="example.js"></script>
+</html>
diff --git a/README.markdown b/README.markdown
@@ -0,0 +1,2 @@
+An example of attaching multiple visualisation components to the same source data.
+
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		An example of attaching multiple visualisation components to the same source data.