pbogden/README.md

## README.md

      
    Raw
  

              README.md
            
          
    circle selector

Mouse over the circles...

  
## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="styles.css" type="text/css">
  <title>circles</title>
  <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
</head>

<body>
<script>

var width= 960, height=500, pi = 3.14159, startOpacity = 0.4;

var angles = [ pi/3, pi, - pi/3 ];
var center = { x: width/2, y: height/2 };
var r = height/5,       // circle radius
    r0 = 0.8*r;         // circle displacement from center

var positions = [];
angles.forEach(function(theta){
    positions.push({ x: center.x + r0*Math.sin(theta),
                     y: center.y - r0*Math.cos(theta)});
});

var g = d3.select("body").append('svg')
    .append("g");                              // <g> container for shapes

g.append("rect")                               // plot a rectangle first
    .attr("width", width)
    .attr("height", height);

g.selectAll('circle')
    .data(positions)
  .enter()
    .append('circle')
    .attr('r', r)
    .attr('cx', function(d){ return d.x; })
    .attr('cy', function(d){ return d.y; })
    .style("fill", "blue")
    .style("fill-opacity", startOpacity)     // initialize fill-opacity here, or first toggle won't work
//    .on("mouseover", toggle)
//    .on("mouseout", toggle)
    .on("mouseover", showTooltip)
    .on("mousemove", moveTooltip)
    .on("mouseout",  hideTooltip);

// Create the tooltip div (there's only one)
var tooltip = d3.select("body")
    .append("div")
    .attr("class", "tooltip")
    .style("visibility", "hidden")
    .text("a simple tooltip");

function toggle() {
    if ( this.style.fillOpacity < 1 ) {
      this.style.fillOpacity = "1";
    } else {
      this.style.fillOpacity = "0.5";
    };
}

function showTooltip(d) {
    this.style.fillOpacity = "0.8";
    tooltip.style("visibility", "visible");
    tooltip[0][0].innerHTML = "Hello,<br>world!";
    tooltip.style("top", (d3.event.pageY-10)+"px")
           .style("left",(d3.event.pageX+20)+"px");
};

function moveTooltip(d) {
    tooltip.style("top", (d3.event.pageY-10)+"px")
           .style("left",(d3.event.pageX+20)+"px");
};

function hideTooltip(d) {
    this.style.fillOpacity = startOpacity;
    tooltip.style("visibility", "hidden");
};

</script>
</body>
</html>

## styles.css

body, svg {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 960px;
  height: 500px;
  position: relative;
}

circle, rect {
  stroke: black;
  stroke-width: 2px;
  fill: 'blue';
  fill-opacity: 0.1;
}

.tooltip {
    margin: 30px 30px 30px 30px;
    background-color: lightgray;
    border-style: solid;
    padding: 10px 10px 10px 10px;
    font-size: 1.5em;
    position: absolute;
    z-index: 100;
}


## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="styles.css" type="text/css">
	<title>circles</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
	</head>

	<body>
	<script>

	var width= 960, height=500, pi = 3.14159, startOpacity = 0.4;

	var angles = [ pi/3, pi, - pi/3 ];
	var center = { x: width/2, y: height/2 };
	var r = height/5, // circle radius
	r0 = 0.8*r; // circle displacement from center

	var positions = [];
	angles.forEach(function(theta){
	positions.push({ x: center.x + r0*Math.sin(theta),
	y: center.y - r0*Math.cos(theta)});
	});

	var g = d3.select("body").append('svg')
	.append("g"); // <g> container for shapes

	g.append("rect") // plot a rectangle first
	.attr("width", width)
	.attr("height", height);

	g.selectAll('circle')
	.data(positions)
	.enter()
	.append('circle')
	.attr('r', r)
	.attr('cx', function(d){ return d.x; })
	.attr('cy', function(d){ return d.y; })
	.style("fill", "blue")
	.style("fill-opacity", startOpacity) // initialize fill-opacity here, or first toggle won't work
	// .on("mouseover", toggle)
	// .on("mouseout", toggle)
	.on("mouseover", showTooltip)
	.on("mousemove", moveTooltip)
	.on("mouseout", hideTooltip);

	// Create the tooltip div (there's only one)
	var tooltip = d3.select("body")
	.append("div")
	.attr("class", "tooltip")
	.style("visibility", "hidden")
	.text("a simple tooltip");

	function toggle() {
	if ( this.style.fillOpacity < 1 ) {
	this.style.fillOpacity = "1";
	} else {
	this.style.fillOpacity = "0.5";
	};
	}

	function showTooltip(d) {
	this.style.fillOpacity = "0.8";
	tooltip.style("visibility", "visible");
	tooltip[0][0].innerHTML = "Hello,<br>world!";
	tooltip.style("top", (d3.event.pageY-10)+"px")
	.style("left",(d3.event.pageX+20)+"px");
	};

	function moveTooltip(d) {
	tooltip.style("top", (d3.event.pageY-10)+"px")
	.style("left",(d3.event.pageX+20)+"px");
	};

	function hideTooltip(d) {
	this.style.fillOpacity = startOpacity;
	tooltip.style("visibility", "hidden");
	};

	</script>
	</body>
	</html>

	body, svg {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	width: 960px;
	height: 500px;
	position: relative;
	}

	circle, rect {
	stroke: black;
	stroke-width: 2px;
	fill: 'blue';
	fill-opacity: 0.1;
	}

	.tooltip {
	margin: 30px 30px 30px 30px;
	background-color: lightgray;
	border-style: solid;
	padding: 10px 10px 10px 10px;
	font-size: 1.5em;
	position: absolute;
	z-index: 100;
	}