background preloader

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

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

rCharts rCharts is an R package to create, customize and publish interactive javascript visualizations from R using a familiar lattice style plotting interface. Installation You can install rCharts from github using the devtools package 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.

100 Tools Chart selection 1. ChartChooser from Juice Analytics2. 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.

Data Visualizatiion libraries based on D3.js D3.js is the latest incarnation of a javascript data visualization library originally called Protovis by Michael Bostock. This collection of interactive charting tools is open source and has inspired several additional libraries based on its powerful core components – several of which are listed below. For those of you new to the magic of D3, check out this introductory workshop by Mr. Bostock himself. Cubism.js is a D3 plugin used to construct time series charts by pulling data from Graphite, Cube and other sources. NVD3 is a collection of charts and chart components built using D3.

d3.js Tree: most simple sample <title>Simple Tree Demo</title> .link { fill: none; More Data Visualization Libraries Based on D3.JS - Mike McDearmon There are a lot of ways to visualize data on the Web (with more emerging every day), but the flexibility, versatility, and energized development community surrounding D3.js makes it a great option to explore. The following list of D3 plugins, extensions, and applications below is by no means comprehensive, but oughta be enough to keep you busy for a while. If you’re just getting your feet wet with D3.js, here are some great learning resources to get you acclimated:D3 for mere mortals: Great introductory lessons for those starting from scratch.Try D3 Now: Another great resource for learning about core D3 concepts.Data-Driven Documents (paper): An academic article by Mike Bostock with loads of footnotes.Learning D3, Scott Becker: A quick and effective tutorial series to get yourself up and running.Dashing D3: A very thorough tutorial series covering a LOT more than just D3.Interactive Data Visualization for the Web is a fantastic book by Scott Murray.

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.