phuquoc/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from romsson's block: iris scatteplot simple

  
## 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 svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)

    var data = d3.range(100).map(function(d) {
      return {"x": Math.random(), "y": Math.random()}
    })

    var x = d3.scaleLinear()
    	//.domain([0, d3.max(data, function(d) { return d.x; })])
    	.range([200, 600]);

    var y = d3.scaleLinear()
    	//.domain([0, d3.max(data, function(d) { return d.y; })])
    	.range([100, 400]);

		var color = d3.scaleOrdinal(d3.schemeCategory20);

    function scatterplot(data, var_x, var_y, pos_x, pos_y, pos_w, pos_h) {
      x.range([0, pos_w])
      	.domain(d3.extent(data, function(d) { return d.sepal_length; }))
      y.range([0, pos_h])
      	.domain(d3.extent(data, function(d) { return d.sepal_width; }))


      svg.append("g")
      	.attr("transform", "translate("+(pos_x + 200) + "," + (pos_y + 200) + ")")
        .selectAll("circle").data(data).enter()
        .append("circle")
        .style("fill", function(d, i) { return color(d.species); })
        .style("stroke", "black")
        .attr("r", 10)
        .attr("cx", function(d) { return x(d[var_x]); })
        .attr("cy", function(d) { return y(d[var_y]); })
        .on("mouseenter", function(d){
          de.select("svg").selectAll("circle")
          .filtre(function(e){
            return d!= e;
          })
          .attr("opacity", function(e) {
            if(d != e)
              return .1
            else
              return 1
          })
      })

  }

    d3.text('iris.csv', function(error, raw){
      var dsv = d3.dsvFormat(',')
      var data = dsv.parse(raw);

      data.forEach(function(d){
        d.sepal_length = +d.sepal_length;
        d.sepal_width  = +d.sepal_width;
        d.petal_length = +d.petal_length;
        d.petal_width  = +d.petal_width;
      });
      // TODO: insert parametres
     scatterplot(data, "sepal_lenght","sepal_width")

    })


  </script>
</body>

