使用正方形表示地图中的计数

Question

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

这是我想要的 png 示例：

它们在图片中没有完全对齐，但假设我有一个 JSON:

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

of 个我想表示为正方形的计数，最好以有序的方式聚集。

我对此摸不着头脑 — 我想也许力导向图可以解决问题？我也看到了这个：http://bl.ocks.org/XavierGimenez/8070956 and this: http://bl.ocks.org/mbostock/4063269 这可能会让我接近。

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

Answer 1

does someone at least know what this might be called?

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

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

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

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>

使用正方形表示地图中的计数

Using squares to represent counts in a map

javascript

visualization

geo

d3.js