Skip to content

Instantly share code, notes, and snippets.

@tamaho
Created October 19, 2017 15:40
Show Gist options
  • Save tamaho/ec548073703d8a0cb7b4f7bf9d425adb to your computer and use it in GitHub Desktop.
Save tamaho/ec548073703d8a0cb7b4f7bf9d425adb to your computer and use it in GitHub Desktop.
05_workshop_interactive circles solved
license: mit
<!DOCTYPE html>
<head>
<title>d3js workshop - circles</title>
<script src="http://d3js.org/d3.v3.js"></script> <!-- import D3 library -->
</head>
<body>
<script type="text/javascript">
// this is a modified version of Mike's example here: http://bost.ocks.org/mike/circles/
// first let's draw 3 circles
// this is how a circle looks like
// <circle cx="40" cy="60" r="10"></circle>
// and this is what we want to create to get started
/*
<svg width="720" height="120">
<circle cx="40" cy="60" r="10"></circle>
<circle cx="80" cy="60" r="10"></circle>
<circle cx="120" cy="60" r="10"></circle>
</svg>
*/
// first we need to add an svg element to body
svg = d3.select('body')
.append('svg')
.attr('width', '720px')
.attr('height', '120px');
// now let's append 3 circles to svg
// I will use a data list with length of 3
var data = [10, 20, 30];
var circles = svg.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr('r', 10)
.attr('cy', 60)
.attr('cx', function(d){ return 4 * d})
.on("mouseover", function(d){
// this is the circle itself
var circle = this;
// set duration to make it pretty
d3.select(circle)
.transition()
.duration("2000")
.style('fill', 'black')
.attr('r', '10')
.attr('cy', '60');
})
.on("click", function(d){
// this is the circle itself
var circle = this;
// change circle radius to 0
d3.select(circle)
.transition()
.duration("2000")
.style('fill', 'grey')
.attr('r', '0');
});
// animation after loading the page
circles.transition()
.delay(function(d, i){return i * 1000})
.duration(2000)
.style('fill', 'red')
.attr('r', '15')
.attr('cy', '80');
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment