suneric1 · February 15, 2016 21:53
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <!-- A modified example from Scott Murray's Knight d3 course. -->

 <html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<title>Formatting Ticks</title>
 		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
 		<style type="text/css">

 			body {
 				background-color: white;
 				font-family: Helvetica, Arial, sans-serif;
 			}

 			h1 {
 				font-size: 24px;
 				margin: 0;
 			}

 			p {
 				font-size: 14px;
 				margin: 10px 0 0 0;
 			}

 			svg {
 				background-color: white;
 			}

 			circle.dots {
 				fill: steelblue;
                transition: 0.2s;
 			}

 			circle:hover {
 				fill: orange;
                stroke: rgba(255, 165, 0, 0.5);
                stroke-width: 6px;
 			}

 			.axis path,
 			.axis line {
 				fill: none;
 				stroke: black;
 				shape-rendering: crispEdges;
 			}

 			.axis text {
 				font-family: sans-serif;
 				font-size: 11px;
 			}

 		</style>
 	</head>
 	<body>

 		<h1>Audi Sales In 2015</h1>

 		<p>Generally, cheaper models of a car manufacturer would contribute more to its sales, while there are often lower sales for expensive models.</p>
 		<p></p>

 		<script type="text/javascript">


 		// Scott is "cheating" and not using the full pattern for margins.
 		// It is better to use the object style with margin.top, margin.right, etc.

 			var fullWidth = 600;
 			var fullHeight = 400;

 			var margin = {top:20, left:80, right:50, bottom: 50};  //Top, right, bottom, left

 			// what do you need to do to make the width and height for the chart?
 			var height = fullHeight - margin.top - margin.bottom // minus what?
 			var width = fullWidth - margin.left - margin.right // minus what?

 			var dotRadius = 5; // fix this to a nice value.

 			// fill in the margin values here.
 			var xScale = d3.scale.linear()
 								.range([ 0, width ]);

 			// top to bottom:
 			var yScale = d3.scale.linear()
 								.range([ height, 0 ]);

 			//  Custom tick count if you want it.
 			// Create your axes here.
 			var xAxis = d3.svg.axis()
 							.scale(xScale)
 							.orient("bottom")
 							.ticks(8);  // fix this to a good number of ticks for your scale later.

 			var yAxis = d3.svg.axis()
 							.scale(yScale)
 							.orient("left");

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


 			d3.csv("sales_data.csv", function(data) {

 				// look at the data file and pick 2 columns to contrast with each other.
                var audi_data = [];

 				data.forEach(function(d, i){
 					// now we add another data object value, a calculated value.
                    if(i>=9)
                        audi_data.push([d.model, d.salesIn2014, d.salesIn2015, d.startingPrice]);
                    
 				});
                
 				xScale.domain(
 					d3.extent(audi_data, function(d) {
                        return +d[3];
 						// pick a data value to plot on x axis
 					}));

 				yScale.domain(
 					d3.extent(audi_data, function(d) {
                        return +d[2];
 						// pick a data value to plot for y axis
 					}));

 				var circles = svg.selectAll("circle")
                                .data(audi_data)
                                .enter()
                                .append("circle")
                                .classed("dots", true);
 								// fill in the rest of the data, enter, append here.

 				// add a class to the circles - ".dots".

 				// Circles in SVG have cx, cy, and r attributes. x location, y location, radius.

 				circles.attr("cx", function(d) {
                        return xScale(+d[3]);
 						// return the value to use for your x scale here
 					})
 					.attr("cy", function(d) {
                        return yScale(+d[2]);
 						// return the value to use for your y scale here
 					})
 					.attr("r", dotRadius)  // you might want to increase your dotRadius
 					.append("title")
 					.text(function(d) {
                        return d[2];
 						// fill in a text string here for your cheap tooltip
 					});

 				// fix these translates so they use your margin and height width as needed
 				svg.append("g")
 					.attr("class", "x axis")
 					.attr("transform", "translate(0," + height + ")")
 					.call(xAxis);

 				svg.append("g")
 					.attr("class", "y axis")
 					.call(yAxis);
                
                svg.append("text")
                    .attr("dy",45)
                    .attr("transform","translate(" + width/2 + "," + height + ")")
                    .classed("xLabel",true)
                    .style("text-anchor","middle")
                    .text("Starting Price");
                
                svg.append("text")
                    //.attr("x", 0 - height/2)
                    //.attr("y", 0)
                    .attr("dy",-60)
                    .attr("transform","rotate(-90) translate(" + (-height/2) + "," + "0)")
                    .classed("yLabel",true)
                    .style("text-anchor","middle")
                    .text("Sales In 2015");
 			});


 		</script>

 	</body>
 </html>
