DokuWiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
|<- [[Creating a simple bar chart with SVG]]|[[Using ordinal scales]] ->|

===== adding quantitative scales =====

-> github.com/mbostock/d3/wiki/Scales

Trois types d'échelles :
  * Échelles quantitatives - pour les domaines non continus d'entrées, comme les nombres
    * linear (plus courante)
    * identity
    * power
    * log
    * quantize
    * threshold
  * Échelles ordinales - pour les domaines discrets d'entrées, comme les noms ou catégories
  * Échelles temporelles - pour les domaines temporels

<code>
var bardata = [20, 30, 600, 15, 85, 20, 30, 105, 15, 85, 20, 30, 105, 15, 85];

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]);

d3.select('#chart').append('svg')
.attr('width', width)
.attr('height', height)
.style('background', '#C9D7D6')
.selectAll('rect').data(bardata)
.enter().append('rect')
  .style('fill', '#C61C6F')
  .attr('width', xScale.rangeBand())
  .attr('height', function (d) {
    return yScale(d);
  })
  .attr('x', function (d, i) {
    return xScale(i);
  })
  .attr('y', function (d) {
    return height - yScale(d);
  });
</code>