index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link type="text/css" rel="stylesheet" href="style.css"/>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
</head>
<body>
    <div id="viz"></div>
    <script type="text/javascript">

    var myCircle = d3.select("#viz")
        .append("svg")
        .attr("width", 1000)
        .attr("height", 1000);

    myCircle
		.append("circle")
        .style("stroke", "black")
        .style("fill", "white")
        .attr("r", 40)
        .attr("cx", 50)
        .attr("cy", 50)
        .on("mouseover", function(){d3.select(this).style("fill", "mediumvioletred");})
        .on("mouseout", function(){d3.select(this).style("fill", "aliceblue");});

/*
	button.on("click", function() {
		  myCircle
			.transition()
			.delay(250)
			.attr("x", 320)
			.ease("elastic");
		})
*/
    </script>
</body>
</html>

## style.css
@import url("//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700");

body {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
}

.d3-unconf {
  color: #222;
  font-size: 44px;
  font-style: normal;
  font-weight: 300;
  text-rendering: optimizelegibility;
}