D3.js 地图上具有不同域的不同度量的数据可视化_D3.js_Colors_Data Visualization

D3.js 地图上具有不同域的不同度量的数据可视化

d3.js colors

D3.js 地图上具有不同域的不同度量的数据可视化,d3.js,colors,data-visualization,D3.js,Colors,Data Visualization,我有一张欧洲地图，按国家和不同的尺度划分，用一张choropetic地图来表示。根据选定的单选按钮，地图将根据值着色在csv文件中代码如下： index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"><

我有一张欧洲地图，按国家和不同的尺度划分，用一张choropetic地图来表示。根据选定的单选按钮，地图将根据值着色在csv文件中

代码如下：

index.html

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="utf-8">
   <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
   <script src="https://d3js.org/topojson.v2.min.js"></script>
   <script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
   <link rel="stylesheet" type="text/css" href="./map.css" media="screen" />
</head>

<body>
   <div id="map-container"></div>

   <div id="radio-container">
      <form id="radio-selector">
         <input type="radio" name="radio-selector" id="rb1" value="m1" checked />
         <label for="rb1">Measure 1</label>
         <br>
         <input type="radio" name="radio-selector" id="rb1" value="m2" />
         <label for="rb2">Measure 2</label>
         <br>
         <input type="radio" name="radio-selector" id="rb1" value="m3" />
         <label for="rb3">Measure 3</label>
      </form>
   </div>

   <script src="./map.js"></script>
</body>

</html>

data.csv

ID_NUT,MEASURE,VALUE
AT,m1,97.1
AT,m2,74
AT,m3,28.53
BE,m1,98
BE,m2,97.1
BE,m3,8
BG,m1,94.5
BG,m2,56
BG,m3,38.42
CY,m1,99.32
CY,m2,91
CY,m3,23.42
CZ,m1,98.5
CZ,m2,4
CZ,m3,64.51
DE,m1,97
DE,m2,2
DE,m3,78.77
DK,m1,96.8
DK,m2,95
DK,m3,86.95
EE,m1,95.8
EE,m2,79
EE,m3,84.10
EL,m1,96.4
EL,m2,68
EL,m3,42.78
ES,m1,93.9
ES,m2,69
ES,m3,95.4
FI,m1,97.8
FI,m2,36
FI,m3,98.65
FR,m1,97.9
FR,m2,74
FR,m3,99.75
HR,m1,99.1
HR,m2,39
HR,m3,63.78
HU,m1,96.12
HU,m2,84
HU,m3,81
IE,m1,98.55
IE,m2,89
IE,m3,69.4
IT,m1,99.65
IT,m2,40
IT,m3,75.93
LT,m1,97.45
LT,m2,56
LT,m3,93.67
LU,m1,97.63
LU,m2,19
LU,m3,31.48
LV,m1,95.24
LV,m2,71
LV,m3,39
MT,m1,96.52
MT,m2,85
MT,m3,93
NL,m1,98
NL,m2,39
NL,m3,88.88
PL,m1,99.10
PL,m2,77
PL,m3,15
PT,m1,94.15
PT,m2,95
PT,m3,15
RO,m1,97
RO,m2,71
RO,m3,74
SE,m1,89.4
SE,m2,92
SE,m3,69.64
SI,m1,97.86
SI,m2,52
SI,m3,74.78
SK,m1,98
SK,m2,85
SK,m3,88
UK,m1,99.4
UK,m2,100
UK,m3,97

代码是正确的，它可以工作并且不会产生错误。我想解决的问题是颜色问题

在csv文件中，所有值在范围

[01100]

内，因为它们表示百分比。如csv中所示，值与m1相对应的是非常高的值

（>=90）

，而那些指的是

m2

和

m3

变化很大。如果我只使用一个色标（如代码中所述），其范围是

[01100]

，那么覆盖到

m1

的共形图就不是很重要了。我怎样才能解决这个问题

我想做的是对所有三个测量值使用单一色标，但要确保值之间的差异，即使是最小的差异都是看得见的

我的问题是理论多于实践。我不在乎代码，如果有更好的。我真的想要一个想法级的解决方案，我如何处理和解决这个问题

谢谢

主题外问题：在这种情况下如何使用代码段堆栈？如何添加外部文件（data.csv）

---------- 我修改代码如下：

var colors = d3.scaleQuantile()
   .domain([0, 100]) 
   .range(["#131313", "#241715", "#341b17", "#451f19", "#56231b", "#67281e", "#772c20", "#883022", "#993424", "#a93826", "#ba3c28"]);

不幸的是，我没有得到任何视觉效果（甚至错误）。使用

scaleLinear（）

和

scaleQuantile（）

的结果如下：

其他问题。使用这种技术（如果我理解正确，它符合数据域），我会为每个度量值创建不同的图例吗

我的数据如下表所示：

ID,COUNTRY,YEAR,A,B,C
AL,Albania,2000,98,50,10
AL,Albania,2001,41,2,14
AL,Albania,2002,75,51,10
DE,Germany,2000,74,21,25
DE,Germany,2001,46,2,48
DE,Germany,2002,74,81,90
...

所以我没有像

var data=[…，…]

这样的简单数组，有几种解决方案。然而，这种情况下的“正确”解决方案是使用适当的刻度

在讨论适当规模之前，让我们仔细看看您的问题，并讨论一些连续规模方法

你的问题正如您在问题中所解释的，问题在于您的数据严重偏向域的一端

为了可视化，我创建了这个简单的数据集

var data = [2, 30, 60, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99];

。。。从

到

，但“向右倾斜”

根据您的颜色，这是使用简单线性比例的结果：

var数据=[0,30,60,88,89,90,91,92,93,94,95,96,97,98,100]；
var scale=d3.scaleLinear（）
.domain（[01100]）
.范围（[“#131313”，“#ba3c28”]）
var div=d3。选择（“主体”）。选择全部（空）
.数据（数据）
.输入（）
.附加（“div”）
.style（“背景色”，d=>scale（d））

div{
宽度：20px；
高度：20px；
显示：内联块；
保证金：4倍；
}

您认为为这些颜色中的

m1、m2、m3

和渐变选择不同的颜色（较高值时颜色较深，较小值时颜色较浅）有意义吗？@Shashank感谢您的建议。我已经在使用渐变了。我更喜欢使用相同的颜色，因为在这个例子中，我只有3个度量值，但实际上我有12个度量值。而且，如果我理解你的意思，使用不同的颜色并不能解决问题。@vila关于你的离题问题：你不能。一种解决方案是使用模板文字来硬编码CSV。谢谢您的回答。我修改了主消息，但有一些细节/问题。你能帮我吗？请不要编辑你的问题来进一步提问。我在这里回答了你原来的问题。如果你还有其他问题，把它们作为新问题发布。我不认为这是一个新问题。问题总是这样。好吧，如果你这么认为，我恢复了回滚，所以现在你的问题被编辑了。我希望其他人能帮助你。我想使用分位数量表，但我的数据有以下形式：

ID，COUNTRY，YEAR，A，B，C AL，阿尔巴尼亚，2000,98,50,10 AL，阿尔巴尼亚，2001,41,2,14 AL，阿尔巴尼亚，2002,75,51,10 DE，德国，2000,74,21,25 DE，德国，2001,46,2,48 DE，德国，2002,74,81,90……

我如何调整代码？

var data = [2, 30, 60, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99];