Exercise.js

var svgBox = d3.select("body")
			   .append("svg")
			   .attr("width", 1000)
			   .attr("height", 1000);

//Draw circles driven by data: let the data points be the radius
var circleData=[40, 20, 10];
var circles = svgBox.selectAll("circle")
					.data(circleData)
					.enter()
					.append("circle")
					.attr("cx", function(d, i) {
						return (i + 1) * 80;
					})
					.attr("cy", 80)
					.attr("r", function(d) {
						return d;
					})
					.style("fill", "brown");

//Draw ellipse drvien by data, let the data points be rx and set ry as 10 constantly.
var ellipseData=[5,11,18];
var ellips = svgBox.selectAll("ellipse")
				   .data(ellipseData)
				   .enter()
				   .append("ellipse")
				   .attr("cx", function(d, i) {
				   		return (i + 1) * 80;
				   })
				   .attr("cy", 150)
				   .attr("rx", function(d) {
				   		return d;
				   })
				   .attr("ry", 10);

//Draw rectangles driven dy data, let the data points drive width and set height to be 20.
var rectData=[7,13,22];
var rectangle = svgBox.selectAll("rect")
				   .data(rectData)
				   .enter()
				   .append("rect")
				   .attr("x", function(d, i) {
				   		return (i + 1) * 80;
				   })
				   .attr("y", 200)
				   .attr("width", function(d) {
				   		return d;
				   })
				   .attr("height", 20);


//Draw curves driven by data
var interpolateTypes = [d3.curveLinear, d3.curveNatural,d3.curveStep, d3.ccurveBasis, d3.curveBundle,d3.curveCardinal];
var lineData = [
  { x: 1,   y: 5},
  { x: 20,  y: 20},
  { x: 40,  y: 10},
  { x: 60,  y: 40},
  { x: 80,  y: 5},
  { x: 100, y: 60}
];

var newX = 400, newY = 50,
	scaleX = 3, scaleY = 3;

var drawLine = d3.line()
				 .x(function (d, i) {
				 	return d.x*2+ newX;
				 })
				 .y(function (d, i) {
				 	return d.y*2 + newY;
				 })
				 .curve(interpolateTypes[1]);

var aPath = svgBox.append("path")
				  .attr("d", drawLine(lineData))
				  .style("fill", "none")
				  .style("stroke", "pink");