Learning d3

by polm23

HTML

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
    </head>
    <body>
        <div id="viz"></div>
        
    </body>
</html>

JavaScript

var data = [
    2, 10, 23, 42, 105
];



var vis = d3.select("body")
    .append("svg:svg")
    .attr("width", 400)
    .attr("height", 200);

vis.selectAll("circle")
    .data(data)
    .enter()
    .append("svg:circle")
    .style("stroke","black")
    .style("fill","purple")
    .style("fill-opacity", .5)
    .attr("r", 20)
    .attr("cy", 100)
    .attr("cx", function(d) {
    return 40 + (d*2);
})
    .on("mouseover", function(){d3.select(this).style("fill", "red");})
    .on("mouseout", function(){d3.select(this).style("fill", "purple");}); 

vis.selectAll("image")
    .data(data)
    .enter()
    .append("svg:image")
    .attr("xlink:href","http://dampfkraft.com/favicon.ico")
    .attr("width", 16)
    .attr("height", 16)
    .attr("y", 100)
    .attr("x", function(d) {
    return 40 + (d*2);
});