Google Docs D3.js

Google Docs data D3.js examole based on: http://misoproject.com/dataset/tutorials/googlespreadsheets# http://misoproject.com/dataset/tutorials/googlespreadsheets#

by Igor Cuckovic

HTML

<script src="http://lunobus.com/googleDocs/js/miso.ds.deps.ie.0.4.1.js"></script>

CSS

svg {
    font-family: Arial;
}

svg .labels {
    font-size: 20px;
    font-weight: bold;
    fill: darkred;
}

JavaScript

// data source:
// https://docs.google.com/spreadsheet/ccc?key=0As6gybfMRYZrdEwzX1Y5d0l1Y3doZl9GZWxDR0t5LUE#gid=0

var ds = new Miso.Dataset({
        importer : Miso.Dataset.Importers.GoogleSpreadsheet,
        parser : Miso.Dataset.Parsers.GoogleSpreadsheet,
        key : "0As6gybfMRYZrdEwzX1Y5d0l1Y3doZl9GZWxDR0t5LUE",
        worksheet : "1",
        fast : true // does not work well with utf8
      });

      ds.fetch({ 
        success : function() {
                var data = [];
                this.each(function(row){ data.push(row); });

                console.log(ds.columnNames()[0]);
           var margin = {top:40, right:40, bottom:40, left:40};
           
           var dataName = ds.columnNames()[0];
           var dataValue =  ds.columnNames()[1];      

          // Create SVG element for chart
          var chart = d3.select('body').append('svg')
                              .attr('width', 600)
                              .attr('height', 600);
          
          // create main group
          var group = chart.append('g')
              .attr("transform", "translate(" + margin.top + "," + margin.left + ")")
              .attr("id", "mainGroup");
 
          // Create a scale for the bars
          var scale = d3.scale.linear()
                              .domain([0, ds.max("Count")])
                              .range([0,150]);
 
          // Create one group per data row
          group.selectAll('g').data(data).enter().append('g')
            .attr('transform', function(d,i){ return "translate(25," + i * 25 + ")"; });
 
          // Create rect element for bar
          group.selectAll('g').append('rect')
            .attr('fill', 'steelblue')
            .attr('height', 23)
            .attr('width', function(d){ return scale(d.Count); })
            .attr('x', 80)
            .attr('y', 2);
 
          // Create text element for category
          group.selectAll('g').append('text')
            .text(function(d){ return d.Animal;...