Alsaxian/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!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>
	<!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>