d3.js

Transcript

1. d3.js an introduction

2. What is it? A JavaScript library for manipulating documents based

   on data.

3. What can it do? • Graphs • Charts • Tables

   • Transformations • Interactions • SVG • HTML • Anything

4. Examples • http://mbostock.github.com/d3/ex/calendar. html • http://mbostock.github.com/d3/ex/chord.html • http://www.visualizing. org/visualizations/urban-water-explorer/

5. Simple Code Example https://github.com/Nodeable/web-client/blob/master/static/js/4_x/nodeable/views/desktop/widgets/hashtags.js tagCloud.selectAll( '.tag') .data(self.data) .enter().append( 'a') .attr('class',

   function(d){ return 'tag height_' + Math.round (tagHeight(d.percent)); }) .attr('title', function(d){ return d.value; }) .style('font-size', function(d){ return Math.round(tagHeight(d. percent)) + 'px'; }) .text(function(d){ return d._id; });

6. Why should you use it? • You want to visualize

   data in unique ways. • You thirst for adventure and challenge. • You don't want to use canned graphs.

7. Why shouldn't you use it? • It has an extremely

   steep learning curve. • You can settle for more simple solutions (highcharts).

8. Resources d3.js - http://mbostock.github.com/d3/

9. Questions? Tim Golen Web Developer - Nodeable.com @tgolen http://www.golen.net