## iris.csv

          
            sepal_length
            sepal_width
            petal_length
            petal_width
            species

            
              5.1
              3.5
              1.4
              0.2
              setosa

            
              4.9
              3
              1.4
              0.2
              setosa

            
              4.7
              3.2
              1.3
              0.2
              setosa

            
              4.6
              3.1
              1.5
              0.2
              setosa

            
              5
              3.6
              1.4
              0.2
              setosa

            
              5.4
              3.9
              1.7
              0.4
              setosa

            
              4.6
              3.4
              1.4
              0.3
              setosa

            
              5
              3.4
              1.5
              0.2
              setosa

            
              4.4
              2.9
              1.4
              0.2
              setosa

            
              4.9
              3.1
              1.5
              0.1
              setosa

            
              5.4
              3.7
              1.5
              0.2
              setosa

            
              4.8
              3.4
              1.6
              0.2
              setosa

            
              4.8
              3
              1.4
              0.1
              setosa

            
              4.3
              3
              1.1
              0.1
              setosa

            
              5.8
              4
              1.2
              0.2
              setosa

            
              5.7
              4.4
              1.5
              0.4
              setosa

            
              5.4
              3.9
              1.3
              0.4
              setosa

            
              5.1
              3.5
              1.4
              0.3
              setosa

            
              5.7
              3.8
              1.7
              0.3
              setosa

            
              5.1
              3.8
              1.5
              0.3
              setosa

            
              5.4
              3.4
              1.7
              0.2
              setosa

            
              5.1
              3.7
              1.5
              0.4
              setosa

            
              4.6
              3.6
              1
              0.2
              setosa

            
              5.1
              3.3
              1.7
              0.5
              setosa

            
              4.8
              3.4
              1.9
              0.2
              setosa

            
              5
              3
              1.6
              0.2
              setosa

            
              5
              3.4
              1.6
              0.4
              setosa

            
              5.2
              3.5
              1.5
              0.2
              setosa

            
              5.2
              3.4
              1.4
              0.2
              setosa

            
              4.7
              3.2
              1.6
              0.2
              setosa

            
              4.8
              3.1
              1.6
              0.2
              setosa

            
              5.4
              3.4
              1.5
              0.4
              setosa

            
              5.2
              4.1
              1.5
              0.1
              setosa

            
              5.5
              4.2
              1.4
              0.2
              setosa

            
              4.9
              3.1
              1.5
              0.1
              setosa

            
              5
              3.2
              1.2
              0.2
              setosa

            
              5.5
              3.5
              1.3
              0.2
              setosa

            
              4.9
              3.1
              1.5
              0.1
              setosa

            
              4.4
              3
              1.3
              0.2
              setosa

            
              5.1
              3.4
              1.5
              0.2
              setosa

            
              5
              3.5
              1.3
              0.3
              setosa

            
              4.5
              2.3
              1.3
              0.3
              setosa

            
              4.4
              3.2
              1.3
              0.2
              setosa

            
              5
              3.5
              1.6
              0.6
              setosa

            
              5.1
              3.8
              1.9
              0.4
              setosa

            
              4.8
              3
              1.4
              0.3
              setosa

            
              5.1
              3.8
              1.6
              0.2
              setosa

            
              4.6
              3.2
              1.4
              0.2
              setosa

            
              5.3
              3.7
              1.5
              0.2
              setosa

            
              5
              3.3
              1.4
              0.2
              setosa

            
              7
              3.2
              4.7
              1.4
              versicolor

            
              6.4
              3.2
              4.5
              1.5
              versicolor

            
              6.9
              3.1
              4.9
              1.5
              versicolor

            
              5.5
              2.3
              4
              1.3
              versicolor

            
              6.5
              2.8
              4.6
              1.5
              versicolor

            
              5.7
              2.8
              4.5
              1.3
              versicolor

            
              6.3
              3.3
              4.7
              1.6
              versicolor

            
              4.9
              2.4
              3.3
              1
              versicolor

            
              6.6
              2.9
              4.6
              1.3
              versicolor

            
              5.2
              2.7
              3.9
              1.4
              versicolor

            
              5
              2
              3.5
              1
              versicolor

            
              5.9
              3
              4.2
              1.5
              versicolor

            
              6
              2.2
              4
              1
              versicolor

            
              6.1
              2.9
              4.7
              1.4
              versicolor

            
              5.6
              2.9
              3.6
              1.3
              versicolor

            
              6.7
              3.1
              4.4
              1.4
              versicolor

            
              5.6
              3
              4.5
              1.5
              versicolor

            
              5.8
              2.7
              4.1
              1
              versicolor

            
              6.2
              2.2
              4.5
              1.5
              versicolor

            
              5.6
              2.5
              3.9
              1.1
              versicolor

            
              5.9
              3.2
              4.8
              1.8
              versicolor

            
              6.1
              2.8
              4
              1.3
              versicolor

            
              6.3
              2.5
              4.9
              1.5
              versicolor

            
              6.1
              2.8
              4.7
              1.2
              versicolor

            
              6.4
              2.9
              4.3
              1.3
              versicolor

            
              6.6
              3
              4.4
              1.4
              versicolor

            
              6.8
              2.8
              4.8
              1.4
              versicolor

            
              6.7
              3
              5
              1.7
              versicolor

            
              6
              2.9
              4.5
              1.5
              versicolor

            
              5.7
              2.6
              3.5
              1
              versicolor

            
              5.5
              2.4
              3.8
              1.1
              versicolor

            
              5.5
              2.4
              3.7
              1
              versicolor

            
              5.8
              2.7
              3.9
              1.2
              versicolor

            
              6
              2.7
              5.1
              1.6
              versicolor

            
              5.4
              3
              4.5
              1.5
              versicolor

            
              6
              3.4
              4.5
              1.6
              versicolor

            
              6.7
              3.1
              4.7
              1.5
              versicolor

            
              6.3
              2.3
              4.4
              1.3
              versicolor

            
              5.6
              3
              4.1
              1.3
              versicolor

            
              5.5
              2.5
              4
              1.3
              versicolor

            
              5.5
              2.6
              4.4
              1.2
              versicolor

            
              6.1
              3
              4.6
              1.4
              versicolor

            
              5.8
              2.6
              4
              1.2
              versicolor

            
              5
              2.3
              3.3
              1
              versicolor

            
              5.6
              2.7
              4.2
              1.3
              versicolor

            
              5.7
              3
              4.2
              1.2
              versicolor

            
              5.7
              2.9
              4.2
              1.3
              versicolor

            
              6.2
              2.9
              4.3
              1.3
              versicolor

            
              5.1
              2.5
              3
              1.1
              versicolor

            
              5.7
              2.8
              4.1
              1.3
              versicolor

            
              6.3
              3.3
              6
              2.5
              virginica

            
              5.8
              2.7
              5.1
              1.9
              virginica

            
              7.1
              3
              5.9
              2.1
              virginica

            
              6.3
              2.9
              5.6
              1.8
              virginica

            
              6.5
              3
              5.8
              2.2
              virginica

            
              7.6
              3
              6.6
              2.1
              virginica

            
              4.9
              2.5
              4.5
              1.7
              virginica

            
              7.3
              2.9
              6.3
              1.8
              virginica

            
              6.7
              2.5
              5.8
              1.8
              virginica

            
              7.2
              3.6
              6.1
              2.5
              virginica

            
              6.5
              3.2
              5.1
              2
              virginica

            
              6.4
              2.7
              5.3
              1.9
              virginica

            
              6.8
              3
              5.5
              2.1
              virginica

            
              5.7
              2.5
              5
              2
              virginica

            
              5.8
              2.8
              5.1
              2.4
              virginica

            
              6.4
              3.2
              5.3
              2.3
              virginica

            
              6.5
              3
              5.5
              1.8
              virginica

            
              7.7
              3.8
              6.7
              2.2
              virginica

            
              7.7
              2.6
              6.9
              2.3
              virginica

            
              6
              2.2
              5
              1.5
              virginica

            
              6.9
              3.2
              5.7
              2.3
              virginica

            
              5.6
              2.8
              4.9
              2
              virginica

            
              7.7
              2.8
              6.7
              2
              virginica

            
              6.3
              2.7
              4.9
              1.8
              virginica

            
              6.7
              3.3
              5.7
              2.1
              virginica

            
              7.2
              3.2
              6
              1.8
              virginica

            
              6.2
              2.8
              4.8
              1.8
              virginica

            
              6.1
              3
              4.9
              1.8
              virginica

            
              6.4
              2.8
              5.6
              2.1
              virginica

            
              7.2
              3
              5.8
              1.6
              virginica

            
              7.4
              2.8
              6.1
              1.9
              virginica

            
              7.9
              3.8
              6.4
              2
              virginica

            
              6.4
              2.8
              5.6
              2.2
              virginica

            
              6.3
              2.8
              5.1
              1.5
              virginica

            
              6.1
              2.6
              5.6
              1.4
              virginica

            
              7.7
              3
              6.1
              2.3
              virginica

            
              6.3
              3.4
              5.6
              2.4
              virginica

            
              6.4
              3.1
              5.5
              1.8
              virginica

            
              6
              3
              4.8
              1.8
              virginica

            
              6.9
              3.1
              5.4
              2.1
              virginica

            
              6.7
              3.1
              5.6
              2.4
              virginica

            
              6.9
              3.1
              5.1
              2.3
              virginica

            
              5.8
              2.7
              5.1
              1.9
              virginica

            
              6.8
              3.2
              5.9
              2.3
              virginica

            
              6.7
              3.3
              5.7
              2.5
              virginica

            
              6.7
              3
              5.2
              2.3
              virginica

            
              6.3
              2.5
              5
              1.9
              virginica

            
              6.5
              3
              5.2
              2
              virginica

            
              6.2
              3.4
              5.4
              2.3
              virginica

            
              5.9
              3
              5.1
              1.8
              virginica
	<!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 svg = d3.select("body").append("svg")
	.attr("width", 960)
	.attr("height", 500)

	var data = d3.range(100).map(function(d) {
	return {"x": Math.random(), "y": Math.random()}
	})

	var x = d3.scaleLinear()
	//.domain([0, d3.max(data, function(d) { return d.x; })])
	.range([200, 600]);

	var y = d3.scaleLinear()
	//.domain([0, d3.max(data, function(d) { return d.y; })])
	.range([100, 400]);

	var color = d3.scaleOrdinal(d3.schemeCategory20);

	function scatterplot(data, var_x, var_y, pos_x, pos_y, pos_w, pos_h) {
	x.range([0, pos_w])
	.domain(d3.extent(data, function(d) { return d.sepal_length; }))
	y.range([0, pos_h])
	.domain(d3.extent(data, function(d) { return d.sepal_width; }))


	svg.append("g")
	.attr("transform", "translate("+(pos_x + 200) + "," + (pos_y + 200) + ")")
	.selectAll("circle").data(data).enter()
	.append("circle")
	.style("fill", function(d, i) { return color(d.species); })
	.style("stroke", "black")
	.attr("r", 10)
	.attr("cx", function(d) { return x(d[var_x]); })
	.attr("cy", function(d) { return y(d[var_y]); })
	.on("mouseenter", function(d){
	de.select("svg").selectAll("circle")
	.filtre(function(e){
	return d!= e;
	})
	.attr("opacity", function(e) {
	if(d != e)
	return .1
	else
	return 1
	})
	})

	}

	d3.text('iris.csv', function(error, raw){
	var dsv = d3.dsvFormat(',')
	var data = dsv.parse(raw);

	data.forEach(function(d){
	d.sepal_length = +d.sepal_length;
	d.sepal_width = +d.sepal_width;
	d.petal_length = +d.petal_length;
	d.petal_width = +d.petal_width;
	});
	// TODO: insert parametres
	scatterplot(data, "sepal_lenght","sepal_width")

	})


	</script>
	</body>
