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:
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.
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).
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?
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.
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:
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.
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.
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.
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)).
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.