yi-ye-zhi-qiu/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
//Idea heavily inspired by Michael Stanaland's http://bl.ocks.org/mstanaland/6100713.
//Written by an absolute begineer to coding/d3js.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>d3.js learning</title>
  <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <style type="text/css">

  svg {
    font: 10px sans-serif;
    shape-rendering: crispEdges;
  }

  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
  }

  path.domain {
    stroke: none;
  }

  .y .tick line {
    stroke: #dddddd;
  }
  </style>

</head>
<body>
<script type="text/javascript">

// Setup svg using Bostock's margin convention

var margin = {top: 25, right: 160, bottom: 40, left: 30};

var width = 860 - margin.left - margin.right,
    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 + ")");


/* Data in strings like it would be if imported from a csv */

var data = [
  { year: "person1", 小虎: "01", 小明: "3", 小兔兔: "4", 小桃子: "10", 小陈: "5"},
  { year: "person2", 小虎: "02", 小明: "5", 小兔兔: "3", 小桃子: "9", 小陈: "6"},
];


// Transpose the data into layers
var dataset = d3.layout.stack()(["小虎", "小明", "小兔兔", "小桃子", "小陈"].map(function(fruit) {
  return data.map(function(d) {
    return {x: d.year, y: +d[fruit]};
  });
}));


// Set x, y and colors

var x = d3.scale.ordinal().rangeRoundBands([1, width],0.05);
var xAxis = d3.svg.axis().scale(x).orient("bottom");
x.domain(data.map(function(d) { return d.year; }));


var y = d3.scale.linear()
  .domain([0, d3.max(dataset, function(d) {  return d3.max(d, function(d) { return d.y0 + d.y; });  })])
  .range([height, 0]);

var colors = ["#003f5c", "#58508d", "#bc5090", "#ff6361","#ffa600"];

// Define and draw axes
var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left")
  .ticks(5)
  .tickSize(-width, 0, 0)
  .tickFormat( function(d) { return d } );

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis);

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

svg.append("text")
    .attr("transform",
         "translate(" + (width/2) + " ," +
                       (height + margin.top + 5) + ")")
      .style("text-anchor", "middle")
      .text("Boss (老板)");

svg.append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 0 - margin.left)
    .attr("x",0 - (height / 2))
  	.attr("dy", "1em")
    .style("text-anchor", "middle")
    .text("# of mistakes");

// Create groups for each series, rects for each segment
var groups = svg.selectAll("g.cost")
  .data(dataset)
  .enter().append("g")
  .attr("class", "cost")
  .style("fill", function(d, i) { return colors[i]; });

var rect = groups.selectAll("rect")

  .data(function(d) { return d; })
  .enter()
  .append("rect")
  .attr("x", function(d) { return x(d.x); })
  .attr("y", function(d) { return y(d.y0 + d.y); })
  .attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); })
  .attr("width", x.rangeBand())
  .on("mouseover", function() { tooltip.style("display", null); })
  .on("mouseout", function() { tooltip.style("display", "none"); })
  .on("mousemove", function(d) {
    var xPosition = d3.mouse(this)[0] - 15;
    var yPosition = d3.mouse(this)[1] - 25;
    tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
    tooltip.select("text").text(d.y);
  });


// Draw legend
var legend = svg.selectAll(".legend")
  .data(colors)
  .enter().append("g")
  .attr("class", "legend")
  .attr("transform", function(d, i) { return "translate(30," + i * 19 + ")"; });

legend.append("rect")
  .attr("x", width - 18)
  .attr("width", 18)
  .attr("height", 18)
  .style("fill", function(d, i) {return colors.slice().reverse()[i];});

legend.append("text")
  .attr("x", width + 5)
  .attr("y", 9)
  .attr("dy", ".35em")
  .style("text-anchor", "start")
  .text(function(d, i) {
    switch (i) {
      case 0: return "小陈";
      case 1: return "小桃子";
      case 2: return "小兔兔";
      case 3: return "小明";
      case 4: return "小虎";
    }
  });

// Prep the tooltip bits, initial display is hidden
var tooltip = svg.append("g")
  .attr("class", "tooltip")
  .style("display", "none");

tooltip.append("rect")
  .attr("width", 30)
  .attr("height", 20)
  .attr("fill", "white")
  .style("opacity", 0.5);

tooltip.append("text")
  .attr("x", 15)
  .attr("dy", "1.2em")
  .style("text-anchor", "middle")
  .attr("font-size", "10px")
  .attr("font-weight", "bold");


