​

//console.log("SVG Shapes defined by Data demo");

​

​

var svg = d3.select("body").append("svg");

svg.attr("width", "500")

svg.attr("height", "500")

​

var ourData = [

  {"a":"mary","b":20},

  {"a":"bob","b":80},

  {"a":"joe","b":150},

  {"a":"indra","b":230},

];

​

console.log(ourData);

​

const ypos = 100;

​

​

ourData.forEach( 

  function(d,i) { //one way

  //(d,i) => { //another way

  svg.append("circle")

    .attr("cx", d.b)

    .attr("cy", ypos)

    .attr("r", i * 10 + 10)

    .attr("fill","red");

  svg.append("text")

    .text( "" + d.a)

    .attr("text-anchor", "middle")

    .attr("alignment-baseline","central")

    .attr("x",d.b)

    .attr("y",ypos)

    .attr("font-family", "helvetica")

    .attr("font-size", "20px")

    .attr("fill", "black")

});

​