d3 to draw either circle or square

Author: Roydon D'Souza

by Roydon DSouza

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>

JavaScript

var data = [1,2,3,4,6,5,6];
var svg = d3.select("body").append("svg");
svg.attr("height",700);

var shapes = svg.selectAll(".shapes")
    .data(data).enter().append("g");

shapes.append("circle") 
    .attr("cx", function(d, i){ return (i+1) * 25; })
    .attr("cy", 10)
    .attr("r", 10);

shapes.append("rect")
    .attr("x", function(d, i){ return (i+1) * 25; })
    .attr("y", 25)
    .attr("width", 10)
    .attr("height", 10);

shapes.append("text")
    .attr("x", function(d, i){ return (i+1) * 25+11; })
    .attr("y", function(d, i){ return ((i+1) * 25)+46; })
    .attr("fill","#fff")
.attr("font-family", "sans-serif")
.attr("font-size","0.7em")
    .text("A");


shapes.transition()
.attr("transform", "translate(10,23)");

svg.selectAll("circle")
    .data(data).transition()
.attr("transform", "translate(10,23)")
.attr("r",function(d, i){ return (i+1) * 0.45; });

svg.selectAll("rect")
    .data(data).transition()
.attr("transform", "translate(10,23)")
.attr("height",function(d, i){ return (i+1) * 25; });