Skip to content

Instantly share code, notes, and snippets.

@adamgreenhall

adamgreenhall/index.html

Forked from jdonaldson/index.html
Created September 29, 2011 08:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save adamgreenhall/1250332 to your computer and use it in GitHub Desktop.
Save adamgreenhall/1250332 to your computer and use it in GitHub Desktop.
Download ZIP
a tipsy example with changing data
Raw
index.html
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>index</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://raw.github.com/mbostock/d3/master/d3.js" type="text/javascript" charset="utf-8"></script>
<script src="https://raw.github.com/bigmlcom/tipsy/master/src/javascripts/jquery.tipsy.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="http://onehackoranother.com/projects/jquery/tipsy/stylesheets/tipsy.css" type="text/css" title="no title" charset="utf-8">
</head>
<body>
<div id="test">
</div>
</body>
</html>
<script type="text/javascript" charset="utf-8">
data = [70, 80, 90, 80];
max = 90;
var vis = d3.select("#test").append("svg:svg");
vis.selectAll('.point').data(data).enter().append("svg:circle")
.attr("r", 6)
.attr("cx", function(d, i) { return i * 100 + 10; })
.attr("cy", function(d, i) { return 10; })
.on('mouseover', function(d, i) {
d3.select(this).attr('r', 12);
return ;
})
.on('mouseout', function(d, i) {
d3.select(this).attr('r', 6);
return ;
})
.append('svg:title').attr('class','circleText').text(function(d,i) {
return "Patient Satisfaction: " + d + "%" + "<br/>-google";
});
$('circle').tipsy({
html:true,
gravity: $.fn.tipsy.autoNS,
fade: true,
delayIn: 300,
delayOut: 100
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment