JulienAssouline/index.html

## index.html
<!Doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Learning D3 </title>
<link rel="stylsheet" href="main.css">
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<style type = "text/css">

body,html{
    margin: 0;
    padding: 0;
    font-family: "Arial", sans-serif;
    font-size: 11px;
    text-align: center;
  }

  #chart{
    background-color: #F5F2EB;
    border: 1px solid #CCC;
  }
/*
  .yaxis path{
    fill: none;
    stroke: none;
  }

  .yaxis line{
    fill: none;
    stroke: #dcd9d3;
    stroke-width: 2px;
    shape-rendering: crispEdges;
    opacity: 0.7;
    stroke-dasharray: 3,3;
  }

  .xaxis path,
  .xaxis line{
    fill: none;
    stroke: none;
  }*/


</style>
<body>
<!-- Place all DOM elements here -->

<script>

 var w = 500;
 var h = 400;

      var margin = {
          top: 20,
          bottom: 0,
          left: 20,
          right: 20
        }

        var width = w - margin.left - margin.right;
        var height = h - margin.top - margin.bottom;

      var svg = d3.select("body")
        .append("svg")
        .attr("id", "chart")
        .attr("width", w)
        .attr("height", h)
        .append("g")
        .attr("transform", "translate(0" + margin.left + "," + margin.top + ")");

       var x0 = d3.scaleBand()
          .rangeRound([0, width])
          .paddingInner(0.1)

      var x1 = d3.scaleBand()
          .padding(0.05)

      var yScale = d3.scaleLinear()
          .rangeRound([height, 0]);

        color = d3.scaleOrdinal()
          .range(["#e03f8d", "#41c5de", "lightgrey", "lightgrey"])


  d3.csv("star wars individual scenes 2.csv", function(d, i, columns){
      for (var i = 1, n = columns.length; i < n; ++i) d[columns[i]] = +d[columns[i]];
        return d;
      }, function(error, data){
        if(error) throw error;

    var keys = data.columns.slice(1)

    console.log(keys)

        console.log(data)


     x0.domain(data.map(function(d) { return d.Movie; }));
    x1.domain(keys).rangeRound([0, x0.bandwidth()]);
    yScale.domain([0, d3.max(data, function(d) { return d3.max(keys, function(key) { return d[key]; }); })]).nice();


      var groups = svg.selectAll("g")
        .data(data)
        .enter()
        .append("g")
        .attr("class", "g")
        .attr("transform", function(d) { return "translate(" + x0(d.Movie) + ",0)"; })

        groups.selectAll("rect")
          .data(function(d) { return keys.map(function(key) { return {key: key, value: d[key]}; }); })
          .enter()
          .append("rect")
          .attr("x", function(d) { return x1(d.key); })
          .attr("y", function(d) { return yScale(d.value); })
          .attr("width", x1.bandwidth())
          .attr("height", function(d) { return height - yScale(d.value); })
          .attr("fill", function(d) { return color(d.key); });

  });


   </script>
  </body>
</html>

## star wars individual scenes 2.csv

          
            Movie
            Female
            Male
            Total_female
            Total_male

            
              A New Hope Female
              0
              91
              100
              9

            
              Empire Strikes Back Female
              21
              90
              79
              10

            
              Return of the Jedi Female
              14
              86
              86
              14

            
              Phantom Menace Female
              13
              78
              87
              22

            
              Attack of the Clones Female
              29
              75
              71
              25

            
              Revenge of the Sith Female
              14
              86
              86
              14

            
              The Force Awakens Female
              65
              68
              35
              32
	<!Doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title> Learning D3 </title>
	<link rel="stylsheet" href="main.css">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	</head>
	<style type = "text/css">

	body,html{
	margin: 0;
	padding: 0;
	font-family: "Arial", sans-serif;
	font-size: 11px;
	text-align: center;
	}

	#chart{
	background-color: #F5F2EB;
	border: 1px solid #CCC;
	}
	/*
	.yaxis path{
	fill: none;
	stroke: none;
	}

	.yaxis line{
	fill: none;
	stroke: #dcd9d3;
	stroke-width: 2px;
	shape-rendering: crispEdges;
	opacity: 0.7;
	stroke-dasharray: 3,3;
	}

	.xaxis path,
	.xaxis line{
	fill: none;
	stroke: none;
	}*/



	</style>
	<body>
	<!-- Place all DOM elements here -->

	<script>

	var w = 500;
	var h = 400;

	var margin = {
	top: 20,
	bottom: 0,
	left: 20,
	right: 20
	}

	var width = w - margin.left - margin.right;
	var height = h - margin.top - margin.bottom;

	var svg = d3.select("body")
	.append("svg")
	.attr("id", "chart")
	.attr("width", w)
	.attr("height", h)
	.append("g")
	.attr("transform", "translate(0" + margin.left + "," + margin.top + ")");

	var x0 = d3.scaleBand()
	.rangeRound([0, width])
	.paddingInner(0.1)

	var x1 = d3.scaleBand()
	.padding(0.05)

	var yScale = d3.scaleLinear()
	.rangeRound([height, 0]);

	color = d3.scaleOrdinal()
	.range(["#e03f8d", "#41c5de", "lightgrey", "lightgrey"])



	d3.csv("star wars individual scenes 2.csv", function(d, i, columns){
	for (var i = 1, n = columns.length; i < n; ++i) d[columns[i]] = +d[columns[i]];
	return d;
	}, function(error, data){
	if(error) throw error;

	var keys = data.columns.slice(1)

	console.log(keys)

	console.log(data)


	x0.domain(data.map(function(d) { return d.Movie; }));
	x1.domain(keys).rangeRound([0, x0.bandwidth()]);
	yScale.domain([0, d3.max(data, function(d) { return d3.max(keys, function(key) { return d[key]; }); })]).nice();


	var groups = svg.selectAll("g")
	.data(data)
	.enter()
	.append("g")
	.attr("class", "g")
	.attr("transform", function(d) { return "translate(" + x0(d.Movie) + ",0)"; })

	groups.selectAll("rect")
	.data(function(d) { return keys.map(function(key) { return {key: key, value: d[key]}; }); })
	.enter()
	.append("rect")
	.attr("x", function(d) { return x1(d.key); })
	.attr("y", function(d) { return yScale(d.value); })
	.attr("width", x1.bandwidth())
	.attr("height", function(d) { return height - yScale(d.value); })
	.attr("fill", function(d) { return color(d.key); });

	});


	</script>
	</body>
	</html>
Movie	Female	Male	Total_female	Total_male
A New Hope Female	0	91	100	9
Empire Strikes Back Female	21	90	79	10
Return of the Jedi Female	14	86	86	14
Phantom Menace Female	13	78	87	22
Attack of the Clones Female	29	75	71	25
Revenge of the Sith Female	14	86	86	14
The Force Awakens Female	65	68	35	32