Archive for the ‘Charts’ Category

xCharts is an open JavaScript charting library that is built on top of D3.

It works with using HTML-CSS + SVG to create good-looking and custom-data-driven charts with ease.


There is support for 4 chart types: bar, cumulative, line and line-dotted where the colors, text,dimensions can all be defined via CSS.

The data is provided as JSON and there are callbacks for events like mouseover, mouseout, click so that any interactions can be added.

  • Tags:
  • Filed under: Charts, Goodies, Other License
  • Sparklines, the tiny charts that can be used near a sentence, headline, graphic.., are very handy for visualizing data inside the content.

    Sparky is a free JavaScript sparklines library that depends on Raphaël and very easy to use.

    Sparky - JavaScript Sparklines Library

    It has support for multiple chart types (line, bar and area) where line + area charts can have multiple colors as well.

    The usage is very straightforward; just create an HTML element (preferably <span> for inline use) and provide the values as an array with a data attribute. And, define the settings (width, height, colors, padding, etc.) with a JS function.

    Jim Knopf is a JavaScript library for creating SVG-powered knobs.

    The library doesn’t require any JS frameworks and it comes with various built-in knob types.

    SVG Knobs With JavaScript

    Knobs created can be scaled completely (thanks to SVG) and their designs can be customized with CSS.

    Also, they can be controlled with mouse, mousewheel, keyboard or touchpad and options exist for setting the min/max values, starting points and the angles allowed.

  • Tags:
  • Filed under: Charts, Goodies, MIT License
  • D3-Cloud is a beautiful and open sourced implementation of word clouds that are familiar from

    It is built with the D3.js library, uses HTML5 canvas for drawing the output and works asynchronously for a good performance.

    D3 Word Cloud

    The size of the cloud, font used, font-size, padding and more stuff can be customized.

    Also, a web-based word generator with SVG + PNG downloads is provided.

    Bonsai is an open source JavaScript library for creating graphics and animations.

    The library renders the outputs using SVG and comes with an intuitive, feature-rich API.

    There is support for creating simple shapes (rectangle, circle, ellipse, etc.) with specific functions and a path() function exists for drawing any custom shapes.

    BonsaiJS - JavaScript Graphics Library

    It is possible to apply colors, gradients and filters (grayscale, blur, opacity and more) to these shapes.

    Many mouse (or touch) and keyboard events are already built-in to the library and they can be managed easily.

    Bonsai has support for standard animations and also keyframe animations for setting up a series of consecutive animations.

    And, lots of easing functions exist for using them inside the animations.

  • Tags:
  • Filed under: Charts, Goodies, MIT License