在地图上叠加气泡图构建DC仪表板-更好的例子
Building DC Dashboard with BubbleChart Overlay on Map - Better Example?
我正在做一个类似于这个例子的可视化,通过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
相关文章:
- 有没有更好的动手、具体的方法来学习Javascript
- 为什么不推荐使用“with”?是否有更好或其他方法可以“下降”到对象的命名空间
- 在JavaScript中拆分日期字符串的更好方法是什么
- 为什么$.brower被弃用?还有什么更好的替代方案
- 设置嵌套对象属性的更好方法
- 您有更好的动态方式来缩短复杂的代码jquery吗
- 用Javascript重新格式化复杂文本日期字符串的更好方法
- 有没有比在app.js上绑定模块名称更好的方法来动态加载视图模型和视图以显示模态
- 使用外部数据创建仪表板(谷歌电子表格)-JavaScript
- 如何创建更好的方式来维护基于我的代码访问的最后一个页面
- 什么'这是从第三个函数上的async 1st函数获得结果的更好方法
- 什么更好?使用iframe或jQuery之类的东西在外部网站中加载HTML文件
- 将数组从javascript格式化为php的更好方法,反之亦然
- jquery:将动画绑定到滚动条位置的更好方法
- Javascript库创建类似heroku仪表板的应用程序
- 有更好的方法吗?(递归解析HTML unicode实体)
- 我应该如何将响应数据保存在对象(json)中以获得更好的操作和性能
- 有什么比document.execCommand更好的东西吗
- 在地图上叠加气泡图构建DC仪表板-更好的例子
- 添加更多的按钮不工作在wordpress仪表板