D3 Playground

by michaeldausmann

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<p>i'm a para</p>
<p>I'm also a para</p>
<p>i'm the third para</p>
<p>forth</p>
<p>fifth</p>
<p>sixth</p>

JavaScript

/* d3.selectAll("p").style("color", "red"); */


/* d3.selectAll("p").style("color", function() {
  return "hsl(" + Math.random() * 360 + ",100%,50%)";
}); */

/* d3.selectAll("p").style("color", function(d, i) {
  return i % 2 ? "red" : "green";
}); */

var p = d3.select('body').selectAll('p')
  .data([12, 18, 24, 48])
  .style('font-size', function(d) {return d + 'px'})
  .style("color", function(d, i) {return i % 2 ? "red":"green";});
  
p.enter().append('p').text(function(d) {return "new" + d})
  .style('font-size', function(d) {return d + 'px'})
  .style("color", function(d, i) {return i % 2 ? "red":"green";});

//p.exit().remove()


    
d3.select("body").style("background-color", "white");