在地图上叠加气泡图构建DC仪表板-更好的例子

Building DC Dashboard with BubbleChart Overlay on Map - Better Example?

本文关键字：仪表板 更好 DC 构建 地图 叠加 气泡      更新时间：2023-09-26

我正在做一个类似于这个例子的可视化，通过dc.js库的例子主页链接到。这个页面有一些不错的示例起始代码，但是我有一个关于在地图上绘制气泡图的特殊问题。

在上面的示例中，作者似乎手动指定了显示加拿大省形状的路径。然后，代码将一个bubbleOverlay图表分配给一个名为caChart的变量，该变量将包含在加拿大地图上特定坐标处绘制的气泡。然而，在代码的后面，代码似乎手动为要绘制的每个气泡在网页上分配（x，y）坐标，而不是以编程方式分配它们的位置（见注释）：

caChart.width(600)
            .height(450)
            .dimension(cities)
            .group(totalCrimeRateByCity)
            .radiusValueAccessor(function(p) {
                return p.value.avgTotalCrimeRate;
            })
            .r(d3.scale.linear().domain([0, 200000]))
            .colors(["#ff7373","#ff4040","#ff0000","#bf3030","#a60000"])
            .colorDomain([13, 30])
            .colorAccessor(function(p) {
                return p.value.violentCrimeRatio;
            })
            .title(function(d) {
                return "City: " + d.key
                        + "'nTotal crime per 100k population: " + numberFormat(d.value.avgTotalCrimeRate)
                        + "'nViolent crime per 100k population: " + numberFormat(d.value.avgViolentCrimeRate)
                        + "'nViolent/Total crime ratio: " + numberFormat(d.value.violentCrimeRatio) + "%";
            })
            // These points appear to be assigned manually
            .point("Toronto", 364, 400)
            .point("Ottawa", 395.5, 383)
            .point("Vancouver", 40.5, 316)
            .point("Montreal", 417, 370)
            .point("Edmonton", 120, 299)
            .point("Saskatoon", 163, 322)
            .point("Winnipeg", 229, 345)
            .point("Calgary", 119, 329)
            .point("Quebec", 431, 351)
            .point("Halifax", 496, 367)
            .point("St. John's", 553, 323)
            .point("Yukon", 44, 176)
            .point("Northwest Territories", 125, 195)
            .point("Nunavut", 273, 188);

我有纬度坐标的时间戳数据，我想在类似的美国地图上绘制。数据大致如下：

device_id, timestamp, lat, lon
1, 2014-7-21, 40.7127837, -74.00594130000002
2, 2014-7-22, 40.8516701, -93.2599318

有没有一种方法可以将这些坐标读取到交叉过滤器维度中，并通过编程将这些坐标绘制在类似的底层地图图像上，而无需手动分配它们？这里的任何帮助（包括工作示例的指针）都将不胜感激。

您可以完全绕过气泡覆盖，只使用

mapChart
.on("renderlet", drawSomething)

在drawSomething方法中，你可以像我在这里概述的那样用程序绘制你的气泡：https://stackoverflow.com/a/35476690/2795423

相关文章：