D3 starting point (+JQuery)

A starting point to clone and get investigating quickly.

by Sky Sigal

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", 100)
        .attr("height", 100);    
 
    //Add to the svg surface a circle, with size position, 
    var circle = 
        sampleSVG.append("circle")
        .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");});