ruiyang123/.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 margin = {top: 20,right: 20,bottom: 30,left: 40};
    var width = 960 - margin.left - margin.right;
    var height = 1000 - margin.top - margin.bottom;
    var svg = d3.select("body").append("svg")
      .attr("width", width+margin.left+margin.right)
      .attr("height", height+margin.top+margin.bottom)
    .append("g")
    .attr("transform","translate(" + margin.left +","+ margin.top +")")


			d3.csv("https://raw.githubusercontent.com/LyonDataViz/MOS5.5-Dataviz/master/data/iris.csv",
            function(data){

        console.log(data);
        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
        })
        console.log(data);
     function scatterplot(el,data,var_x,var_y,dim_width,dim_height,pos_x,pos_y){

         var x = d3.scaleLinear().range([0,dim_width]);
       x.domain(d3.extent(data,function(d){
         return d[var_x];
       })).nice();

        var y = d3.scaleLinear()
    					.range([dim_height,0])
        y.domain(d3.extent(data,function(d){

          return d[var_y];
        }))

       	var spec = ["setosa","versicolor","virginica"] ;
        var color = ["red","blue","green"];
        var radius = d3.scaleSqrt()
          .domain([
                d3.min(data,function(d){return d.petal_length})
                ,d3.max(data,function(d){return d.petal_length})])
    					.range([2,10]);
        ;


        var col = d3.scaleOrdinal(color,spec);
        console.log(x(5.1))

        el.append("g").selectAll("circle")
        .data(data)
        .enter()
        .append("circle")
        .attr("cx",function(d,i){return x(d[var_x])})
        .attr("cy",function(d,i){return y(d[var_y])})
        .attr("r",function(d,i){return radius(d.petal_length)})
        .attr("transform","translate(" + pos_x + "," + pos_y + ")")
        .style("fill",function(d,i){ return col(d.species)})
        .on("mouseover",function(d,i){

          d3.selectAll("circle").filter(function(e){
            return d === e

          }).style("fill",function(e){return "yellow"})
        })
        .on("click",function(d,i){

          d3.select(this).style("fill","pink")
        })

var xAxis = d3.axisBottom()
    .scale(x);

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

       var pos = dim_height+pos_y

svg.append("g")
      .attr("class", "x axis")
      .call(xAxis)
        .attr("transform","translate(" + pos_x + "," + pos + ")")


svg.append("g")
      .attr("class", "y axis")
        .attr("transform","translate(" + pos_x + "," + pos_y + ")")
      .call(yAxis)
     }


var dim_width = 100;
var dim_height = 100;

        console.log(data.columns.slice(0,4))

        var col_name = data.columns.slice(0,4);
        col_name.forEach(function(var_x,i){
          col_name.forEach(function(var_y,j){
								var pos_x = i*150;
            var pos_y = j*150;

scatterplot(svg,data,var_x,var_y,dim_width,dim_height,pos_x,pos_y)
          })
        })

      }


            )

  </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 margin = {top: 20,right: 20,bottom: 30,left: 40};
	var width = 960 - margin.left - margin.right;
	var height = 1000 - margin.top - margin.bottom;
	var svg = d3.select("body").append("svg")
	.attr("width", width+margin.left+margin.right)
	.attr("height", height+margin.top+margin.bottom)
	.append("g")
	.attr("transform","translate(" + margin.left +","+ margin.top +")")


	d3.csv("https://raw.githubusercontent.com/LyonDataViz/MOS5.5-Dataviz/master/data/iris.csv",
	function(data){

	console.log(data);
	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
	})
	console.log(data);
	function scatterplot(el,data,var_x,var_y,dim_width,dim_height,pos_x,pos_y){

	var x = d3.scaleLinear().range([0,dim_width]);
	x.domain(d3.extent(data,function(d){
	return d[var_x];
	})).nice();

	var y = d3.scaleLinear()
	.range([dim_height,0])
	y.domain(d3.extent(data,function(d){

	return d[var_y];
	}))

	var spec = ["setosa","versicolor","virginica"] ;
	var color = ["red","blue","green"];
	var radius = d3.scaleSqrt()
	.domain([
	d3.min(data,function(d){return d.petal_length})
	,d3.max(data,function(d){return d.petal_length})])
	.range([2,10]);
	;


	var col = d3.scaleOrdinal(color,spec);
	console.log(x(5.1))

	el.append("g").selectAll("circle")
	.data(data)
	.enter()
	.append("circle")
	.attr("cx",function(d,i){return x(d[var_x])})
	.attr("cy",function(d,i){return y(d[var_y])})
	.attr("r",function(d,i){return radius(d.petal_length)})
	.attr("transform","translate(" + pos_x + "," + pos_y + ")")
	.style("fill",function(d,i){ return col(d.species)})
	.on("mouseover",function(d,i){

	d3.selectAll("circle").filter(function(e){
	return d === e

	}).style("fill",function(e){return "yellow"})
	})
	.on("click",function(d,i){

	d3.select(this).style("fill","pink")
	})

	var xAxis = d3.axisBottom()
	.scale(x);

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

	var pos = dim_height+pos_y

	svg.append("g")
	.attr("class", "x axis")
	.call(xAxis)
	.attr("transform","translate(" + pos_x + "," + pos + ")")


	svg.append("g")
	.attr("class", "y axis")
	.attr("transform","translate(" + pos_x + "," + pos_y + ")")
	.call(yAxis)
	}


	var dim_width = 100;
	var dim_height = 100;

	console.log(data.columns.slice(0,4))

	var col_name = data.columns.slice(0,4);
	col_name.forEach(function(var_x,i){
	col_name.forEach(function(var_y,j){
	var pos_x = i*150;
	var pos_y = j*150;

	scatterplot(svg,data,var_x,var_y,dim_width,dim_height,pos_x,pos_y)
	})
	})

	}




	)

	</script>
	</body>