Skip to content

Instantly share code, notes, and snippets.

@leondutoit
Last active December 19, 2015 07:19
Show Gist options
  • Save leondutoit/5917925 to your computer and use it in GitHub Desktop.
Save leondutoit/5917925 to your computer and use it in GitHub Desktop.
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="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script type="text/javascript">
(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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment