Marital Status in Mexico

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Exercise 3</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 {
        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;
      }

</style>
	</head>
	<body>

<h1>Widowed Women in Mexico</h1>
<h2>(% of widowed women by state, 2010)</h2>

<p>The subject of my new project is <em>Marital Status in Mexico</em>. 
   I found the original database at the Inegi site:
    <a href="https://www3.inegi.org.mx/sistemas/temas/default.aspx?s=est&c=17484">Instituto Nacional de Geografía y Estadística </a>

var svg = d3.select("body")
            .append("svg")
            .attr("width", 450)
            .attr("height", 800);

d3.csv("Marital status.csv", function(data) {
        console.log(data);

data.sort(function(a, b) {
          return d3.descending(a.WidowedW, b.WidowedW);

});

var rects = svg.selectAll("rect")
                .data(data)
                .enter()
                .append("rect")
                .attr("fill", "Purple");

rects.attr("x", 10)
          .attr("y", function(d, i) {
            return i * 25;
          })
          .attr("width", function(d) {
            return d.WidowedW * 50;
          })
          .attr("height", 15)
          .append("title")
          .text(function(d) {
            return d.State + "'s percentage of widowed women is " + d.WidowedW;
          });

});
	
		</script>

<p>Module 3 Exercise: Mónica Alejandra Rodríguez Sosa.</p>
<p><strong>April 4.2015</strong>.</p>
	</body>
</html>

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

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