The JavaScript blog.


libraries graphics charts d3 WebComponent

Function Plot, Custom Elements Tutorial

Posted on .

Function Plot

Function Plot

Function Plot (GitHub: maurizzzio/function-plot, License: MIT, npm: function-plot) by Mauricio Poppe is a D3-based charting library that is designed to allow you to render functions with as little configuration as possible.

It supports interactive line charts and scatterplots. I noticed you can change the scale with the mouse scrollwheel, and the effect is extremely cool: it feels very responsive with my Magic Mouse, which I've seen behave weirdly with some web-based graphical libraries.

The readme has a full list of the supported options, but the basic usage is just to supply a target selector and plotting function. Here's an example:

  target: '#linear',
  data: [{
    fn: function(x) {
      return x * x;

The library is very Node-friendly, so you can find the module on npm and it'll work fine with Browserify.

Using Custom Elements to Solve Simple Problems

Mike Macaulay sent in a tutorial about Custom Elements that explains what they are, how to use them, and what their limitations are:

Webcomponents always seem just over the horizon, really cool but not quite ready to use in production. I'm starting to worry that the full spec never will, as we continue to get nothing but silence from IE and Safari. However, I'm here to tell you about something that does seem ready to go today, Custom Elements.

The whole point of making your own Custom Elements, beyond making your HTML more semantic, is that you can add your own behavior or methods to those elements. This can be useful, as long as we don't try to do too much.

Most people are discovering these new APIs through libraries like React, and there seems to be some confusion about what custom elements are. Mike's article is a good introduction, and I found the MDN Web Components article is very helpful as well.


libraries graphics charts

Grafico Charts

Posted on .

Grafico is a charting library that provides line, area, stacked and bar graphs,
as well as various types of sparklines.

Grafico also includes features like pop-up hovers. All of the features
are covered in the

The API looks like this:

var graph = new Grafico.GraphType($(element), data, options);

So drawing a line graph is easy:

var linegraph = new Grafico.LineGraph($('linegraph'), { workload: [8, 10, 6, 12, 7, 6, 9] });

Grafico is actually based on a library called Ico that I made. Ico has
some history behind it: I attempted to replicate the advice in Stephen

to create a library that intuitively produces usable and clean graphs.
I'm still working on Ico -- I've been benchmarking it to improve speed
and remove the Prototype dependency.