sepal_length	sepal_width	petal_length	petal_width	species
5.1	3.5	1.4	0.2	setosa
4.9	3	1.4	0.2	setosa
4.7	3.2	1.3	0.2	setosa
4.6	3.1	1.5	0.2	setosa
5	3.6	1.4	0.2	setosa
5.4	3.9	1.7	0.4	setosa
4.6	3.4	1.4	0.3	setosa
5	3.4	1.5	0.2	setosa
4.4	2.9	1.4	0.2	setosa
4.9	3.1	1.5	0.1	setosa
5.4	3.7	1.5	0.2	setosa
4.8	3.4	1.6	0.2	setosa
4.8	3	1.4	0.1	setosa
4.3	3	1.1	0.1	setosa
5.8	4	1.2	0.2	setosa
5.7	4.4	1.5	0.4	setosa
5.4	3.9	1.3	0.4	setosa
5.1	3.5	1.4	0.3	setosa
5.7	3.8	1.7	0.3	setosa
5.1	3.8	1.5	0.3	setosa
5.4	3.4	1.7	0.2	setosa
5.1	3.7	1.5	0.4	setosa
4.6	3.6	1	0.2	setosa
5.1	3.3	1.7	0.5	setosa
4.8	3.4	1.9	0.2	setosa
5	3	1.6	0.2	setosa
5	3.4	1.6	0.4	setosa
5.2	3.5	1.5	0.2	setosa
5.2	3.4	1.4	0.2	setosa
4.7	3.2	1.6	0.2	setosa
4.8	3.1	1.6	0.2	setosa
5.4	3.4	1.5	0.4	setosa
5.2	4.1	1.5	0.1	setosa
5.5	4.2	1.4	0.2	setosa
4.9	3.1	1.5	0.1	setosa
5	3.2	1.2	0.2	setosa
5.5	3.5	1.3	0.2	setosa
4.9	3.1	1.5	0.1	setosa
4.4	3	1.3	0.2	setosa
5.1	3.4	1.5	0.2	setosa
5	3.5	1.3	0.3	setosa
4.5	2.3	1.3	0.3	setosa
4.4	3.2	1.3	0.2	setosa
5	3.5	1.6	0.6	setosa
5.1	3.8	1.9	0.4	setosa
4.8	3	1.4	0.3	setosa
5.1	3.8	1.6	0.2	setosa
4.6	3.2	1.4	0.2	setosa
5.3	3.7	1.5	0.2	setosa
5	3.3	1.4	0.2	setosa
7	3.2	4.7	1.4	versicolor
6.4	3.2	4.5	1.5	versicolor
6.9	3.1	4.9	1.5	versicolor
5.5	2.3	4	1.3	versicolor
6.5	2.8	4.6	1.5	versicolor
5.7	2.8	4.5	1.3	versicolor
6.3	3.3	4.7	1.6	versicolor
4.9	2.4	3.3	1	versicolor
6.6	2.9	4.6	1.3	versicolor
5.2	2.7	3.9	1.4	versicolor
5	2	3.5	1	versicolor
5.9	3	4.2	1.5	versicolor
6	2.2	4	1	versicolor
6.1	2.9	4.7	1.4	versicolor
5.6	2.9	3.6	1.3	versicolor
6.7	3.1	4.4	1.4	versicolor
5.6	3	4.5	1.5	versicolor
5.8	2.7	4.1	1	versicolor
6.2	2.2	4.5	1.5	versicolor
5.6	2.5	3.9	1.1	versicolor
5.9	3.2	4.8	1.8	versicolor
6.1	2.8	4	1.3	versicolor
6.3	2.5	4.9	1.5	versicolor
6.1	2.8	4.7	1.2	versicolor
6.4	2.9	4.3	1.3	versicolor
6.6	3	4.4	1.4	versicolor
6.8	2.8	4.8	1.4	versicolor
6.7	3	5	1.7	versicolor
6	2.9	4.5	1.5	versicolor
5.7	2.6	3.5	1	versicolor
5.5	2.4	3.8	1.1	versicolor
5.5	2.4	3.7	1	versicolor
5.8	2.7	3.9	1.2	versicolor
6	2.7	5.1	1.6	versicolor
5.4	3	4.5	1.5	versicolor
6	3.4	4.5	1.6	versicolor
6.7	3.1	4.7	1.5	versicolor
6.3	2.3	4.4	1.3	versicolor
5.6	3	4.1	1.3	versicolor
5.5	2.5	4	1.3	versicolor
5.5	2.6	4.4	1.2	versicolor
6.1	3	4.6	1.4	versicolor
5.8	2.6	4	1.2	versicolor
5	2.3	3.3	1	versicolor
5.6	2.7	4.2	1.3	versicolor
5.7	3	4.2	1.2	versicolor
5.7	2.9	4.2	1.3	versicolor
6.2	2.9	4.3	1.3	versicolor
5.1	2.5	3	1.1	versicolor
5.7	2.8	4.1	1.3	versicolor
6.3	3.3	6	2.5	virginica
5.8	2.7	5.1	1.9	virginica
7.1	3	5.9	2.1	virginica
6.3	2.9	5.6	1.8	virginica
6.5	3	5.8	2.2	virginica
7.6	3	6.6	2.1	virginica
4.9	2.5	4.5	1.7	virginica
7.3	2.9	6.3	1.8	virginica
6.7	2.5	5.8	1.8	virginica
7.2	3.6	6.1	2.5	virginica
6.5	3.2	5.1	2	virginica
6.4	2.7	5.3	1.9	virginica
6.8	3	5.5	2.1	virginica
5.7	2.5	5	2	virginica
5.8	2.8	5.1	2.4	virginica
6.4	3.2	5.3	2.3	virginica
6.5	3	5.5	1.8	virginica
7.7	3.8	6.7	2.2	virginica
7.7	2.6	6.9	2.3	virginica
6	2.2	5	1.5	virginica
6.9	3.2	5.7	2.3	virginica
5.6	2.8	4.9	2	virginica
7.7	2.8	6.7	2	virginica
6.3	2.7	4.9	1.8	virginica
6.7	3.3	5.7	2.1	virginica
7.2	3.2	6	1.8	virginica
6.2	2.8	4.8	1.8	virginica
6.1	3	4.9	1.8	virginica
6.4	2.8	5.6	2.1	virginica
7.2	3	5.8	1.6	virginica
7.4	2.8	6.1	1.9	virginica
7.9	3.8	6.4	2	virginica
6.4	2.8	5.6	2.2	virginica
6.3	2.8	5.1	1.5	virginica
6.1	2.6	5.6	1.4	virginica
7.7	3	6.1	2.3	virginica
6.3	3.4	5.6	2.4	virginica
6.4	3.1	5.5	1.8	virginica
6	3	4.8	1.8	virginica
6.9	3.1	5.4	2.1	virginica
6.7	3.1	5.6	2.4	virginica
6.9	3.1	5.1	2.3	virginica
5.8	2.7	5.1	1.9	virginica
6.8	3.2	5.9	2.3	virginica
6.7	3.3	5.7	2.5	virginica
6.7	3	5.2	2.3	virginica
6.3	2.5	5	1.9	virginica
6.5	3	5.2	2	virginica
6.2	3.4	5.4	2.3	virginica
5.9	3	5.1	1.8	virginica