Health effects of adverse childhood experiences

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Health effect of ACEs</title>
		<script type="text/javascript" src="https://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>

<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>

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>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js