The JavaScript blog.


libraries svg diagrams

Mermaid: Like Markdown for Diagrams

Posted on .


When I work on books my editor always seems to push for more diagrams. Diagrams are useful, but drawing tools are a chore to use. When I get really stuck I resort to pen and paper or ASCII art. Writing suffers from the same issue: people love playing with writing tools and fonts before realising writing in Markdown or something similar is far more productive.

That's why I thought Mermaid (GitHub: knsv/mermaid, License: MIT, Bower: mermaid) sounded cool:

Generation of diagrams and flowcharts from text in a similar manner as markdown.

Ever wanted to simplify documentation and avoid heavy tools like Visio when explaining your code?

This is why mermaid was born, a simple markdown-like script language for generating charts from text via javascript.

Rather than playing with stroke styles and colours, fonts, and other distractions, you can focus on the meaning the diagram is trying to encapsulate. Mermaid does allow you to include styles so you can change fill colours and strokes, but the text-based syntax might be easier to work with than GUI drawing tools under some circumstances.

I noticed Mermaid has two Jison files, which seems like a sensible way to parse the diagram syntax. For example, flow.jison is used to generate the parser that parses text graph definitions.

d3 is used for drawing, so you should be able to use Mermaid anywhere you use d3. It comes with a Gulpfile for generating optimised builds, and there are some Karma tests as well.


libraries animation svg

Material Design's Delightful Details with SVG Morpheus

Posted on .


SVG Morpheus (GitHub: alexk111/SVG-Morpheus, License: MIT, Bower: svg-morpheus) by Alex Kaul is a library for morphing between SVG icons. It implements the delightful details transition, as described by Google's material design documentation:

The most basic use of animation is in transitions, but an app can truly delight a user when animation is used in ways beyond the obvious. A menu icon that becomes an arrow or playback controls that smoothly change from one to the other serve dual functions: to inform the user and to imbue your app with a moment of wonder and a sense of superb craftsmanship. Users do notice such small details.

You might have noticed this in Android recently: the first-party Android apps now have a nice transition for the back icon. This is visible in the Play Store app, for example.

Alex's library allows you to do this with SVG icons, so you can employ the same effects in your web apps. All you need to do is add an SVG icon set to a document, then instantiate SVGMorpheus:

var myIcons = new SVGMorpheus('#myIconSet', options, callback);  

The options include easing and duration, so you get some control over the transition.

The project's documentation has more details on the API and the expected markup structure.


libraries browser svg modules

PrototypeJungle, Slick, Cash

Posted on .


PrototypeJungle (GitHub: chrisGoad / prototypejungle, License: MIT) by Chris Goad is a tree-based object model and inspector. The inspector makes all of the underlying data structures visible, so you can explore and manipulate it.


For example, this is a bar chart, displayed with SVG. You can drill down into each bar and edit things like the bar height, colour, stroke, and so on.

Elements of the model can be serialized and saved in files, and represent things of various complexities, from simple infographic marks such as bars or bubbles, to axes or legends, to complete charts.

Often, an element serves as a prototype (in the general sense). For example, consider a prototypical bubble or bar which is instantiated once for each data point. When an instance of an element is wanted, a special variety of deep copy is made which inherits as appropriate from the original using JavaScript's prototype formalism. Subsequent adjustments to the original will be inherited by all of the instances, at least in those aspects that have not been overriden.

Chris says it's at an early stage, but I think it's a pragmatic look at data visualisation that readers might find interesting.

Slick, Cash

Ken Wheeler sent in some client-side projects that he's been working on. One is Slick (GitHub: kenwheeler / slick, License: MIT), a carousel that supports a huge amount of things: CSS3 animations when available, touch and mouse gestures, infinite loop, autoplay, adaptive height, lazy loading, fade effects, and it's responsive as well.

It has an API so you can dynamically add and remove slides. It depends on jQuery 1.7+.

Ken's other project is cash, a jQuery alternative. It supports lots of methods from jQuery's API, and is written using separate modules so the source is quite easy to follow. The build system is Gulp. You might find it interesting if you like using or writing small libraries that don't depend on jQuery and want to see how DOM stuff works without legacy cruft.


animation dom svg scraping

SVG Circus, Cheers

Posted on .

SVG Circus

SVG Circus

SVG Circus by Alex Kaul is a site for generating SVG animations. You can use it to make spinners for loading indicators, or other animations if you get creative.

It's built with AngularJS and Bootstrap, and the Bootstrap customisation looks pretty cool. Animations can be exported as XML with embedded JavaScript for animation.


Yesterday I mentioned ineed, a scraper API based around a streaming tokenizer. Most of my Node scraping work has been written with Cheerio, which is a small jQuery-inspired API for Node. Cheers (GitHub: fallanic / cheers, License: MIT, npm: cheers) by Fabien Allanic is a Cheerio-based scraper library:

The motivation behind this package is to provide a simple cheerio-based scraping tool, able to divide a website into blocks, and transform each block into a JSON object using CSS selectors.

It works by using configuration objects that describe metadata based on CSS selectors, so it may help you to be more pragmatic about how you scrape documents.


graphics svg animations reactive

Declarative Graphics

Posted on .

Whenever I hear the term 'reactive', I immediately think about data-driven forms and widgets. Markup isn't just used for HTML forms and widgets, however: SVG is a markup language, so why not use reactive programming techniques to generate data-driven graphics?

That's the goal of Paths.js (GitHub: andreaferretti / paths-js, License: Apache 2.0, bower: paths-js), by Andrea Ferretti. It features a chainable API for generating SVG paths:

var path = Path()  
  .moveto(10, 20)
  .lineto(30, 50)
  .lineto(25, 28)
  .qcurveto(27, 30, 32, 27)

Calling path.print() returns the relevant markup. This can then be used with a templating language like Handlebars or mustache.js: templates/line.html.

This example is from the Paths.js demo (GitHub: andreaferretti / paths-js-demo). The demo uses Ractive.js to bind JSON data to UI controls and charts. It has several graphs with animations, and uses instances of Ractive together with instances of Path to create a clean, interactive data-driven UI.

Reactive Pokémon stats.

I like the combination of modern templating languages, SVG, and Ractive.js in Andrea's demo. The Paths.js API makes generating SVG less tedious than it could be, and various charts are included that you can use to get started quickly.

If you like the sound of Ractive.js, then take a look at the Ractive.js demos, which include some SVG examples.