Skip to content

Instantly share code, notes, and snippets.

@jdonaldson

jdonaldson/index.html

Created September 11, 2011 02:50
Show Gist options
  • Save jdonaldson/1209105 to your computer and use it in GitHub Desktop.
Save jdonaldson/1209105 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("class",
function(d, i) {
if (i === 3) {
return 'point max';
} else {
return 'point';
}
}).attr("r", function(d, i) {
if (d === max) {
return 6;
} else {
return 4;
}
}).attr("cx", function(d, i) {
return i * 100 + 10;
}).attr("cy", function(d, i) {
return 10;
}).on('mouseover', function(d, i) {
/*
div
.transition()
.duration(500)
.style("opacity", 1)
.text("Satisfaction Level: " +d + "%" + " vs " + "Average: " +
avg + "%" );
*/
d3.select(this)
.attr('r', 8)
;
return ;
})
.append('svg:title').attr('class','circleText').text(function(d,i) {
return "Patient Satisfaction: " + d + "%" + "<br/><a href='http://www.google.com;'>google</a>";
});
$('circle').tipsy({
html:true,
gravity:'nw',
});
data3=[80, 80, 90, 80];
vis.selectAll('.circleText').data(data3).text(function(d,i) {
//alert(JSONdata[i]);
//try to parse it to an array?
return "Patient Satisfaction: " + d + "%" + "<br/><a href='http://www.google.com'>google</a>";
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment