DokuWiki

Grouping, sorting, and adding axes

<code>var bardata = [];

for (var i = 0; i < 50; i++) {

bardata.push(Math.round(Math.random() * 30));

}

bardata.sort(function compareNumbers(a, b) {

return a - b;

});

var height = 400; var width = 600; var barWidth = 50; var barOffset = 5;

linear scale var yScale = d3.scale.linear() .domain([0, d3.max(bardata)]) .range([0, height]); ordinal scale var xScale = d3.scale.ordinal()

.domain(d3.range(0, bardata.length))
.rangeBands([0, width]);

var tooltip = d3.select('body').append('div')

.style('position', 'absolute')
.style('padding', ' 0 10px')
.style('background', 'white')
.style('opacity', 0);

var colors = d3.scale.linear()

//.domain([0, d3.max(bardata)])
//.domain([0, bardata.length])
.domain([0, bardata.length * .33, bardata.length * .66, bardata.length])

//.range(['#FFB832', '#C61C6F']);
.range(['#B58929', '#C61C6F', '#268BD2', '#85992C']);

var mychart = d3.select('#chart').append('svg') .attr('width', width) .attr('height', height) .append('g') .style('background', '#C9D7D6') .selectAll('rect').data(bardata) .enter().append('rect')

//.style('fill', colors)
.style('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', .9);

  tooltip.html(d)
	  .style('left', (d3.event.pageX) + 'px')
	  .style('top', (d3.event.pageY) + 'px');

  d3.select(this)
	.transition()
  .style('opacity', .5)
  .style('fill', 'cyan');
})
.on('mouseout', function (d) {
  d3.select(this)
	.transition().delay(500).duration(800)
  .style('opacity', 1)
  //.style('fill', tempColor);
});

mychart.transition()

.attr('height', function (d) {
  return yScale(d);
})
.attr('y', function (d) {
  return height - yScale(d);
})
.delay(function (d, i) {
  return i * 8;
})
.ease('elastic');

var vGuideScale = d3.scale.linear()

.domain([0, d3.max(bardata)])
.range([height, 0]);

var vAxis = d3.svg.axis()

.scale(vGuideScale)
.orient('left')
.ticks(10);

var vGuide = d3.select('svg').append('g')

vAxis(vGuide);
vGuide.attr('transform', 'translate(250, 10)')
vGuide.selectAll('path')
.style({ fill: 'none', stroke: '#000'})
vGuide.selectAll('line')
.style({ stroke: '#000'})<code>