Bubble & Bar charts for loklak

I have made 2 visualisations in the front-end apps section using D3.js and AngularJS, that anyone can use on loklak.org or locally.

The first type is a bubble chart, these are great for representing single values, such as the number of mentions or the frequency of certain words.

As you can see, when I search for the term loklak, one can see the number of times a user was mentioned and the relative frequency of words.Screenshot 2016-05-30 10.55.26

First, I had to solve the problem of getting the data. This can be done through the data service used for the tweet feed previously. This gives us an updated array of tweet objects in the local storage of the browser.

Next, I had to analyse the tweets. True to its name, D3.js handles a wide variety of data formats, so storing term-frequency pairs in an object is sufficient. Do take a look at the code if you are interested. The processed data is then stored in a separate array in local storage, for eg $storage.mentionFreq instead of $storage.tweets.

Next, I had to display the processed data. Thankfully, angularJS plays nicely with d3.js, so to create a directive in angular, I could use similar D3.js code in the $link function of the directive, as I was manipulating DOM elements with D3.js.

Finally, to make the chart update itself without a page refresh, I added a $watch function on the processed data in the local storage, which runs an update function. Within it, D3.js then uses array joins to render the new data with .data(), so it seamlessly updates itself. Do take a look at the code for the directives for a more in-depth explanation.

The beauty of directives is that they are components which are reusable, the above example is actually using the same directive but with different attributes passed in.

1
2
3
4
<div ng-controller='bubbleCloudCtrl' >
<bubble-cloud flex data="$storage.mentionFreq" min ="1" title="Most Mentions"></bubble-cloud>
<bubble-cloud flex data="$storage.wordFreq" min="3" title="Word Frequency"></bubble-cloud>
</div>

The same pattern can be applied to other D3.js charts, below we can see a stacked bar chart example using the general pattern as described above:

Screenshot 2016-05-30 10.55.19.png

The difference is in analaytics and directive code, which is a bit more involved, as I had to process by date, and then by quantity.

Hopefully this helps future developers to make their own, some ideas I have are making radar and force directed graph.