Tag Cloud in Oracle JET

Here in the Oracle JET Cookbook the Oracle JET Tag Cloud is described. Here's the JSON file that is used there, which I have put in the "public_html" folder of my project.

What we'll create is the same as in the Cookbook, except we'll parse the JSON file with "JSON.parse" and we'll use a "define" block.

Here's a 'define' block for working with the "ojtagcloud" component:

define(['text!../../socialNetworks.json', 'ojs/ojtagcloud'],
    function (file) {
        function mainContentViewModel() {
            var self = this;
            self.tags = [];
            var content = JSON.parse(file);
            for (var i = 0; i < content.length; i++) {
                var network = content[i];
                self.tags.push({
                    id: network["id"],
                    label: network["id"],
                    value: network["total"],
                    shortDesc: network["id"] + ': ' + network["total"] + '%'
                });
            }
        }
        return new mainContentViewModel();
    });

Then here's the view:

<p style="font-weight:bold;text-align:center;">
  Social Networks Used by US Internet Users (Ages 14-54)
</p>
<div data-bind="ojComponent:{
        component: 'ojTagCloud',
                layout: 'cloud',
                items: tags
    }">
</div>