bit.ly/1pFk8l9
<!DOCTYPE html>
<html>
<head>
<title>D3.js Demo</title>
<style> /* CSS goes here */ </style>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<p>D3.js is awesome!</p>
<p>This is another paragraph.</p>
<script> /* JS goes here */ </script>
</body>
</html>
d3.selectAll('p').style('color', 'green');
d3.selectAll('p').style('color', function(){
return 'rgb( 0, '+ Math.floor(Math.random() * 360) + ', 0)';
});
d3.selectAll('p').data([3, 42, 69, 101])
.enter(), .update(), .exit()
var p = d3.selectAll('p') .data([3, 42, 69, 101]) .style('color', 'green'); p.enter() .append('p') .text(function(d, i) { return 'My '+ i + 'th favorite number is '+ d; });
d3.selectAll('p') .transition() .duration(3000) .delay( function(d, i) { return i*3000; }) .style('font-size', '40px');
<svg width="200" height="200">
<rect x="50" y="5" width="20" height="40" rx="3" ry="3" />
<line x1="5" x2="90" y1="10" y2="90" stroke-width="3" stroke="green" />
<g stroke="purple" fill="blue" stroke-width="5" >
<circle cx="150" cy="30" r="40" />
<circle cx="150" cy="60" r="40" />
<circle cx="150" cy="90" r="40" />
</g>
</svg>
var w = 500,
h = 100;
var svg = d3.select('body')
.append('svg')
.attr('width', w)
.attr('height', h);
var sleepData = [ 8, 7, 8, 8, 9, 12, 9 ];
svg.selectAll('rect') .data(sleepData) .enter() .append('rect') .attr('x', function(d, i) { return i * (w / sleepData.length); }) .attr('y', function(d) { return h - (d * 9); }) .attr('width', w / sleepData.length - 2) .attr('height', function(d) { return d * 9; });