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.


ui graphics css react d3

React CSS with Radium, React D3 Components

Posted on .


Ken Wheeler sent in Radium (GitHub: FormidableLabs/radium, License: MIT, npm: radium) from Formidable Labs. Radium is a module for managing inline styles on React elements, allowing you to use CSS features that aren't usually possible with inline styles.

You can use modifier styles based on component props, media queries, and handle pseudo classes.

Radium offers a standard interface and abstractions for dealing with these problems.

When we say expressive, we mean it: math, concatenation, regex, conditionals, functions–JavaScript is at your disposal. Modern web applications demand that the display changes when data changes, and Radium is here to help.

Radium provides a mixin called StyleResolverMixin which will generate the styles that you want to add to a component. The style objects it uses look like this:

var radStyles = {  
  padding: '1.5em',
  border: 0,
  borderRadius: 4,
  background: 'blue',
  color: 'white'

You can then call this.buildStyles in the render method, and add the styles to the style attribute. Radium also supports modifiers -- CSS properties that are applied based on the component's props and state. Take a look at the getting started guide to learn more.

Ken also mentioned React: CSS in JS by Christopher Chedeau, who works at Facebook in the front-end infrastructure team.

React D3 Components

React 3D Components

react-d3-components (GitHub: codesuki/react-d3-components, License: MIT, npm: react-d3-components) by Neri Marschik is a library for working with D3 in React. Imagine being able to include elements like BarChart in your render methods, which generates charts based on the ReactD3.BarChart class.

You can even add tooltips and CSS classes. The project's readme includes lots of charts, but not every D3 chart is supported yet. The author is also working on animations.

I much prefer the idea of giving D3 charts some added structure with React -- usually my D3 code ends up a little bit on the less maintainable side!


audio d3

Party Mode, Bézier Clock

Posted on .

Party Mode

Party Mode

Party Mode (GitHub: preziotte / party-mode, License: MIT) by Mathew Preziotte is a music visualiser with a slick UI and lots options. If you press m it'll show a menu for each visual effect, and there's also a keyboard icon near the bottom of the screen that documents each shortcut.

The author built it with d3.js and the Web Audio API.

Using the web audio api, I can get an array of numbers which corresponds to the waveform of the sound an html5 audio element is producing. There's a good tutorial on how to do this. Then, using requestAnimationFrame (with a little frame limiting for performance reasons) I'm updating that array as the music changes. I then normalize the data a bit (or transform it slightly depending on the visualization) and redraw the screen based on the updated array. I'm using d3.js to draw and redraw SVG based on this normalized data. Each visualization uses the data a bit differently -- it was mostly trial and error to get some stuff I liked looking at.

Bézier Clock

Jack Frigaard sent in his Bézier Clock, which got lots of attention on Hacker News this week. It's made with Processing.js, which is loads of fun to play with, and you can click it to visualise the curve splines and poitns.

There are keyboard options as well:

  • space: Toggle continual animation
  • s: Show intermediate figures and the standard ones
  • a: Cycle through linear, quadratic, cubic and sinusoidal easing


animation graphics webgl d3

WebGL D3 with PathGL

Posted on .

A PathGL particle simulation.

"PatrickJS" sent in PathGL (GitHub: adnan-wahab / pathgl, License: GPL, npm: pathgl) by Adnan Wahab. It's a library for data visualisation with D3.js that allows you to do cool things with WebGL and particles.

The particle physics example looks like this:

var particles = pathgl.sim.particles(1e5);

    .attr('r', function (d,i) { return d.z })
    .attr('cx', function (d,i) { return d.x })
    .attr('cy', function (d,i) { return d.y })
    .shader({ stroke: 'texel(pos.xy).xzwy' });

  .on('click', particles.reverse);

As you can see, PathGL uses the familiar D3 chained API with an additional shader method that adds texels.

There are other GL-specific methods as well, like uniform, texture, and pipe. These are documented in the API reference.

If you're already used to D3 but don't know much about WebGL, then you should take a look at the PathGL documentation for SVG vs. WebGL. It explains how the scenegraph relates to SVG. There's also a page on GPGPU, a technique for offloading heavy computation to the graphics card.


animations angular d3

Cammy and n3-charts

Posted on .

Cammy's demo.

Cammy (GitHub: lorem--ipsum / cammy, License: MIT) by Sébastien Fragnaud ("lorem--ipsum") is an orthogonal projection camera built on AngularJS and D3.js. The demo is completely gorgeous, so I was compelled to waste a good 15 minutes playing with it. If you look at the source you can see how the Angular directives are used to hook up the UI controls with the renderer.

Sébastien also wrote n3-charts (GitHub: n3-charts / line-chart):

$scope.options = {
  axes: {
    x: {
      key: 'x',
      labelFunction: function(value) { return value; },
      type: 'linear',
      tooltipFormatter: function(x) { return x; }
    y: { type: 'linear' },
    y2: { type: 'linear' }
  series: [{
    y: 'value',
    color: 'steelblue',
    thickness: '2px',
    type: 'area',
    striped: true,
    label: 'Pouet'
  }, {
    y: 'otherValue',
    axis: 'y2',
    color: 'lightsteelblue'
  lineMode: 'linear',
  tension: 0.7