ohdebby/immunizationsM3.csv

## immunizationsM3.csv

          
            SchoolType
            Enrollment
            PBEnumber
            PBEpercent
            PBEpercent100

            
              Marin public
              2799
              153
              0.06
              5.5

            
              Marin private
              491
              58
              0.12
              11.8

            
              San Francisco public
              4562
              35
              0.01
              0.8

            
              San Francisco private
              1953
              82
              0.04
              4.2

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

			body {
				background-color: white;
				font-family: Helvetica, Arial, sans-serif;
			}

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

			p {
				font-size: 14px;
				margin: 10px 0 0 0;
                text-indent: 20px;
			}

			svg {
				background-color: white;
			}

			rect:hover {
				fill: yellow;
			}

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

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

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

		</style>
	</head>
	<body>
		<h1>Is it (a) right to refuse shots?</h1>

        <p>Percent kindergarteners with personal belief exemptions (PBEs) for immunizations in San Francisco and Marin county (2014-2015).</p>
        <p>    Source: <a href="http://data.gov">Data.gov</a></p>
        <br>

		<script type="text/javascript">


			var w = 1000;
			var h = 400;
			var padding = [ 20, 10, 50, 120 ];  //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("body")
						.append("svg")
						.attr("width", w)
						.attr("height", h);

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

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

				widthScale.domain([ 0, 20]);

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

				var rects = svg.selectAll("rect")
								.data(data)
								.enter()
								.append("rect");

				rects.attr("x", padding[3])
					.attr("y", function(d) {
						return heightScale(d.SchoolType);
					})
					.attr("width", function(d) {
						return widthScale(d.PBEpercent100);
					})
					.attr("height", heightScale.rangeBand())
					.attr("fill", "orange")
					.append("title")
					.text(function(d) {
					   return "% of kindergarteners with PBEs in " + d.SchoolType + " schools is " + d.PBEpercent100 + ".";
					});

				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("line")
				    .attr("x1",555)
				    .attr("y1",10)
				    .attr("x2",555)
				    .attr("y2",350)
				    .attr("fill","gray")
				    .attr("stroke","gray")
				    .attr("stroke-width","1px")

			     svg.append("text")
				    .attr("x",560)
				    .attr("y",20)
				    .text(">10% PBEs put population at risk for disease outbreak")
				    .attr("stroke-width","1px")
				    .attr("color","black")
				    .attr("font-size","14");

			});


		</script>
	</body>
</html>
SchoolType	Enrollment	PBEnumber	PBEpercent	PBEpercent100
Marin public	2799	153	0.06	5.5
Marin private	491	58	0.12	11.8
San Francisco public	4562	35	0.01	0.8
San Francisco private	1953	82	0.04	4.2
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Personal Belief Exemptions</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	<style type="text/css">

	body {
	background-color: white;
	font-family: Helvetica, Arial, sans-serif;
	}

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

	p {
	font-size: 14px;
	margin: 10px 0 0 0;
	text-indent: 20px;
	}

	svg {
	background-color: white;
	}

	rect:hover {
	fill: yellow;
	}

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

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

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

	</style>
	</head>
	<body>
	<h1>Is it (a) right to refuse shots?</h1>

	<p>Percent kindergarteners with personal belief exemptions (PBEs) for immunizations in San Francisco and Marin county (2014-2015).</p>
	<p> Source: <a href="http://data.gov">Data.gov</a></p>
	<br>

	<script type="text/javascript">


	var w = 1000;
	var h = 400;
	var padding = [ 20, 10, 50, 120 ]; //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("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h);

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

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

	widthScale.domain([ 0, 20]);

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

	var rects = svg.selectAll("rect")
	.data(data)
	.enter()
	.append("rect");

	rects.attr("x", padding[3])
	.attr("y", function(d) {
	return heightScale(d.SchoolType);
	})
	.attr("width", function(d) {
	return widthScale(d.PBEpercent100);
	})
	.attr("height", heightScale.rangeBand())
	.attr("fill", "orange")
	.append("title")
	.text(function(d) {
	return "% of kindergarteners with PBEs in " + d.SchoolType + " schools is " + d.PBEpercent100 + ".";
	});

	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("line")
	.attr("x1",555)
	.attr("y1",10)
	.attr("x2",555)
	.attr("y2",350)
	.attr("fill","gray")
	.attr("stroke","gray")
	.attr("stroke-width","1px")

	svg.append("text")
	.attr("x",560)
	.attr("y",20)
	.text(">10% PBEs put population at risk for disease outbreak")
	.attr("stroke-width","1px")
	.attr("color","black")
	.attr("font-size","14");

	});




	</script>
	</body>
	</html>