Bar Chart

_.md

[ Launch: Bar Chart ] 5e1d8ab3bc392592e33648e24e0912d6 by jekkilekki

config.json

{"description":"Bar Chart","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/8f1jkRQ.png"}

inlet.js

/**
 * Data Array
 */
var dataArray = [
  { 
    name: 'Morten Rand-Hendriksen',
    courses: 18
  },
  {
    name: 'Ray Villalobos',
    courses: 7
  },
  {
    name: 'Kevin Skoglund',
    courses: 8
  },
  {
    name: 'David Powers',
    courses: 5
  },
  {
    name: 'Simon Allardice',
    courses: 3
  },
  {
    name: 'James Williamson',
    courses: 5
  }
];

//dataArray.sort( function compareNumbers(a,b) {
//    return b-a;
//});

/**
 * Variables and Scales
 */
var margin = { top:30, right:30, bottom:40, left:50 };

var width = 600 - margin.right - margin.left,
    height = 500 - margin.top - margin.bottom,
    barWidth = 50,
    barOffset = 5,
    tempColor = '';

// Color scale (Quantitative - linear)
var colors = d3.scale.linear()
    .domain([0, dataArray.length*0.5, dataArray.length])
    .range(['#91a8d0', '#839791', '#896978']);

// Y Scale : Quantitative - Linear scale
var yScale = d3.scale.linear()
    .domain([0, 18])
    .range([height, 0]);
// Y Axis
var yAxis = d3.svg.axis()
	.scale( yScale )
	.orient( 'left' )
	.ticks( 10 );

// X Scale : Ordinal scale
var xScale = d3.scale.ordinal()
    .domain( d3.range(0, dataArray.length) )
    .rangeBands([ 0, width ])
//    .paddingInner( 0.1 );
// X Axis
var xAxis = d3.svg.axis()
	.scale( xScale )
	.orient( 'bottom' )
	.tickValues( dataArray.name );

// Tooltip
var tooltip = d3.select( 'body' ).append( 'div' )
    .style( 'position', 'absolute' )
    .style( 'background', 'white' )
    .style( 'color', '#3399cc' )
    .style( 'padding', '3px 15px' )
    .style( 'border-radius', '5px' );

tooltip.style( 'opacity', 0 );

/**
 * D3 Chart Creation
 */
var chart = d3.select( 'svg' ).append( 'svg' )
  //.style( 'background', '#f7f5f5' )
  //.style( 'transform', 'translate(' + margin.left + ',' + margin.top + ')' )
  .attr( 'width', width + margin.left + margin.right )
  .attr( 'height', height + margin.top + margin.bottom );
  
chart.append( 'g' )
	.attr( 'class', 'chart' )
    .attr( 'transform', 'translate(' + margin.left + ',' + margin.top + ')' )
    .selectAll( 'rect' ).data( dataArray )
    .enter().append( 'rect' )
      //.attr( 'fill', function(d,i) { if ( i == 0 ) { return 'white'; } else { return 'rgba(0,0,0,' + 1/i + ')'; } })
      .attr( 'fill', function(d,i) { return colors(i); })
      .attr( 'width', xScale.rangeBand() )
	  .attr( 'height', 0 )
      .attr( 'x', function(d,i) { return xScale(i); })
      .attr( 'y', height )
    .on( 'mouseover', function(d) {
      tooltip.transition().style( 'opacity', 1 );
      tooltip.html(d)
        .style( 'left', (d3.event.pageX - 30) + 'px')
        .style( 'top', (d3.event.pageY - 30) + 'px');
      tempColor = this.style.fill;
      d3.select( this )
          .style( 'opacity', 0.5 )
          .style( 'fill', '#3399cc' );
    })
    .on( 'mouseout', function(d) {
      d3.select( this )
          .style( 'opacity', 1 )
          .style( 'fill', tempColor )
    })
    .transition()
      .attr( 'height', function(d) { return yScale(d.courses)+height; })
      .attr( 'y', function(d) { return yScale(d.courses); })
      .delay( function(d,i) { return i * 100; })
      .duration( 1000 )
      .ease( 'elastic' );

// Add Axes
chart.append( 'g' ).attr( 'class', 'y axis' ).attr( 'transform', 'translate(' + margin.left + ',' + margin.top + ')' ).call( yAxis );
chart.append( 'g' ).attr( 'class', 'x axis' ).attr( 'transform', 'translate(' + margin.left + ',' + (height + margin.top) + ')' ).call( xAxis );