This project will draw a graph of any numeric sequences you like, entirely in the browser, using the Highcharts library. Besides the fundamental goal of drawing graphs of data locally (without hitting a server) by parsing query strings, there are three other features:
- By passing in an extra query string, best-fit lines will be drawn for each of your sequences.
- One click to change all the text from Catalan to English or vice versa.
- Unit tests, using the ava library.
These are the special query strings that are available:
- 'títol' or 'title'
- 'subtítol' or 'subtitle'
- 'x'
- 'y'
- 'inici' or 'start'
- 'llengua' or 'language'
- 'aproximada' or 'approximate'
If 'aproximada' or 'approximate' is set to anything in the query string, then each series of data will be graphed accompanied by best-fit lines calculated via Theil-Sen and Linear Least Squares.
This supports Catalan (partially) and English.
Here's an example: Proveu ("try") open-grapher.html?títol=Simple%20graph&subtítol=My%20New%20Graph&some%20data=2,4,3,2&different%20data=4,4.8,6,3,5&inici=1&x=day&y=weight.
Or add the "aproximada" term to draw the best-fit lines along with the data. open-grapher.html?títol=Graph%20with%20best%20fit%20lines&subtítol=My%20Fancier%20Graph&some%20data=2,4,3,2&different%20data=4,4.8,6,3,5&inici=1&x=day&y=weight&aproximada=hello.
(Feel free to ignore this section if you know about this statistical topic. Clearly I know very little.)
When I started looking into "best fit" approximations, I did not realize that calculating a "best fit" line is not a simple problem! Not even close.
Putting aside multi-variable analysis and other more complicated models, of which there are many, there are different ways to think about "best-fit" straight lines, based only on the y-axis data. There are many models (with less- or more-complicated math) based on what assumptions you can make about the data. There are also different ways to evaluate (minimize) the difference between the set of data points and the best-fit line.
https://en.wikipedia.org/wiki/Simple_linear_regression
Run tests via
npx ava, or for a single test, npx ava -v test/test-theil-sen.js
- Finish the Catalan text.
- Have language selection persist on subsequent page loads.
- Add this best fit algorithm: https://en.wikipedia.org/wiki/Moving_average
- Perhaps add this as well: https://en.wikipedia.org/wiki/Exponential_smoothing
However, I didn't use it because it assumes the initial points are the most correct ("assign exponentially decreasing weights over time"). That was not a correct assumption for my typical use cases.