Assignment4 BarChart

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title> D3: A Bar Chart with MPG 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">
		// Reference: https://www.pshrmn.com/tutorials/d3/bar-charts/
		var title = "City MPG 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.scaleBand()
				  .range([0,w])
			      .paddingInner(0.1);

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",16);
		// Set up a svg on the top to put title

dataset = d3.csv("https://gist.githubusercontent.com/jacquessham/d7a3626991f4d540162805a52eb1bf30/raw/fc26e530a6df6792d0503d176e13f77091c38567/cars.csv", function(error, data){
			if(error) throw error;

data.forEach(function(d) {
				//cars = data;
				d.CityMpg = +d.CityMpg;
				d.Model = d.Model; 
			});

console.log(data);

x.domain(data.map(function(d){return d.Model;}));
		y.domain([0, d3.max(data, function(d){return d.CityMpg;})]);

svg = d3.select('body').append('svg')
				.attr("width",w_full)
				.attr("height",h_full)
				.append("g")
				.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
		// Create a second svg for putting graphs

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 Make and Model");

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("City MPG");
		// Append y-axis and its labels

var barHolder = svg.append("g")
						   .classed("bar-holder",true);

barHolder.selectAll("text")
				 .data(data)
				 .enter()
				 .append("text")
				 .attr("x", function(d,i){return x(d.Model)+50; })
				 .attr("y",function(d){return y(d.CityMpg)+20; })
				 .text(function(d){return d.CityMpg;})
				 .attr("fill","white");
		// Add labels for each bar

});
		
		
		</script>
	</body>

</html>

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