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 n = 10;
    var w = 960;
    var h = 500;
​
    var margin = {};
    margin.left = 20;
    
    var svg = d3.select("body").append("svg")
      .attr("width", w)
      .attr("height", h);
    
    
    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 agg_value = d3.nest()
        .key(function(d) { return d.age_group})
        .entries(dataset);
      
      var data = dataset.filter(function(d)
                                { return d.age_group == "30-49" })
    
      console.log(agg_value);
    })
    
    
    function plot_barchart(data) {
      
      var x = d3.scaleBand()
          .rangeRound([0, w])
          .domain(data.length);
​
        var y = d3.scaleLinear()
            .domain([0, d3.max(data)])
            .range([0, h]);
    
        var color2 = d3.scaleLinear()
            .domain([0, d3.max(data)])
            .range(["yellow", "green"])
      
      
      svg.selectAll("rect").data(data)
        .enter()
            .append("rect")
        .attr("width", 50)
        .attr("height", function(d) { return y(d); })
        .attr("x", function(d, i) { return i * 55 + margin.left; })
        .attr("y", function(d) { return 200 - y(d); })
            .style("fill", color2)
      
        var axis = d3.axisLeft(y);
    
      svg.append("g")
      .attr("transform", "translate(20, 100)")
      .call(axis);
      
    }
    
    
    var data = [3, 5, 57, 34]
    plot_barchart(data)
    
  </script>
</body>
​
    