DokuWiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
|<- [[Adding a tooltip]]|[[Adding a horizontal guide]] ->|

===== Grouping, sorting, and adding axes =====

-> [[github.com/mbostock/d3/wiki/SVG-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>