showingmyworking/OrdersPerYear.csv

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>

body {
  font: 10px sans-serif;
}

.bar {
  fill: #2185C5;
}

.bar:hover {
  fill: #FF7F66;
}

.axis--x path {
  display: none;
}

.toolTip {
  position: absolute;
  display: none;
  min-width: 80px;
  height: auto;
  background: none repeat scroll 0 0 #ffffff;
  border: 1px solid #2185C5;
  padding: 14px;
  text-align: center;
}

</style>
<svg width="350" height="500"></svg>
<body>


<script type="text/javascript">

//define chart margins
	var svg = d3.select("svg"),
		margin = {top: 50, right: 50, bottom: 40, left: 125},
		width = svg.attr("width") - margin.left - margin.right,
		height = svg.attr("height") - margin.top - margin.bottom,
		g = svg.append("g").attr("transform", "translate(" + margin.left + "," +margin.top + ")");

var tooltip = d3.select("body").append("div").attr("class", "toolTip");

	//define scales
	var	x = d3.scaleLinear().rangeRound([0, width]),
		y = d3.scaleBand().rangeRound([height, 0]).padding(0.2);

	//load data
	d3.csv("OrdersPerYear.csv", function(d){
		d.Orders = +d.Orders;
		return d;
	}, function (error, data) {
		if(error) throw error;

	//define domains based on data
	x.domain([0, d3.max(data, function(d) { return d.Orders; })]);
	y.domain(data.map(function(d) { return d.President; }));

	//append x axis to svg
	g.append("g")
		.attr("class", "x-axis")
		.attr("transform", "translate(0," + height + ")")
		.call(d3.axisBottom(x) .ticks(5))
		.append("text")
		.attr("y", 30)
		.attr("x", 650)
		.attr("dy", "0.5em")
		.style("fill", "black")
		.text("Number of Orders per Year");

	//append y axis to svg
	g.append("g")
		.attr("class", "y-axis")
		.call(d3.axisLeft(y));

	//append rects to svg based on data
	g.selectAll(".bar")
		.data(data)
		.enter()
		.append("rect")
		.attr("class", "bar")
		.attr("x", 0)
		.attr("y", function(d) { return y(d.President); })
		.attr("height", y.bandwidth())
		.attr("width", function(d) { return x(d.Orders); })
    .on("mouseover", function(d){
            tooltip
              .style("left", d3.event.pageX - 50 + "px")
              .style("top", d3.event.pageY - 70 + "px")
              .style("display", "inline-block")
              .html((d.Orders) + "<br>" + (d.President));
        })
    		.on("mouseout", function(d){ tooltip.style("display", "none");});
	});

	//define chart title to svg
	var title = svg.append("g")
		.attr("class", "title");
	title.append("text")
		.attr("x", (width/1.5))
			.attr("y", 40)
			.attr("text-anchor", "middle")
			.style("font", "20px sans-serif")
			.text("Orders per year");

	//append source data to svg
	var source = svg.append("g")
		.attr("class", "source");
	source.append("text")
		.attr("x", 10)
		.attr("y", 495)
		.attr("text-anchor", "left")
		.style("font", "12px sans-serif")
		.text("Source: The American Presidency Project");
	</script>
</body>
</html>

</script>

