Adds support for quantile scale
MODIFY
examples/legend2d/main.js
examples/legend2d/main.js
@@ -9,7 +9,7 @@ $(function () {
});
// Add the default osm layer
- // map.createLayer('osm');
+ map.createLayer('osm');
// Create a ui layer
var ui = map.createLayer('ui');
@@ -32,54 +32,62 @@ $(function () {
// * style: (object) The feature style object
// * type: (string) The feature type ('point', 'line', 'other')
//
-
legend.categories([
{
- name: 'Discrete Ordinal 1',
+ name: 'Discrete ordinal',
type: 'discrete',
scale: 'ordinal',
domain: ['beijing', 'new york', 'london', 'paris'],
colors: ['red', 'green', 'blue', 'orange']
},
{
- name: 'Discrete countinous 1',
+ name: 'Discrete linear',
type: 'discrete',
scale: 'linear',
domain: [100, 1000],
colors: colorbrewer.YlGnBu['9']
},
{
- name: 'Discrete countinous 2',
+ name: 'Discrete sqrt',
type: 'discrete',
scale: 'sqrt',
domain: [10000, 1000000],
colors: colorbrewer.PRGn['11']
},
{
- name: 'Discrete countinous 3',
+ name: 'Discrete quantile',
+ type: 'discrete',
+ scale: 'quantile',
+ domain: [96, 100, 104, 108, 112, 116, 120, 124, 128, 132, 136, 140, 144, 148, 152, 156, 160, 164, 168, 172, 176, 180, 184, 188, 192, 196, 200],
+ colors: colorbrewer.Greens['8']
+ },
+ {
+ name: 'Discrete linear 2',
type: 'discrete',
scale: 'linear',
domain: [0.1, 0.001],
colors: colorbrewer.RdBu['8']
},
{
- name: 'Continuous continuous 1',
+ name: 'Continuous Pow',
type: 'continuous',
scale: 'pow',
+ exponent: 1.1,
domain: [100, 10000],
colors: ['red', 'blue']
},
{
- name: 'Continuous continuous 2',
+ name: 'Continuous sqrt',
type: 'continuous',
scale: 'sqrt',
domain: [100, 1000],
colors: ['purple', 'orange']
},
{
- name: 'Continuous continuous 3',
+ name: 'Continuous log',
type: 'continuous',
scale: 'log',
+ base: Math.E,
domain: [100, 10000],
colors: ['blue', 'olive']
}

MODIFY
src/ui/legend2dWidget.js
src/ui/legend2dWidget.js
@@ -117,6 +117,26 @@ var legend2dWidget = function (arg) {
m_this._renderAxis(svg, axis);
}
+ else if (category.scale === 'quantile') {
+ var valueRange = [0, category.colors.length];
+ var steps = range(0, category.colors.length - 1);
+ var valueScale = d3.scale.quantile().domain(category.domain).range(steps);
+ var colorScale = d3.scale.quantize().domain(valueRange).range(category.colors);
+ m_this._renderDiscreteColors(svg, steps, colorScale, width, function (d) {
+ return valueScale.invertExtent(d).join(' - ');
+ });
+
+ var axisDomain = [valueScale.invertExtent(0)[0]];
+ axisDomain = axisDomain.concat(steps.map(function (step) { return valueScale.invertExtent(step)[1] }));
+
+ var ticks = steps.slice();
+ ticks.push(category.colors.length);
+ var axisScale = d3.scale.ordinal()
+ .domain(axisDomain)
+ .rangePoints([0, width]);
+ var axis = createDiscreteContinousAxis(axisScale);
+ m_this._renderAxis(svg, axis);
+ }
else if (['linear', 'log', 'sqrt', 'pow'].indexOf(category.scale) != -1) {
var valueRange = [0, category.colors.length];
var valueScale = d3.scale[category.scale]().domain(category.domain).range(valueRange).nice();
@@ -134,14 +154,18 @@ var legend2dWidget = function (arg) {
return valueScale.invert(tick);
}))
.rangePoints([0, width]);
- var axis = d3.svg.axis()
+ var axis = createDiscreteContinousAxis(axisScale);
+ m_this._renderAxis(svg, axis);
+ }
+
+ function createDiscreteContinousAxis(axisScale) {
+ return d3.svg.axis()
.scale(axisScale)
.tickFormat(d3.format('.2s'))
.tickValues(function () {
var skip = Math.ceil(axisScale.domain().length / 6);
return axisScale.domain().filter(function (d, i) { return i % skip === 0; });
});
- m_this._renderAxis(svg, axis);
}
}
@@ -194,7 +218,6 @@ var legend2dWidget = function (arg) {
if (category.scale === 'pow' && category.exponent) {
axisScale.exponent(category.exponent);
}
-
var randomString = Math.random().toString(36).substring(5);
var precision = Math.max.apply(null, category.domain.map(function (number) { return getPrecision(number) }));
@@ -249,16 +272,17 @@ var legend2dWidget = function (arg) {
this._hidePopup = function () {
m_this.popup.transition()
- .duration(500)
+ .duration(200)
.style('opacity', 0);
}
return this;
};
-function range(start, end) {
+function range(start, end, step) {
+ step = step || 1;
var foo = [];
- for (var i = start; i <= end; i++) {
+ for (var i = start; i <= end; i += step) {
foo.push(i);
}
return foo;

Adds support for quantile scale