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>

<svg width="4cm" height="4cm" viewBox="0 0 400 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <title>Example triangle01- simple example of a 'path'</title>
  <desc>A path that draws a triangle</desc>
  <rect x="1" y="1" width="398" height="398"
        fill="none" stroke="blue" />
  <path d="M 100 100 L 300 100 L 200 300 z"
        fill="red" stroke="blue" stroke-width="3" />
</svg>

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 doFont = function(d) {return d + 'px'};
var doColor = function(d, i) {return i % 2 ? "red":"green";};

var p = d3.select('body').selectAll('p')
  .data([12, 18, 24, 48])
  .style('font-size', doFont)
  .style("color", doColor);
  
p.enter().append('p').text(function(d) {return "new" + d})
  .style('font-size', doFont)
  .style("color", doColor);

p.exit().remove()


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