</script>
</body>
</html>
	//Idea heavily inspired by Michael Stanaland's http://bl.ocks.org/mstanaland/6100713.
	//Written by an absolute begineer to coding/d3js.

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title>d3.js learning</title>
	<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<style type="text/css">

	svg {
	font: 10px sans-serif;
	shape-rendering: crispEdges;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	}

	path.domain {
	stroke: none;
	}

	.y .tick line {
	stroke: #dddddd;
	}
	</style>

	</head>
	<body>
	<script type="text/javascript">

	// Setup svg using Bostock's margin convention

	var margin = {top: 25, right: 160, bottom: 40, left: 30};

	var width = 860 - margin.left - margin.right,
	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 + ")");


	/* Data in strings like it would be if imported from a csv */

	var data = [
	{ year: "person1", 小虎: "01", 小明: "3", 小兔兔: "4", 小桃子: "10", 小陈: "5"},
	{ year: "person2", 小虎: "02", 小明: "5", 小兔兔: "3", 小桃子: "9", 小陈: "6"},
	];



	// Transpose the data into layers
	var dataset = d3.layout.stack()(["小虎", "小明", "小兔兔", "小桃子", "小陈"].map(function(fruit) {
	return data.map(function(d) {
	return {x: d.year, y: +d[fruit]};
	});
	}));


	// Set x, y and colors

	var x = d3.scale.ordinal().rangeRoundBands([1, width],0.05);
	var xAxis = d3.svg.axis().scale(x).orient("bottom");
	x.domain(data.map(function(d) { return d.year; }));


	var y = d3.scale.linear()
	.domain([0, d3.max(dataset, function(d) { return d3.max(d, function(d) { return d.y0 + d.y; }); })])
	.range([height, 0]);

	var colors = ["#003f5c", "#58508d", "#bc5090", "#ff6361","#ffa600"];

	// Define and draw axes
	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left")
	.ticks(5)
	.tickSize(-width, 0, 0)
	.tickFormat( function(d) { return d } );

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis);

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	svg.append("text")
	.attr("transform",
	"translate(" + (width/2) + " ," +
	(height + margin.top + 5) + ")")
	.style("text-anchor", "middle")
	.text("Boss (老板)");

	svg.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 0 - margin.left)
	.attr("x",0 - (height / 2))
	.attr("dy", "1em")
	.style("text-anchor", "middle")
	.text("# of mistakes");

	// Create groups for each series, rects for each segment
	var groups = svg.selectAll("g.cost")
	.data(dataset)
	.enter().append("g")
	.attr("class", "cost")
	.style("fill", function(d, i) { return colors[i]; });

	var rect = groups.selectAll("rect")

	.data(function(d) { return d; })
	.enter()
	.append("rect")
	.attr("x", function(d) { return x(d.x); })
	.attr("y", function(d) { return y(d.y0 + d.y); })
	.attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); })
	.attr("width", x.rangeBand())
	.on("mouseover", function() { tooltip.style("display", null); })
	.on("mouseout", function() { tooltip.style("display", "none"); })
	.on("mousemove", function(d) {
	var xPosition = d3.mouse(this)[0] - 15;
	var yPosition = d3.mouse(this)[1] - 25;
	tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
	tooltip.select("text").text(d.y);
	});


	// Draw legend
	var legend = svg.selectAll(".legend")
	.data(colors)
	.enter().append("g")
	.attr("class", "legend")
	.attr("transform", function(d, i) { return "translate(30," + i * 19 + ")"; });

	legend.append("rect")
	.attr("x", width - 18)
	.attr("width", 18)
	.attr("height", 18)
	.style("fill", function(d, i) {return colors.slice().reverse()[i];});

	legend.append("text")
	.attr("x", width + 5)
	.attr("y", 9)
	.attr("dy", ".35em")
	.style("text-anchor", "start")
	.text(function(d, i) {
	switch (i) {
	case 0: return "小陈";
	case 1: return "小桃子";
	case 2: return "小兔兔";
	case 3: return "小明";
	case 4: return "小虎";
	}
	});

	// Prep the tooltip bits, initial display is hidden
	var tooltip = svg.append("g")
	.attr("class", "tooltip")
	.style("display", "none");

	tooltip.append("rect")
	.attr("width", 30)
	.attr("height", 20)
	.attr("fill", "white")
	.style("opacity", 0.5);

	tooltip.append("text")
	.attr("x", 15)
	.attr("dy", "1.2em")
	.style("text-anchor", "middle")
	.attr("font-size", "10px")
	.attr("font-weight", "bold");



	</script>
	</body>
	</html>