使用方块表示地图中的计数

Question

这可能是一个简单的问题，但我在d3中有一张地图，我想将事件计数表示为正方形。

以下是我想要的一个例子：

它们在图片中没有完美对齐，但我们说我有一个JSON：

[
    {city:'New York', count:3},
    {city:'Washington, D.C.', count:1},
    {city:'Austin', count:5},
    {city:'Havana', count:8}
] 

我希望表示为正方形的计数，最好是有序地聚集。

我正在摸不着头脑 - 我想也许一个强制导向的图表可以解决这个问题？我也看到了这一点：http://bl.ocks.org/XavierGimenez/8070956而且：http://bl.ocks.org/mbostock/4063269可能会让我接近。

对于上下文和设置（我不需要帮助制作地图，只是为了分享），这里是我用于项目的回购：https://github.com/alex2awesome/custom-map，它显示了我以前的方式表示计数（以每个城市为中心的圆的半径）。

Answer 1

  

有人至少知道这会被称为什么吗？

dataviz中的技术名称是象形图。

以下是绘制矩形的一般代码，您必须根据需要更改某些部分。最重要的部分是使用modulo operator计算矩形x和y位置。

首先，让我们设置每个矩形的初始位置和大小。你必须根据你的坐标设置它。

var positionX = 5;
var positionY = 5;
var size = 5;

然后，让我们设置你想要多少个矩形（在你的代码中，这将是d.count）：

var count = 15;
var gridSize = Math.ceil(Math.sqrt(count));
var data = d3.range(count);

根据计数，我们设置gridSize（只是一个平方根）和data。

现在我们绘制矩形：

var rects = svg.selectAll(".rects")
    .data(data)
    .enter()
    .append("rect");

rects.attr("width", size)
    .attr("height", size)
    .attr("x", function(d,i){ return positionX + (i%gridSize)*(size*1.1)})
    .attr("y", function(d,i){ return positionY + (Math.floor((i/gridSize)%gridSize))*(size*1.1) })
    .attr("fill", "red");

这是一个工作片段，使用15作为计数（4,9,16,25等会给你一个完美的方块）。更改count以了解其适应方式：

var svg = d3.select("body")
	.append("svg")
	.attr("width", 50)
	.attr("height", 50);
	
var count = 15;
var size = 5;
var positionX = 5;
var positionY = 5;
var gridSize = Math.ceil(Math.sqrt(count));
var data = d3.range(count);

var rects = svg.selectAll(".rects")
	.data(data)
	.enter()
	.append("rect");
	
rects.attr("width", size)
	.attr("height", size)
	.attr("x", function(d,i){ return positionX + (i%gridSize)*(size*1.2)})
	.attr("y", function(d,i){ return positionY + (Math.floor((i/gridSize)%gridSize))*(size*1.2) })
	.attr("fill", "red");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>