var width = 500; var height = 500; var svg = d3.select('body') .append('svg') .attr("width", width) .attr("height", height) //1. rect // // // // svg.append("rect") // .attr("x", 100) // .attr("y", 100) // .attr("width", 100) // .attr("height", 200) //2. line // // // // svg.append('line') // .attr('x1', 0) // .attr('x2', 400) // .attr('y1', 300) // .attr('y2', 100) // .attr('stroke', '#000000') //3. circle - try on your own! //4. ellipse - try on your own! //5. text - try on your own! //6. Circle over text // // // // Text Goes Here // // var group = svg.append('g') var circle = group.append('circle') .attr('cx', 250) .attr('cy', 250) .attr('r', 100) .attr('fill', 'hotpink') .style('opacity', 0.8) group.append("text") .attr("x", 175) .attr("y", 200) .attr("stroke", "#fff") .attr("font-family", "Impact, sans-serif") .attr("font-size", '24px') .attr("fill", "red") .text("This is a circle!")