Ternary Plot Banner / Jules Blom

Jules Blom

Interested in data visualisation, maps, JavasScript, and geology

Workspace

Published

Edited

Apr 6, 2021

Importers

1 star

banner("Ternary Plot Banner")

banner = text => svg`<svg width=${width} height="300">

<defs>

</linearGradient>

</defs>

${copiedPlot}

<text

fill="white"

x="${width / 2}"

y="260"

font-size="26"

text-anchor="middle"

${text}

</text>

</svg>`

drawBasicTernaryPlot.cloneNode()

copiedPlot = `<g transform="translate(${width /

2}, 130)" height="300" font-family="sans-serif" id="chart"><g class="grid"><path d="M60.62177826491071,34.99999999999999L-60.62177826491071,35 M48.49742261192857,13.999999999999993L-48.49742261192857,14 M36.373066958946424,-7.000000000000007L-36.373066958946424,-7 M24.248711305964292,-28.000000000000007L-24.248711305964285,-28 M12.124355652982146,-49.00000000000001L-12.124355652982137,-49 M7.105427357601002e-15,-70L4.2862637970157365e-15,-70" stroke="#e3e3e3" stroke-width="2"></path><path d="M4.2862637970157365e-15,-70L60.62177826491071,34.99999999999999 M-12.12435565298214,-49L36.37306695894643,34.99999999999999 M-24.248711305964285,-28L12.124355652982139,34.99999999999999 M-36.373066958946424,-7L-12.124355652982139,34.99999999999999 M-48.49742261192857,14L-36.37306695894643,34.99999999999999 M-60.62177826491071,35L-60.62177826491071,34.99999999999999" stroke="#e3e3e3" stroke-width="1"></path><path d="M-60.62177826491071,34.99999999999999L7.105427357601002e-15,-70 M-36.373066958946424,34.99999999999999L12.124355652982146,-49.00000000000001 M-12.124355652982139,34.99999999999999L24.248711305964292,-28.000000000000007 M12.124355652982139,34.99999999999999L36.373066958946424,-7.000000000000007 M36.37306695894643,34.99999999999999L48.49742261192857,13.999999999999996 M60.62177826491071,34.99999999999999L60.62177826491071,34.99999999999999" stroke="#e3e3e3" stroke-width="2"></path></g><g class="ternary-ticks" font-size="8"><g class="axis-ticks"><g class="tick" transform="translate(60.62177826491071,34.99999999999999)"><text text-anchor="start" transform="rotate(0)" dx="11" dy=".5em">0%</text><line transform="rotate(90)" y2="-6" stroke="grey"></line></g><g class="tick" transform="translate(30.310889132455358,-17.500000000000007)"><text text-anchor="start" transform="rotate(0)" dx="11" dy=".5em">50%</text><line transform="rotate(90)" y2="-6" stroke="grey"></line></g><g class="tick" transform="translate(7.105427357601002e-15,-70)"><text text-anchor="start" transform="rotate(0)" dx="11" dy=".5em">100%</text><line transform="rotate(90)" y2="-6" stroke="grey"></line></g></g><g class="axis-ticks"><g class="tick" transform="translate(4.2862637970157365e-15,-70)"><text text-anchor="end" transform="rotate(60)" dx="-11" dy=".5em">0%</text><line transform="rotate(150)" y2="6" stroke="grey"></line></g><g class="tick" transform="translate(-30.310889132455355,-17.5)"><text text-anchor="end" transform="rotate(60)" dx="-11" dy=".5em">50%</text><line transform="rotate(150)" y2="6" stroke="grey"></line></g><g class="tick" transform="translate(-60.62177826491071,35)"><text text-anchor="end" transform="rotate(60)" dx="-11" dy=".5em">100%</text><line transform="rotate(150)" y2="6" stroke="grey"></line></g></g><g class="axis-ticks"><g class="tick" transform="translate(-60.62177826491071,34.99999999999999)"><text text-anchor="end" transform="rotate(-60)" dx="-11" dy=".5em">0%</text><line transform="rotate(30)" y2="6" stroke="grey"></line></g><g class="tick" transform="translate(0,34.99999999999999)"><text text-anchor="end" transform="rotate(-60)" dx="-11" dy=".5em">50%</text><line transform="rotate(30)" y2="6" stroke="grey"></line></g><g class="tick" transform="translate(60.62177826491071,34.99999999999999)"><text text-anchor="end" transform="rotate(-60)" dx="-11" dy=".5em">100%</text><line transform="rotate(30)" y2="6" stroke="grey"></line></g></g></g><path d="M4.2862637970157365e-15,-70L-60.62177826491071,34.99999999999999L60.62177826491071,34.99999999999999Z" fill="transparent" stroke="black" stroke-width="2"></path></g>`

miniTernaryPlot = {

const normalTernary = barycentric();

return ternaryPlot(normalTernary).radius(70);

}

import {

ternaryPlot,

barycentric,

ticks,

axisLabels,

grid

} from "@julesblm/d3-ternary"

d3 = require('d3@v6')

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.

Learn more