openbrainsrc / Radian

Plotting with AngularJS
http://openbrainsrc.github.io/Radian/index.html
168 stars 19 forks source link

Repeat? #1

Closed glutamate closed 11 years ago

glutamate commented 11 years ago

How about being able to repeat plot lines? Maybe I can already use ng-repeat?

right now to plot probability distributions over lines, i have to generate this

<plot>
<lines x="[[plotb4_1[0]#x]]" y="[[plotb4_1[0]#y]]"></lines>
<lines x="[[plotb4_1[1]#x]]" y="[[plotb4_1[1]#y]]"></lines>
<lines x="[[plotb4_1[2]#x]]" y="[[plotb4_1[2]#y]]"></lines>
<lines x="[[plotb4_1[3]#x]]" y="[[plotb4_1[3]#y]]"></lines>
<lines x="[[plotb4_1[4]#x]]" y="[[plotb4_1[4]#y]]"></lines>
<lines x="[[plotb4_1[5]#x]]" y="[[plotb4_1[5]#y]]"></lines>
<lines x="[[plotb4_1[6]#x]]" y="[[plotb4_1[6]#y]]"></lines>
<lines x="[[plotb4_1[7]#x]]" y="[[plotb4_1[7]#y]]"></lines>
<lines x="[[plotb4_1[8]#x]]" y="[[plotb4_1[8]#y]]"></lines>
<lines x="[[plotb4_1[9]#x]]" y="[[plotb4_1[9]#y]]"></lines>
</plot>

Any way to do this with one line?

I'll try ng-repeat.

ian-ross commented 11 years ago

I think ng-repeat should work:

<plot>
  <lines ng-repeat="i in is" x="[[plotb4_1[{{i}}]#x]]" y="[[plotb4_1[{{i}}]#y]]"></lines>
</plot>

Kind of ugly, but Angular expressions inside Radian expressions do work. My only worry might be the scope games that ng-repeat plays, but I think it should work. I'll check tomorrow.

glutamate commented 11 years ago

Thanks, it works. However, I didn't think about how to generate the range. I have done this for now by bringing underscope.js into $scope

ian-ross commented 11 years ago

You don't need the range. I thought of a better way to do it:

<plot>
  <lines ng-repeat="d in plotb4_1" x="[[{{d}}#x]]" y="[[{{d}}#y]]"></lines>
</plot>

ng-repeat will loop across any array.

glutamate commented 11 years ago

Yes much better thanks On 24 Mar 2013 08:10, "Ian Ross" notifications@github.com wrote:

You don't need the range. I thought of a better way to do it:

ng-repeat will loop across any array.

— Reply to this email directly or view it on GitHubhttps://github.com/glutamate/Radian/issues/1#issuecomment-15352999 .

glutamate commented 11 years ago

Doesn't seem to work though:

