showingmyworking/Approval.csv

## Approval.csv

          
            President
            Rating

            
              Harry S. Truman
              87

            
              Dwight D. Eisenhower
              73

            
              John F. Kennedy
              73

            
              Lyndon B. Johnson
              76

            
              Richard Nixon
              61

            
              Gerald Ford
              47

            
              Jimmy Carter
              63

            
              Ronald Reagan
              67

            
              George H. W. Bush
              58

            
              Bill Clinton
              55

            
              George W. Bush
              62

            
              Barack Obama
              62

            
              Donald Trump
              40

## 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.1);

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

	//define domains based on data
	x.domain([0, d3.max(data, function(d) { return d.Rating; })]);
	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))
		.append("text")
		.attr("y", 30)
		.attr("x", 350)
		.attr("dy", "0.5em")
		.style("fill", "black")
		.text("Approval rating in first 100 days");

	//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.Rating); })
    .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.Rating)+"%" + "<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("Approval Rating");

	//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:  Gallup");
	</script>
</body>
</html>

</script>
	President	Rating
	Harry S. Truman	87
	Dwight D. Eisenhower	73
	John F. Kennedy	73
	Lyndon B. Johnson	76
	Richard Nixon	61
	Gerald Ford	47
	Jimmy Carter	63
	Ronald Reagan	67
	George H. W. Bush	58
	Bill Clinton	55
	George W. Bush	62
	Barack Obama	62
	Donald Trump	40
	<!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.1);

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

	//define domains based on data
	x.domain([0, d3.max(data, function(d) { return d.Rating; })]);
	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))
	.append("text")
	.attr("y", 30)
	.attr("x", 350)
	.attr("dy", "0.5em")
	.style("fill", "black")
	.text("Approval rating in first 100 days");

	//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.Rating); })
	.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.Rating)+"%" + "<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("Approval Rating");

	//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: Gallup");
	</script>
	</body>
	</html>

	</script>