Heatmap-WIP1

_.md

[ Launch: Heatmap-WIP1 ] 2ba87a4bc8d56f3b4cfc by bwinton
[ Launch: test ] 4653053 by enjalot
[ Launch: test ] 4652017 by enjalot
[ Launch: test ] 4582399 by enjalot

config.json

{"description":"Heatmap-WIP1","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"widgets.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"heatmap_data.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"tab":"edit","display_percent":0.7,"thumbnail":"http://i.imgur.com/Z4ghHZY.png","fullscreen":false,"ajax-caching":true}

heatmap_data.csv

inlet.js

var clickFormat = d3.format('0.2');
var platform = 'Darwin';
var scale = 2;
var WIDTH = 1492;
var HEIGHT = 1128;

function draw(data) {
  // Choose the elements we want to draw.
  data = data.filter(function (row) {
    return (
      row.sys_info === 'Darwin' &&
      row.item === 'click' &&
      widgets[row.widget]);
  });
  // Set up the image.
  var chart = d3.select('svg').classed('chart', true);
  
  chart.attr('viewBox', '0 0 ' + WIDTH + ' ' + HEIGHT);
  var image = d3.select('.chart').append('image');
  image.attr({
    'x': 0, 'y': 0, 'width': WIDTH, 'height': HEIGHT,
    'xlink:href': 'http://d3.dev/images/Darwin/HeatmapDefaultPlus.png'
  });

  chart.selectAll('.bar')
    .data(data)
    .enter()
    .append('rect')
      .attr({
        'class': 'bar',
        'fill': 'rgba(255,0,0,0)',
        'x': function (d) {
          return widgets[d.widget].x * scale;
        },
        'y': function (d) {
          return widgets[d.widget].y * scale;
        },
        'width': function (d) {
          return widgets[d.widget].width * scale;
        },
        'height': function (d) {
          return widgets[d.widget].height * scale;
        },
        'title': function (d) {
          return d.widget.replace('-button', '').replace('-', ' ') +
            ' - ' + clickFormat(d.instances_per_session) + ' clicks per session';
        }
      });
    update(data);
}

function update(data) {
  // Set up the scales.
  var maxClicks = d3.max(function (data, d) {
    return d.instances_per_session;
  });
  var clickScale = d3.scale.pow()
    .domain([1, maxClicks])
    .range(['rgba(255,0,0,0.1)', 'rgba(255,0,0,0.5)']);

  var chart = d3.select('.chart');
  chart.selectAll('.bar').data(data).transition()
    .style('fill', function (d) {
      return clickScale(d.instances_per_session);
    }).duration(500);
}


$(function () {
  $('#btn-default').click(function () {
    $('.btn.order').removeClass('btn-primary');
    $(this).addClass('btn-primary');
    update(clicks);
  });

  $('#btn-reversed').click(function () {
    $('.btn.order').removeClass('btn-primary');
    $(this).addClass('btn-primary');
    update(clicks);
  });
});


var widgets = {};
var clicks = [];

$.each(tributary.widgets, function (i, d) {
  if (d.width !== 0) {
    widgets[d.id] = d;
  }
});
$.each(tributary.heatmap_data, function (i, row) {
  var d = row;
  d.widget = d.subitem
  .replace('builtin-item-', '')
  .replace('-left', '');
  clicks.push(d);
});

draw(clicks);

widgets.csv