D3 - SImple Circle with mouse over and out event

Hard coded size and colour. Just learning....

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="viz"/>

JavaScript

//Create a sized SVG surface within viz:
    var sampleSVG = d3.select("#viz")
        .append("svg")
        .attr("width", 150)
        .attr("height", 100);    
 
    //Add to the svg surface a circle, with size position, 
    var circle = 
        sampleSVG.append("square")
        .style("stroke", "gray")
        .style("fill", "white")
        .attr("r", 40)
        .attr("cx", 50)
        .attr("cy", 50)
 
    //give the object some behaviour:
    circle.on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
        .on("mouseout", function(){d3.select(this).style("fill", "white");});