Old school D3 from simpler times

All examples By author By category About

as-eldlc

Full window Github gist

D3 first steps

Built with blockbuilder.org

<!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>

https://d3js.org/d3.v4.min.js