Ternary Contour Plots in JavaScript
Lexachoc opened this issue · 3 comments
I would like to reopen #3503.
Currently there is no native support of ploting contours in ternary plot, the current official documentation for it is wrong (or inconsistent). As reported in this issue from the graphing-library-docs repo.
In plotly.py, Ternary contours in Python, there are ternary contour plots examples:
But in JS, Contour Plots in JavaScript, we only get:
Apparently, the JS example only fills the area instead of doing what is expected of a "contour" plot.
It would be great if this could be implemented (or if it already is, but only requires data transformation? ) and if there were examples showing how to plot the contours as in Ternary contours in Python.
I've managed to implement a proof of concept in plotly.js.
The difference between the python version is that in here I use inverse distance weighting (IDW)
The disadvantage is that the IDW interpolation is more localized. And it doesn't seem to work with more data points.
Therefore, it is better to use the same algorithm as in plotly.py.
(source code: https://github.com/plotly/plotly.py/blob/main/plotly/figure_factory/_ternary_contour.py)
But the difficult part for me is that I can't find any libraries that do what scipy.interpolate.griddata(..., method="cubic") did.
(seems it uses CloughTocher2DInterpolator internally.
If there is a good interpolation library that can be used directly, I can try submit a PR for it.
If anyone can give me a tip for such a library, that would be very helpful!
I saw that Delaunay was mentioned in comment #3503, but I'm not sure whether d3-delaunay can be used or not.
I also tried Radial Basis Function (RBF) interpolation, and it works almost exactly like the sample data points for enthalpy in plotly.py.
It works better than inverse distance weighting (IDW), as I showed earlier.
Result:
But the same problem as with IDW: It doesn't work with more scattered datasets.
For now, I will use scipy in Python to generate the contour data and use it as input for plotting with plotly.js.
Still, any tips or suggestions on the interpolation algorithm would be really appreciated.🙏
Where is the code for your JavaScript Implementation of ternary contour?