kcsluis/group1.tsv

## group1.tsv

          
            group
            x
            y

            
              I
              10
              8.04

            
              I
              8
              6.95

            
              I
              13
              7.58

            
              I
              9
              8.81

            
              I
              11
              8.33

            
              I
              14
              9.96

            
              I
              6
              7.24

            
              I
              4
              4.26

            
              I
              12
              10.84

            
              I
              7
              4.82

            
              I
              5
              5.68

## index.html
<!DOCTYPE html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">

	body {
		font-family: arial, sans;
		font-size: 9px;
		width: 960px;
		margin: 0px auto;
	}

	.axis path {
		display: none;
	}
	.axis line {
		stroke-width: 1px;
		stroke: #ccc;
		stroke-dasharray: 5px 3px;
		shape-rendering: crispEdges;
	}

	/*important for tooltip positioning*/
	.primaryContainer {
		position: relative;
	}
	.graphicContainer {
		max-width: 960px;
		position: relative;
	}

	/*tooltip*/
	.show {
		display: block;
	}
	.hidden {
		display: none;
	}
	.tooltip {
		background-color: #333;
		padding: 4px 8px;
		position: absolute;
		color: #fff;
		opacity: 0.8;
		z-index: 100;
	}
	g.container circle:hover {
		cursor: pointer;
	}

	/*voronoi*/
	.voronoiPath {
		fill: none;
		stroke: #f0f;
		/*here's the trick*/
		pointer-events: all;
	}
	.voronoiPath:hover {
		cursor: pointer;
	}

	</style>
</head>

<body>

	<div class="primaryContainer">
	<div class='tooltip hidden'></div>
	<div class="graphicContainer"></div>
	<!-- this is important, putting tooltip container over graphic container -->

</body>


<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script>

var margin = {top: 20, right: 20, bottom: 20, left: 40};
var width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

var xScale = d3.scale.linear()
	.range([0,width]);
var yScale = d3.scale.linear()
	.range([height,0]);

var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom");
var yAxis = d3.svg.axis()
	.scale(yScale)
	.tickSize(-width)
	.orient("left");

var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// tooltip begins here
var tooltip = d3.select('.tooltip');
	tooltip.append('div').attr('class', 'ttInfo');
var tooltipText = d3.select('.ttInfo');

d3.tsv("group1.tsv", ready);

function ready(error, data) {
	if (error) return console.warn(error);

	data.forEach(function(d) {
		d.x = +d.x;
		d.y = +d.y;
	});

	xScale.domain(d3.extent(data, function(d) { return d.x; }));
	yScale.domain(d3.extent(data, function(d) { return d.y; }));

	svg.append("g")
		.call(xAxis)
		.attr("class", "axis xAxis")
		.attr("transform", "translate(0," + height + ")");
	svg.append("g")
		.call(yAxis)
		.attr("class", "axis yAxis");


	// enter the mystical voronoi
	var voronoi = d3.geom.voronoi()
		.clipExtent([[0, 0], [width, height]]);

	// there may be a more elegant way to build verticies, but I'm not sure
	var vertices = [
	];
	data.forEach( function (d) {
		var x = xScale(d.x);
		var y = yScale(d.y);
		var vert = [x,y];
		vertices.push(vert);
	});

	var voronoiPath = svg.append("g").selectAll("path.voronoiPath")
		.data(voronoi(vertices), polygon)
		.enter()
		.append("path")
		.attr("class", "voronoiPath")
		.attr("d", polygon)
		.on('mouseover', renderTooltip);

	function polygon(d) {
		return  "M" + d.join("L") + "Z";
	};

	function renderTooltip () {
		console.log("New Voronoi")
	};


	var dataGroup = svg.selectAll('g.container')
		.data(data)
		.enter()
		.append('g')
		.attr('class', 'container')
		.attr('transform', function (d) {
			return 'translate(' + xScale(d.x) + ',' + yScale(d.y) + ')'
		})
		// here's where the tooltip is called
		.on('mouseover', function (d) {
			tooltip.attr('class', 'tooltip'); // remove the hidden class
			tooltipText.text('X:' + d.x + ', Y:' + d.y); // add or update text
		})
		.on('mousemove', function (d) {
			tooltip.style("top", (d3.event.pageY - 48) + 'px'); // not sure about magic numbers
			tooltip.style("left", (d3.event.pageX - 96) + 'px'); // not sure about magic numbers, voronoi has an effect
		})
		.on('mouseout', function (d) {
			tooltip.attr('class', 'tooltip hidden'); // apply hidden class
		});;

	dataGroup.append('circle')
		.attr('r', 3);

}

</script>
group	x	y
I	10	8.04
I	8	6.95
I	13	7.58
I	9	8.81
I	11	8.33
I	14	9.96
I	6	7.24
I	4	4.26
I	12	10.84
I	7	4.82
I	5	5.68
	<!DOCTYPE html>

	<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">

	body {
	font-family: arial, sans;
	font-size: 9px;
	width: 960px;
	margin: 0px auto;
	}

	.axis path {
	display: none;
	}
	.axis line {
	stroke-width: 1px;
	stroke: #ccc;
	stroke-dasharray: 5px 3px;
	shape-rendering: crispEdges;
	}

	/important for tooltip positioning/
	.primaryContainer {
	position: relative;
	}
	.graphicContainer {
	max-width: 960px;
	position: relative;
	}

	/tooltip/
	.show {
	display: block;
	}
	.hidden {
	display: none;
	}
	.tooltip {
	background-color: #333;
	padding: 4px 8px;
	position: absolute;
	color: #fff;
	opacity: 0.8;
	z-index: 100;
	}
	g.container circle:hover {
	cursor: pointer;
	}

	/voronoi/
	.voronoiPath {
	fill: none;
	stroke: #f0f;
	/here's the trick/
	pointer-events: all;
	}
	.voronoiPath:hover {
	cursor: pointer;
	}

	</style>
	</head>

	<body>

	<div class="primaryContainer">
	<div class='tooltip hidden'></div>
	<div class="graphicContainer"></div>
	<!-- this is important, putting tooltip container over graphic container -->

	</body>


	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
	<script>

	var margin = {top: 20, right: 20, bottom: 20, left: 40};
	var width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var xScale = d3.scale.linear()
	.range([0,width]);
	var yScale = d3.scale.linear()
	.range([height,0]);

	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom");
	var yAxis = d3.svg.axis()
	.scale(yScale)
	.tickSize(-width)
	.orient("left");

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	// tooltip begins here
	var tooltip = d3.select('.tooltip');
	tooltip.append('div').attr('class', 'ttInfo');
	var tooltipText = d3.select('.ttInfo');

	d3.tsv("group1.tsv", ready);

	function ready(error, data) {
	if (error) return console.warn(error);

	data.forEach(function(d) {
	d.x = +d.x;
	d.y = +d.y;
	});

	xScale.domain(d3.extent(data, function(d) { return d.x; }));
	yScale.domain(d3.extent(data, function(d) { return d.y; }));

	svg.append("g")
	.call(xAxis)
	.attr("class", "axis xAxis")
	.attr("transform", "translate(0," + height + ")");
	svg.append("g")
	.call(yAxis)
	.attr("class", "axis yAxis");


	// enter the mystical voronoi
	var voronoi = d3.geom.voronoi()
	.clipExtent([[0, 0], [width, height]]);

	// there may be a more elegant way to build verticies, but I'm not sure
	var vertices = [
	];
	data.forEach( function (d) {
	var x = xScale(d.x);
	var y = yScale(d.y);
	var vert = [x,y];
	vertices.push(vert);
	});

	var voronoiPath = svg.append("g").selectAll("path.voronoiPath")
	.data(voronoi(vertices), polygon)
	.enter()
	.append("path")
	.attr("class", "voronoiPath")
	.attr("d", polygon)
	.on('mouseover', renderTooltip);

	function polygon(d) {
	return "M" + d.join("L") + "Z";
	};

	function renderTooltip () {
	console.log("New Voronoi")
	};


	var dataGroup = svg.selectAll('g.container')
	.data(data)
	.enter()
	.append('g')
	.attr('class', 'container')
	.attr('transform', function (d) {
	return 'translate(' + xScale(d.x) + ',' + yScale(d.y) + ')'
	})
	// here's where the tooltip is called
	.on('mouseover', function (d) {
	tooltip.attr('class', 'tooltip'); // remove the hidden class
	tooltipText.text('X:' + d.x + ', Y:' + d.y); // add or update text
	})
	.on('mousemove', function (d) {
	tooltip.style("top", (d3.event.pageY - 48) + 'px'); // not sure about magic numbers
	tooltip.style("left", (d3.event.pageX - 96) + 'px'); // not sure about magic numbers, voronoi has an effect
	})
	.on('mouseout', function (d) {
	tooltip.attr('class', 'tooltip hidden'); // apply hidden class
	});;

	dataGroup.append('circle')
	.attr('r', 3);

	}

	</script>