Skip to content

Instantly share code, notes, and snippets.

@maftokki
Created October 19, 2017 15:43
Show Gist options
  • Save maftokki/ba06c76a293a2533ca1dd76a3203ad4d to your computer and use it in GitHub Desktop.
Save maftokki/ba06c76a293a2533ca1dd76a3203ad4d to your computer and use it in GitHub Desktop.
04_workshop_interactive circles
license: mit
<!DOCTYPE html>
<head>
<title>d3js workshop - circles 2</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});
// This is from example 03
circles.transition()
.delay(function(d, i){return i * 1000})
.duration(2000)
.style('fill', 'red')
.attr('r', '15')
.attr('cy', '80');
// let's make the circles to go back to where they came from
// aka let's learn how to assign events in d3
circles.on("mouseover", function(d){
// say hi to the confusing 'this' in javascript
var circle = this;
// set duration to make it pretty
d3.select(circle)
.style('fill', 'black')
.attr('r', '10')
.attr('cy', '60');
})
// also add click event to disappear the circles
// tip use on('click', function(d){'write the function here!'})
circles.on("click", function(d){
var circle = this;
// set duration to make it pretty
d3.select(circle)
.style('fill', 'black')
.attr('r', '0')
.attr('cy', '60');
})
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment