cwcromwell/index.html

## index.html
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>West Oakland population data</title>
        <meta name="description" content="A breakdown of the neighborhood's population by race and ethnicity.">
        <link rel="stylesheet" href="wocensus.css">
          <script src="http://d3js.org/d3.v3.min.js"></script>


    </head>
    <body>
      <script>
          var dataset= [12578, 4886,  3236, 2541, 1495];

           var w=960;
           var h=500;
           var barPadding = 1;
           var svg = d3.select("body")
                        .append("svg")
                         .attr("width", w)
                         .attr("height", h);

           svg.selectAll("rect")
           .data(dataset)
           .enter()
           .append("rect")
           .attr("class", "gbar")
           .attr("y", function(d, i) {
              return i * (h/dataset.length);

             //  return i * 21;
                 })
          .attr ("x", function(d) {
            //width minus data value (moved)
           })
          .attr("height", h/dataset.length - barPadding)
           .attr("width", 5)
           .attr("fill", "navy");

             svg.selectAll("rect")
           .transition()
           .duration(1000)
           .attr("width", function(d) {
            // return d;
             return d/48;
           } );

        svg.selectAll("text")
           .data(dataset)
           .enter()
           .append("text")
           .text(function(d) {
            return d;
           })
           .attr("y", function(d, i) {
              return (i * (h/dataset.length)) + 95;
                 })
           .attr("font-family", "sans-serif")
           .attr("font-size", "11px")
           .attr("fill", "navy");

        </script>

     <P>The bar graph shows West Oakland population by race. In order of size, the bars represent these groups: African-American, white, Asian, other, and two or more races.</P>
    </body>
</html>

## wocensus.css
* {
   margin: 0 auto;
}

.gbar text {
				font-size: 11px;
				font-weight: bold;
				text-anchor: end;
				//opacity: 0;
			}
			 .gbar:hover {
		color: orange;
			}

			.gbar:hover text {
				//opacity: 1;
			}
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<title>West Oakland population data</title>
	<meta name="description" content="A breakdown of the neighborhood's population by race and ethnicity.">
	<link rel="stylesheet" href="wocensus.css">
	<script src="http://d3js.org/d3.v3.min.js"></script>



	</head>
	<body>
	<script>
	var dataset= [12578, 4886, 3236, 2541, 1495];

	var w=960;
	var h=500;
	var barPadding = 1;
	var svg = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h);

	svg.selectAll("rect")
	.data(dataset)
	.enter()
	.append("rect")
	.attr("class", "gbar")
	.attr("y", function(d, i) {
	return i * (h/dataset.length);

	// return i * 21;
	})
	.attr ("x", function(d) {
	//width minus data value (moved)
	})
	.attr("height", h/dataset.length - barPadding)
	.attr("width", 5)
	.attr("fill", "navy");

	svg.selectAll("rect")
	.transition()
	.duration(1000)
	.attr("width", function(d) {
	// return d;
	return d/48;
	} );

	svg.selectAll("text")
	.data(dataset)
	.enter()
	.append("text")
	.text(function(d) {
	return d;
	})
	.attr("y", function(d, i) {
	return (i * (h/dataset.length)) + 95;
	})
	.attr("font-family", "sans-serif")
	.attr("font-size", "11px")
	.attr("fill", "navy");

	</script>

	<P>The bar graph shows West Oakland population by race. In order of size, the bars represent these groups: African-American, white, Asian, other, and two or more races.</P>
	</body>
	</html>
	* {
	margin: 0 auto;
	}

	.gbar text {
	font-size: 11px;
	font-weight: bold;
	text-anchor: end;
	//opacity: 0;
	}
	.gbar:hover {
	color: orange;
	}

	.gbar:hover text {
	//opacity: 1;
	}