即使您认为自己不知道什么是分级统计图，您也有可能见过。到 2012 年 11 月，您：分级统计图的一个典型示例是美国地图，以红色和蓝色绘制，显示总统选举的结果。等值线地图可以很简单，如上例所示，其中州的颜色表示该州是朝一个方向（民主党）还是朝另一个方向（共和党）。各州也可以按比例着色以指示数据，例如蓝色表示低数字，红色表示高数字，中间的数字表示紫色。这些简单的可视化使大量数据一目了然，如果您查看数字表，则需要更长时间才能获得洞察力。但制作这些地图的过程并不明显。有Python 和Excel的教程，但我们还没有看到 D3 的教程——而 D3 是制作 Web 等值线地图的最简单方法之一。使用 D3 将数据编码到网页上后，您可以访问它并以新的方式显示它。
在这个例子中，我们将制作 2008 年总统选举结果的地图。让我们从基础地图 阿富汗 ws 粉丝 开始。我们从Wikipedia获取美国的 .svg 文件。幸运的是，此地图已预先标记了每个州，因此我们可以访问并为其上色：这节省了大量时间。否则，我们必须在 Illustrator 中转到我们自己的美国地图，将每个州放到它自己的图层上，并用该州的缩写命名该图层。将 .svg 文件放入新文件夹后，创建一个基本的 HTML 文件，或者下载我们提供的模板。您需要包含 jQuery 和 D3。出于我们的目的，您只需将 SVG 文件的内容复制并粘贴到 HTML 文件的 div 中。如果您使用的是 TextMate，您只需将 SVG 拖到适当的位置即可。
您将看到一大堆原始 SVG，它们构成了地图。每个 <path> 元素都是一个州，并具有映射到州缩写的 ID 属性。 “d” 属性包含“M”、“L”和一堆数字，实际上包含该州的所有坐标。将 SVG 嵌入到 HTML 中后，如果在浏览器中打开它，您应该会看到一张地图。不幸的是，此 SVG 文件附带的每个州都已着色为灰色，而我们想分配自己的颜色。因此，我们需要从 SVG 中找到并删除所有定义了填充颜色“#d3d3d3”的实例。现在，当我们在浏览器中查看页面时，各州将显示为黑色。此映射位于 DOM 内部，我们可以通过其 ID 访问每个状态。如果您熟悉 jQuery 或 Web 开发，您已经可以想象您可以创建的东西。一种快速入门的方法是简单地操作其中一个状态，在 jQuery 中，它很简单 $('#NY').css('填充', '红色') 现在我们需要数据，我们将使用Google 的 2008 年总统大选 JSON 数据。