D3 Examples - Marital Status in Mexico

xxxxxxxxxx
 
<!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> 
    
​
        <script type="text/javascript">     
​
            
    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>
    