The JavaScript blog.


libraries graphics modules graphs sql

Simple Modules, D3xter

Posted on .

Simple Modules

If you've got legacy JavaScript that's badly structured, then one early refactoring strategy that can help is to add modules. However, you might not be sure about the specific module system or framework that you'll eventually switch to, so what do you do?

George Mauer sent in simple-modules (GitHub: togakangaroo/simple-modules, License: MIT, Bower: simple-modules), a tiny module system that lets you define modules and then require them. There's an example that shows the main features, including a test for circular dependency detection.

George wrote an article about converting legacy code, which shows how to include Simple Modules on the page and then how to identify possible modules.



D3xter (GitHub: NathanEpstein/D3xter, License: MIT, Bower: d3xter) by Nathan Epstein is a D3.js-based library for plotting graphs. The functions in the library return SVG objects, so you can further customise them with the standard D3 API.

D3xter's built-in graphs should work well with minimal configuration, so if you're looking for a D3-friendly library then this one might be a good choice. For example, given arrays of co-ordinates, you can plot a line graph like this:

var lineGraph = xyPlot(index, y);  

The readme has an additional example that shows how to query the resulting object with D3 and modify the colours.


graphics apps graphs reactjs

Omniscient.js, Paths.js Update, React Example Shopping Cart

Posted on .


Omniscient.js (GitHub: omniscientjs / omniscient, License: MIT, npm: omniscient) by Mikael Brevik and Torgeir is a React library for rendering components using immutable data. This is ideal for use with Immutable.js, but other libraries could be used as well.

It uses cursors, so the outer immutable structure swapped when a component's data is changed. This might sound like it would perform badly, but it only re-renders component trees that reference changed data.

The module is used by wrapping components with the omniscient function. The author's examples call this "component". These components only deal with their own piece of data, so they're nicely encapsulated and potentially easier to reuse.

The project has lots of examples and documentation, so it's worth reading through the readme first to get a feel for it.

Path.js Update


Andrea Ferretti wrote in to say Paths.js has been updated to include tree charts, waterfall diagrams, Sankey diagrams and a preliminary version of force-directed graphs.

This is what the tree chart looks like:

tree = new Ractive  
  el: '#tree'
  template: template
    Tree: Tree
    data: ducks
    children: children
    width: 350
    height: 300
    leaf: (point) ->
      not (children(point)?.length)

tree.on 'toggle', (event) ->  
  node = event.context.item
  node.collapsed = not node.collapsed

The author is also working on performance improvements and lots of other cool stuff, so it's worth keeping an eye on this library.

Coinbolt Cat Shop

JP Richardson sent in Coinbolt Cat Shop (GitHub: coinbolt / catshop, License: MIT). This is an example of a React.js shopping cart, intended to be used with Bitcoins.

The author points out that you can actually use it with fake Bitcoins for testing purposes.


libraries modules graphs angularjs boilerplates

Angular Chart, pragmatic-angular, ng-boilerplate-app

Posted on .

Angular Chart

Angular Chart

Angular Chart (GitHub: jtblin / angular-chart.js, License: BSD) by Jerome Touffe-Blin is a set of native AngularJS directives for Chart.js.

It works by allowing you to define data and labels in the Angular controller, so your markup basically just has to define what kind of chart to use. The advantage of this is it's reactive, so it works really well if your data changes.


What if you've got lots of jQuery plugins but don't have AngularJS event bindings? Lars Gersmann has written pragmatic-angular (GitHub: lgersman / pragmatic-angular, License: GPL/MIT), which allows you to declaratively bind jQuery plugins to elements in markup.

If the plugin has custom events then you can handle them with ng-on. This works with both native and custom events, so you could use ng-on="{ click : onClick}" to add a click handler.

Even though the plugin is technically very simple, Lars has provided some useful real world examples in the readme so you can see how it's used.


I'm a big fan of writing AngulaJS/Knockout/etc. applications with Browserify, so I thought Mattia Franchetto's ng-boilerplate-app (GitHub: mtfranchetto / ng-boilerplate-app, License: MIT) was pretty cool. It's a boilerplate for Angular/Bootstrap applications, and includes file watching, live reloading, CSS vendor prefixing, code coverage, and more.


validation github data node graphs

tcomb-validation, Bug Life

Posted on .


tcomb-validation (GitHub: gcanti / tcomb-validation, License: MIT) by Giulio Canti is a general purpose validation library that can be used with (or without) React and Backbone.

It's based on the tcomb library which is a runtime type checking library.

Using the plain JavaScript API, you can check types like this:

var t = require('tcomb-validation');  
var validate = t.addons.validation.validate;

validate(1, t.Str).isValid();  
validate('a', t.Str).isValid();  

If you call firstError, you'll get an Error object with a description of what failed the validation. You can combine validators using the struct method, and these can be passed to validate so you can validate forms. You can even pass a JSON schema to validate.

The Backbone integration works by calling validate like this:

var Model = Backbone.Model.extend({  
  validate: function (attrs, options) {
    return validate(attrs, Attrs).errors;

Bug Life

Bug Life

Bug Life was created for the GitHub Data Challenge, and displays a chart derived from issue data. It includes the labels and issue life cycle events, so you can see what the common labels are and how long it takes to close issues.

The screenshot I included was of Backbone, and generating it required authorisation with the GitHub API. Bug Life handles this quite well -- once the API limit was hit I just had to click Authorize and that was pretty much it.

The author has included some explanations of the charts on the project's demo page:

This is a popular repo on github - backbone. It has a rich history, well organized labels and release cycles. On version 0.9.0, when backbone reached a relatively stable state, many issues were closed. Before this release there were other important ones, for example 0.5.0.

After 0.9.0 backbone lived through 3 other important milestones: 0.9.9, 1.0.0 and 1.1.0. Each of these releases was focused on different aspects. Right before version 0.9.9 most open issues were of type change, while before version 1.1.0 most open issues were of type bug.


ui browser iOS graphs

Switchery, circles

Posted on .



Switchery (GitHub: abpetkov / switchery, License: MIT, bower: switchery) by Alexander Petkov is a checkbox replacement, inspired by iOS 7, complete with animations.

The basic usage is new Switchery(elem). You can pass extra options for the disabled state, the colour, and the animation speed.

Switchery is written using CommonJS modules, but Alexander builds a standalone version that doesn't need require.



Circles (GitHub: lugolabs / circles, License: MIT) by Artan Sinani is a small script for creating circular graphs. It doesn't have any dependencies, and can be used like this:

  id:         'circles-1',
  percentage: 43,
  radius:     60,
  width:      10,
  text:       7.13,
  colors:     ['#D3B6C6', '#4B253A']