values floating above bars - with rect highlight

by Nivaldo

HTML

<div id='CTafrica' class='chart africa'>
          <h4>AFRICA</h4>
        </div>

CSS

.axis {
    font-family:'Futura Today';
    font-size:11px;
    color:#a2a5a1;
}

.axis path, .axis line {
    fill: none;
    stroke: #a2a5a1;
    shape-rendering: crispEdges;
}

path .domain {
stroke:#a2a5a1;
}
.axis .tick line {stroke:#a2a5a1;}

      .chart {width:270px; height:100px; display:block; float:left; margin-right:20px;}
 	  .active {fill: #f7fcb9;}
	  .bartext{fill: #7c7c7c;
			   font-family:'Futura Today';
			   font-size:10px;
	    }

JavaScript

var data = [{"year":2003,"africaCT":667.71},
{"year":2004,"africaCT":737.80},
{"year":2005,"africaCT":705.08},
{"year":2006,"africaCT":756.20},
{"year":2007,"africaCT":866.34},
{"year":2008,"africaCT":1083.61},
{"year":2009,"africaCT":990.79},
{"year":2010,"africaCT":923.73},
{"year":2011,"africaCT":989.97},
{"year":2012,"africaCT":1156.56}];


//maximums for each chart set
var costTonMax = 2100;

// recycleable vars

var label = "cost per ton";

var color1 = "#78c679";
var color2 = "#238443";
var color3 = "#004529";

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 300 - margin.left - margin.right,
    height = 200 - margin.top - margin.bottom;

//one of these for each country and each row
charts("africaCT", '#CTafrica', costTonMax, label, color1, '$');

//run chart function with specific max for each row

// 'region' is the part of the world, 'id' is used to call the chart within the page, 'max' is the maximum value for that row of charts and 'label' is the y axis label

function charts(region, chartID, max, label, color, prefix) {

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

var x2 = d3.scale.ordinal()
  .rangeBands([0, width], 0);

var y = d3.scale.linear()
    .range([height, 0]);
  
var xFormat = d3.time.format('%y');

var xAxis = d3.svg.axis()
    .scale(x)
    .tickFormat(function(d) {
      var z = d.toString();
      var a = z.split("");
      return "'"+a[2]+a[3];
    })
    .orient("bottom");
    
var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(5);

  //specifying where to put it
  var svg = d3.select(chartID).append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

//d3.tsv("data/data.tsv", type, function(error, data) {
    x.domain(data.map(function(d) { return +d.year})); //same for all
    x2.domain(data.map(function(d) {...