Archimedes Pelican

Angular.js and Pelican

Learn More About It    

Example illustrating the use of a custom Angular directive that takes arguments for the x- and y-axis variables to plot. This is used to make two scatter plots.

The scatter plots also share a selection via the irisSelected variable. Any selected point on a chart is stored in the irisSelected variable. This makes it accessible to other parts of the page.

More importantly, the irisSelected variable provides a mechanism for linking charts with shared information independently, obviating the need for hard-coded chart linking through, e.g., mouseover or mouseout events.

With this Angular approach, charts do not need to know about each other. They only need to know about the controller. The controller manages the global variable scope and the shared variables contained therein.

An iris scatter plot:

class: [[irisSelected.class]]

sepal width: [[irisSelected.sepal_width]]

sepal length: [[irisSelected.sepal_length]]

peal width: [[irisSelected.petal_width]]

peal length: [[irisSelected.petal_length]]

 

Made with by charlesreid1.