D3.js Responsive Word Cloud

There are few examples of word cloud using D3js, the best known is the one from Jason Davies but the code is difficult to understand as it is coupled with the cloud form (angle, number of words etc) and has many functions.

Based on Jason’s D3-cloud project, my aim was to simplify the code, making it responsive and more accessible to anyone. It only has two functions: Draw and Update


Re-size the browser to see the SVG re-rendered.

Source available on Github

AngularJs, Browserify Polymer and Sass boilerplate

Source available on Github : https://github.com/shprink/angularjs-browserify-polymer-boilerplate

Two way data biding

Using Polymer and AngularJs at the same time is a bit problematic. The two way data biding (AngularJs feature) cannot natively work with Polimer web components. Some project are emerging though:

Those projects are not mature enought to use, so I decided to directly use AngularJs’s resources within Polymer elements.

Using AngularJs’s services within Polymer

var userService = angular.injector(['boilerplate']).get('UserService');

Polymer('user-list', {
    ready: function() {
        this.list = userService.getList();
    },
    tapAction: function(e) {
        console.log('tap', e);
    }
});

Using AngularJs’s scope within Polymer

Polymer('boilerplate-login', {
    ready: function() {
        this.angularScope = angular.element(this).scope();
    },
    sendForm: function(){
        this.angularScope.goToHome();
    }
});