d3.hexbin插件-动态定义颜色域以适应数据

d3.hexbin plugin - dynamically define colour domain to suit data

本文关键字：数据 颜色 定义 hexbin 插件 动态 d3      更新时间：2023-09-26

我正在使用d3.hexbin插件开发一个六边形Binning页面(http://bl.ocks.org/mbostock/4248145)。

我已经设法使用数据中的最小值和最大值动态定义了轴的域。

然而，我想基于点变量动态生成bin颜色域。

示例箱根据以下代码着色：

var color = d3.scale.linear()
    .domain([0, 20])
    .range(["white", "steelblue"])
    .interpolate(d3.interpolateLab);

颜色范围被映射到0到20之间的值。对于大型数据集，通常有超过20个点的六边形箱，并且图表是"饱和的"。

颜色域值[0,20]是否可以根据数据动态生成？有可能以某种方式从hexbin对象中获得分配给bin的最大和最小点数吗？

感谢你的帮助，因为我对JavaScript不太感兴趣。

我会尝试这个hexbin示例中使用的方法：http://projects.delimited.io/experiments/hexbins/starbucks.html

也就是说，将域定义为均值&料仓尺寸的标准偏差。将其翻译回最初的Mike Bostock示例：

  1. 创建一个所有仓位大小的数组：

    var bins = hexbin(points);
var counts = [];
bins.map(function (elem) {
    counts.push(elem.length)
});

  2. 基于counts阵列设置颜色域：

    color.domain([0, (ss.mean(counts) + (ss.standard_deviation(counts) * 3))]);

在本例中，ss是simple_statistics.js库，但您也可以轻松地滚动自己的库，或者将域最大值设置为counts中的最高值，如下所示：

color.domain([0, d3.max(counts)]);

下面是一个动态计算颜色域的工作小提琴：http://jsfiddle.net/henbox/3jecfdfu/2/

相关文章：