D3OG

All examples By author By category About

tomshanley

Full window Github gist

Ternary grid or legend

Create a grid of triangles, used for creating a ternary color scale

Now using chroma.js

forked from widged's block: Rapid implementation of a ternary plot with d3js

forked from tomshanley's block: Ternary background

forked from tomshanley's block: Ternary grid or legend

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
	<title>D3 Ternary Plot</title>
  
  <script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="chroma.js"></script>
  <script src="jscolor.js"></script>
  
	<style>
    
    body {
      font-family: sans-serif
    }
    
    .chart {
     display:flex 
    }
     
    
		.triangle-grid {
			stroke-width: 0.5;
			stroke: #6d6d6d;
      opacity: 0.2
		}
    
    .triangle-legend {
			stroke-width: 0.5;
			stroke: #FFF;
		}
    
    circle {
      stroke: #111
    }

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

</style>

</head>

<body>
    
    <div>
      			<form-group>
              <label for="classes">Number of rows:</label>
              <select id="rows" name="rows">
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="30">30</option>
              </select>
            </form-group>
            <form-group>
              <label for="start-colour">Top:</label>
              <input class="jscolor" id="top-colour" value="9500e5">
            </form-group>
            <form-group>
              <label for="right-colour">Right:</label>
              <input class="jscolor" id="right-colour" value="ffd000">
            </form-group>
      			<form-group>
              <label for="left-colour">Left:</label>
              <input class="jscolor" id="left-colour" value="ff0026">
            </form-group>
          </div>

(function() {

console.clear()

var width = 400;
    var height = triangleHeight(width)
    var margin = 20;
    var radius = 4
    var rows = 7 // number of rows in the grid
    var rotateHSL = 180

var classGrid = "triangle-grid"
    var classLegend = "triangle-legend"

function selClass(c) {
        return "." + c
    }

//////////////////////////////////////////
    // Overall triangle geometry

var maxDistanceToCentre = Math.ceil(2 * (height / 3))

var corners = {
        "left": {},
        "top": {},
        "right": {}
    }

corners.left.x = margin
    corners.left.y = height + margin
    corners.top.x = (width / 2) + margin
    corners.top.y = margin
    corners.right.x = width + margin
    corners.right.y = height + margin

var centre = {
        "x": (width / 2) + margin,
        "y": margin + maxDistanceToCentre
    }

//set the colours for each corner (top, right, left)
    //let colourArr = ['#7fc97f','#beaed4','#fdc086']
    //let colourArr = ['#66c2a5','#fc8d62','#8da0cb']
    //let colourArr = ['#8dd3c7','#ffffb3','#bebada']
    //let colourArr = ['#b3e2cd','#fdcdac','#cbd5e8']
    let colourArr = ['#9500e5', '#ffd000', '#ff0026']

let colourScale = chroma.scale()
        .mode('lab')
        .domain([0, 120, 240, 360])
        .range([colourArr[0], colourArr[1], colourArr[2], colourArr[0]])

//////////////////////////////////////////
    // Create grid data

var triangles = createTriangleGrid(rows, width, height)

//select inputs
    let rowInput = d3.select('#rows')
    let colTopInput = d3.select('#top-colour')
    let colRightInput = d3.select('#right-colour')
    let colLeftInput = d3.select('#left-colour')

//set default values for inputs
    rowInput.property("value", rows)
    colTopInput.property("value", colourArr[0])
    colRightInput.property("value", colourArr[1])
    colLeftInput.property("value", colourArr[2])

//////////////////////////////////////////
    // Draw the SVG and shapes

var svg = d3.select('#plot').append('svg')
        .attr("width", 500)
        .attr("height", 400);

var chartBackground = svg.append("g")
        .attr("id", "grid")

drawGrid(chartBackground, triangles, classGrid)

var legend = d3.select('#legend').append('svg')
        .attr("width", 500)
        .attr("height", 400)
        .append("g")
        .attr("id", "legend-g")

drawGrid(legend, triangles, classLegend)

//update grid if inputs change
    d3.selectAll("input, select")
        .on('change', function(d) {

chartBackground.selectAll(selClass(classGrid)).remove()
            legend.selectAll(selClass(classLegend)).remove()

rows = rowInput.property("value")
            colourArr[0] = colTopInput.property("value")
            colourArr[1] = colRightInput.property("value")
            colourArr[2] = colLeftInput.property("value")
            colourScale.range([colourArr[0],
                colourArr[1],
                colourArr[2],
                colourArr[0]
            ])

triangles = createTriangleGrid(rows, width, height)

drawGrid(chartBackground, triangles, classGrid)
            drawGrid(legend, triangles, classLegend)

svg.selectAll('circle')
                .style("fill", function(d) {
                    return ternaryFill(d.a, d.b, d.c)
                })

})

//////////////////////////////////////////
    // Create random data

var data = d3.range(100).map(function(d) {
        let dataPoint = {}
        dataPoint.a = Math.random() * 100
        dataPoint.b = (100 - dataPoint.a) * Math.random()
        dataPoint.c = 100 - dataPoint.a - dataPoint.b
        let p = coord(dataPoint.a, dataPoint.b, dataPoint.c)
        dataPoint.x = p.x
        dataPoint.y = p.y
        return dataPoint
    })

svg.append("g")
        .selectAll(".point")
        .data(data)
        .enter()
        .append("circle")
        .attr("class", "point")
        .attr("cx", d => d.x)
        .attr("cy", d => d.y)
        .attr("r", radius)
        .style("fill", function(d) {
            return ternaryFill(d.a, d.b, d.c)
        })
        .style("opacity", 1)

//////////////////////////////////////////////
    // Draw grid

function drawGrid(sel, gridData, attrClass) {
        sel.selectAll("path")
            .data(gridData)
            .enter()
            .append("path")
            .attr("class", attrClass)
            .attr("d", function(d) {
                return trianglePath(d.corners)
            })
            .style("fill", function(d) {
                return d.color
            })
    }

//////////////////////////////////////////////
    // Return a x/y coordinate for ternary data point

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

pos.x = corners.left.x * a + corners.right.x * b + corners.top.x * c;
            pos.y = corners.left.y * a + corners.right.y * b + corners.top.y * c;
        }
        return pos;
    }

