veproza/vilnius-d3

## vilnius-d3
<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>
	<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>