I am trying to learn about web development and have chosen Dart as a way to proceed(Frankly no other reason except it makes more sense to me , ing from Python/ Java background!).One of the things I am interested in is visualization and scientific programming (I use Python stack for both work and play daily). I am trying to build a basic app with polymer, Dart and D3.js (teach myself while working). Can someone give me a plete step-by-step basic example of this. Particularly showing how to include external library like d3.js properly?

I am trying to learn about web development and have chosen Dart as a way to proceed(Frankly no other reason except it makes more sense to me , ing from Python/ Java background!).One of the things I am interested in is visualization and scientific programming (I use Python stack for both work and play daily). I am trying to build a basic app with polymer, Dart and D3.js (teach myself while working). Can someone give me a plete step-by-step basic example of this. Particularly showing how to include external library like d3.js properly?

• javascript
• d3.js
• dart
• polymer

• This question may help. – Lars Kotthoff Commented Mar 28, 2014 at 11:02
• I have seen this answer but what I am unable to figure out :-1.) How to define a context. 2.) How/where to load the d3.min.js/ in polymer ponent? – Rahuketu86 Commented Mar 28, 2014 at 12:02

1 Answer 1

As far as including external library like D3.js properly is concerned, you just need to include it in the HTML as a script (either in the head or before closing of body tag). The D3.js library needs to be included in the HTML before the dart code of course, so Dart can see it.

<script src="http://d3js/d3.v3.min.js" charset="utf-8"></script>
<script src="yourDartApp.dart" type="application/dart"></script>

Then, at the top of your Dart script, import library called dart:js

import 'dart:js';

After that every top level JS object (in the window scope) is available to you as

context['someJSObject'];

which returns an instance of dart's JsObject

To call a method on that JsObject, you can use callMethod method. To rewrite an example from D3.js site

d3.selectAll("p").style("color", function() {
  return "hsl(" + 10 * 360 + ",100%,50%)";
});

it would look something like this in Dart

context['d3'].callMethod('selectAll', ['p']).callMethod('style', ['color',
  new JsFunction.withThis((jsThis) {
    // You are writing Dart code, which will be translated into JS here
    return "hsl(" + 10 * 360 + ", 100%, 50%)";
  })
]);

I remend you taking a look at Dart's JsObject and JsFunction APIs to have a better understanding of how to use JS from Dart.

I can't help you with Polymer though. Haven't tried it yet.