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(http://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="http://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> |