Assignment4 ScatterPlot Trivariate

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title> D3: A Scatterplot with length and width for Different Cars</title>
		<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
		<style type="text/css"></style>
	</head>
	<body>
		<script type="text/javascript">
			var title = "Length and Width on Selected Cars";

var margin = {top:5, right:5, bottom:100, left:100};
			var w_full = 1200;
			var h_full = 600;

var w = w_full - margin.right - margin.left;
			var h = h_full - margin.top - margin.bottom;

var x = d3.scaleLinear()
				  	  .range([0,w]);

var y = d3.scaleLinear()
				  	  .range([h,0]);

var svg = d3.select("body")
					.append("svg")
					.attr("width",w_full)
					.attr("height",50)
					.append("g")
					.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

svg.append("text")
		       .text(title)
		       .attr("x",w_full/2)
		   	   .attr("y",25)
		       .style("text-anchor","middle")
		       .style("fill","black")
		       .style("font-size",20);
			// Set up a svg on the top to put title

d3.csv("cars.csv", function(error, data){
				if(error) throw error;

data.forEach(function(d){
					d.Height = +d.Height;
					d.Hybrid = +d.Hybrid;
					d.Length = +d.Length;
					d.Model = d.Model;
					d.Width = +d.Width;
					d.DoorNum = +d.DoorNum;
				});
				// Import data

console.log(data);

x.domain([d3.min(data, function(d){return d.Length;})-10, d3.max(data, function(d){return d.Length;})+60]);
				y.domain([d3.min(data, function(d){return d.Length;})-20, d3.max(data, function(d){return d.Width;})+20]);

svg = d3.select('body').append('svg')
						.attr("width",w_full)
						.attr("height",h_full)
						.append("g")
						.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

var xAxis = d3.axisBottom(x);
				var yAxis = d3.axisLeft(y);

var xAxisEle = svg.append('g')
		   				  .classed('x axis',true)
		   				  .attr('transform','translate(0,'+h+')')
		   				  .call(xAxis);
				// Append x-axis and its labels

xAxisEle.append("text")
						.attr("x",w_full/2)
						.attr("y",100)
						.style("text-anchor","middle")
						.style("fill","black")
						.attr("dy","-2.5em")
						.style("font-size",12)
						.text("Car Length");

var yAxisEle = svg.append("g")
						  		  .classed("y axis",true)
						  		  .call(yAxis);

var yText = yAxisEle.append("text")
							.attr('transform', 'rotate(-90)translate(-' + h/2 + ',0)')
							.style("text-anchor","middle")
							.style("fill","black")
							.attr("dy","-2.5em")
							.style("font-size",12)
							.text("Car Width");
				// Add y-axis label

var dotPlotter = svg.append("g");

dotPlotter.selectAll("circle")
				   .data(data)
				   .enter()
				   .append("circle")
				   .attr("cx", function(d){return x(d.Length);})
				   .attr("cy", function(d){return y(d.Width);})
				   .attr("r", 5)
				   .attr("fill", function(d){
				   	if(d.DoorNum == 2)
				   		return "red";
				   	else if(d.DoorNum ==4)
				   		return "blue";
				   	else
				   		return "teel";
				   	});
				// Plot data

dotPlotter.selectAll("text")
				   .data(data)
				   .enter()
				   .append("text")
				   .text(function(d){return d.Model;})
				   .attr("x", function(d){return x(d.Length);})
				   .attr("y", function(d){return y(d.Width)-10;})
				   .attr("fill","red")
				   .attr("font-size","12px");

// Below is the code for legend
				var svg = d3.select("body")
					.append("svg")
					.attr("width",w_full)
					.attr("height",200)
					.append("g")
					.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

svg.append("text")
		       	   .text("Legends:")
		       	   .attr("x",100)
		   	   	   .attr("y",10)
		       	   .style("text-anchor","middle")
		       	   .style("fill","black")
		       	   .style("font-size",12);

svg.append("circle")
		       	   .attr("cx",105)
		       	   .attr("cy",26)
		       	   .attr("r",5)
		       	   .attr("width",10)
		       	   .attr("height",10)
		       	   .attr("fill","red");

svg.append("text")
		       	   .text("2 Doors")
		       	   .attr("x",135)
		   	   	   .attr("y",30)
		       	   .style("text-anchor","middle")
		       	   .style("fill","black")
		       	   .style("font-size",12);

svg.append("circle")
		       	   .attr("cx",190)
		       	   .attr("cy",26)
		       	   .attr("r",5)
		       	   .attr("width",10)
		       	   .attr("height",10)
		       	   .attr("fill","blue");

svg.append("text")
		       	   .text("4 Doors")
		       	   .attr("x",220)
		   	   	   .attr("y",30)
		       	   .style("text-anchor","middle")
		       	   .style("fill","black")
		       	   .style("font-size",12);

svg.append("circle")
		       	   .attr("cx",265)
		       	   .attr("cy",26)
		       	   .attr("r",5)
		       	   .attr("width",10)
		       	   .attr("height",10)
		       	   .attr("fill","teel");

svg.append("text")
		       	   .text("More than 4 Doors")
		       	   .attr("x",320)
		   	   	   .attr("y",30)
		       	   .style("text-anchor","middle")
		       	   .style("fill","black")
		       	   .style("font-size",12);

});

</script>
	</body>

</html>

https://d3js.org/d3.v4.min.js