Skip to content

Instantly share code, notes, and snippets.

@thesparrow

thesparrow/mouseOver

Created February 1, 2015 20:32
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 thesparrow/f9e953e17040fc1c258b to your computer and use it in GitHub Desktop.
Save thesparrow/f9e953e17040fc1c258b to your computer and use it in GitHub Desktop.
Download ZIP
Data visualization with D3
Raw
mouseOver
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
</head>
<body>
<div id= "intro">
<p> Our first introduction to data visualization </p>
</div>
<div id="viz"></div>
<script type="text/javascript">
var sampleSVG = d3.select("#viz")
.append("svg")
.attr("width", 100)
.attr("height", 100);
sampleSVG.append("circle")
.style("stroke", "gray")
.style("fill", "white")
.attr("r", 40)
.attr("cx", 50)
.attr("cy", 50)
.on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
.on("mouseout", function(){d3.select(this).style("fill", "white");});
d3.select("p").transition()
.style("background-color", "blue");
</script>
</body>
</html>
@thesparrow
Copy link
Author

Playing around with mouse over events, and learning D3!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment