puzzler10/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This is an example of a simple scatterplot with a mouseover tooltip. The data is tracking the speed of building a random forest in R as a function of the number of observations.
See http://www.puzzlr.org/?p=11 for more information.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
	<style>
		.axis path,
		.axis line
		{
			fill: none;
			stroke: black;
			shape-rendering: crispEdges;
		}

		.axis text
		{
			font-family: sans-serif;
			font-size: 11px;
		}

		div.tooltip
		{
			position: absolute;
			text-align: center;
			width: 70px;
			height: 14px;
			padding: 2px;
			font: 12px sans-serif;
			background: lightsteelblue;
			border: 0px;
			border-radius: 8px;
			pointer-events: none;
		}
	</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"> </script>
<script>
	var max_time = 22
	var margin = {top: 20, right: 20, bottom: 30, left: 40},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	//Create a svg element to store the graph in
	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 + ")");

	//Set up scales that we can use to draw the axes
	var x = d3.scale.linear()
				.domain([0,5000])
				.range([0,width]);
	var y = d3.scale.linear()
				.domain([0,max_time + 1])
				.range([height,0]);

	//Setting up the axes
	var xAxis = d3.svg.axis()
					.scale(x)
					.orient("bottom")
					.ticks(5);

	var yAxis = d3.svg.axis()
					.scale(y)
					.ticks(5)
					.orient("left");


	//Add the axis to our svg element
	// x-axis
	svg.append("g")
		.attr("class", "x axis label")
		.attr("transform", "translate(" + 0 + "," + height + ")")
		.call(xAxis)
		.append("text")
		.text("number of rows")
		.attr("x", width)
		.attr("y", -6)
		.style("text-anchor", "end");
	// y-axis
	svg.append("g")
		.attr("class", "y axis label")
		.call(yAxis)
		.append("text")
		.text("time")
		.attr("transform", "rotate(-90)")
		.attr("y",6)
		.attr("dy", ".71em")
		.style("text-anchor","end")

	//For the mouseover bubbles
	var tooltip = d3.select("body")
					.append("div")
					.attr("class","tooltip")
					.attr("style","display:none")

	var datas;
	d3.csv("obs_timings.csv", type,
		function(data)
		{
			datas = data;
			svg.selectAll("circle")
			.data(datas)
			.enter()
			.append("circle")
			.attr("cx", function(d) {return x(d.size); })
			.attr("cy", function(d) {return y(d.time); })
			.attr("r", 5)
			.on("mouseover", function(d)
			{
				tooltip.transition()
						.duration(100)
						.style("opacity", .9);
				tooltip.html("(" + d3.round(d.size) + "," + d3.round(d.time,2) + ")") //what to display on mouseover
				.style("left", (d3.event.pageX + 5) + "px")
				.style("top", (d3.event.pageY - 28) + "px")
				.style("display", "block")
			})
			.on("mouseout", function(d)
			{
				tooltip.transition()
						.duration(500)
						.style("opacity",0);
			});
		});

function type(d) {
	d.size = +d.size;
	d.time  = d.time;
	return d
}
</script>
</body>
</html>

## obs_timings.csv

          
            size
            time

            
              100
              1.17

            
              200
              1.27

            
              300
              1.42

            
              400
              1.67

            
              500
              1.84

            
              600
              2

            
              700
              2.26

            
              800
              2.51

            
              900
              2.76

            
              1000
              3.01

            
              1100
              3.45

            
              1200
              3.59

            
              1300
              3.88

            
              1400
              4.13

            
              1500
              4.8

            
              1600
              5

            
              1700
              5.36

            
              1800
              5.72

            
              1900
              5.74

            
              2000
              6.39

            
              2100
              6.77

            
              2200
              7.07

            
              2300
              7.6

            
              2400
              8.07

            
              2500
              8.41

            
              2600
              9.43

            
              2700
              10

            
              2800
              9.68

            
              2900
              10.09

            
              3000
              10.53

            
              3100
              10.94

            
              3200
              11.62

            
              3300
              12.54

            
              3400
              12.53

            
              3500
              12.98

            
              3600
              13.84

            
              3700
              14.17

            
              3800
              14.98

            
              3900
              16.19

            
              4000
              16.18

            
              4100
              16.44

            
              4200
              16.89

            
              4300
              17.27

            
              4400
              17.7

            
              4500
              18.79

            
              4600
              19.89

            
              4700
              19.59

            
              4800
              21.97

            
              4900
              21.75

            
              5000
              21.47

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<html>
	<head>
	<style>
	.axis path,
	.axis line
	{
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}

	.axis text
	{
	font-family: sans-serif;
	font-size: 11px;
	}

	div.tooltip
	{
	position: absolute;
	text-align: center;
	width: 70px;
	height: 14px;
	padding: 2px;
	font: 12px sans-serif;
	background: lightsteelblue;
	border: 0px;
	border-radius: 8px;
	pointer-events: none;
	}
	</style>
	</head>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"> </script>
	<script>
	var max_time = 22
	var margin = {top: 20, right: 20, bottom: 30, left: 40},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	//Create a svg element to store the graph in
	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 + ")");

	//Set up scales that we can use to draw the axes
	var x = d3.scale.linear()
	.domain([0,5000])
	.range([0,width]);
	var y = d3.scale.linear()
	.domain([0,max_time + 1])
	.range([height,0]);

	//Setting up the axes
	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom")
	.ticks(5);

	var yAxis = d3.svg.axis()
	.scale(y)
	.ticks(5)
	.orient("left");


	//Add the axis to our svg element
	// x-axis
	svg.append("g")
	.attr("class", "x axis label")
	.attr("transform", "translate(" + 0 + "," + height + ")")
	.call(xAxis)
	.append("text")
	.text("number of rows")
	.attr("x", width)
	.attr("y", -6)
	.style("text-anchor", "end");
	// y-axis
	svg.append("g")
	.attr("class", "y axis label")
	.call(yAxis)
	.append("text")
	.text("time")
	.attr("transform", "rotate(-90)")
	.attr("y",6)
	.attr("dy", ".71em")
	.style("text-anchor","end")

	//For the mouseover bubbles
	var tooltip = d3.select("body")
	.append("div")
	.attr("class","tooltip")
	.attr("style","display:none")

	var datas;
	d3.csv("obs_timings.csv", type,
	function(data)
	{
	datas = data;
	svg.selectAll("circle")
	.data(datas)
	.enter()
	.append("circle")
	.attr("cx", function(d) {return x(d.size); })
	.attr("cy", function(d) {return y(d.time); })
	.attr("r", 5)
	.on("mouseover", function(d)
	{
	tooltip.transition()
	.duration(100)
	.style("opacity", .9);
	tooltip.html("(" + d3.round(d.size) + "," + d3.round(d.time,2) + ")") //what to display on mouseover
	.style("left", (d3.event.pageX + 5) + "px")
	.style("top", (d3.event.pageY - 28) + "px")
	.style("display", "block")
	})
	.on("mouseout", function(d)
	{
	tooltip.transition()
	.duration(500)
	.style("opacity",0);
	});
	});

	function type(d) {
	d.size = +d.size;
	d.time = d.time;
	return d
	}
	</script>
	</body>
	</html>
	size	time
	100	1.17
	200	1.27
	300	1.42
	400	1.67
	500	1.84
	600	2
	700	2.26
	800	2.51
	900	2.76
	1000	3.01
	1100	3.45
	1200	3.59
	1300	3.88
	1400	4.13
	1500	4.8
	1600	5
	1700	5.36
	1800	5.72
	1900	5.74
	2000	6.39
	2100	6.77
	2200	7.07
	2300	7.6
	2400	8.07
	2500	8.41
	2600	9.43
	2700	10
	2800	9.68
	2900	10.09
	3000	10.53
	3100	10.94
	3200	11.62
	3300	12.54
	3400	12.53
	3500	12.98
	3600	13.84
	3700	14.17
	3800	14.98
	3900	16.19
	4000	16.18
	4100	16.44
	4200	16.89
	4300	17.27
	4400	17.7
	4500	18.79
	4600	19.89
	4700	19.59
	4800	21.97
	4900	21.75
	5000	21.47