即使您认为自己不知道什么是分级统计图，您也有可能见过。到 2012 年 11 月，您会看到很多分级统计图：分级统计图的一个典型示例是美国地图，以红色和蓝色绘制，显示总统选举的结果。等值线地图可以很简单，如上例所示，其中州的颜色表示该州是朝一个方向（民主党）还是朝另一个方向（共和党）。各州也可以按比例着色以指示数据，例如蓝色表示低数字，红色表示高数字，中间的数字表示紫色。这些简单的可视化使大量数据一目了然，如果您查看数字表，则需要更长时间才能获得洞察力。但制作这些地图的过程并不明显。有Python 和Excel的教程，但我们还没有看到 D3 的教程——而 D3 是制作 Web 等值线地图的最简单方法之一。使用 D3 将数据编码到网页上后，您可以访问它并以新的方式显示它。在这个例子中，我们将制作 2008 年总统选举结果的地图。让我们从基础地图开始。我们从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 数据。保存 .json 文件并将其添加到您的文件夹中。如果您在 TextMate 中打开它，它会显示为一行长行，这使得很难理解您正在处理的数据。如果您将该行复制到剪贴板并转到JSONLint并将 JSON 粘贴到字段中并点击“验证”，它会将您的 JSON 重新格式化为更易读的格式。您可以将其粘贴回 JSON 文件中。查看您的数据并了解您可以使用哪些数据。您会注意到，在一开始他们为每个候选人分配了一个唯一的 ID 号，我们稍后会需要这个。要使用这个 JSON，您需要将其分配给一个变量以在主文件中使用。为此，添加
var statejson = [
到最开始并添加
]
一直到最后。就是这样。如果你添加
控制台.log（statejson）
到页面末尾，您可以转到 Chrome 中的控制台并探索数据的结构。