//////////////////////////////////////////////
    // Functions to draw the data

function ternaryFill(a, b, c) {

let point = []
        let fillColor = ""

//if 2 args, then assume they are x annd y coord
        //if 3 args, then assume they are a, b, c values, and the x and y coord needs to be computed
        if (arguments.length == 2) {
            point[0] = a
            point[1] = b
        } else {
            let p = coord(a, b, c)
            point[0] = p.x
            point[1] = p.y
        }

//iterate through the grid until the triangle is found that contains the point, and set the fill based on the triangle's colour
        triangles.some(function(t) {
            if (d3.polygonContains(t.corners, point)) {
                fillColor = t.color
                return true
            }
        })

return fillColor
    }

//////////////////////////////////////////////
    // Triangle functions

function triangleHeight(width) {
        return Math.sqrt((width * width) - (width / 2 * width / 2));
    }

function angleTan(opposite, adjacent) {
        return Math.atan(opposite / adjacent);
    }

function triangleHypotenuse(sideA, sideB) {
        return Math.sqrt(Math.pow(sideA, 2) + Math.pow(sideB, 2))
    };

function distanceRatio(x, y) {
        return triangleHypotenuse(x, y) / maxDistanceToCentre
    }

//////////////////////////////////////////////
    // Functions to draw the grid

function trianglePath(corners) {
        return "M " + corners[0][0] +
            " " + corners[0][1] +
            " L " + corners[1][0] +
            " " + corners[1][1] +
            " L " + corners[2][0] +
            " " + corners[2][1] +
            " z"
    }

//////////////////////////////////////////////
    // Functions to create the grid data

function createTriangleGrid(_rows, _width, _height) {

let trianglesHeight = _height / _rows
        let trianglesWidth = _width / _rows
        let arrGrid = []

for (var row = 0; row < _rows; row++) {
            for (var col = 0; col < ((row * 2) + 1); col++) {

let t = {}
                t.row = row
                t.col = col
                t.corners = []

let top = corners.top.y + (row * trianglesHeight)
                let mid = corners.top.x - (row * (trianglesWidth / 2)) + (col * (trianglesWidth / 2))
                let right = mid + (trianglesWidth / 2)
                let left = mid - (trianglesWidth / 2)
                let bottom = top + trianglesHeight

if ((col % 2) == 0) {

t.corners[0] = [mid, top] // top
                    t.corners[1] = [left, bottom] // bottom left
                    t.corners[2] = [right, bottom] // bottom right
                    t.centre = [mid, (top + (2 * (trianglesHeight / 3)))]

} else {

t.corners[0] = [left, top] // top left
                    t.corners[1] = [right, top] // left right
                    t.corners[2] = [mid, bottom] // right
                    t.centre = [mid, (top + (trianglesHeight / 3))]

}

t.color = colorStep(t)
                arrGrid.push(t)

}
        }

return arrGrid
    }

function colorStep(d) {

let dx = d.centre[0]
        let dy = d.centre[1]

let x = Math.abs(dx - centre.x)
        let y = Math.abs(dy - centre.y)

if (dy < centre.y && dx > centre.x) {
            d.angle = angleTan(x, y) * (180 / Math.PI)
        }

if (dy <= centre.y && dx <= centre.x) {
            d.angle = 360 - (angleTan(x, y) * (180 / Math.PI))
        }

if (dy > centre.y && dx < centre.x) {
            d.angle = 180 + (angleTan(x, y) * (180 / Math.PI))
        }

if (dy >= centre.y && dx >= centre.x) {
            d.angle = 180 - (angleTan(x, y) * (180 / Math.PI))
        }

if (d.angle <= 60 || d.angle >= 300) {
            x = Math.abs(dx - corners.top.x)
            y = Math.abs(dy - corners.top.y)
            d.distance = distanceRatio(x, y)
        } else if (d.angle >= 60 && d.angle <= 180) {
            x = Math.abs(dx - corners.right.x)
            y = Math.abs(dy - corners.right.y)
            d.distance = distanceRatio(x, y)
        } else if (d.angle >= 180 && d.angle <= 300) {
            x = Math.abs(dx - corners.left.x)
            y = Math.abs(dy - corners.left.y)
            d.distance = distanceRatio(x, y)
        }

//d.sat = 0.5 //0.6 - (d.distance / 2)
        d.lum = /*0.5*/ 0.2 + (d.distance * 0.8)

let colour = colourScale(d.angle)
        let hslColour = chroma(colour)
            .luminance(d.lum, 'hsl')

return hslColour

}

})()

</script>

</body>
</html>

https://d3js.org/d3.v4.min.js