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.
Last active
February 20, 2018 20:40
-
-
Save davenquinn/988167471993bc2ece29 to your computer and use it in GitHub Desktop.
d3-ternary demo with soil types
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "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 | |
| } | |
| ] | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); | |
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Would it be possible to easily add single points on a subplot and stack them?