Old school D3 from simpler times

All examples By author By category About

bewest

Full window Github gist

google calendar + d3 - simple list example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.skeleton {
  display: none;
  visibility: hidden;
}
</style>
<script src="https://d3js.org/d3.v3.min.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>
</head>
<body>
<h1>glucose + calendar</h1>
<h2>Howdy, <span class="username">???</span></h2>
<p>
This demo doesn't implement glucose fetching, just the google auth + google
query seps.
I'd like to know your email address
<span class="email">, so I can look up your calendars</span>.
In later demos, I'm also going to inspect your profile to see if I can find any
glucose records.  Then I'm going to graph both events from your calendar and
your glucose records together.  This assumes your are a google plus user, and
have a git <tt>phr</tt> link with a file called sugars.csv.
We use d3 to create a results row in a table for each calendar event.
</p>
<div id="content"></div>
<div id="events">
  <div id="range">
    <h4>Start: <span id="start"></span></h4>
    <h4>End: <span id="end"></span></h4>
    
  </div>
<table id="list">
<tbody class="skeleton">
  <tr class="event">
    <td><span class="v start"></span></td>
    <td><span class="v end"></span></td>
    <td><span class="v summary"></span></td>
    <td><span class="v location"></span></td>
    <td><span class="v detail"></span>
      <a class="more htmlLink">more</a>
    </td>
    <td><span class=""></span></td>
    <td> </td>
  </tr>
</tbody>
<tbody="target">
</tbody>
</table>
<h5>calendars</h5>
<textarea id="raw_calendars"></textarea>
<h5>events</h5>
<textarea id="raw_events"></textarea>
<h5>info</h5>
<textarea id="raw_info"></textarea>
<h5>profile</h5>
<textarea id="raw_profile"></textarea>
</div>
<script type="text/javascript">

var user = { };

function makeApiCall( ) {
  // console.log("hooray, can fetch events?");
  gapi.client.load('calendar', 'v3', function() {
    // console.log('loaded google calendar support?', this, arguments);
    var request = gapi.client.calendar.calendarList.list( );
    request.execute(function (resp, raw) {
      // console.log('got a calendars list response', resp );
    });
  });
}
(function ($) {
function get_profile( ) {
  d3.json('profile.json', function(error, data) {
    // console.log(this, arguments);
    resp = data[0].result;
    jQuery('#raw_profile').val(JSON.stringify(data));
    var heading = document.createElement('h4');
    var image = document.createElement('img');
    image.src = resp.image.url;
    heading.appendChild(image);
    heading.appendChild(document.createTextNode(resp.displayName));

document.getElementById('content').appendChild(heading);
  });
}

function get_info( ) {
  d3.json('info.json', function(error, data) {
      raw = JSON.stringify(data);
      resp = data[0].result;
      jQuery('#raw_info').val(raw);
      // console.log('user info', resp);
      user.info = resp;
      console.log(resp);
      jQuery('.username').text(resp.name);
      jQuery('.email').text(resp.email).trigger('email');
  });

}
function get_calendars( ) {
  d3.json('calendars.json', function (error, data) {
    var raw = JSON.stringify(data);

jQuery('#raw_calendars').val(raw);
  });
}

function get_events( ) {
  d3.json('events.json', function (error, data) {
    var raw = JSON.stringify(data);
    var resp = data[0];
    jQuery('#raw_events').val(raw);
    // console.log('got a events list response', resp);
    user.events = resp.result.items;
    list_events(user.events);
  });

}

jQuery(document).on('ready', function ( ) {
  get_profile( );
  get_info( );
  get_calendars( );
  get_events( );
});
jQuery(document).on('email', function ( ) {
  // console.log('email known, fetching calendar data', 'user', user);
});
})(jQuery);

function dup_row(skel) {
  // console.log('return factory for dup row', this, arguments);
  return (function (data, i) {
    // console.log('dup row', this, arguments);
    var row = skel.clone(true).addClass('row');
    for (x in data) {
      if (data[x].toString( ) != '[object Object]') {
        row.find('.v.' + x).text(data[x]);
      } else {
        // console.log('???', x, data[x]);
      }
    }
    row.find('.end').text(data.end.dateTime || data.end.date);
    row.find('.start').text(data.start.dateTime || data.start.date);
    row.find('A.htmlLink').attr('href', data.htmlLink);
    // console.log('done with row', row);
    
    return d3.select(jQuery(this).append(row)[0]);

});

}

var iso_day = d3.time.format("%Y-%m-%d");
var parse_dt = /(.*)-(\d\d):(\d\d)$/;
var iso_daytime = d3.time.format("%Y-%m-%dT%H:%M:%S");
function parse_date(d) {
  if (d.start.dateTime) {
    var p = d.start.dateTime.match(parse_dt);
    var s = p[1];
    return iso_daytime.parse(s);
  }
  return iso_day.parse(d.start.date);
};

function list_events(list) {
  // console.log('working with list', list);
  list.forEach(function (d) { d.ts = parse_date(d); });
  var skeleton = jQuery('#list .skeleton').clone(true).removeClass('skeleton');
  var duper = dup_row(skeleton);
  var timeRange = d3.extent(list, function(d) {
        // console.log(this, arguments);
        return d.ts; });
  jQuery('#range #start').text(timeRange[0]);
  jQuery('#range #end').text(timeRange[1]);
  var rows = d3.select('#list').selectAll('.row').data(list).enter( ).select(duper);
}

</script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js