31:T58b,barycentricDiagram = svg`` // Angle: -90 // bg for GitHub docs32:[] 2f:{"title":"Ternary Plot Documentation","cells":[{"id":0,"value":"md`# Ternary Plot Documentation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":986,"value":"banner(\"Documentation\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":990,"value":"md`This notebook documents the [d3-ternary](https://observablehq.com/@julesblm/d3-ternary) module which implements methods for computing and plotting ternary plots.\n\nTo use it on Observable\n\n~~~javascript\nimport { ternaryPlot, barycentric } from \"@julesblm/d3-ternary\"\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"md`## API Reference`","pinned":false,"hidden":false,"mode":"ojs"},{"id":847,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"md`### \\`barycentric()\\` `","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"barycentricDocs = md`**barycentric**() [<>]()\n\nConstructs a new default ternary converter that converts ternary data to Cartesian coordinates. By default, it makes an equilateral triangle on the unit circle centered at the origin.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"barycentricConvertDoc = md`[#](#barycentricConvertDoc) *barycentric*(_data_) [<>](todo)\n\nComputes \\`[x,y]\\` coordinates from a ternary values (a single three-element array). Note that the [x, y] coordinates here are unscaled (radius of 1). All values are [normalized](#baryCentricNormalizeDoc) by default.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":"barycentricDomainsDoc = md`[#](#barycentricDomainsDoc) *barycentric*.**domains**([_domains_]) [<>](todo)\n\nIf _domains_ is specified, sets the domains of the ternary plot to the specified domains in order of \\`[A, B, C]\\`.\nIf _domains_ is not specified, returns the current domains, which defaults to \\`[[0, 1], [0, 1], [0, 1]]\\`. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1174,"value":"barycentricRotationDoc = md`[#](#barycentricRotationDoc) *barycentric*.**rotation**([_angle_]) [<>](todo)\n\nIf _angle_ is specified, sets the rotation angle in degrees and returns this barycentric converter. If _angle_ is not specified, returns the current rotation angle, which defaults to 0. Positive angles rotate clockwise.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"barycentricADoc = md`[#](#barycentricADoc) *barycentric*.**a**([_a_]) [<>](todo)\n\nIf _a_ is specified, sets the a-accessor to the specified function and returns this barycentric converter. If _a_ is not specified, returns the current a-value accessor, which defaults to: \n~~~javascript\nconst a = (d) => d[0]\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"barycentricBDoc = md`[#](#barycentricBDoc) *barycentric*.**b**([_b_]) [<>](todo)\n\nIf _b_ is specified, sets the b-accessor to the specified function and returns this barycentric converter. If _b_ is not specified, returns the current b-value accessor, which defaults to: \n~~~javascript\nconst b = (d) => d[1]\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"barycentricCDoc = md`[#](#barycentricCDoc) *barycentric*.**c**([_c_]) [<>](todo)\n\nIf _c_ is specified, sets the c-accessor to the specified function and returns this barycentric converter. If _c_ is not specified, returns the current c-value accessor, which defaults to: \n~~~javascript\nconst c = (d) => d[2]\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"barycentricInvertDoc = md`[#](#barycentricInvertDoc) *barycentric*.**invert**(_coordinates_) [<>](todo)\n\nComputes ternary values from coordinates (a two-element array \\`[x, y]\\`). Note that the [x, y] coordinates here are unscaled i.e. a radius of 1. For easily inverting mouse positions, the ternary plot should centered at the origin of the containing SVG element.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"equiTriangle = [[0, -1], [-0.866025, 0.5], [0.866025, 0.5]].map(([x, y]) => [\n x * miniRadius,\n y * miniRadius\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"md`### \\`ternaryPlot()\\` `","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"ternaryPlotDocs = md`**ternaryPlot**(_barycentric_) [<>](https://observablehq.com/@julesblm/)\n\nConstructs a new default ternary plot generator with the default options. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1022,"value":"ConvertDoc = md`[#](#ConvertDoc) *ternaryPlot*(_data_) [<>](todo)\n\nComputes \\`[x, y]\\` coordinates from that are scaled by the plot radius from ternary _data_. Unlike the [*barycentric*()](#barycentricConvertDoc) method, this method takes the plot radius into account.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"ternaryPlotInvertDoc = md`[#](#densityPlotDensityDoc) *ternaryPlot*.**invert**(_coordinates_) [<>](todo)\n\nComputes ternary values from \\`[x, y]\\` coordinates that are scaled by the radius. Unlike the *barycentric*.[invert()](#baryCentricInvertDoc) method this method takes the plot radius into account.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":663,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":441,"value":"ternaryPlotRadiusDoc = md`[#](#ternaryPlotRadiusDoc) *ternaryPlot*.**radius**([_radius_]) [<>](todo)\n\nIf _radius_ is specified, sets the radius of the ternary plot to the specified number. If _radius_ is not specified, returns the current radius, which defaults to 300 (px). `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1101,"value":"t.radius()","pinned":true,"hidden":false,"mode":"ojs"},{"id":538,"value":"ternaryPlotLabelsDoc = md`[#](#ternaryPlotLabelsDoc) *ternaryPlot*.**labels**([_labels_]) [<>](todo)\n\nIf _labels_ is specified, sets the axis labels to the labels in order \\`[A, B, C]\\` and returns the ternary plot. If _labels_ is not specified, returns the current labels, which defaults to \\`[A, B, C]\\`. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1103,"value":"t.labels()","pinned":true,"hidden":false,"mode":"ojs"},{"id":545,"value":"ternaryPlotLabelAnglesDoc = md`[#](#ternaryPlotLabelAnglesDoc) *ternaryPlot*.**labelAngles**([_angles_]) [<>](todo)\n\nIf _angles_ is specified, sets the angles of the axis labels to the specified angles in order \\`[A, B, C]\\` and returns the ternary plot. If _angles_ is not specified, returns the current label angles, which defaults to \\`[0, 60, -60]\\`. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1105,"value":"t.labelAngles()","pinned":true,"hidden":false,"mode":"ojs"},{"id":546,"value":"ternaryPlotLabelOffsetsDoc = md`[#](#ternaryPlotLabelOffsetsDoc) *ternaryPlot*.**labelOffsets**([_offsets_]) [<>](todo)\n\nThe label offset is the spacing of the label to the vertex in pixels. If _offsets_ is specified, sets the axis label offsets to the specified angles in order \\`[A, B, C]\\` and returns the ternary plot. If _offsets_ is not specified, returns the current label offsets, which defaults to \\`[45, 45, 45]\\`. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1107,"value":"t.labelOffsets()","pinned":true,"hidden":false,"mode":"ojs"},{"id":478,"value":"ternaryPlotTickAnglesDoc = md`[#](#ternaryPlotTickAnglesDoc) *ternaryPlot*.**tickAngles**([_angles_]) [<>](todo)\n\nIf _angles_ is specified, sets the angle axis ticks to the specified angles in order \\`[A, B, C]\\` and returns the ternary plot. If _angles_ is not specified, returns the current tick angles, which defaults to \\`[0, 60, -60]\\`. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1109,"value":"t.tickAngles()","pinned":true,"hidden":false,"mode":"ojs"},{"id":496,"value":"ternaryPlotTickTextAnchorsDoc = md`[#](#ternaryPlotTickTextAnchorsDoc) *ternaryPlot*.**tickAnchors**([_textAnchors_]) [<>](todo)\n\nIf _textTextAnchors_ is specified, sets the axis tick [text-anchor](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor) to the specified text-anchors in order \\`[A, B, C]\\` and returns the ternary plot. If _textAnchors_ is not specified, returns the current tick text-anchors, which defaults to \\`[\"start\", \"start\", \"end\"]\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1116,"value":"t.tickTextAnchors()","pinned":true,"hidden":false,"mode":"ojs"},{"id":491,"value":"ternaryPlotTickSizesDoc = md`[#](#ternaryPlotTickSizesDoc) *ternaryPlot*.**tickSizes**([_sizes_]) [<>](todo)\n\nIf _sizes_ is specified and an array, sets the axis tick sizes to the specified tick sizes in order \\`[A, B, C]\\` and returns the ternary plot. If _sizes_ is a number, sets the tick sizes of all axes to _sizes_. If _sizes_ is not specified, returns the current tick sizes, which defaults to \\`[6, 6, 6]\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1118,"value":"t.tickSizes()","pinned":true,"hidden":false,"mode":"ojs"},{"id":509,"value":"ternaryPlotTickFormatDoc = md`[#](#ternaryPlotTickFormatDoc) *ternaryPlot*.**tickFormat**([_format_]) [<>](todo)\n\nIf _format_ is specified, sets the tick format. _format_ can either be a [format specifier string](https://github.com/d3/d3-format#format) that is passed to [\\`d3.tickFormat()\\`](https://github.com/d3/d3-scale/blob/master/README.md#tickFormat). To implement your own tick format function, pass a custom formatter function, for example \\`(x) => String(x.toFixed(1))\\`. If _format_ is not specified, returns the current tick sizes, which defaults to \\`\"%\"\\`, meaning ticks are formatted as percentages.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1120,"value":"t.tickFormat()","pinned":true,"hidden":false,"mode":"ojs"},{"id":746,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":535,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"ternaryPlotGridLinesDoc = md`[#](#ternaryPlotGridLinesDoc) *ternaryPlot*.**gridLines**(*[counts]*) [<>](todo)\n\nGenerates and return an array of arrays containing each grid line objects. If counts is not specified, it defaults to 20. *Counts* can be a number or an array of numbers, one for each axis in order of \\`[A, B, C]\\`. Each array contains \\`counts\\` elements of two-element arrays with the start- and end coordinates of the grid line in two-element arrays.\n\nGrid lines are generated using [*scale*.ticks()](https://github.com/d3/d3-scale/blob/master/README.md#continuous_ticks). The specified count is only a **hint**; the scale may return more or fewer values depending on the domain.\n`\n//which in turn calls d3-array’s [ticks](https://github.com/d3/d3-array/blob/master/README.md#ticks).","pinned":false,"hidden":false,"mode":"ojs"},{"id":1128,"value":"t.gridLines()","pinned":true,"hidden":false,"mode":"ojs"},{"id":485,"value":"ternaryPlotTicksDoc = md`[#](#ternaryPlotTicksDoc) *ternaryPlot*.**ticks**(*counts*) [<>](todo)\n\nGenerates and return an array of tick objects for each axis. If counts is not specified, it defaults to 10. *Counts* can be a number or an array of numbers, one for each axis in order of a, b,c.\n\nEach tick object contains the following properties\n* \\`tick\\`: The formatted tick text\n* \\`position\\`: An array of x, y coords\n* \\`angle\\`: The tick rotation\n* \\`size\\`: The length of the tick\n\nTicks are generated using [*scale*.ticks()](https://github.com/d3/d3-scale/blob/master/README.md#continuous_ticks). The specified count is only a **hint**; the scale may return more or fewer values depending on the domain.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1126,"value":"t.ticks()","pinned":true,"hidden":false,"mode":"ojs"},{"id":558,"value":"ternaryPlotAxisLabelsDoc = md`[#](#ternaryPlotAxisLabelsDoc) *ternaryPlot*.**axisLabels**(_[{center: false}]_) [<>](todo)\n\nGenerates and return an array containing axis label objects. Each axis label object contains the following properties.\n* \\`position\\`: an array of [x,y] coords\n* \\`labelAngle\\`: the rotation of the axis label\n* \\`label\\`: The axis label\n\nTakes an optional configuration object that specifies whether axis labels should be placed at the center of the axis, the default is \\`false\\`.\n~~~javascript\nternaryPlot.axisLabels({ center: true})\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1130,"value":"t.axisLabels()","pinned":true,"hidden":false,"mode":"ojs"},{"id":671,"value":"ternaryPlotTriangleDoc = md`[#](#ternaryPlotTriangleDoc) *ternaryPlot*.**triangle**() [<>](todo)\n\nReturns an [SVG path command](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d) for a the outer triangle. This is used for the bounds of the ternary plot and its [clipPath](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1132,"value":"t.triangle()","pinned":true,"hidden":false,"mode":"ojs"},{"id":531,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":751,"value":"ternaryPlotTransformDoc = md`[#](#ternaryPlotTransformDoc) *ternaryPlot*.**transform**() [<>](todo)\n\nApplies the plot's scale factor and translation to the plots *barycentric()* conversion function. Or more simply, calling this method moves and scales the triangle defined by *barycentric()* used to calculate the ternary values. Before scale and translation are applied, they are checked if they are within bounds, if not, a correction is applied such that they are within bounds. Finally, the ternary plot is returned.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1068,"value":"The following two functions are helpers for handling zooming with [d3-zoom](https://d3js.org/d3-zoom).","pinned":false,"hidden":false,"mode":"md"},{"id":500,"value":"transformFromDomainsDoc = md`[#](#transformFromDomainsDoc) **transformFromDomains**(_domains_) [<>](todo)\n\nComputes the scale and translation for the given _domains_ and returns a transform object containing scale *k*, and translation offsets *x*, and *y*. This can be used to sync the zoom and pan of the plot to the specified domains set by [.domains()](ternaryPlotDomainsDoc). \n\nNote that the translation returned here is unscaled by radius.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1093,"value":"b = barycentric()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1096,"value":"t = ternaryPlot(b)","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"md`### Dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"miniWidth = miniRadius * 2 + 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"miniRadius = 150","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1158,"value":"ternaryPlot = d3Ternary.ternaryPlot","pinned":true,"hidden":false,"mode":"ojs"},{"id":1160,"value":"barycentric = d3Ternary.barycentric","pinned":true,"hidden":false,"mode":"ojs"},{"id":1089,"value":"d3Ternary = import(\"d3-ternary\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":983,"value":"import { banner } from \"@julesblm/ternary-plot-banner\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":844,"value":"import { toc } from '@ellemenno/toc-with-nesting'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}