D3 Examples - D3 first steps

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
    var width = 960, height=500;
    var paddingRight = 20;
    var paddingBottom = 30;
    
    d3.csv("iris.csv", function(data){
         
      data.forEach(function(e){
        //console.log(e);
      });
      
      var map = data.map(function(i){ return i.SepalLength; })
​
            var histogram = d3.histogram()
                  .thresholds(10)(map)
​
      var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
            
      var xScale = d3.scaleLinear()
        .domain([0,d3.max(histogram, function(d) {
                return d.length;
            })])
        .range([0,width - paddingRight]);
      
      var yScale = d3.scaleLinear()
        .domain([0,10])
        .range([0, height - paddingBottom])
      console.log(histogram);
      var cScale = d3.scaleOrdinal(d3.schemeCategory10);
      
      // Make a group per item
      var svgElements = svg.selectAll("g")
          .data(histogram)
            .enter()
          .append("g");
      
      var xAxis = d3.axisBottom(xScale);
      
     svgElements.append("rect")
                .attr("x", function(d){return 0})
                .attr("y", function(d,i){return yScale(d.x0)})
                .attr("width", function(d){return xScale(d.length);})
                .attr("height", function(d){return 18;})
                .style("fill", function(d){return cScale(d.Name)})
     
     svg.append("g")
         .attr("class", "y axis")
         .attr("transform", "translate(0," + (height - paddingBottom) + ")")
         .call(xAxis);
     
​
    });
        
  </script>
</body>
​
    