根据一组坐标的数据着色地图

Question

我有一套1000个坐标,每个坐标代表一个特定州的城市中心.这些城镇属于20个县之一,我知道哪个城镇属于哪个县.我希望根据每个县的数据为地图着色.例如,如果一个县的值为100%,那么我希望将该县的颜色设为深红色,如果一个县与0%相关联,那么我会将地图的这部分颜色设为白色.

我没有每个县的边界,因为这些是旧县,它将涉及大量的工作来追踪旧地图的边界.我有国家的边界​​,包括岛屿和湖泊等.

所以这是我的数据:

Town1 50.1,4.89 County1    
Town2 49.9,4.78 County1    
Town3 50.3,4.59 County1    
Town4 50.2,4.99 County1    
Town5 50.0,4.99 County1    
...
Town1000 57.0,8.33 County20 

和

County1 100%   
County2 100%   
County3 68%   
...
County20 0% 

以及国家边界.

解决方案1:因此,创建我想要的地图的一种方法可能是围绕每个坐标(城镇)创建多边形,这个多边形代表最靠近这个城镇的地图上的所有区域,并且更接近其他城镇.然后我根据其县的数据为这个多边形着色.

解决方案2:也许更好的方法是在城镇之间混合颜色.因此,如果我在不同的县有两个相邻的城镇,一个有100%,一个有0%,那么它们之间的中间点将是粉红色(深红色和白色之间的中间).

所以我希望以图像文件的形式编程生成这个地图,这个文件很容易扩展,我可以将它导入Photoshop之类,以便添加其他元素.在这种情况下你会推荐SVG吗？

我可以使用什么库或算法来生成解决方案1中所需的多边形？

是否有一个库,我可以使用它来生成一个SVG文档,其中包含解决方案2所需的渐变网格？

我希望尽可能使用Python3,但我对其他语言持开放态度.我也对SVG的其他解决方案和替代方案持开放态度.

我正在使用MacOS.

Answer 1

您的第一种方法称为 Voronoi 图

请参阅维基百科中的描述

对于这种图表有一个解决方案，使用 javascipt 的 D3 库

D3方法

为了使这个解决方案完整，我在此处粘贴 M.Bostock 示例中的代码

var w = 1280,
    h = 800;

var projection = d3.geo.azimuthal()
    .mode("equidistant")
    .origin([-98, 38])
    .scale(1400)
    .translate([640, 360]);

var path = d3.geo.path()
    .projection(projection);

var svg = d3.select("body").insert("svg:svg", "h2")
    .attr("width", w)
    .attr("height", h);

var states = svg.append("svg:g")
    .attr("id", "states");

var cells = svg.append("svg:g")
    .attr("id", "cells");

d3.json("us-states.json", function(collection) {
  states.selectAll("path")
      .data(collection.features)
    .enter().append("svg:path")
      .attr("d", path);
});

d3.csv("airports.csv", function(airports) {
  var positions = [];

  airports.forEach(function(airport) {
    positions.push(projection([+airport.longitude, +airport.latitude]));
  });

  // Compute the Voronoi diagram of airports' projected positions.
  var polygons = d3.geom.voronoi(positions);

  var g = cells.selectAll("g")
      .data(airports)
    .enter().append("svg:g");

  g.append("svg:path")
      .attr("class", "cell")
      .attr("d", function(d, i) { return "M" + polygons[i].join("L") + "Z"; })
      .on("mouseover", function(d, i) {
        d3.select("#footer span").text(d.name);
        d3.select("#footer .hint").text(d.city + ", " + d.state);
      });

  g.append("svg:circle")
      .attr("cx", function(d, i) { return positions[i][0]; })
      .attr("cy", function(d, i) { return positions[i][1]; })
      .attr("r", 1.5);
});

您的第二个解决方案可以通过 OpenGL 和 Gouraud 着色轻松实现，但是将其导出到 SVG（或位图之外的任何其他内容）并不容易。我会考虑任何替代方案。