romsson/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## dataset.csv

          
            name
            surname

            
              10
              50

            
              20
              10

            
              40
              20

            
              30
               40

            
              50
              10

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

    var svg = d3.select("body").append("svg")
    	.attr("width", 500)
    	.attr("height", 500)

    d3.csv("dataset.csv", function(error, dataset) {

      var accessor = function(d) { return d.name;};

      var y = d3.scaleLinear()
        .domain([d3.min(dataset, accessor),
                 d3.max(dataset, accessor)]) // d3.extent()
        .range([0, 100])

      var color = d3.scaleLinear()
        .domain([d3.min(dataset, accessor),
                 d3.max(dataset, accessor)]) // d3.extent()
        .range(["white", "red"])

      var svg_enter = svg.selectAll("rect").data(dataset)
        .enter();

      console.log("enter", svg_enter);

      svg_enter.append("rect")
        .attr("x", function(d, i) { return 10 + i * 40; })
        .attr("y", function(d, i) { return 100 + (100 - y(accessor(d))); })
        .attr("width", 20)
        .attr("height", function(d, i) { return y(accessor(d)); })

      svg.on("click", function() {

        // changer le mapping de données
        accessor = function(d) { return d.surname;};

        svg.selectAll("rect").data(dataset).transition().duration(1000)
        	.delay(function(d, i) { return i * 1000})
          .attr("y", function(d, i) { return 100 + (100 - y(accessor(d))); })
          .attr("height", function(d, i) { return y(accessor(d)); })

      });

      var line = d3.line().curve(d3.curveCardinal)
      	.x(function(d, i) { return 20 + i * 40; })
        .y(function(d, i) { return 100 + (100 - y(accessor(d))); })

      svg.selectAll("path").data([dataset]).enter()
      	.append("path")
      	.style("fill", "none")
      	.style("stroke", "black")
				.attr("d", line)

      var xAxis = d3.axisLeft()
        .scale(y);

       g = svg.append('g')
        .attr('transform', 'translate(20,' + 100 + ')')
        .attr('class', 'x axis')
        .call(xAxis);

			console.log(dataset);
    })

  //  data.forEach(function(d, i) {
  //
  //    svg.append("rect")
  //      .attr("x", 10 + i * 40)
  //      .attr("y", 100 + (100 - y(d)))
  //      .attr("width", 20)
  //      .attr("height", y(d))
  //
  //  })
  //
  </script>
  <!--
	<svg width=500 height=500>
    <rect x=10 y=100 width=20 height=100></rect>
    <rect x=50 y=130 width=20 height=70></rect>
    <rect x=90 y=110 width=20 height=90></rect>
    <rect x=130 y=150 width=20 height=50></rect>
  <svg>
-->
</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>

	var svg = d3.select("body").append("svg")
	.attr("width", 500)
	.attr("height", 500)

	d3.csv("dataset.csv", function(error, dataset) {

	var accessor = function(d) { return d.name;};

	var y = d3.scaleLinear()
	.domain([d3.min(dataset, accessor),
	d3.max(dataset, accessor)]) // d3.extent()
	.range([0, 100])

	var color = d3.scaleLinear()
	.domain([d3.min(dataset, accessor),
	d3.max(dataset, accessor)]) // d3.extent()
	.range(["white", "red"])

	var svg_enter = svg.selectAll("rect").data(dataset)
	.enter();

	console.log("enter", svg_enter);

	svg_enter.append("rect")
	.attr("x", function(d, i) { return 10 + i * 40; })
	.attr("y", function(d, i) { return 100 + (100 - y(accessor(d))); })
	.attr("width", 20)
	.attr("height", function(d, i) { return y(accessor(d)); })

	svg.on("click", function() {

	// changer le mapping de données
	accessor = function(d) { return d.surname;};

	svg.selectAll("rect").data(dataset).transition().duration(1000)
	.delay(function(d, i) { return i * 1000})
	.attr("y", function(d, i) { return 100 + (100 - y(accessor(d))); })
	.attr("height", function(d, i) { return y(accessor(d)); })

	});

	var line = d3.line().curve(d3.curveCardinal)
	.x(function(d, i) { return 20 + i * 40; })
	.y(function(d, i) { return 100 + (100 - y(accessor(d))); })

	svg.selectAll("path").data([dataset]).enter()
	.append("path")
	.style("fill", "none")
	.style("stroke", "black")
	.attr("d", line)

	var xAxis = d3.axisLeft()
	.scale(y);

	g = svg.append('g')
	.attr('transform', 'translate(20,' + 100 + ')')
	.attr('class', 'x axis')
	.call(xAxis);

	console.log(dataset);
	})

	// data.forEach(function(d, i) {
	//
	// svg.append("rect")
	// .attr("x", 10 + i * 40)
	// .attr("y", 100 + (100 - y(d)))
	// .attr("width", 20)
	// .attr("height", y(d))
	//
	// })
	//
	</script>
	<!--
	<svg width=500 height=500>
	<rect x=10 y=100 width=20 height=100></rect>
	<rect x=50 y=130 width=20 height=70></rect>
	<rect x=90 y=110 width=20 height=90></rect>
	<rect x=130 y=150 width=20 height=50></rect>
	<svg>
	-->
	</body>