Rickshaw: A JavaScript toolkit for creating interactive time-series graphs

Graphing Toolkit Rickshaw provides the elements you need to create interactive graphs: renderers, legends, hovers, range selectors, etc. You put the pieces together. See Demo → Built on d3.js It's all based on d3 underneath, so graphs are drawn with standard SVG and styled with CSS. Open Source Rickshaw is free and open source, available under the MIT license. Getting Started Here's a minimal but complete working example. Area Graphs Lines Bars Scatterplot Interactive Legend Add a basic legend: Add functionality to toggle series' visibility on and off: Highlight each series on hover within the legend: Add drag-and-drop functionality to re-order the stack (requires jQueryUI): Interactive Hover Details Show the series value and formatted date and time on hover: Specify formatting callbacks to customize output: See the custom formatter and subclass examples for more. Annotations Add toggleable annotations: annotator.add(timestamp, message);annotator.update(); Range Slider Graphs & Data via AJAX / JSONP Tutorial

http://code.shutterstock.com/rickshaw/

code.shutterstock.com/rickshaw/examples/ Getting Started Bare minimum to get a graph on the page with a couple of points. Lines & Toggling Basic lines with a legend and x-axis ticks and labels. Toggle lines on and off by clicking checkmarks. D3.js is Not a Graphing Library, Let's Design a Line Graph Working with graphing libraries can be tedious. Designing them can be downright frustrating. Each one of them slightly different, but most of them share two common flaws: a design-by-configuration and template design approach. A bar graph can be just a few bars with labels and tick marks...until it isn't.

d3.js Tree: most simple sample <title>Simple Tree Demo</title> .link { fill: none; Building a tree diagram in D3.js - Pixel-in-Gene In the past few weeks, I have spent some time evaluating some visualization frameworks in Javascript. The most prominents ones include: Javascript InfoVis Tookit, D3 and Protovis. Each of them is feature rich and provides a varieties of configurable layouts. In particular I was impressed with D3 as it gives a nice balance of features and flexibility and allowed me to build just the visualizations I wanted. D3.js Playground About The D3.js Playground is designed to allow you (and especially me) to play with the D3.js library in an interactive manner. Every edit made (that results in valid code) affects the playground in realtime. Because CSS is such an important part of visualizations, you can edit CSS live, too. Playing Around To get to the tool, go to (or just click on the image above).

More d3.js fun - how to create d3.js force diagrams from Excel with no coding