chule/.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 width = 960,
    height = 500,
    dataArray = [10, 30, 280, 88, 120, 0, 30, 80, 250, 15, 42, 220, 112];

var max = d3.max(d3.values(dataArray));
var margin = { top: 150, right: 50, bottom: 50, left: 50 };

var svgHeight = height - (margin.top + margin.bottom);

var scale = d3.scaleLinear()
    .domain([0, max])
    .range([0, svgHeight]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

function drawFunction(expandedLine, stackNumber, item) {

    var mainG = svg.append("g")
        .attr("transform", "translate(0, " + margin.top + ")")
        .attr("class", "mainG");

    var points = mainG.selectAll(".points")
        .data(expandedLine)
        .enter()
        .append("g")
        .attr("class", ".points")
        .attr("transform", function (d, i) { return "translate(" + 50 * stackNumber + "," + d + ")"; });

    var label = mainG.append("g").append("text").text(item)
        .attr("text-anchor", "middle")
        .style("font-size", 12)
        .attr("transform", function () { return "translate(" + (50 * stackNumber + 13) + "," + (max - (item + 5)) + "              )"; });

    if (item) {
        v(points, l[0]);
    } else {
        var points0 = mainG.append("g")
            .attr("class", ".points")
            .attr("transform", function () { return "translate(" + (50 * stackNumber) + "," + max + " )"; });

        y(points0, l[0]);
    }
}

l = ["#AE3E33", "#1E6098"];

function g(t) {
    return d3.color(t).brighter(0.5).toString();
}

function v(t, e) {
    var a = t.append("g");
    var n = g(e);
    a.append("polygon").attr("points", "13.59,5.745 0,2.873 13.59,0 27.179,2.873").style("fill", n);
    a.append("polygon").attr("points", "27.179,4.873 13.59,7.745 0,4.873 0,2.873 13.59,5.745 27.179,2.8733").style("fill", e);
    return a;
}

function y(t, e) {
    var a = t.append("g").style("opacity", 0.5);
    a.append("polygon").attr("points", "13.59,5.745 0,2.873 13.59,0 27.179,2.873").style("fill", g(e));
    return a;
}

dataArray.forEach(function (item, i) {
    var expandedLine = d3.range(max, max - item, -3); // from current to max in reverse
    var stackNumber = i + 1;

    drawFunction(expandedLine, stackNumber, item);
    //console.log(expandedLine);
})


  </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 width = 960,
	height = 500,
	dataArray = [10, 30, 280, 88, 120, 0, 30, 80, 250, 15, 42, 220, 112];

	var max = d3.max(d3.values(dataArray));
	var margin = { top: 150, right: 50, bottom: 50, left: 50 };

	var svgHeight = height - (margin.top + margin.bottom);

	var scale = d3.scaleLinear()
	.domain([0, max])
	.range([0, svgHeight]);

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	function drawFunction(expandedLine, stackNumber, item) {

	var mainG = svg.append("g")
	.attr("transform", "translate(0, " + margin.top + ")")
	.attr("class", "mainG");

	var points = mainG.selectAll(".points")
	.data(expandedLine)
	.enter()
	.append("g")
	.attr("class", ".points")
	.attr("transform", function (d, i) { return "translate(" + 50 * stackNumber + "," + d + ")"; });

	var label = mainG.append("g").append("text").text(item)
	.attr("text-anchor", "middle")
	.style("font-size", 12)
	.attr("transform", function () { return "translate(" + (50 * stackNumber + 13) + "," + (max - (item + 5)) + " )"; });

	if (item) {
	v(points, l[0]);
	} else {
	var points0 = mainG.append("g")
	.attr("class", ".points")
	.attr("transform", function () { return "translate(" + (50 * stackNumber) + "," + max + " )"; });

	y(points0, l[0]);
	}
	}

	l = ["#AE3E33", "#1E6098"];

	function g(t) {
	return d3.color(t).brighter(0.5).toString();
	}

	function v(t, e) {
	var a = t.append("g");
	var n = g(e);
	a.append("polygon").attr("points", "13.59,5.745 0,2.873 13.59,0 27.179,2.873").style("fill", n);
	a.append("polygon").attr("points", "27.179,4.873 13.59,7.745 0,4.873 0,2.873 13.59,5.745 27.179,2.8733").style("fill", e);
	return a;
	}

	function y(t, e) {
	var a = t.append("g").style("opacity", 0.5);
	a.append("polygon").attr("points", "13.59,5.745 0,2.873 13.59,0 27.179,2.873").style("fill", g(e));
	return a;
	}

	dataArray.forEach(function (item, i) {
	var expandedLine = d3.range(max, max - item, -3); // from current to max in reverse
	var stackNumber = i + 1;

	drawFunction(expandedLine, stackNumber, item);
	//console.log(expandedLine);
	})




	</script>
	</body>