Skip to content

Instantly share code, notes, and snippets.

@davenquinn
Last active February 20, 2018 20:40
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save davenquinn/988167471993bc2ece29 to your computer and use it in GitHub Desktop.
d3-ternary demo with soil types

This is a simple demo of the d3-ternary module for reusable ternary diagrams. It is an updated version of this one by Tom Pearson, showing new graticule, axis labeling, and resizing features.

{
"sand":[
{
"clay":0,
"sand":100,
"silt":0
},
{
"clay":10,
"sand":90,
"silt":0
},
{
"clay":0,
"sand":90,
"silt":10
}
],
"loamy sand":[
{
"clay":0,
"sand":90,
"silt":10
},
{
"clay":10,
"sand":90,
"silt":0
},
{
"clay":15,
"sand":85,
"silt":0
},
{
"clay":0,
"sand":70,
"silt":30
}
],
"sandy loam":[
{
"clay":0,
"sand":70,
"silt":30
},
{
"clay":15,
"sand":85,
"silt":0
},
{
"clay":20,
"sand":80,
"silt":0
},
{
"clay":20,
"sand":53,
"silt":32
},
{
"clay":5,
"sand":53,
"silt":42
},
{
"clay":5,
"sand":45,
"silt":50
},
{
"clay":0,
"sand":50,
"silt":50
}
],
"sandy clay loam":[
{
"clay":20,
"sand":80,
"silt":0
},
{
"clay":35,
"sand":65,
"silt":0
},
{
"clay":35,
"sand":45,
"silt":20
},
{
"clay":28,
"sand":45,
"silt":27
},
{
"clay":20,
"sand":53,
"silt":32
}
],
"sandy clay":[
{
"clay":35,
"sand":65,
"silt":0
},
{
"clay":35,
"sand":45,
"silt":20
},
{
"clay":55,
"sand":45,
"silt":0
}],
"clay":[
{
"clay":55,
"sand":45,
"silt":0
},
{
"clay":100,
"sand":0,
"silt":0
},
{
"clay":60,
"sand":0,
"silt":40
},
{
"clay":40,
"sand":20,
"silt":40
},
{
"clay":40,
"sand":45,
"silt":15
}
],
"clay loam":[
{
"clay":40,
"sand":45,
"silt":15
},
{
"clay":40,
"sand":20,
"silt":40
},
{
"clay":28,
"sand":20,
"silt":52
},
{
"clay":28,
"sand":45,
"silt":27
}
],
"silty clay":[
{
"clay":60,
"sand":0,
"silt":40
},
{
"clay":40,
"sand":0,
"silt":60
},
{
"clay":40,
"sand":20,
"silt":40
}
],
"silty clay loam":[
{
"clay":28,
"sand":0,
"silt":72
},
{
"clay":28,
"sand":20,
"silt":52
},
{
"clay":40,
"sand":20,
"silt":40
},
{
"clay":40,
"sand":0,
"silt":60
}
],
"silty loam":[
{
"clay":0,
"sand":50,
"silt":50
},
{
"clay":28,
"sand":22,
"silt":50
},
{
"clay":28,
"sand":0,
"silt":72
},
{
"clay":12,
"sand":0,
"silt":88
},
{
"clay":12,
"sand":8,
"silt":80
},
{
"clay":0,
"sand":20,
"silt":80
}
],
"silt":[
{
"clay":0,
"sand":0,
"silt":100
},
{
"clay":0,
"sand":20,
"silt":80
},
{
"clay":12,
"sand":8,
"silt":80
},
{
"clay":12,
"sand":0,
"silt":88
}
],
"loam":[
{
"clay":28,
"sand":45,
"silt":27
},
{
"clay":28,
"sand":22,
"silt":50
},
{
"clay":5,
"sand":45,
"silt":50
},
{
"clay":5,
"sand":53,
"silt":42
},
{
"clay":20,
"sand":53,
"silt":32
}
]
}
<!DOCTYPE HTML>
<html>
<head>
<title>Ternary plot in D3.js</title>
<link rel="stylesheet" type="text/css" href="style.css"></style>
</head>
<body>
</body>
<script charset="UTF-8" src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="http://rawgit.com/davenquinn/d3-ternary/master/lib/ternary.js"></script>
<script type="text/javascript" src="main.js"></script>
</html>
graticule = d3.ternary.graticule()
.majorInterval(0.2)
.minorInterval(0.05);
function resize(t) {
t.fit(window.innerWidth,window.innerHeight);
};
var ternary = d3.ternary.plot()
.call(resize)
.call(d3.ternary.scalebars())
.call(d3.ternary.vertexLabels(["Clay", "Sand", "Silt"]))
.call(d3.ternary.neatline())
.call(graticule);
d3.select('body').call(ternary);
function gotData(d) {
data = d3.entries(d).map(function(d) {
v = d.value.map(function(c) {return [c.clay, c.silt, c.sand]});
return { type: d.key, value: v };
});
paths = ternary.plot()
.selectAll("path")
.data(data);
paths
.enter()
.append('path')
.attr({
class: 'ternary-line',
id: function(d) {return d.type.replace('-', ' ')}
})
.on('click', function(d) { console.log(this.id);});
drawPaths = function(){
paths.attr("d",function(d) {
return ternary.path(d.value);
});
};
drawPaths();
ternary.on("resize", drawPaths);
}
d3.json('data.json', gotData);
window.onresize = function(){
resize(ternary);
};
.ternary-circle{
stroke:#c00;
fill:#fff;
}
.ternary-line{
fill: rgba(255,255,255,0.0);
stroke:#c00;
}
.ternary-tick{
fill:none;
stroke:#aaa;
}
.minor{
stroke:#fefefe;
}
text {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 200;
}
.tick text {
font-size: 0.8em;
}
path.domain {
display: none;
}
.graticule path {
stroke: #f8f8f8;
}
.graticule path.major ,.tick line {
stroke: #eee;
stroke-width: 2px;
}
.neatline {
stroke: black;
stroke-width: 2px;
fill: none;
}
@lvmajor
Copy link

lvmajor commented Feb 20, 2018

Would it be possible to easily add single points on a subplot and stack them?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment