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>
    var m=5,n=10;
 var max = 0;
var margin = {top: 20,right: 10,bottom: 20,left: 10};
    var width = 600 - margin.left - margin.right;
    var height = 400 - 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 data = d3.range(m).map(function(){
      var d = d3.range(n).map(Math.random);
      max = Math.max(d3.max(d));
      return d;
    });

        var color = ["red","blue","green","black","yellow"];
    var col = d3.scaleOrdinal(color,d3.range(m));
    var color = d3.scaleOrdinal(d3.schemeCategory20);
    var x = d3.scaleBand()
    .domain(d3.range(m))
    .range([0,width])
    .paddingInner(.1);

    var x2 = d3.scaleBand()
    .domain(d3.range(n))
    .range([0,x.bandwidth()-10])

    var y = d3.scaleLinear()
    .domain([0,max])
    .range([0,height])


    svg.selectAll("rect").data(data)
    .enter()
    .append("g")
    //.style("stroke","black")
    //.style("fill","white")
    //.attr("x",function(d,i){return x(i)})
    //.attr("y",function(d,i){return height-y(d3.max(d))})
    //.attr("width",function(d,i){return x.bandwidth()})
    //.attr("height",function(d,i){return y(d3.max(d))})
    .attr("transform",function(d,i){
      return "translate("+ x(i) +", "+ 0 +")"
    })
    .selectAll("rect")
    .data(function(d){
      console.log(d);
      return d;})
    .enter()
    .append("rect")

    .style("stroke","black")
    .style("fill",function(d,i){return color(i)})
    .attr("x",function(d,i){return x2(i)})
    .attr("y",function(d,i){return height - y(d)})
    .attr("width",function(d,i){return x2.bandwidth()})
    .attr("height",function(d,i){return y(d)})


  </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>
	var m=5,n=10;
	var max = 0;
	var margin = {top: 20,right: 10,bottom: 20,left: 10};
	var width = 600 - margin.left - margin.right;
	var height = 400 - 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 data = d3.range(m).map(function(){
	var d = d3.range(n).map(Math.random);
	max = Math.max(d3.max(d));
	return d;
	});

	var color = ["red","blue","green","black","yellow"];
	var col = d3.scaleOrdinal(color,d3.range(m));
	var color = d3.scaleOrdinal(d3.schemeCategory20);
	var x = d3.scaleBand()
	.domain(d3.range(m))
	.range([0,width])
	.paddingInner(.1);

	var x2 = d3.scaleBand()
	.domain(d3.range(n))
	.range([0,x.bandwidth()-10])

	var y = d3.scaleLinear()
	.domain([0,max])
	.range([0,height])


	svg.selectAll("rect").data(data)
	.enter()
	.append("g")
	//.style("stroke","black")
	//.style("fill","white")
	//.attr("x",function(d,i){return x(i)})
	//.attr("y",function(d,i){return height-y(d3.max(d))})
	//.attr("width",function(d,i){return x.bandwidth()})
	//.attr("height",function(d,i){return y(d3.max(d))})
	.attr("transform",function(d,i){
	return "translate("+ x(i) +", "+ 0 +")"
	})
	.selectAll("rect")
	.data(function(d){
	console.log(d);
	return d;})
	.enter()
	.append("rect")

	.style("stroke","black")
	.style("fill",function(d,i){return color(i)})
	.attr("x",function(d,i){return x2(i)})
	.attr("y",function(d,i){return height - y(d)})
	.attr("width",function(d,i){return x2.bandwidth()})
	.attr("height",function(d,i){return y(d)})



	</script>
	</body>