D3 Examples - d3

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>I am</title> 
  <meta name="author" content="Sundar Singh | eesur.com">
  
  <style>
    @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400,600);
    
    body {
      font-family: "Source Code Pro", Consolas, monaco, monospace;
      line-height: 1.5;
      font-weight: 400;
      background-color: #130C0E;
      padding: 20px;
    }
​
    text {
      font-size: 48px;
      fill: #7AC143;
    }
  </style>
​
  <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
</head>
<body>
​
<script>
​
var words = ["an artist", "a dad", "a coder", "beautiful", "full of multitudes", "full of contradictions", "paradoxical", "a brother", "a designer", "lover of dark chocolate", "a poor spller", "a gong player", "a maker", "neither young or old", "that", "a creative coder", "a lover of percussion", "a husband", "a friend", "a son", "a hobbyist illustrator", "always learning", "a beginner at all things worthwhile"];  
var randomWord = function() {
  var x = "I am " + words[Math.floor(Math.random() * words.length)];
  return x;
};
​
var w = 960,
    h = 500;
​
var svg = d3.select("body").append("svg")
    .attr("width", w)
    .attr("height", h)
  .append("g")
    .attr("transform", "translate(32," + (h / 2) + ")");
​
function update(data) {
​
  // Data join
  var text = svg.selectAll("text")
      .data(data);
​
  // ENTER
  text.enter().append("text")
      .attr("x", function(d, i) { return i * 32; })
      .attr("dy", ".35em");
​
  // ENTER + UPDATE
  text.text(function(d) { return d; });
​
  // EXIT
  // Remove old element/word 
  text.exit().remove();
}
​
// Display the function
// update(randomWord);
​
setInterval(function() {
  update(randomWord);
}, 512);
​
</script>
​
</body>
</html>
​
    