d3 | I am

I agree with Whitman: “I exist as I am, that is enough"

The rest is additional :)

<!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>

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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js