{
const { ternaryPlot, barycentric } = d3ternary
const { Delaunay } = d3delaunay
const sampleData = [
{E:1,S:1,G:1,color:'#dfdfdf'},
{E:1,S:0,G:0,color:'#20ad57'},
{E:0,S:1,G:0,color:'#2a40c7'},
{E:0,S:0,G:1,color:'#e45317'},
{E:1,S:1,G:0,color:'#25bfc4'},
{E:1,S:0,G:1,color:'#d2d514'},
{E:0,S:1,G:1,color:'#a586e8'},
]
const bary = barycentric().a(d=>d.E).b(d=>d.S).c(d=>d.G).vertices(vertices)
const tp = ternaryPlot(bary).radius(1)
sampleData.forEach( d => [d.x,d.y] = bary(d) )
let tesselation = Delaunay.from(sampleData.map(d=>[d.x,d.y])).voronoi()
sampleData.forEach( (d,i) => d.pathData = tesselation.renderCell(i) )
const svg = d3.create("svg")
.attr("viewBox", [width/2, height/2, width, height]);
const g = svg.append('g')
.attr('transform',`translate(${width/2} ${height/2})`)
g.selectAll('path')
.data(sampleData)
.join('path')
.attr('d',d=>d.pathData)
.attr('fill',d=>d.color)
g.selectAll('circle')
.data(sampleData)
.join('circle')
.attr('cx',d=>d.x)
.attr('cy',d=>d.y)
.attr('r',3)
.attr('fill','black')
g.append('path')
.attr('class','triangle')
.attr('d',tp.triangle())
.attr('stroke','black')
.attr('fill','none')
return Object.assign( svg.node(), {} )
}