narensulegai/.block

## .block
license: gpl-3.0

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    text {
        text-anchor: middle;
    }

    path {
        stroke: white;
    }

    .score circle,
    .connector path {
        stroke-width: 2;
        stroke: black;
    }

    .connector path {
        fill: none;
    }

    .label path {
        stroke-width: 10;
    }
</style>

<body>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>

        var width = 960,
            height = 500,
            radius = Math.min(width, height) / 2 - 40,
            scaleRadius = radius - 20

        var data = [
            { lable: 'A1', score: 1 },
            { lable: 'A2', score: 1 },
            { lable: 'A3', score: 0.6 },
            { lable: 'B1', score: 0.9 },
            { lable: 'B2', score: 0.9 },
            { lable: 'B3', score: 0.8 },
            { lable: 'C1', score: 0.7 },
            { lable: 'C2', score: 0.4 },
            { lable: 'C3', score: 0.9 },
            { lable: 'D1', score: 0.8 },
            { lable: 'D2', score: 0.7 },
            { lable: 'D3', score: 0.6 }
        ];

        var ticColors = [
            { to: 0.2, from: 0, color: '#EFFFCD' },
            { to: 0.4, from: 0.2, color: '#CBE86B' },
            { to: 0.6, from: 0.4, color: '#FF9C5B' },
            { to: 0.8, from: 0.6, color: '#F5634A' },
            { to: 1, from: 0.8, color: '#E84A5F' }
        ]

        var color = d3.scaleOrdinal()
            .range(["#FE4365", "#FC9D9A", "#F9CDAD", "#C8C8A9", "#83AF9B"]);

        var arc = d3.arc()
            .outerRadius(radius)
            .innerRadius(radius - 20);

        var pie = d3.pie()
            .sort(null)
            .value(function (d) {
                return 1 //evenly space all
            });


        var spiderEdge = function (data) {
            return pie(data)
                .map(function (d, i) {
                    var edge = {
                        x: d.data.score * scaleRadius * Math.sin((d.endAngle + d.startAngle) / 2),
                        y: -1 * d.data.score * scaleRadius * Math.cos((d.endAngle + d.startAngle) / 2)
                    }
                    return { data: data[i], edge: edge }//remove edge key
                })
        }

        var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

        //Draw concentric tics
        var tics = svg
            .append('g')
            .attr("class", "tic")
            .selectAll("g")
            .data(ticColors.reverse())
            .enter()
            .append("circle")
            .attr("r", function (d) {
                return scaleRadius * d.to
            })
            .style("fill", function (d) {
                return d.color
            })

        //Draw labels
        var label = svg
            .append('g')
            .attr("class", "label")
            .selectAll("g")
            .data(pie(data))
            .enter()

        label.append("path")
            .attr("d", function (d) { return arc(d) })
            .style("fill", function (d, i) {
                return color(i);
            })

        //Draw labels text
        label.append("text")
            .attr("x", function (d) { return radius * Math.sin((d.endAngle + d.startAngle) / 2) })
            .attr("y", function (d) { return -1 * radius * Math.cos((d.endAngle + d.startAngle) / 2) })
            .text(function (d) { return d.data.lable })


        //Draw connecting lines between score points
        var line = d3.line()
            .x(function (d) { return d.edge.x })
            .y(function (d) { return d.edge.y })

        svg.append("g")
            .attr("class", "connector")
            .append("path")
            .attr("d", line(spiderEdge(data)) + 'Z') //Close loop

        //Draw score points
        svg.append("g")
            .attr("class", "score")
            .selectAll("g")
            .data(spiderEdge(data))
            .enter()
            .append("circle")
            .attr("cx", function (d) {
                return d.edge.x
            })
            .attr("cy", function (d) {
                return d.edge.y
            })
            .attr("r", function (d) {
                return 5
            })
            .style("fill", function (d, i) {
                return color(i);
            })

    </script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	text {
	text-anchor: middle;
	}

	path {
	stroke: white;
	}

	.score circle,
	.connector path {
	stroke-width: 2;
	stroke: black;
	}

	.connector path {
	fill: none;
	}

	.label path {
	stroke-width: 10;
	}
	</style>

	<body>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>

	var width = 960,
	height = 500,
	radius = Math.min(width, height) / 2 - 40,
	scaleRadius = radius - 20

	var data = [
	{ lable: 'A1', score: 1 },
	{ lable: 'A2', score: 1 },
	{ lable: 'A3', score: 0.6 },
	{ lable: 'B1', score: 0.9 },
	{ lable: 'B2', score: 0.9 },
	{ lable: 'B3', score: 0.8 },
	{ lable: 'C1', score: 0.7 },
	{ lable: 'C2', score: 0.4 },
	{ lable: 'C3', score: 0.9 },
	{ lable: 'D1', score: 0.8 },
	{ lable: 'D2', score: 0.7 },
	{ lable: 'D3', score: 0.6 }
	];

	var ticColors = [
	{ to: 0.2, from: 0, color: '#EFFFCD' },
	{ to: 0.4, from: 0.2, color: '#CBE86B' },
	{ to: 0.6, from: 0.4, color: '#FF9C5B' },
	{ to: 0.8, from: 0.6, color: '#F5634A' },
	{ to: 1, from: 0.8, color: '#E84A5F' }
	]

	var color = d3.scaleOrdinal()
	.range(["#FE4365", "#FC9D9A", "#F9CDAD", "#C8C8A9", "#83AF9B"]);

	var arc = d3.arc()
	.outerRadius(radius)
	.innerRadius(radius - 20);

	var pie = d3.pie()
	.sort(null)
	.value(function (d) {
	return 1 //evenly space all
	});


	var spiderEdge = function (data) {
	return pie(data)
	.map(function (d, i) {
	var edge = {
	x: d.data.score * scaleRadius * Math.sin((d.endAngle + d.startAngle) / 2),
	y: -1 * d.data.score * scaleRadius * Math.cos((d.endAngle + d.startAngle) / 2)
	}
	return { data: data[i], edge: edge }//remove edge key
	})
	}

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

	//Draw concentric tics
	var tics = svg
	.append('g')
	.attr("class", "tic")
	.selectAll("g")
	.data(ticColors.reverse())
	.enter()
	.append("circle")
	.attr("r", function (d) {
	return scaleRadius * d.to
	})
	.style("fill", function (d) {
	return d.color
	})

	//Draw labels
	var label = svg
	.append('g')
	.attr("class", "label")
	.selectAll("g")
	.data(pie(data))
	.enter()

	label.append("path")
	.attr("d", function (d) { return arc(d) })
	.style("fill", function (d, i) {
	return color(i);
	})

	//Draw labels text
	label.append("text")
	.attr("x", function (d) { return radius * Math.sin((d.endAngle + d.startAngle) / 2) })
	.attr("y", function (d) { return -1 * radius * Math.cos((d.endAngle + d.startAngle) / 2) })
	.text(function (d) { return d.data.lable })


	//Draw connecting lines between score points
	var line = d3.line()
	.x(function (d) { return d.edge.x })
	.y(function (d) { return d.edge.y })

	svg.append("g")
	.attr("class", "connector")
	.append("path")
	.attr("d", line(spiderEdge(data)) + 'Z') //Close loop

	//Draw score points
	svg.append("g")
	.attr("class", "score")
	.selectAll("g")
	.data(spiderEdge(data))
	.enter()
	.append("circle")
	.attr("cx", function (d) {
	return d.edge.x
	})
	.attr("cy", function (d) {
	return d.edge.y
	})
	.attr("r", function (d) {
	return 5
	})
	.style("fill", function (d, i) {
	return color(i);
	})

	</script>