# Scientific Plots

I’m creating this page to house information about creating good scientific-quality plots/graphs using JavaScript.  I’ve used several different Javascript so-called charting libraries and have been disappointed at how little the programmers attend to scientific needs.  Perhaps I’m lazy and just haven’t found the right one yet?  If so, please let me know.

## Requirements

1. Can display a chart title
2. Can label axes (along the axes, a short distance away)
3. (Optional) Can label axes (at the end of the axes)
5. Can do any of the above with a mix of text and mathematics (preferably LaTeX), even if it’s just by adding in MathJax
6. Can add arrows on the axes if you want them
7. Can display gridlines
8. Capable of scatter plots with error bars
9. Capable of graphing mathematical functions
10. (Optional) Capable of fitting mathematical functions

## Use Cases

I’d like students to be able to use something like GlowScript to make graphs, but I haven’t been able to label axes using its version of Flot.  TODO: Experiment with GlowScript to see if I can call Flot directly.  Why not the wonderful LinReg?  I’m not in control of the software on my students’ computers, sadly.  I’d like to wrap the required JavaScript code in something simple enough that 9th grade students could do it, calling something like the following for a single graph.

 plot({ title: "Happiness of a person receiving wardrobe compliments during a 15 minute interval", xaxis: "Frequency of compliments ($\text{hour}^{-1}$)", yaxis: "Percent of time spent smiling (%)", data: [[0,10,1],[0,0,5],[4,30,3],[4,50,6],[20,23,5],[20,70,12],], // in the form [x,y,yerror] });

## Data

I have the following data measuring the period of a pendulum for various lengths.

Length Period Uncertainty in Period
$L$ $T$ $\delta T$
cm s s
± 0.5 ± 0.030
121.0 2.206 0.003
103.6 2.028 0.015
85.4 1.851 0.002
67.5 1.643 0.008
51.8 1.438 0.002
34.3 1.165 0.008
23.2 0.972 0.004
19.6 0.874 0.009
10.0 0.612 0.008
4.9 0.404 0.004

In various JSON formats:

"data": [
{
"name": "table",
"values": [
{"L":121.0, "δL":0.5, "T":2.206, "δTrand":0.003, "δTsys":0.030},
{"L":103.6, "δL":0.5, "T":2.028, "δTrand":0.015, "δTsys":0.030},
{"L":85.4, "δL":0.5, "T":1.851, "δTrand":0.002, "δTsys":0.030},
{"L":67.5, "δL":0.5, "T":1.643, "δTrand":0.008, "δTsys":0.030},
{"L":51.8, "δL":0.5, "T":1.438, "δTrand":0.002, "δTsys":0.030},
{"L":34.3, "δL":0.5, "T":1.165, "δTrand":0.008, "δTsys":0.030},
{"L":23.2, "δL":0.5, "T":0.972, "δTrand":0.004, "δTsys":0.030},
{"L":19.6, "δL":0.5, "T":0.874, "δTrand":0.009, "δTsys":0.030},
{"L":10.0, "δL":0.5, "T":0.612, "δTrand":0.008, "δTsys":0.030},
{"L":4.9, "δL":0.5, "T":0.404, "δTrand":0.004, "δTsys":0.030}
]
}
],



## Contenders

### Vega

Try it out at http://trifacta.github.io/vega/editor/ .

### D3.js

I’ll also link to my Computer-Aided Mathemathics and Science Livebinder, which has a JavaScript Graphing tab, until I get more links in here.

I guess I’ll have to wade through http://javascript.open-libraries.com/utilities/chart/20-best-javascript-charting-and-plotting-libraries/ to find some functional (and not just prettty) Javascript graphing libraries.

## Environments

I’d also love suggestions on online environments that students could use to execute their Javascript graphs.

JSfiddle might be a place for students to try making these graphs.

## 2 thoughts on “Scientific Plots”

1. Mohamed Hamed says:

Hello
You are right I have the same problem
chart libraries don’t satisfy scientific needs
I am using chart.js for an application and I had to do a lot of work to make it as suitable as possible
It doesn’t provide the right scales to be able to get values from the chart other than plotted values.
And many other things
I will try to develop a scientific chart library in the future =D

2. I just found out about plotly.js, which recently went open source.