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.


mac graphics ES6 ascii

ASCII to Vector Images

Posted on .

ASCII to vector

Charles Parnot, developer of a lab notebook application for Mac OS, recently gave a talk at NSConference about turning ASCII art into vector drawings. He's written a post about it with some awesome diagrams, entitled Replacing Photoshop With NSString:

Each shape is defined by a series of sequential characters, and a new shape is started as soon as you skip a character in the above list. So the first shape could be defined by the series ‘123456’, then the next shape with ‘89ABCDEF’, the next with ‘HIJKLMNOP’, etc. The simplest method +imageWithASCIIRepresentation:color:shouldAntialias: will draw and fill each shape with the passed color (there is also a block-based method for more options).

Earle Castledine has developed a JavaScript version called Cocoscii that can generate DOM images. The API is based around template strings:

const closeImg = cocoscii(`  
  · · · · 1 1 1 · · · ·
  · · 1 · · · · · 1 · ·
  · 1 · · · · · · · 1 ·
  1 · · 2 · · · 3 · · 1
  1 · · · # · # · · · 1
  1 · · · · # · · · · 1
  1 · · · # · # · · · 1
  1 · · 3 · · · 2 · · 1
  · 1 · · · · · · · 1 ·
  · · 1 · · · · · 1 · ·
  · · · 1 1 1 1 1 · · ·
  `, (idx, style) => {
    if (idx === 0) {
      style.fill = "#000";
    } else {
      style.stroke = "#fff";

The readme describes how drawing with ASCII works:

The basics are, you fill a grid with the ordered markers ... Any other characters are ignored.

If the numbers are sequential, they become a path. If you skip a number, then a new path starts. If a number is repeated twice, it becomes a line. If a number is repeated more than twice, it becomes a circle that fits inside the bounding box of all the points.

This sounds like a potentially hacker-friendly way of generating icons and simple game animations. I imagine it would be pretty easy to use it with effects like gradients and drop shadow.

Maybe there's even some way of extending the principle to something like Monodraw?

Update: There's also a Node implementation now as well! (npm: node-cocoscii)


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!


ui graphics images icons Microsoft

Material Design Icons, rdljs, PhotoSwipe

Posted on .

Material Design Icons for Angular

Google's Material Design stuff is amazing, and their recent UI and animation libraries are useful for those of us who don't want to spend too much time developing a totally new UI for every project. However, these tools have limitations. Urmil Parikh found that the official Material Design Icons were hard to recolour without patching the SVG files.

Material Design Icons

To work around this issue, Urmil created Angular Material Icons v0.3.0 (GitHub: klarsys/angular-material-icons, License: MIT, Bower: angular-material-icons, npm: angular-material-icons). By including this project, you get a new Angular directive called ng-md-icon which supports options for style and size. It also optionally supports SVG-Morpheus -- this allows you to morph between icons which might work well in animation-heavy material design projects.

This library works by hard-coding the SVG paths in an object called shapes. The paths can be embedded in svg elements with the required size and style attributes.


André Vale sent in rdljs, a library for Microsoft RDL/RDLC reporting. This technology is completely new to me, so I had to ask him for clarification. Apparently, RDL stands for Report Definition Language, and is used with Microsoft SQL Server Reporting Services. RDL files are XML schemas for designing reports, so André's library allows you to take RDLC files and render them in a browser.

The library comes with a demo, but you'll need to run a webserver to try it out. It's intended to be used with a server side application that sends the XML using Ajax requests. It uses D3 and jQuery. The source that does the XML parsing looks extremely involved, so it would be interesting to see what people can do with it who've got RDL experience.


PhotoSwipe (GitHub: dimsemenov/PhotoSwipe, License: MIT, Bower: photoswipe) by Dmitry Semenov is a mobile-friendly image gallery. It works through instances of the PhotoSwipe object, and there are methods for things like going to the next/previous slide, and skipping to a specific slide. The API also supports events.

There's full documentation in website/documentation/api.md which explains how to add slides dynamically, so you can load slide data asynchronously if required.

One thing I liked about the PhotoSwipe was the mouse gestures: if you click and swipe it works in a similar way to swiping on a touchscreen. It also feels fast and lightweight.


libraries graphics webgl translations japanese jpeg

Z3d, is-progressive, Japanese Translations, textlint

Posted on .



Z3d (GitHub: NathanEpstein/Z3d, License: MIT, Bower: z3d) by Nathan Epstein is a library that generates 3D plots. It gives you a Three.js scene, so you can further manipulate the graph with the Three.js API.

One of the useful things about Z3d is it has sensible built-in defaults, so you can throw data at it and get something cool out. The basic example is just plot3d(x, y, z), where the arguments are arrays of numbers to plot in 3D space.

The plot3d function also accepts a configuration argument, which allows things like colours and labels to be defined.


If you're running through a checklist of website performance improvements and see image optimisation, then you might want some automated tools to do the job for you. Sindre Sorhus suggests using progressive JPEG images, and sent in a tool that can check if a JPEG is progressive or not.

It's called is-progressive (GitHub: is-progressive, License: MIT, npm: is-progressive), and can be used as a Node module or on the command-line. The command-line use is either is-progressive filename or you can redirect data into it.

The Node module supports streams and has a synchronous API. That means you can do isProgressive.fileSync, or pipe HTTP requests through it with res.pipe(isProgressive.stream(callback)).

DailyJS Japanese Translation and textlint

Hideharu Sakai wrote in to say he's been translating DailyJS into Japanese, here: panda.node.ws/?cat=19.

He also mentioned a nice project for linting text: textlint (License: MIT, npm: textlint). You can use it to check plain text and Markdown files for various rules which are customisable. The example ensures to-do lists are written a certain way.

You can use textlint as a command-line tool or a Node module, so you could put it into a build script to validate your project's documentation.

Many thanks to Hideharu!