d3.js

An introduction to 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