narensulegai/.block

## .block
license: gpl-3.0

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    body {
        padding-top:100px;
    }

    .flower {
        position: relative;
        border-radius: 300px;
        height: 300px;
        width: 300px;
        overflow: hidden;
        margin: auto;
    }

    .petal {
        position: absolute;
        left: 150px;
        top: -150px;
        background: yellow;
        height: 300px;
        width: 300px;
        box-shadow: 0 0 60px -5px black;
        /* transform: rotate(0deg) skewY(-90deg); */
        transform-origin: bottom left;
    }
</style>

<body>

    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>
        //Note: pie with center angle > 150deg is not supported
        //TODO: stack smaller pies to create larger pies to accomodate center angle > 150deg
        var data = [
            { weight: 1, color: '#B7D968' },
            { weight: 1, color: '#B576AD' },
            { weight: 1, color: '#E04644' },
            { weight: 1.5, color: '#7CCCE5' },
            { weight: 2, color: '#FDE47F' }
        ];

        var totalWeight = d3.sum(data, function (e) { return e.weight });

        var pie = d3.pie()
            .value(function (d) {
                return d.weight;
            });

        var petals = pie(data)

        var toDegree = function (radians) { return radians * 180 / Math.PI; }

        d3.selectAll('body')
            .append('div')
            .attr('class', 'flower')
            .selectAll('div')
            .data(petals)
            .enter()
            .append('div')
            .attr('class', 'petal')
            .attr('style', function (d) {
                var theta = d.endAngle - d.startAngle;
                var transform = 'transform: rotate(' + toDegree(d.startAngle) + 'deg) skewY(' + (toDegree(theta) - 90) + 'deg)';
                var color = 'background:' + d.data.color;
                return [transform, color].join(';');
            });
    </script>
</body>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	body {
	padding-top:100px;
	}

	.flower {
	position: relative;
	border-radius: 300px;
	height: 300px;
	width: 300px;
	overflow: hidden;
	margin: auto;
	}

	.petal {
	position: absolute;
	left: 150px;
	top: -150px;
	background: yellow;
	height: 300px;
	width: 300px;
	box-shadow: 0 0 60px -5px black;
	/* transform: rotate(0deg) skewY(-90deg); */
	transform-origin: bottom left;
	}
	</style>

	<body>

	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>
	//Note: pie with center angle > 150deg is not supported
	//TODO: stack smaller pies to create larger pies to accomodate center angle > 150deg
	var data = [
	{ weight: 1, color: '#B7D968' },
	{ weight: 1, color: '#B576AD' },
	{ weight: 1, color: '#E04644' },
	{ weight: 1.5, color: '#7CCCE5' },
	{ weight: 2, color: '#FDE47F' }
	];

	var totalWeight = d3.sum(data, function (e) { return e.weight });

	var pie = d3.pie()
	.value(function (d) {
	return d.weight;
	});

	var petals = pie(data)

	var toDegree = function (radians) { return radians * 180 / Math.PI; }

	d3.selectAll('body')
	.append('div')
	.attr('class', 'flower')
	.selectAll('div')
	.data(petals)
	.enter()
	.append('div')
	.attr('class', 'petal')
	.attr('style', function (d) {
	var theta = d.endAngle - d.startAngle;
	var transform = 'transform: rotate(' + toDegree(d.startAngle) + 'deg) skewY(' + (toDegree(theta) - 90) + 'deg)';
	var color = 'background:' + d.data.color;
	return [transform, color].join(';');
	});
	</script>
	</body>