Skip to content

Instantly share code, notes, and snippets.

Created March 30, 2014 14:55
What would you like to do?
<title>My D3 Page</title>
svg {background: #aaa;}
<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" />
<script src="" charset="utf-8"></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 ='svg');"background", 'green');
var circlesElements = svg.selectAll('circle');
circlesElements.attr("fill", '#aaa');
var withData =;
var enteringSelection = withData.enter();
.attr('cx', 500)
.attr('cy', 500)
.attr('r', 100);
allCirclesElements = svg.selectAll('circle');
var transition = allCirclesElements.transition()
transition.attr('cx', function(circle){return circle.centerX});
transition.attr('cy', function(circle){return circle.centerY});
transition.attr('r', function(circle){return circle.radius});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment