Widowed Women in Mexico, chart with scales and axes

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>eExercise 4</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
		<style type="text/css">
			
			body {
        font-family: Eurostile, Arial, sans-serif;
        background-color: #F0F0F0;
        padding: 50px;
      }

h1 {
        font-size: 55px;
        font-weight: bold;
        border-top: solid 7px Purple
    
      }

h2 {
        font-size: 28px;
        font-weight: normal;
      }

h3 {
        font-size: 18px;
        font-weight: bold;
      }
      p {
        font-size: 18px;
        line-height: 20px;
        text-align: justify;
      }

em {
        font-size: 20px;
        color: Purple;
        font-weight: bold;
        font-style: italic;
      }

a href{
        color: Darkblue;
        font-weight: bold;
        font-style: italic;
      }
      svg {
        background-color: #F0F0F0;
        box-shadow: 5px 5px 25px gray;
      }

rect:hover {
				fill: purple;
			}
			
			.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>Marital Status in Mexico</h1>

<p>How important is marital status in our lives?
Besides the emotions envolved, there are other facts to consider. What is more convenient? Is it preferable to be single, married, or maybe divorced? For example, how much does it cost to get married? How expensive can it be to suddenly become a widow/widower? If the marriage does not work out, people would prefer to be divorced, which can be an expensive process. Economically speaking, then, is it better to be single? We find that married couples have more rights and better opportunities for housing and health services. Looking for answers to our simple questions...</p>

<p><em>Widowed Women (Percentage of Population per State, 2010)</em></p> 
   
		<script type="text/javascript">

var w = 500;
			var h = 600;
			var padding = [ 20, 10, 30, 120 ];  //Top, right, bottom, left

var widthScale = d3.scale.linear()
								.range([ 0, w - padding[2] - 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("Marital status.csv", function(data) {

data.sort(function(a, b) {
					return d3.descending(+a.WidowedW, +b.WidowedW);
				});
//aquí se escribe el código para que las barras se acomoden de mayor a menor valor.

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

//Luego se acomoda el eje de la grafica de acuerdo a sus valores maximos

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

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

rects.attr("x", padding[3])
					.attr("y", function(d) {
						return heightScale(d.State);
					})
					.attr("width", function(d) {
						return widthScale(d.WidowedW);
					})
					.attr("height", heightScale.rangeBand())
					.attr("fill", "gray")
					.append("title")
					.text(function(d) {
						return d.State + "'s percentage of widowed women is " + d.WidowedW;
					});

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>

<p>The original databases can be found at the Inegi site:</p>
    <a href="https://www3.inegi.org.mx/sistemas/temas/default.aspx?s=est&c=17484">Instituto Nacional de Geografía y Estadística </a> 
<br></br>
<p>Module 4 Exercise: Mónica Alejandra Rodríguez Sosa.</p>

<p>April 19.2015</p>
	</body>
</html>

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

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