heatmap-1 v2

_.md

[ Launch: heatmap-1 ] eb09dd8b4f2da50c534317919fb1e7c1 by jdutta

config.json

{"description":"heatmap-1 v2","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}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/Uh4fnzc.gif"}

inlet.js

// Configurable params
var config = {
  histoWidth: 500,
  histoHeight: 100,
  colorRange: [d3.rgb("#c9c9c9"), d3.rgb('#222222')],
  gRootXY: [50, 50],
  nItems: 40
};

function getHistogramData(n, max) {
  var firstFew = [];//[100, 40, 70];
  var i = 0;
  var arr = [];
  while (n--) {
    if (i < firstFew.length) {
      arr.push({v: firstFew[i++]});
    } else {
      arr.push({v: Math.round(Math.random() * max)});
    }
  }
  return arr;
}

drawChart(getHistogramData(config.nItems, 100));

function drawChart(data) {
  var svg = d3.select('svg');
  var gRoot = svg.append('svg:g')
				.attr('transform', 'translate('+config.gRootXY+')');
  
  /*
  // draw rect around histogram
  gRoot
  .append('svg:rect')
  .attr({
    x: 0,
    y: 0,
    width: config.histoWidth,
    height: config.histoHeight
  }).style({
    fill: 'none',
    stroke: 'black'
  });
  //*/

  var yMax = d3.max(data, function (d) { return d.v; });
  var xScale = d3.scale.ordinal()
				 .domain(d3.range(data.length))
                 .rangeRoundBands([0, config.histoWidth], 0.1)
  var yScale = d3.scale.linear()
                 .domain([0, yMax])
                 .range([0, config.histoHeight])

  var colorScale = d3.scale.linear()
      .domain([0, yMax])
      .interpolate(d3.interpolateLab)
      .range(config.colorRange);

  //console.log(data);
  
  var histoEnter = gRoot.selectAll('.histo-bar')
		.data(data)
		.enter()
        .append('svg:rect')
		.classed('histo-bar', true);

  histoEnter
        .attr({
          x: function (d, i) {
            return d.x = xScale(i);
          },
          y: function (d) {
            //return d.y = 0;
            return d.y = config.histoHeight - yScale(d.v);
          },
          width: xScale.rangeBand(),
          height: function (d) {
            //return config.histoHeight;
            return yScale(d.v);
          }
        })
        .style({
          fill: function (d) {
            return colorScale(d.v);
          }
        });
  
  
}