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 = 500 - 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 +")")

    var parseDate = d3.timeParse("%b %Y");
    var symbols_name = new Array();
    var symbols_indice = new Array();


	d3.csv("https://raw.githubusercontent.com/LyonDataViz/MOS5.5-Dataviz/master/data/stocks.csv",
            function(data){
    data.forEach(function(d,i){
     d.price = +d.price;
     d.date = parseDate(d.date);
     if(i==0){symbols_name.push(d.symbol); symbols_indice.push(0)}
      else{
        if(data[i].symbol!=data[i-1].symbol){
          symbols_name.push(d.symbol)
          symbols_indice.push(i)
        }

      };


    })
    symbols_indice.push(-1);
    console.log(symbols_name);
    console.log(symbols_indice);
    console.log(data.slice(0,123))
    var color = ["red","blue","green","black"];
    var symType = ["circle","cross","diamond","square"]


    var col = d3.scaleOrdinal(color,symbols_name);
          var dim_width = 700;
    var dim_height = 400;

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

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


    function lineplot(el,data,name,dim_width,dim_height,pos_x,pos_y){


      var line = d3.line()
      .curve(d3.curveMonotoneX)
      .x(function(d,i){return x(d.date)})
      .y(function(d,i){return y(d.price)});

      el.append("g").selectAll("path").data([data]).enter()
     .append("path").attr("class","line").attr("d",line).style("fill","none").attr("real_name",name).style("stroke",col(name))
             .attr("transform","translate(" + pos_x + "," + pos_y + ")")
      ;


    };
    var data1 = data.slice(0,123);
    var name1 = symbols_name[0];
    var pos_x = 0;
    var pos_y = 0;


    symbols_name.forEach(function(name,i){
      var start = symbols_indice[i];
      var end = symbols_indice[i+1];
      var real_data = data.slice(start,end);

      if (i==3){ real_data = data.slice(start,)}
      console.log(name)
     lineplot(svg,real_data,name,dim_width,dim_height,pos_x,pos_y)
    });

var readDate = d3.timeFormat("%b %Y");
var xAxis = d3.axisBottom()
    .scale(x)
.tickFormat(d3.timeFormat("%b %Y"));

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 symbols = d3.scaleOrdinal(d3.symbols);


// creates a generator for symbols
var symbol = d3.symbol().size(10);

    svg.selectAll(".symbol")
    .data(data)
    .enter().append("path")
    .attr("class","symbol")
    .attr("d",function(d,i){return symbol.type(symbols(d.symbol))()})
    .style("fill",function(d){return col(d.symbol)})
    .attr("transform",function(d){
      return "translate("+ x(d.date) +","+ y(d.price) +")"
    })
    .on("mouseover",function(d){
        svg.append("text")
        .attr("class","test")
        .attr("x",x(d.date)+5)
        .attr("y",y(d.price)-5)
        .style("font-size",10)
        .text( readDate(d.date)+ "\n" +d.price)
    })
    .on("mouseout",function(){
      svg.selectAll(".test").style("opacity",0)
    })


 var symbol = d3.symbol().size(40);
 var clicked = "";

 var legend = svg.selectAll(".legend")
    .data(col.domain())
  .enter().append("g")
    .attr("class", "legend")
    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  legend.append("path")
    .style("fill", function(d) { return col(d); })
    	.attr("d", function(d, i) { return symbol.type(symbols(d))(); })
	    .attr("transform", function(d, i) {
    		return "translate(" + (width -10) + "," + 10 + ")";
  		})
  	.on("click",function(d){
    d3.selectAll(".symbol").style("opacity",1)
    d3.selectAll(".line").style("opacity",1)

    if (clicked !==d){
      d3.selectAll(".symbol").filter(function(e){
        console.log(e)
        return e.symbol !== d;
      })
      .style("opacity",0.2)

      d3.selectAll(".line").filter(function(e){
        console.log(e)
        return e[0].symbol !== d;
      })
      .style("opacity",0.2)

      clicked = d
    }
    else{
      clicked = ""
    }
  })
    legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
    	.style("font-size",10)
      .text(function(d) { return d; });

    svg.append("text")
    .attr("x",100)
    .attr("y",50)
    .style("font-size",20)
    .text("Stroke Price(scatter plot)")


  })
  </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 = 500 - 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 +")")

	var parseDate = d3.timeParse("%b %Y");
	var symbols_name = new Array();
	var symbols_indice = new Array();


	d3.csv("https://raw.githubusercontent.com/LyonDataViz/MOS5.5-Dataviz/master/data/stocks.csv",
	function(data){
	data.forEach(function(d,i){
	d.price = +d.price;
	d.date = parseDate(d.date);
	if(i==0){symbols_name.push(d.symbol); symbols_indice.push(0)}
	else{
	if(data[i].symbol!=data[i-1].symbol){
	symbols_name.push(d.symbol)
	symbols_indice.push(i)
	}

	};


	})
	symbols_indice.push(-1);
	console.log(symbols_name);
	console.log(symbols_indice);
	console.log(data.slice(0,123))
	var color = ["red","blue","green","black"];
	var symType = ["circle","cross","diamond","square"]



	var col = d3.scaleOrdinal(color,symbols_name);
	var dim_width = 700;
	var dim_height = 400;

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

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


	function lineplot(el,data,name,dim_width,dim_height,pos_x,pos_y){


	var line = d3.line()
	.curve(d3.curveMonotoneX)
	.x(function(d,i){return x(d.date)})
	.y(function(d,i){return y(d.price)});

	el.append("g").selectAll("path").data([data]).enter()
	.append("path").attr("class","line").attr("d",line).style("fill","none").attr("real_name",name).style("stroke",col(name))
	.attr("transform","translate(" + pos_x + "," + pos_y + ")")
	;




	};
	var data1 = data.slice(0,123);
	var name1 = symbols_name[0];
	var pos_x = 0;
	var pos_y = 0;


	symbols_name.forEach(function(name,i){
	var start = symbols_indice[i];
	var end = symbols_indice[i+1];
	var real_data = data.slice(start,end);

	if (i==3){ real_data = data.slice(start,)}
	console.log(name)
	lineplot(svg,real_data,name,dim_width,dim_height,pos_x,pos_y)
	});

	var readDate = d3.timeFormat("%b %Y");
	var xAxis = d3.axisBottom()
	.scale(x)
	.tickFormat(d3.timeFormat("%b %Y"));

	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 symbols = d3.scaleOrdinal(d3.symbols);


	// creates a generator for symbols
	var symbol = d3.symbol().size(10);

	svg.selectAll(".symbol")
	.data(data)
	.enter().append("path")
	.attr("class","symbol")
	.attr("d",function(d,i){return symbol.type(symbols(d.symbol))()})
	.style("fill",function(d){return col(d.symbol)})
	.attr("transform",function(d){
	return "translate("+ x(d.date) +","+ y(d.price) +")"
	})
	.on("mouseover",function(d){
	svg.append("text")
	.attr("class","test")
	.attr("x",x(d.date)+5)
	.attr("y",y(d.price)-5)
	.style("font-size",10)
	.text( readDate(d.date)+ "\n" +d.price)
	})
	.on("mouseout",function(){
	svg.selectAll(".test").style("opacity",0)
	})


	var symbol = d3.symbol().size(40);
	var clicked = "";

	var legend = svg.selectAll(".legend")
	.data(col.domain())
	.enter().append("g")
	.attr("class", "legend")
	.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

	legend.append("path")
	.style("fill", function(d) { return col(d); })
	.attr("d", function(d, i) { return symbol.type(symbols(d))(); })
	.attr("transform", function(d, i) {
	return "translate(" + (width -10) + "," + 10 + ")";
	})
	.on("click",function(d){
	d3.selectAll(".symbol").style("opacity",1)
	d3.selectAll(".line").style("opacity",1)

	if (clicked !==d){
	d3.selectAll(".symbol").filter(function(e){
	console.log(e)
	return e.symbol !== d;
	})
	.style("opacity",0.2)

	d3.selectAll(".line").filter(function(e){
	console.log(e)
	return e[0].symbol !== d;
	})
	.style("opacity",0.2)

	clicked = d
	}
	else{
	clicked = ""
	}
	})
	legend.append("text")
	.attr("x", width - 24)
	.attr("y", 9)
	.attr("dy", ".35em")
	.style("text-anchor", "end")
	.style("font-size",10)
	.text(function(d) { return d; });

	svg.append("text")
	.attr("x",100)
	.attr("y",50)
	.style("font-size",20)
	.text("Stroke Price(scatter plot)")



	})
	</script>
	</body>