ohdebby/ACEs.csv

## ACEs.csv

          
            disease
            adjOR
            lower95ci
            upper95ci

            
              Ischemic heart disease
              2.2
              1.3
              3.7

            
              Any cancer
              1.9
              1.3
              2.7

            
              Stroke
              2.4
              1.3
              4.3

            
              Chronic bronchitis/emphysema
              3.9
              2.6
              5.8

            
              Diabetes
              1.6
              1
              2.5

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Health effect of ACEs</title>
		<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
		<style type="text/css">

			body {
				margin: 0;
				background-color: lightGray;
				font-family: Helvetica, Arial, sans-serif;
			}

			#container {
				width: 700px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 50px;
				padding: 50px;
				background-color: white;
				box-shadow: 3px 3px 6px 6px #ccc;
			}

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

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

			a:link {
				text-decoration: none;
				color: gray;
			}

			a:hover {
				text-decoration: underline;
			}

			a:visited {
				color: gray;
			}

			a:active {
				color: steelblue;
			}

			svg {
				background-color: white;
			}

			g.bar text {
				font-size: 24px;
				font-weight: bold;
				text-anchor: end;
				opacity: 0;

			}

            rect {
                transition: all 0.5s;
            }
			g.bar:hover rect {
				fill: yellow;
			}

			g.bar:hover text {
				opacity: 1;
                fill: darkorange;
                transition: all 0.5s;
			}

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

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

			.y.axis path,
			.y.axis line {
				opacity: 0;
			}

		</style>
	</head>
	<body>

		<div id="container">

			<h1>Childhood stress leads to disease in adulthood</h1>
			<p>In 1998, Felitti et al published a landmark study showing how adverse childhood experiences (ACEs) such as abuse and household dysfunction are linked to disease in adulthood. Four or more ACEs were associated with higher rates of chronic bronchitis, emphysema, stroke, heart disease, cancer, and diabetes.</p>

		</div>

		<script type="text/javascript">

			var w = 700;
			var h = 400;
			var padding = [ 30, 30, 50, 205 ];  //Top, right, bottom, left

			var widthScale = d3.scale.linear()
								.range([ 0, w - padding[1] - padding[3] ]);

			var heightScale = d3.scale.ordinal()
								.rangeRoundBands([ padding[0], h - padding[2] ], 0.1);

			var xAxis = d3.svg.axis()
							.scale(widthScale)
							.orient("bottom");

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

			var svg = d3.select("#container")
						.append("svg")
						.attr("width", w)
						.attr("height", h);

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

				data.sort(function(a, b) {
					return d3.descending(+a.adjOR, +b.adjOR);
				});

				widthScale.domain([ 0, d3.max(data, function(d) {
					return +d.adjOR;
				}) ]);

				heightScale.domain(data.map(function(d) { return d.disease; } ));

				//Bind data to groups (not bars directly)
				var groups = svg.selectAll("g")
								.data(data)
								.enter()
								.append("g")
								.attr("class", "bar");

				//Add a rect to each group
				var rects = groups.append("rect")
					.attr("x", padding[3])
					.attr("y", function(d) {
						return heightScale(d.disease);
					})
					.attr("width", 0)
					.attr("height", heightScale.rangeBand())
					.attr("fill", "orange");

				//Add a text element to each group
				groups.append("text")
					.attr("x", function(d) {
						return padding[3] + widthScale(d.adjOR) - 15;
					})
					.attr("y", function(d) {
						return heightScale(d.disease) + 36;
					})
					.text(function(d) {
						return d.adjOR;
					});

				rects.transition()
					.delay(function(d, i) {
						return i * 20;
					})
					.duration(500)
					.attr("width", function(d) {
						return widthScale(d.adjOR);
					});

				svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
					.call(xAxis);

				svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + padding[3] + ",0)")
					.call(yAxis);

                svg.append("text")
				    .attr("x",350)
				    .attr("y",400)
				    .text("Adjusted Odds Ratios")
				    .attr("stroke-width","1px")
				    .attr("color","black")
				    .attr("font-size","14");

			});


		</script>

	</body>
</html>
disease	adjOR	lower95ci	upper95ci
Ischemic heart disease	2.2	1.3	3.7
Any cancer	1.9	1.3	2.7
Stroke	2.4	1.3	4.3
Chronic bronchitis/emphysema	3.9	2.6	5.8
Diabetes	1.6	1	2.5
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Health effect of ACEs</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	<style type="text/css">

	body {
	margin: 0;
	background-color: lightGray;
	font-family: Helvetica, Arial, sans-serif;
	}

	#container {
	width: 700px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	padding: 50px;
	background-color: white;
	box-shadow: 3px 3px 6px 6px #ccc;
	}

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

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

	a:link {
	text-decoration: none;
	color: gray;
	}

	a:hover {
	text-decoration: underline;
	}

	a:visited {
	color: gray;
	}

	a:active {
	color: steelblue;
	}

	svg {
	background-color: white;
	}

	g.bar text {
	font-size: 24px;
	font-weight: bold;
	text-anchor: end;
	opacity: 0;

	}

	rect {
	transition: all 0.5s;
	}
	g.bar:hover rect {
	fill: yellow;
	}

	g.bar:hover text {
	opacity: 1;
	fill: darkorange;
	transition: all 0.5s;
	}

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

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

	.y.axis path,
	.y.axis line {
	opacity: 0;
	}

	</style>
	</head>
	<body>

	<div id="container">

	<h1>Childhood stress leads to disease in adulthood</h1>
	<p>In 1998, Felitti et al published a landmark study showing how adverse childhood experiences (ACEs) such as abuse and household dysfunction are linked to disease in adulthood. Four or more ACEs were associated with higher rates of chronic bronchitis, emphysema, stroke, heart disease, cancer, and diabetes.</p>

	</div>

	<script type="text/javascript">

	var w = 700;
	var h = 400;
	var padding = [ 30, 30, 50, 205 ]; //Top, right, bottom, left

	var widthScale = d3.scale.linear()
	.range([ 0, w - padding[1] - padding[3] ]);

	var heightScale = d3.scale.ordinal()
	.rangeRoundBands([ padding[0], h - padding[2] ], 0.1);

	var xAxis = d3.svg.axis()
	.scale(widthScale)
	.orient("bottom");

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

	var svg = d3.select("#container")
	.append("svg")
	.attr("width", w)
	.attr("height", h);

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

	data.sort(function(a, b) {
	return d3.descending(+a.adjOR, +b.adjOR);
	});

	widthScale.domain([ 0, d3.max(data, function(d) {
	return +d.adjOR;
	}) ]);

	heightScale.domain(data.map(function(d) { return d.disease; } ));

	//Bind data to groups (not bars directly)
	var groups = svg.selectAll("g")
	.data(data)
	.enter()
	.append("g")
	.attr("class", "bar");

	//Add a rect to each group
	var rects = groups.append("rect")
	.attr("x", padding[3])
	.attr("y", function(d) {
	return heightScale(d.disease);
	})
	.attr("width", 0)
	.attr("height", heightScale.rangeBand())
	.attr("fill", "orange");

	//Add a text element to each group
	groups.append("text")
	.attr("x", function(d) {
	return padding[3] + widthScale(d.adjOR) - 15;
	})
	.attr("y", function(d) {
	return heightScale(d.disease) + 36;
	})
	.text(function(d) {
	return d.adjOR;
	});

	rects.transition()
	.delay(function(d, i) {
	return i * 20;
	})
	.duration(500)
	.attr("width", function(d) {
	return widthScale(d.adjOR);
	});

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + padding[3] + ",0)")
	.call(yAxis);

	svg.append("text")
	.attr("x",350)
	.attr("y",400)
	.text("Adjusted Odds Ratios")
	.attr("stroke-width","1px")
	.attr("color","black")
	.attr("font-size","14");

	});


	</script>

	</body>
	</html>