D3:在数据集中使用列对散点着色

2022-01-28 06:57:47 标签 htmlsvgd3.jscolors

我复制了一些代码来做一个基本的散点图,我试图根据数据的一列给点上色。

我已经尝试修改数据集有一个名为“颜色”的列值在0和1之间,但当我分配颜色函数(即d3。interpolateRdGy(d[2]))散点图上没有点。

我对d3非常非常陌生(我只有在R中使用ggplot2的经验)。

<!DOCTYPE html>
<meta charset="utf-8">
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
<script>
// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 30, left: 60},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");
//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/2_TwoNum.csv", function(data) {
  // Add X axis
  var x = d3.scaleLinear()
    .domain([0, 4000])
    .range([ 0, width ]);
  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));
  // Add Y axis
  var y = d3.scaleLinear()
    .domain([0, 500000])
    .range([ height, 0]);
  svg.append("g")
    .call(d3.axisLeft(y));
  // Add dots
  svg.append('g')
    .selectAll("dot")
    .data(data)
    .enter()
    .append("circle")
      .attr("cx", function (d) { return x(d.GrLivArea); } )
      .attr("cy", function (d) { return y(d.SalePrice); } )
      .attr("r", 1.5)
      .style("fill",  d3.interpolateRdGy(d[1]))
})
</script>

###通常使用D3你会创建一个色度。如果你想映射一个定量的值到一个颜色,那么你可以这样做

const color = d3.scaleSequential()
    .domain(d3.extent(data, d => d.Color))
    .interpolator(d3.interpolateBlues);

d3。程度(数据d =比;d。Color)返回一个数组,该数组包含数据集中“Color”列的最小值和最大值。与直接调用插值器不同,这种方法即使值不在0到1之间也能工作。

你可以在d3比例色文档中找到其他的配色方案。对于发散的配色方案,可以使用发散刻度。

然后使用你会做的颜色刻度

    .attr('fill', d => color(d.Color))
阅读全文

▼ 版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说 cuoshuo.com —— 程序员的报错记录

部分内容根据CC版权协议转载;网站内容仅供参考,生产环境使用务必查阅官方文档

辽ICP备19011660号-5

×

扫码关注公众号:职场神器
发送: 1
获取永久解锁本站全部文章的验证码