Skip to content

Instantly share code, notes, and snippets.

@jfreels

jfreels/README.md

Last active December 24, 2015 14:19
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 jfreels/6811998 to your computer and use it in GitHub Desktop.
Save jfreels/6811998 to your computer and use it in GitHub Desktop.
Download ZIP
d3js: Create SVG circles with mouseover / mouseout transition
Raw
README.md

d3js: Create SVG circles with mouseover / mouseout transition.

Raw
index.html
<!DOCTYPE html>
<meta charset='utf-8'>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<link rel='stylesheet' href='style.css'>
</head>
<body>
<script type='text/javascript' src='script.js'></script>
</body>
</html>
Raw
script.js
var h = 300
var w = 300
var data = [
{ "name" : "Circle 1", "cx" : 50, "cy" : 50, "r" : 20 , "fill" : "red"},
{ "name" : "Circle 2", "cx" : 100, "cy" : 100, "r" : 30 , "fill" : "blue"},
{ "name" : "Circle 3", "cx" : 150, "cy" : 150, "r" : 40 , "fill" : "green"}
]
var svg = d3.select('body').append('svg')
.attr('height',h)
.attr('width',w)
var circles = svg.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr('cx', function (d) { return d.cx })
.attr('cy', function (d) { return d.cy })
.attr('r', function (d) { return d.r })
.attr('fill', function (d) { return d.fill })
.attr('stroke','black')
.attr('stroke-width',0)
.on('mouseover',function() {
d3.select(this)
.transition()
.duration(1000)
.attr('stroke-width',5)
})
.on('mouseout',function () {
d3.select(this)
.transition()
.duration(1000)
.attr('stroke-width',0)
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment