D3.js映射自动从谷歌表单的答案纸更新

时间:2016-05-11 22:55:06

标签: d3.js google-sheets leaflet google-form

我正在尝试使用D3.js进行可视化,从谷歌工作表中获取数据(通过谷歌表单生成),并在添加新数据时自动更新可视化(即用户响应调查)。

我正在尝试设置工作流程,因为这是我第一次做这样的事情,所以我希望有更多经验的人可以帮助发现任何流量并解决我的问题。

目的:

创建一个在用户添加数据时自动更新(即创建新圆圈)的地图。 用户通过谷歌表单添加数据:这包括他们的姓名,位置(三个字段:街道名称 - 号码 - 城市)和多项选择答案。

当新数据添加到答案纸时,地址字段将转换为“完整地址”列(连接三个字段)和另一列,其中完整地址转换为长/纬度坐标 地图中添加了一个新引脚;它的位置由长/纬度坐标确定

建议的工作流程:

  1. 分别使用Leaflet和Mapbox创建和设置地图样式(如图所示) 在this tutorial
  2. 创建一个包含来自的数据的附加图层 电子表格(cirlces),如here
  3. 所述
  4. 使用Geocode by Awesome Table add-on连接地址字段并转换为长/纬度坐标
  5. 从Google表格加载数据,如图所示here(两个选项)
  6. 我的第一个问题是你是否认为这是一个可行的工作流程,或者是否有更好的工具来实现我的目标。

    假设这是一个好主意,我已经有了一个问题。地理编码级联和转换需要手动完成。这意味着,当在答题纸中添加新的回复时,full addresslong/lat列不会自动填充。

    知道如何解决这个问题吗?

1 个答案:

答案 0 :(得分:2)

经过几天的努力,我设法让它按照我想要的方式运行。 Here is the bl.ock如果有人有兴趣;)