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)
  4. Can add a legend
  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. 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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s