diff --git a/sales_data.csv b/sales_data.csv
	<!DOCTYPE html>
	<!-- A modified example from Scott Murray's Knight d3 course. -->

	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Formatting Ticks</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<style type="text/css">

	body {
	background-color: white;
	font-family: Helvetica, Arial, sans-serif;
	}

	h1 {
	font-size: 24px;
	margin: 0;
	}

	p {
	font-size: 14px;
	margin: 10px 0 0 0;
	}

	svg {
	background-color: white;
	}

	circle.dots {
	fill: steelblue;
	transition: 0.2s;
	}

	circle:hover {
	fill: orange;
	stroke: rgba(255, 165, 0, 0.5);
	stroke-width: 6px;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}

	</style>
	</head>
	<body>

	<h1>Audi Sales In 2015</h1>

	<p>Generally, cheaper models of a car manufacturer would contribute more to its sales, while there are often lower sales for expensive models.</p>
	<p></p>

	<script type="text/javascript">


	// Scott is "cheating" and not using the full pattern for margins.
	// It is better to use the object style with margin.top, margin.right, etc.

	var fullWidth = 600;
	var fullHeight = 400;

	var margin = {top:20, left:80, right:50, bottom: 50}; //Top, right, bottom, left

	// what do you need to do to make the width and height for the chart?
	var height = fullHeight - margin.top - margin.bottom // minus what?
	var width = fullWidth - margin.left - margin.right // minus what?

	var dotRadius = 5; // fix this to a nice value.

	// fill in the margin values here.
	var xScale = d3.scale.linear()
	.range([ 0, width ]);

	// top to bottom:
	var yScale = d3.scale.linear()
	.range([ height, 0 ]);

	// Custom tick count if you want it.
	// Create your axes here.
	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.ticks(8); // fix this to a good number of ticks for your scale later.

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left");

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


	d3.csv("sales_data.csv", function(data) {

	// look at the data file and pick 2 columns to contrast with each other.
	var audi_data = [];

	data.forEach(function(d, i){
	// now we add another data object value, a calculated value.
	if(i>=9)
	audi_data.push([d.model, d.salesIn2014, d.salesIn2015, d.startingPrice]);

	});

	xScale.domain(
	d3.extent(audi_data, function(d) {
	return +d[3];
	// pick a data value to plot on x axis
	}));

	yScale.domain(
	d3.extent(audi_data, function(d) {
	return +d[2];
	// pick a data value to plot for y axis
	}));

	var circles = svg.selectAll("circle")
	.data(audi_data)
	.enter()
	.append("circle")
	.classed("dots", true);
	// fill in the rest of the data, enter, append here.

	// add a class to the circles - ".dots".

	// Circles in SVG have cx, cy, and r attributes. x location, y location, radius.

	circles.attr("cx", function(d) {
	return xScale(+d[3]);
	// return the value to use for your x scale here
	})
	.attr("cy", function(d) {
	return yScale(+d[2]);
	// return the value to use for your y scale here
	})
	.attr("r", dotRadius) // you might want to increase your dotRadius
	.append("title")
	.text(function(d) {
	return d[2];
	// fill in a text string here for your cheap tooltip
	});

	// fix these translates so they use your margin and height width as needed
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis);

	svg.append("text")
	.attr("dy",45)
	.attr("transform","translate(" + width/2 + "," + height + ")")
	.classed("xLabel",true)
	.style("text-anchor","middle")
	.text("Starting Price");

	svg.append("text")
	//.attr("x", 0 - height/2)
	//.attr("y", 0)
	.attr("dy",-60)
	.attr("transform","rotate(-90) translate(" + (-height/2) + "," + "0)")
	.classed("yLabel",true)
	.style("text-anchor","middle")
	.text("Sales In 2015");
	});


	</script>

	</body>
	</html>
model	salesIn2014	salesIn2015	startingPrice
1/2 Series	6621	10877	32850
3 Series	87451	89265	33150
4 Series	35583	40481	41650
5 Series	47187	41177	50200
6 Series	7757	6685	77300
7 Series	8648	8026	81300
X1	20217	12651	34800
X3	31029	28798	38950
X5	40933	48747	53900
A3	19560	32732	30900
A4	30796	25841	35900
A5	15328	11934	40500
A6	20996	20394	46200
A7	7609	6880	68300
A8	5172	4566	81500
Q3	2753	11728	33700
Q5	37869	45949	40900
Q7	16589	17806	54800