DecemberCafeChap5Chap6

<!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>
    // Feel free to change or delete any of the code you see in this editor!
   var largeur = 600
   var hauteur = 300
    
   /* Chap 5 histogramme */
    var svg = d3.select("body").append("svg")
      .attr("width", largeur)
      .attr("height", hauteur)

svg.append("text")
      .text("Edit the code below to change me!")
      .attr("y", 300)
      .attr("x", 60)
      .attr("font-size", 36)
      .attr("font-family", "monospace")
			
    var dataset = [ 250 , 210 , 170 , 130 , 90 ];
    var rectHeight = 25;  
    svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x",20)
    .attr("y",function(d,i){
         return i * rectHeight;
    })
    .attr("width",function(d){
         return d;
    })
    .attr("height",rectHeight-2)
    .attr("fill","steelblue");
    
    /* Chap 6 Echelle */
    var dataset_1 = [1.2, 2.3, 0.9, 1.5, 3.3];
		 
    
    var svg2 = d3.select("body").append("svg").attr("width", largeur).attr("height", hauteur)
    min = d3.min(dataset_1)
    max = d3.max(dataset_1)
    
    var echelle = d3.scaleLinear().range([0, 300]).domain([min, max])
    echelle(0.9)
    
    var index = [0, 1, 2, 3, 4]
    var color = ["red", "orange", "blue", "purple", "brown"]
   	
    
    var echelleOrdinale = d3.scaleOrdinal().domain(index).range(color)
    
    
    var dataset_2 = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ]
    
   	var echelle2 = d3.scaleLinear().domain([d3.min(dataset_2), d3.max(dataset_2)]).range([0, 250])
    
    svg2.selectAll("rect").data(dataset_2).enter().append("rect").attr("x", 20)
    	.attr("y", function(d, i){
      return i*rectHeight
    })
    	.attr("width", function(d){
      return echelle2(d)
    })
    	.attr("height", rectHeight - 5)
    	.attr("fill", "darkblue")
  </script>
</body>

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