View openselectioninatom
function run(input, parameters) {
var str = $.NSString.alloc.initWithUTF8String(input);
var jsonPath = Path('/tmp/test.json');
str.writeToFileAtomically(jsonPath.toString(), true);
var atom = Application('Atom')

This example pulls together various examples of work with trees in D3.js.

The panning functionality can certainly be improved in my opinion and I would be thrilled to see better solutions contributed.

One can do all manner of housekeeping or server related calls on the drop event to manage a remote tree dataset for example.

Dragging can be performed on any node other than root (flare). Dropping can be done on any node.

Panning can either be done by dragging an empty part of the SVG around or dragging a node towards an edge.

View index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>JS Bin</title>
<script src=""></script>
View testautosize.js
/*jshint esnext:true */
class TestAutosize extends React.Component {
this.state = {
searchText: 'some example text'
this.autosize = this.autosize.bind(this);
View Morningstar

Morningstar API

If you're interested in grabbing Morningstar data but cash strapped there are ways to do it without actually paying for it.

Historical Price API

The following URL will get you access to all available historical Morningstar price data for the Ford Corporation|2014-10-10&isD=true&isS=true&hasF=true&ProdCode=DIRECT 

Now you will have every single daily piece of data for Ford between the dates of 01/01/1900 and 10/10/2014

View chart.html
<div id="chart">
<h4>Percent of adults over 25 with at least a bachelor's degree:</h4>
<p><strong>Median:</strong> <span class="median"></span></p>
<small>Source: <cite><a href="">U.S. Census Bureau</a></cite>, via <cite><a href="">Census Reporter</a></cite></small>
View index.html
<div ng-app="sortableApp" ng-controller="sortableController" class="container">
<h2>ui.sortable connected lists event order</h2>
<div class="floatleft">
<div ui-sortable="sortableOptionsList[0]" class="apps-container screen floatleft" ng-model="rawScreens[0]">
<div class="app" ng-repeat="app in rawScreens[0]">{{$index}} {{app.title}}</div>
<div ui-sortable="sortableOptionsList[1]" class="apps-container screen floatleft" ng-model="rawScreens[1]">
<div class="app" ng-repeat="app in rawScreens[1]">{{$index}} {{app.title}}</div>
View app.js
function focus() {
$(function() {
$('#click-timeout').click(function() {