如何创建用于生成 hsl 颜色数组的标准化分布？

Posted 2023-03-12

【中文标题】如何创建用于生成 hsl 颜色数组的标准化分布？

【英文标题】：How can I create a normalized distribution for producing an hsl color array?

【发布时间】：2021-05-01 14:15:06

【问题描述】：

我正在创建一个热图，其中 SVG 中的国家/地区路径使用 HSL 获得全部为红色阴影的填充颜色。

colorC = "hsl(0,100%," + colorL + "%)"

地图通过几种不同的方法工作得很好，用户可以手动选择自己的颜色强度，但我想通过添加一个“自动”功能来改进地图，该功能可以根据数据集的值选择良好的颜色强度.

我一直在玩贝尔分布和各种形式的数据标准化，但这些并没有真正实现目标。这里是关于工作方法的更多信息。

我必须处理两个数据集，一个是所有条目的主数据集，它显示出对英国的强烈倾斜，另一个是我正在尝试映射的目标子集。在我的工作方法中，我遍历目标子集，通过主数据集对每个国家/地区的数据进行归一化，然后将每个值乘以手动选择的 colorIntensity。

colorL = (100 - (100 * colorIntensity * countrySubset[i] / countryMasterset[i]))

默认值是colorIntensity = 1，它适用于大型子集，但在较小的子集上大部分内容都被白色化了。子集大小变化很大，由于子集是嵌套的并且可以通过父母和孩子向上或向下移动，自动colorIntensity 值将是一个很好的资产。

所以，这是超出我能力范围的统计问题。什么类型的归一化和/或分布可以帮助我展示一个从不黑色hsl(0,100%,0%) 和从不白色hsl(0,100%,100%)，但在深红色hsl(0,100%,25%) 到浅粉色hsl(0,100%,99%) 范围内很好分布的颜色分布？所有零值默认为浅灰色。

例如，colorIntensity = 20 的以下子集看起来很棒（美国数据用于数学计算，但未显示在地图上，因为地图仅显示欧洲）：

"Wales": 15, "USA": 11, "Netherlands": 1, "Ireland": 2, "England": 2

虽然colorIntensity = 10 的下一个子集看起来要好得多（这是上面的 ggparent）：

"Germany": 34, "Switzerland": 12, "England": 44, "France": 13, "Italy": 10, "Sweden": 1, "Poland": 1, "Wales": 25, "USA": 44, "Canada": 3, "Mexico": 1, "Austria": 1, "Belgium": 1, "Ukraine": 1, "Portugal": 1, "Netherlands": 1, "Ireland": 20, "Denmark": 1, "Czech Republic": 8, "Luxembourg": 1, "Russia": 1, "Northern Ireland": 5, "Scotland": 29, "Turkey": 1, "Spain": 1, "Finland": 4

【参考方案1】：

我不知道我是否找到了最佳解决方案，但我确实找到了我喜欢的解决方案。该解决方案有两个组成部分：选择一个有吸引力的colorIntensity 和处理个别国家的极端情况。

将我首选的手动选择的colorIntensity 值放入 Excel 中，我意识到它们是负相关的，因此我将 colorIntenstiy 设置为负幂函数和最大值：

colorIntensity = 300 * Math.pow(subsetTotal,-0.57)
if(colorIntensity > 25) colorIntensity = 25

然后，为了处理单个国家主导数据子集的情况，并且一个国家有一些数据但不多的情况，我还在循环本身中设置了这些情况的最大值和最小值。

for (var i in countrySubset) 
    var countryNormalized = countrySubset[i] / countryMasterset[i],
        colorNormalized = colorIntensity * countryNormalized
    if(colorNormalized > 0.75) colorNormalized = 0.75
    if(colorNormalized < 0.01) colorNormalized = 0.01
    colorL = (100 - (100 * colorNormalized))

我对最终结果感到满意，并希望这可以帮助其他处理 javascript 和规范化、标准化或缩放数据的人。