## OrdersPerYear.csv

          
            President
            Orders

            
              George Washington
              1

            
              John Adams
              0.3

            
              Thomas Jefferson
              0.5

            
              James Madison
              0.1

            
              James Monroe
              0.1

            
              John Quincy Adams
              0.8

            
              Andrew Jackson
              1.5

            
              Martin van Buren
              1.3

            
              William Henry Harrison
              0

            
              John Tyler
              4.3

            
              James K. Polk
              4.5

            
              Zachary Taylor
              3.7

            
              Millard Fillmore
              4.5

            
              Franklin Pierce
              8.8

            
              James Buchanan
              4

            
              Abraham Lincoln
              11.7

            
              Andrew Johnson
              20.3

            
              Ulysses S. Grant
              27.1

            
              Rutherford B. Hayes
              23

            
              James Garfield
              11.1

            
              Chester Arthur
              27.7

            
              Grover Cleveland - I
              28.3

            
              Benjamin Harrison
              35.8

            
              Grover Cleveland - II
              35

            
              William McKinley
              40.8

            
              Theodore Roosevelt
              144.7

            
              William Howard Taft
              181

            
              Woodrow Wilson
              225.4

            
              Warren G. Harding
              216.6

            
              Calvin Coolidge
              215.2

            
              Herbert Hoover
              242

            
              Franklin D. Roosevelt
              290.8

            
              Harry S. Truman
              116.7

            
              Dwight D. Eisenhower
              60.5

            
              John F. Kennedy
              75.4

            
              Lyndon B. Johnson
              63

            
              Richard Nixon
              62.2

            
              Gerald Ford
              69

            
              Jimmy Carter
              80

            
              Ronald Reagan
              47.6

            
              George H. W. Bush
              41.5

            
              Bill Clinton
              83.5

            
              George W. Bush
              63.4

            
              Barack Obama
              76

            
              Donald Trump
              164.3
	<!DOCTYPE html>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>

	body {
	font: 10px sans-serif;
	}

	.bar {
	fill: #2185C5;
	}

	.bar:hover {
	fill: #FF7F66;
	}

	.axis--x path {
	display: none;
	}

	.toolTip {
	position: absolute;
	display: none;
	min-width: 80px;
	height: auto;
	background: none repeat scroll 0 0 #ffffff;
	border: 1px solid #2185C5;
	padding: 14px;
	text-align: center;
	}

	</style>
	<svg width="350" height="500"></svg>
	<body>


	<script type="text/javascript">

	//define chart margins
	var svg = d3.select("svg"),
	margin = {top: 50, right: 50, bottom: 40, left: 125},
	width = svg.attr("width") - margin.left - margin.right,
	height = svg.attr("height") - margin.top - margin.bottom,
	g = svg.append("g").attr("transform", "translate(" + margin.left + "," +margin.top + ")");

	var tooltip = d3.select("body").append("div").attr("class", "toolTip");

	//define scales
	var x = d3.scaleLinear().rangeRound([0, width]),
	y = d3.scaleBand().rangeRound([height, 0]).padding(0.2);

	//load data
	d3.csv("OrdersPerYear.csv", function(d){
	d.Orders = +d.Orders;
	return d;
	}, function (error, data) {
	if(error) throw error;

	//define domains based on data
	x.domain([0, d3.max(data, function(d) { return d.Orders; })]);
	y.domain(data.map(function(d) { return d.President; }));

	//append x axis to svg
	g.append("g")
	.attr("class", "x-axis")
	.attr("transform", "translate(0," + height + ")")
	.call(d3.axisBottom(x) .ticks(5))
	.append("text")
	.attr("y", 30)
	.attr("x", 650)
	.attr("dy", "0.5em")
	.style("fill", "black")
	.text("Number of Orders per Year");

	//append y axis to svg
	g.append("g")
	.attr("class", "y-axis")
	.call(d3.axisLeft(y));

	//append rects to svg based on data
	g.selectAll(".bar")
	.data(data)
	.enter()
	.append("rect")
	.attr("class", "bar")
	.attr("x", 0)
	.attr("y", function(d) { return y(d.President); })
	.attr("height", y.bandwidth())
	.attr("width", function(d) { return x(d.Orders); })
	.on("mouseover", function(d){
	tooltip
	.style("left", d3.event.pageX - 50 + "px")
	.style("top", d3.event.pageY - 70 + "px")
	.style("display", "inline-block")
	.html((d.Orders) + "<br>" + (d.President));
	})
	.on("mouseout", function(d){ tooltip.style("display", "none");});
	});

	//define chart title to svg
	var title = svg.append("g")
	.attr("class", "title");
	title.append("text")
	.attr("x", (width/1.5))
	.attr("y", 40)
	.attr("text-anchor", "middle")
	.style("font", "20px sans-serif")
	.text("Orders per year");

	//append source data to svg
	var source = svg.append("g")
	.attr("class", "source");
	source.append("text")
	.attr("x", 10)
	.attr("y", 495)
	.attr("text-anchor", "left")
	.style("font", "12px sans-serif")
	.text("Source: The American Presidency Project");
	</script>
	</body>
	</html>

	</script>
	President	Orders
	George Washington	1
	John Adams	0.3
	Thomas Jefferson	0.5
	James Madison	0.1
	James Monroe	0.1
	John Quincy Adams	0.8
	Andrew Jackson	1.5
	Martin van Buren	1.3
	William Henry Harrison	0
	John Tyler	4.3
	James K. Polk	4.5
	Zachary Taylor	3.7
	Millard Fillmore	4.5
	Franklin Pierce	8.8
	James Buchanan	4
	Abraham Lincoln	11.7
	Andrew Johnson	20.3
	Ulysses S. Grant	27.1
	Rutherford B. Hayes	23
	James Garfield	11.1
	Chester Arthur	27.7
	Grover Cleveland - I	28.3
	Benjamin Harrison	35.8
	Grover Cleveland - II	35
	William McKinley	40.8
	Theodore Roosevelt	144.7
	William Howard Taft	181
	Woodrow Wilson	225.4
	Warren G. Harding	216.6
	Calvin Coolidge	215.2
	Herbert Hoover	242
	Franklin D. Roosevelt	290.8
	Harry S. Truman	116.7
	Dwight D. Eisenhower	60.5
	John F. Kennedy	75.4
	Lyndon B. Johnson	63
	Richard Nixon	62.2
	Gerald Ford	69
	Jimmy Carter	80
	Ronald Reagan	47.6
	George H. W. Bush	41.5
	Bill Clinton	83.5
	George W. Bush	63.4
	Barack Obama	76
	Donald Trump	164.3