DV_project_sex

forked from jadiehm's block: Horizontal 100 percent bar chart red

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="https://d3js.org/d3.v2.js"></script>
  <link href="styles.css" rel="stylesheet" type="text/css" />
  <title>"Percent complete" bar</title>
  <style>
    .male {
      fill:#6A5ACD;
    }
    .female {
      fill:#ffa8b2;
    }
    text {
      fill:#FFF;
      font-family:"arial"; 
      font-size:40px;
      font-weight:bold;
    }
  </style>
</head>

<body>  
  <div id="container"></div> 
  
  <script>
   
	w = 500;
  h = 80;
  percentage_female = 70;
  percentage_male = 30;
  width_female = w * percentage_female / 100 ;
    
  var svgContainer = d3.select("body").append("svg")
                                      .attr("width", w)
                                      .attr("height", h);
    
  var group = svgContainer.append("g");
    
	//Draw the Rectangle
  var rectangle = group.append("rect")
    .attr('class','male')
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", w)
    .attr("height", h);

//Draw the Rectangle
  var rectangle_female = group.append("rect")
    .attr('class','female')
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", width_female)
    .attr("height", h);

group.append("text")
    .attr("x", 10)
    .attr("y", 52)
    .text(function(d) { return percentage_female + "%"; });
  group.append("text")
    .attr("x", 410)
    .attr("y", 52)
    .text(function(d) { return percentage_male + "%"; });
    
  </script>
 
</body>
</html>

Modified http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js to a secure url

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

https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

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