showingmyworking/NetWorth.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("NetWorth.csv", function(d){
		d.Worth = +d.Worth;
		return d;
	}, function (error, data) {
		if(error) throw error;

	//define domains based on data
	x.domain([0, d3.max(data, function(d) { return d.Worth; })]);
	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(2))
		.append("text")
		.attr("y", 30)
		.attr("x", 650)
		.attr("dy", "0.5em")
		.style("fill", "black")
		.text("Net Worth ($,)");

	//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.Worth); })
    .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.Worth) + "<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.2))
			.attr("y", 40)
			.attr("text-anchor", "middle")
			.style("font", "20px sans-serif")
			.text("Net Worth of Cabinet");

	//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: Varied - see showingmyworking.net");
	</script>
</body>
</html>

</script>


## NetWorth.csv

          
            President
            Worth

            
              Ronald Reagan
              25150000.00

            
              George H. W. Bush
              10000000.00

            
              Bill Clinton
              23595000.00

            
              George W. Bush
              15929879.40

            
              Barack Obama
              322315155.00

            
              Donald Trump
              8031900000.00
	<!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("NetWorth.csv", function(d){
	d.Worth = +d.Worth;
	return d;
	}, function (error, data) {
	if(error) throw error;

	//define domains based on data
	x.domain([0, d3.max(data, function(d) { return d.Worth; })]);
	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(2))
	.append("text")
	.attr("y", 30)
	.attr("x", 650)
	.attr("dy", "0.5em")
	.style("fill", "black")
	.text("Net Worth ($,)");

	//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.Worth); })
	.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.Worth) + "<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.2))
	.attr("y", 40)
	.attr("text-anchor", "middle")
	.style("font", "20px sans-serif")
	.text("Net Worth of Cabinet");

	//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: Varied - see showingmyworking.net");
	</script>
	</body>
	</html>

	</script>
	President	Worth
	Ronald Reagan	25150000.00
	George H. W. Bush	10000000.00
	Bill Clinton	23595000.00
	George W. Bush	15929879.40
	Barack Obama	322315155.00
	Donald Trump	8031900000.00