16 Dec 2014, 22:34

Directed Graph of hubski users created with D3

Using some c# code to scrape hubski.com I was able to produce a pretty basic directed graph showing users follower connections.

Source code on github

Demo version

Advanced Demo version

I started off by scanning a users profile and recording various pieces of information such as: - Age in days - Number of followers - Number of people followed - Number of badges received.

I then looped over each of that users followers and recorded the same information, and then their followers, and then their followers… you get the idea.

I ended up thousands of accounts which was good but most of them only had 1 or 2 followers indicating a low level of social integration. I filtered out most accounts with less than 25 followers (a few did make it in) in order to represent the core social group members.

I graphed the data using D3 into a force directed graph that included all of the connections (follows) between each of the gathered members. There is some gravity applied to the area which results in the larger (more followed) users being drawn towards the center while the smaller users encircle them, like satellites basking in the glow of a shining sun, or hornets buzzing around fresh manure.

It’s a work in progress, search needs to be fixed…

06 Aug 2013, 15:03

Data Models, functional composition and validation

While I am working my way through the Functional Javascript book I came across something that could be really useful, especially when dealing with AJAX requests.

Functional Composition

In a nutshell you start with simple functions that do a single job and then chain them up to perform some larger task. In this example we want to validate that the json being returned from an AJAX call contains the properties we require. To do that we start with the following function:

function validator(message, fun){
    var f = function(){
        return fun.apply(fun, arguments);
    };
    f['message'] = message;
    return f;
};

which takes a message string and a function as parameters and returns an object what can be called with an arbitrary number of arguments to perform a task. The returned object has a ‘message’ property assigned also.

Next we need a ‘driver’ function:

function checker(){  
    var validators = _.toArray(arguments);  
    return function(obj){  
        return _.reduce(validators, function(errs, check){  
            if(check(obj))  
                return errs;  
            else  
                return _.chain(errs).push(check.message).value();  
        }, []);  
    };  
};  

that should be called with a list of validators as its arguments. It loads these into an array and returns a function which uses this array to validate the object ‘obj’. It will loop over each of the validators in the array and checks to see if the obj object passes each of them. If the check fails then it appends the validators ‘message’ to the list it will return. If all validators pass then the array returned will be empty.

Putting it all together

I can use my checker and validator functions to create a validation function like the following:

function isValidResourceItem(){
    var validators = checker(

        validator('obj can not be nul',
            function(obj){return !_.isNull(obj);}),

        validator('obj must contain title',
            function(obj){return !_.isNull(obj.title);}),

        validator('obj must contain canonicalVolumeLink',
            function(obj){return !_.isNull(obj.canonicalVolumeLink);}),

        validator('obj must contain description',
            function(obj){return !_.isNull(obj.description);})
    );
    return validators;
};

which will help to ensure the data was returned in a format I expect and cut down on those ‘undefined’ errors you would get without something like this.

Example

I reused an example from an earlier jsFiddle to test the idea out, I want to be sure the search results json object contains the properties I need to produce a results list.

Whats the point?

Well I guess it shows an easy way to take pieces of functionality, place them into small reusable functions and build upon them into a pretty powerful set of tools.

21 Jul 2013, 17:03

KnockoutJS demo using Google Books API

Knockout.js

Introduction

A quick and dirty demo to show off a very simple example of what you can do with some knockoutjs code and an AJAX call. I use the google books API to provide a simple search form.

Show me the Code

JSFiddle:

Check out the jsfiddle

I also use the underscore library to work with the observableArray but that is not really a requirement. I just like it.

So whats happening?

We start off by creating a simple html page that contains a text box, a button and a results list. In our javascript file we create a ViewModel object (function) that contains properties that match our html form. It has a field for searchInput, a function to handle searches etc. In our document ready function we apply this ViewModel to our html using ko.applyBindings(vm);. When we do this knockoutjs takes our html and resolves all the data-bind="" attributes we have added to elements and resolves them to fields on our ViewModel. This is called Model Binding and it is a powerful tool that allows us to have a single ViewModel property displayed in several places on a page, with each kept in sync to any changes. If the field we are binding to is a ko.observable then any changes made to its value will immediately show wherever it is bound.

We also use a ko.observableArray to hold our search results. When we initiate a search we make an AJAX call to the appropriate url and then parse the results. You can see the result structure we receive back by running curl -i https://www.googleapis.com/books/v1/volumes?q=potter (where ‘potter’ is what you want to search for). Once we receive the result we loop over the returned items and create a new resultItem to contain the information we want. These items are then added to our array, self.items.push(resultI); which thanks to knockoutjs gets rendered to our results div immediately. You can see that knockoutjs can iterate over collections by using the foreach:items databinding.

Whats the big deal?

Well this particular demo is about as easy as it gets, but even so it covers a few important topics: - Model View ViewModel pattern. - Model Binding as it applies to Knockout - Working with web API’s using JSON.

It shows what we can achieve with a few lines of code by building upon these powerful libraries. KnockoutJS is taking care of binding our ViewModel to our html and also updates that html whenever we change an observable. jQuery is handling the AJAX request for us.

21 Jul 2013, 15:03

Functional javascript using underscore

Functional javascript using underscore

Why?

A little while ago I picked up Functional Javascript by Michael Fogus. I’m only part way through it and to be honest I should probably have waited until I finished it before starting this post but…

There is a central theme to this book which intrigued me, indeed its one of the main tenets of functional programming. It can be summed up in this quote: >“It is better to have 100 functions operate on one data structure than 10 functions on 10 data structures.” - Alan Perlis

This is very different concept to what is normally seen in large enterprise level projects and applications. I have to say that I have spent a large amount of time writing code to map one model to another and back again. Its not fun. This functional stuff might be on to something.

What?

Well Michaels book uses the underscore library for all of his examples and its a really powerful tool. I have started using it here and there on smaller projects and the more I use it the more I like it.

How?

Project Euler is probably the go-to set of problems when developers try to learn a new language or framework. I don’t see why I should be any different. I have started a small project to play around with this and you can see it over on github.

Problem 1

If we list all the natural numbers below 10 that are multiples of 3 or 5, we get 3, 5, 6 and 9. The sum of these multiples is 23. Find the sum of all the multiples of 3 or 5 below 1000.

Can be solved with a few lines of code like the following: return _.reduce(_.range(0,1000), function(memo, number){ if( number%3===0 || number%5==0) return memo+number; return memo;} );

Testing

Unit testing javascript has come a long way in the last few years and I have added a simple QUnit test runner to the repository.