​

console.log("hello cs24! - SVG Shape Demo");

​

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

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

​

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

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

//svg.style("background-color", "rgb(220,220,255)")

​

svg.append("circle")

  .attr("cx", 100)

  .attr("cy",100)

  .attr("r",50)

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

​

​

svg.append("rect")

  .attr("x",30)

  .attr("y",30)

  .attr("rx",7)

  .attr("ry",7)

  .attr("width",50)

  .attr("height",50)

  .attr("stroke","green")

  .attr("stroke-width",6)

  .attr("opacity",0.5)

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

​

​

​

svg.append("text")

  .text("hello")

  .attr("x",80)

  .attr("y",80)

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

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

  .attr("fill", "black")

  .attr("transform","rotate(300 80,80)");

​

svg.append("path")

  .attr("d", "M 100 100 q 50 180 100 0")

  .attr("stroke-width", 5)

  .attr("stroke", "green")

  .attr("fill", "orange")

  .attr("opacity",0.5)

​

​