<plot-data id="plotdw" name="plotdw" format="json"> [
[{"x": 35.1,"y":0.31269841999999937},{"x": 1.5,"y":-0.8704986999999997},{"x": 35.2,"y":-0.8962801600000008},{"x": 4.5,"y":-0.13985609999999982},{"x": 10.1,"y":0.15734341999999968},{"x": 80.4,"y":-0.9545983200000006},{"x": 5.2,"y":-0.10270615999999988},{"x": 60.1,"y":-0.13194657999999926},{"x": 70.1,"y":-0.029804579999998637},{"x": 40.6,"y":0.5188765200000001}],[{"x": 35.1,"y":1.1580576999999996},{"x": 1.5,"y":0.34739050000000016},{"x": 35.2,"y":-0.0520296000000009},{"x": 4.5,"y":1.0447715},{"x": 10.1,"y":1.2798827},{"x": 80.4,"y":-0.6114892000000012},{"x": 5.2,"y":1.0741604000000002},{"x": 60.1,"y":0.4362326999999988},{"x": 70.1,"y":0.4275026999999998},{"x": 40.6,"y":1.3032561999999999}],[{"x": 35.1,"y":0.3934328200000001},{"x": 1.5,"y":-0.6803626999999999},{"x": 35.2,"y":-0.8158713600000009},{"x": 4.5,"y":0.04051190000000027},{"x": 10.1,"y":0.3194778199999999},{"x": 80.4,"y":-1.0213607200000006},{"x": 5.2,"y":0.07538263999999995},{"x": 60.1,"y":-0.13261218000000063},{"x": 70.1,"y":-0.06303018000000016},{"x": 40.6,"y":0.5817029199999997}],[{"x": 35.1,"y":0.5646982399999994},{"x": 1.5,"y":-0.7706464},{"x": 35.2,"y":-0.6438275200000003},{"x": 4.5,"y":-0.026419199999999865},{"x": 10.1,"y":0.2961382399999999},{"x": 80.4,"y":-0.49747104000000064},{"x": 5.2,"y":0.013900480000000215},{"x": 60.1,"y":0.23325823999999962},{"x": 70.1,"y":0.3806822400000005},{"x": 40.6,"y":0.7957814399999998}],[{"x": 35.1,"y":0.64571808},{"x": 1.5,"y":-0.8797487999999998},{"x": 35.2,"y":-0.5622418400000004},{"x": 4.5,"y":-0.11854640000000005},{"x": 10.1,"y":0.23569808000000014},{"x": 80.4,"y":-0.16012568000000016},{"x": 5.2,"y":-0.0742658399999998},{"x": 60.1,"y":0.4557380799999997},{"x": 70.1,"y":0.6597460799999997},{"x": 40.6,"y":0.9079224799999999}],[{"x": 35.1,"y":0.08638890000000021},{"x": 1.5,"y":-0.5835615000000001},{"x": 35.2,"y":-1.1241172000000006},{"x": 4.5,"y":0.10125550000000016},{"x": 10.1,"y":0.31291389999999986},{"x": 80.4,"y":-1.8728744000000024},{"x": 5.2,"y":0.1277128000000003},{"x": 60.1,"y":-0.7401361000000009},{"x": 70.1,"y":-0.7907460999999998},{"x": 40.6,"y":0.20855339999999956}],[{"x": 35.1,"y":0.7372296599999997},{"x": 1.5,"y":-0.6399200999999999},{"x": 35.2,"y":-0.4711716800000012},{"x": 4.5,"y":0.10803969999999996},{"x": 10.1,"y":0.43756466000000005},{"x": 80.4,"y":-0.2685773600000001},{"x": 5.2,"y":0.14923032000000003},{"x": 60.1,"y":0.4368946599999992},{"x": 70.1,"y":0.5967606599999993},{"x": 40.6,"y":0.9751559599999995}],[{"x": 35.1,"y":0.5197555899999999},{"x": 1.5,"y":-0.35185865000000005},{"x": 35.2,"y":-0.6901503200000008},{"x": 4.5,"y":0.3509640500000004},{"x": 10.1,"y":0.5962330900000001},{"x": 80.4,"y":-1.1676216400000001},{"x": 5.2,"y":0.38162268000000044},{"x": 60.1,"y":-0.1567219099999999},{"x": 70.1,"y":-0.14731291000000013},{"x": 40.6,"y":0.6749305400000001}],[{"x": 35.1,"y":0.7463506799999999},{"x": 1.5,"y":-0.1046298000000001},{"x": 35.2,"y":-0.46361664000000147},{"x": 4.5,"y":0.5963506000000001},{"x": 10.1,"y":0.8381806799999998},{"x": 80.4,"y":-0.9688452800000018},{"x": 5.2,"y":0.62657936},{"x": 60.1,"y":0.054520679999999544},{"x": 70.1,"y":0.057788679999999815},{"x": 40.6,"y":0.8981480800000003}],[{"x": 35.1,"y":0.5118304799999995},{"x": 1.5,"y":-0.8901227999999999},{"x": 35.2,"y":-0.6964970400000006},{"x": 4.5,"y":-0.13994839999999975},{"x": 10.1,"y":0.19371048000000046},{"x": 80.4,"y":-0.4605360800000007},{"x": 5.2,"y":-0.09824103999999956},{"x": 60.1,"y":0.2299504799999994},{"x": 70.1,"y":0.39719848000000013},{"x": 40.6,"y":0.7538168800000005}]
]</plot-data>
<plot>
<points ng-repeat="p in plotdw" x="[[{{p}}#x]]" y="[[{{p}}#y]]"></lines>
</plot>

gives

TypeError: Cannot read property 'type' of undefined
    at Object.estraverse.traverse.enter (http://localhost:3000/static/tmp/WCgAfinR.js:14:5135)
    at Object.traverse (http://localhost:3000/static/js/estraverse.js?etag=i5Qx1rtb:181:35)
    at radianEval (http://localhost:3000/static/tmp/WCgAfinR.js:14:4901)
    at http://localhost:3000/static/tmp/WCgAfinR.js:1:602
    at http://localhost:3000/static/js/angular/angular.min.js?etag=Kjr_UA6q:49:354
    at Array.forEach (native)
    at m (http://localhost:3000/static/js/angular/angular.min.js?etag=Kjr_UA6q:6:193)
    at Object.ea.$set (http://localhost:3000/static/js/angular/angular.min.js?etag=Kjr_UA6q:49:331)
    at Object.fn (http://localhost:3000/static/js/angular/angular.min.js?etag=Kjr_UA6q:48:313)
    at Object.e.$digest (http://localhost:3000/static/js/angular/angular.min.js?etag=Kjr_UA6q:84:409) 

in chrome

ian-ross commented 11 years ago

Oops. Just drop the curly brackets:

<plot>
  <points ng-repeat="p in plotdw" x="[[p#x]]" y="[[p#y]]"></points>
</plot>
glutamate commented 11 years ago

Danke! Ca marche!

ian-ross commented 11 years ago

Yeah. Although you can embed Angular expressions within Radian expressions, it actually seems to work better (and be more efficient) just to rely on the way that Radian handles free variables in expressions by evaluating them in the enclosing Angular scope. Combined with the "free variable watchers" to catch updates to these things, it's pretty reliable. I'm not 100% sure why this case didn't work with the Angular expression wrapped inside the Radian expression, but I guess it might be something to do with the way that ng-repeat works.

Any reference within a Radian expression to a free variable v should be equivalent to the Angular expression {{v}} (references to free variables are translated into calls to scope.$eval), so it mostly ought to be better to just use the undecorated variable and rely on Radian.

On 24 March 2013 14:09, Tom Nielsen notifications@github.com wrote:

Danke! Ca marche!

— Reply to this email directly or view it on GitHubhttps://github.com/glutamate/Radian/issues/1#issuecomment-15358245 .

Ian Ross Tel: +43(0)6804451378 ian@skybluetrades.net www.skybluetrades.net