tsenga/README.markdown

## README.markdown

      
    Raw
  

              README.markdown
            
          
    An example of attaching multiple visualisation components to the same source data.

  
## assumptions.js
// 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; }


## example.js
// 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


## index.html
<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>
	// 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; }
	// 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
	<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>