Skip to content

Instantly share code, notes, and snippets.

@veproza
Created March 30, 2014 14:55
Show Gist options
  • Save veproza/9873866 to your computer and use it in GitHub Desktop.
Save veproza/9873866 to your computer and use it in GitHub Desktop.
<html>
<head>
<title>My D3 Page</title>
<style>
svg {background: #aaa;}
</style>
</head>
<body>
<svg width='400' height='400'>
<circle cx="0" cy="0" r="0" stroke="black" stroke-width="3" fill="red" />
<circle cx="0" cy="0" r="0" stroke="black" stroke-width="3" fill="blue" />
</svg>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var circle1 = {centerX: 100, centerY: 50, radius: 40};
var circle2 = {centerX: 110, centerY: 60, radius: 30};
var circle3 = {centerX: 120, centerY: 70, radius: 20};
var circle4 = {centerX: 130, centerY: 80, radius: 10};
var circles = [circle1, circle2, circle3, circle4];
var svg = d3.select('svg');
svg.style("background", 'green');
var circlesElements = svg.selectAll('circle');
circlesElements.attr("fill", '#aaa');
var withData = circlesElements.data(circles);
var enteringSelection = withData.enter();
enteringSelection.append("circle")
.attr('cx', 500)
.attr('cy', 500)
.attr('r', 100);
allCirclesElements = svg.selectAll('circle');
var transition = allCirclesElements.transition()
.duration(5000);
transition.attr('cx', function(circle){return circle.centerX});
transition.attr('cy', function(circle){return circle.centerY});
transition.attr('r', function(circle){return circle.radius});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment