D3 first steps

by omegak

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.10/d3.min.js"></script>
<div id="le-graph"></div>

JavaScript

var svg = d3.select('#le-graph')
            .append('svg')
            .attr('width', 800)
            .attr('height', 800)
            .append('g');

svg.append('circle')
   .attr('r', 100)
   .attr('cx', 30)
   .attr('cy', 40)
   .style('fill', '#f1c40f');    
  
svg.append('circle')
   .attr('r', 15)
   .attr('cx', 20)
   .attr('cy', 30)
   .style('fill', '#27aae1');
   
svg.append('circle')
   .attr('r', 10)
   .attr('cx', 80)
   .attr('cy', 30)
   .style('fill', '#27aae1');
   
svg.append('rect')
   .style('fill', '#e74c3c')
   .attr({
     'width': 20,
     'height': 10,
     'x': 40,
     'y': 60
   })
   .transition()
   .duration(1000)
   .attr({
     'width': 20,
     'height': 40,
     'x': 40,
     'y': 60
   });
   
svg.append('text')
   .attr('font-size', '20px')
   .attr('opacity', '0')
   .transition()
   .delay(1000)
   .duration(2000)
   .attr('opacity', '1')
   .attr('x', 150)
   .attr('y', 100)
   .text('woah dude!');