ohdebby/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## CasesDeaths.csv

          
            site
            newCases
            deaths

            
              Larynx
              148
              50

            
              Hodgkin Lymphoma
              160
              23

            
              Cervix Uteri
              243
              63

            
              Brain
              432
              333

            
              Ovary
              505
              312

            
              Stomach
              547
              321

            
              Liver
              761
              437

            
              Oral Cavity and Pharynx
              824
              200

            
              Leukemia
              848
              409

            
              Pancreas
              925
              789

            
              Thyroid
              941
              48

            
              Kidney and Renal Pelvis
              1095
              257

            
              Corpus Uteri
              1100
              200

            
              Bladder
              1288
              259

            
              Non-Hodgkin Lymphoma
              1534
              422

            
              Melanoma
              2118
              153

            
              Colon and Rectum
              2708
              952

            
              Lung and Bronchus
              3171
              2194

            
              Prostate
              3342
              560

            
              Breast
              5277
              788

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>GBACR cancer cases</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: #052049;
			}

			.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>Number of Deaths from Cancer in the Greater Bay Area, by Cancer Site (2015)</h1>
        <p>    Source: Greater Bay Area Cancer Registry</p>
        <br>

		<script type="text/javascript">


			var w = 800;
			var h = 400;
			var padding = [ 10, 10, 50, 150 ];  //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("CasesDeaths.csv", function(data) {

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

				widthScale.domain([ 0, 2500]);

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

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

				rects.attr("x", padding[3])
					.attr("y", function(d) {
						return heightScale(d.site);
					})
					.attr("width", function(d) {
						return widthScale(d.deaths);
					})
					.attr("height", heightScale.rangeBand())
					.attr("fill", "#18a3ac")
					.append("title")
					.text(function(d) {
					   return "# deaths due to " + d.site + " cancer is " + d.deaths + ".";
					});

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

			});


		</script>
	</body>
</html>
site	newCases	deaths
Larynx	148	50
Hodgkin Lymphoma	160	23
Cervix Uteri	243	63
Brain	432	333
Ovary	505	312
Stomach	547	321
Liver	761	437
Oral Cavity and Pharynx	824	200
Leukemia	848	409
Pancreas	925	789
Thyroid	941	48
Kidney and Renal Pelvis	1095	257
Corpus Uteri	1100	200
Bladder	1288	259
Non-Hodgkin Lymphoma	1534	422
Melanoma	2118	153
Colon and Rectum	2708	952
Lung and Bronchus	3171	2194
Prostate	3342	560
Breast	5277	788
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>GBACR cancer cases</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: #052049;
	}

	.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>Number of Deaths from Cancer in the Greater Bay Area, by Cancer Site (2015)</h1>
	<p> Source: Greater Bay Area Cancer Registry</p>
	<br>

	<script type="text/javascript">


	var w = 800;
	var h = 400;
	var padding = [ 10, 10, 50, 150 ]; //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("CasesDeaths.csv", function(data) {

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

	widthScale.domain([ 0, 2500]);

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

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

	rects.attr("x", padding[3])
	.attr("y", function(d) {
	return heightScale(d.site);
	})
	.attr("width", function(d) {
	return widthScale(d.deaths);
	})
	.attr("height", heightScale.rangeBand())
	.attr("fill", "#18a3ac")
	.append("title")
	.text(function(d) {
	return "# deaths due to " + d.site + " cancer is " + d.deaths + ".";
	});

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

	});




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