d3.js

B3a44ca77bd566fa5dbe30ba28217bf2?s=47 tgolen
March 20, 2012

 d3.js

An introduction to d3.js

B3a44ca77bd566fa5dbe30ba28217bf2?s=128

tgolen

March 20, 2012
Tweet

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