MetricsGraphics.js 是一个基于 D3 构建的库，专门用于可视化和布局时间序列数据。它提供了一种简单的方法，以原则性和一致的方式生成常见的图形类型。该库支持折线图、散点图、直方图、条形图和数据表，以及毛毯图和基本线性回归等功能。

该库将这些图形的布局和解释提升到与图形本身同等重要的水平。其核心理念是效率和实用性。

Hamilton Ulmer 和我今年早些时候开始构建该库，在此期间，我们发现自己在各种项目中复制粘贴代码片段。这导致了错误和功能不一致，因此我们决定开发一个单一的库，为我们所有的内部项目提供通用的功能和美学。

此外，当时，我们尝试让组织内的非专业程序员和非程序员使用像 D3 这样的库创建仪表板，但收效甚微。学习曲线成为一个障碍。因此，使用成熟的设计模式创建一层间接层来弥合这一差距似乎是合理的。

我们的 API 很简单。创建图形所需做的就是指定一些默认参数，然后根据需要覆盖一个或多个提供的可选参数。我们不维护状态。要更新图形，只需在同一目标元素上调用 data_graphic 函数即可。

该库也与数据源无关。虽然它提供了一些便捷函数和选项，使图形能够更好地处理缺失观测值等情况，但它并不关心数据来自哪里。

快速教程

这是一个快速教程，帮助您入门。假设我们有一些关于学术主题（例如UFO 目击事件）的数据。我们决定要创建一个每年目击事件的折线图。

我们根据原始数据集创建了一个名为 data/ufo-sightings.json 的 JSON 文件，其中我们汇总了每年的目击事件。当然，数据不必是 JSON 格式，但这样可以减少以后的工作量。

接下来，我们需要加载数据。

d3.json('data/ufo-sightings.json', function(data) {
})

data_graphic 期望数据对象是一个对象数组，这对我们来说已经是这样了。很好。它还需要日期为时间戳，如果日期格式为 yyyy-mm-dd。我们拥有的是汇总的年度数据，所以不必担心这个问题。因此，现在我们需要做的就是创建图形并将其放置在 target 中指定的元素中。

d3.json('data/ufo-sightings.json', function(data) {
    data_graphic({
        title: "UFO Sightings",
        description: "Yearly UFO sightings (1945 to 2010).",
        data: data,
        width: 650,
        height: 150,
        target: '#ufo-sightings',
        x_accessor: 'year',
        y_accessor: 'sightings',
        markers: [{'year': 1964, 
                   'label': '"The Creeping Terror" released'
        }]
    })
})

最终得到的结果如下。在此示例中，我们添加了一个标记来引起对特定数据点的注意。当然，这是可选的。

一些最后的说明

我们采用了一种满足实际需求的开发方法。目前，我们主要实现了对我们来说重要的功能。话虽如此，我们的工作已在 Github 上公开，我们的许多讨论也已公开，我们认真对待所有拉取请求和问题。

还有很多工作要做。我们邀请您试用该库并提交错误！我们设置了一个沙盒，您可以在其中试用功能，无需下载任何内容：http://metricsgraphicsjs.org

MetricsGraphics.js v1.1 计划于 2014 年 12 月 1 日发布。