Rapid implementation of a ternary plot with d3js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
	<title>D3 Ternary Plot</title>
	<style>
		line.axis {
			stroke-width: 2;
			stroke: #363636;
		}
		line.tick {
			stroke-width: 1;
			stroke: #c3c3c3;
		}

line.tick-a, text.tick-a {
			stroke: #c30000;
		}

line.tick-b, text.tick-b {
			stroke: #0000c3;
		}

line.tick-c, text.tick-c {
			stroke: #008000;
		}

text.tick-text {
			font-family: "sans-serif";
			font-size: 10px;
			fill: #000000;
		}

circle {
			fill: green;
		}
	</style>

</head>

</div>

var w = 300;
    var h = 260;
    var m = 20;

var corners = [[m,h+m], [w+m,h+m], [(w/2)+m,m]]

corners.forEach(function(corner, idx) { 
		var c1 = idx, c2 = idx + 1; if(c2 >= corners.length) { c2 = 0;}
		svg.append("line")
			.attr("x1", corners[c1][0])
			.attr("y1", corners[c1][1])
			.attr("x2", corners[c2][0])
			.attr("y2", corners[c2][1])
			.classed('axis', true);	
	})

var ticks = [0,20,40,60,80,100], n = ticks.length;
	ticks.forEach(function(v) {
		
		var coord1 = coord(v, 0, 100-v);
		var coord2 = coord(v, 100-v, 0);
		var coord3 = coord(0, 100-v, v);
		var coord4 = coord(100-v, 0, v);

if(v !== 0 && v !== 100) {

svg.append("line")
				.attr("x1", coord1[0])
				.attr("y1", coord1[1])
				.attr("x2", coord2[0])
				.attr("y2", coord2[1])
				.classed('tick tick-a', true);

svg.append("line")
				.attr("x1", coord2[0])
				.attr("y1", coord2[1])
				.attr("x2", coord3[0])
				.attr("y2", coord3[1])
				.classed('tick tick-b', true);

svg.append("line")
				.attr("x1", coord3[0])
				.attr("y1", coord3[1])
				.attr("x2", coord4[0])
				.attr("y2", coord4[1])
				.classed('tick tick-c', true);

}
		svg.append("text")
			.attr("x", coord1[0] - 15)
             .attr("y", coord1[1]  )
             .text( function (d) { return v; })
             .classed('tick-text tick-a', true);

svg.append("text")
			.attr("x", coord2[0] - 6)
             .attr("y", coord2[1] + 10 )
             .text( function (d) { return (100- v); })
             .classed('tick-text tick-b', true);

svg.append("text")
			.attr("x", coord3[0] + 6)
             .attr("y", coord3[1] )
             .text( function (d) { return v; })
             .classed('tick-text tick-c', true);

})

var circles = svg.selectAll("circle").data([coord(10, 20, 70), coord(20, 30, 50), coord(40, 20, 40), coord(20, 80, 0)]);

circles.enter().append("circle")
		.attr("cx", function (d) { return d[0]; })
		.attr("cy", function (d) { return d[1]; })
		.attr("r", 6);

function coord(a, b, c){
		var sum, pos = [0,0];
	    sum = a + b + c;
	    if(sum !== 0) {
		    a /= sum;
		    b /= sum;
		    c /= sum;

pos[0] =  corners[0][0]  * a + corners[1][0]  * b + corners[2][0]  * c;
			pos[1] =  corners[0][1]  * a + corners[1][1]  * b + corners[2][1]  * c;
		}
	    return pos;
	}
	function scale(/* point */ p, factor) {
	    return [p[0] * factor, p[1] * factor];
	}

})()

</script>

</body>
</html>

Modified http://cdnjs.cloudflare.com/ajax/libs/d3/3.1.6/d3.min.js to a secure url

https://cdnjs.cloudflare.com/ajax/libs/d3/3.1.6/d3.min.js