Interactive verse

Just one of my favourite quotes from The Dhammapada. With some mouseover and mousedown interaction.

<!DOCTYPE HTML>
<html>

<head>
    <title>Verses on The Way</title>
    <script src="https://d3js.org/d3.v3.min.js"></script>
</head>

(function() {

var margin = {top:50, bottom:50, left:100, right:100};
    var width = 900-margin.left-margin.right;
    var height = 500-margin.top-margin.bottom;

var verse = [{"line":"Who will master this earth,"},
                 {"line":"this world of death and radiant beings?"},
                 {"line":"Who will gather a well-taught verse along the way,"},
                 {"line":"as a skilled gardener gathers a flower?"},
                 {"line":"-Buddha"}];

var svg = d3.select("body").append("svg")
                    .attr("width", width + margin.left + margin.right)
                    .attr("height", height + margin.top + margin.bottom)
                .append("g")
                    .attr("transform", "translate(" + margin.left + "," + margin.top*2 + ")");

var text = svg.selectAll("text")
                .data(verse)
                    .enter().append("text")
                    .attr("x", "0")
                    .attr("y", function(d,i) { return i*margin.top; })
                .text(function(d) { return d.line; })
                    .attr("font-family", "monospace")
                    .attr("font-size", margin.top/2 + "px")
                    .attr("fill", "#FFF0F5");

text
        .on("mouseover", function() {
            d3.select(this).style("fill", "black"); })
        .on("mouseout", function() {
            d3.select(this).transition().duration(800).style("fill", "#FFF0F5"); })
        .on("mousedown", function() {
            d3.select(this).style("font-weight", "bold"); });

})();

</script>
</body>
</html>

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

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