D3 Examples - Loading dataset WWW18

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    rect {
      fill: none;
      stroke: black;
      stroke-width: 1;
    }
    .line {
      fill: none;
      stroke: black;
      stroke-width: 5;
    }
  </style>
</head>
​
<body>
  <script>
    
    var margin = {};
    margin.left = 20;
    
    d3.csv("dataset.csv", function(dataset) {
​
      dataset.forEach(function(d) {
        d.value = +d.value;
      })
      
      // action :"sexual comments about.."
      // age_group :"30-49"
      // gender_of_respondent :"female"
      // perceived_type_of_assault :"sexual violence"
      // value :2
      
      var filter_dataset = dataset.filter((d) => d["perceived_type_of_assault"] == "sexual harassment")
      
      var agg_dataset = d3.nest()
        .key(function(d) { return d["gender_of_respondent"] })
        .rollup(function(leaves){ return {
          "mean": d3.mean(leaves, function(d){ return d.value }),
          "min": d3.min(leaves, function(d){ return d.value }),
          "max": d3.max(leaves, function(d){ return d.value }),
        }})
        .entries(filter_dataset)
      
      console.log(agg_dataset)
      
      var divs = d3.selectAll("div").data(agg_dataset).enter()
        .append("div")
        .style("float","left")
        .append("svg")
          .attr("width", 960)
          .attr("height", 500);
​
      var y = d3.scaleLinear()
      .domain([0, d3.max(d3.values(dataset))])
      .range([0, 100]);
      
      var x = d3.scaleOrdinal() /* derp! */
        
      
      var line = d3.line()
      .x(function(d, i) { return x(d['action']); })
      .y(function(d) { return 200 - y(d.value); })
      .curve(d3.curveBasis)
​
      divs.selectAll("path").data((d) => { console.log(d.value.mean); return d.value.mean } )
        .enter()
        .append("path")
            .attr("class","line")
            .attr("d", line)
​
/*      var axis = d3.axisLeft(y);
​
      svg.append("g")
        .attr("transform", "translate(20, 100)")
        .call(axis);
*/
      
      // we want two charts, one for male respondents, one for female respondents
      // y axis is "value"
      // x axis is the question number in a survey (action?)
      // three lines in each chart - min (blue), max (red), avg (green)
      var male_data = dataset.filter((d) => d.gender_of_respondent == "male")
      var female_data = dataset.filter((d) => d.gender_of_respondent == "female")
​
/*      svg.selectAll(".line").data([female_agg_value]).enter().append("path")
        .attr("class", "line")
        .attr("d", function(d) { console.log(d); return d.value.mean; })
*/
      // console.log(female_agg_value)
    })
    
  </script>
</body>
​
    