使用方差图在浏览器中更轻松的可视化数据

今天，我们将深入研究方差图；一种独特的基于javascript的“图形语法”，它提供了一种抽象的、声明性的标记样式来创建原本相当复杂的图表。Variance charts 介于 D3.js和HighCharts之间，提供了灵活性，同时保留了平易近人的语法。

使用方差图不依赖于对 JavaScript 的更深入了解。让我们来看看！

获取图书馆

Variance 提供了一个非商业版本，通过其自己的 CDN 托管，您应该将其包含在您的页面中，如下所示：

<script src="http://variancecharts.com/cdn/variance-noncommercial-standalone-9bc0f5e.min.js" charset="UTF-8"></script>

您还需要包含一个 style.css 文件。我们不会解释 html 文件的基本设置的过程，因为这些细节大部分都很简单。

我们的第一张图表

Variance 可以同时读取 JSON 和 csv；我们将使用以下关于培根受欢迎程度的非官方 CSV 数据创建一个简单的条形图：

<csv id="yearly-bacons"> year,bacons 1990,20 1995,231 2000,639 2005,1625 2010,7000 2015,16000 </csv>

正如我们从这些价值对中看到的那样，培根正以指数方式越来越受欢迎。例如，这对1990,20显示培根在 中很20受欢迎（不管这到底是什么意思）1990，但随后1995受欢迎程度上升到了231。

但实际上，为了直观地看到这一点，我们希望使用条形图来呈现它。这是我们如何标记图表的示例（稍后我们将介绍各种元素）。

<div class="bacon-chart">
    <h3>Bacon data</h3> 
    <chart data="#yearly-bacons" scale-y-linear="0 20000">
        <guide-x></guide-x>
        <guide-y></guide-y>
        <repeat>
            <annotation class="bottom">{{year}}</annotation>
            <bar map-length="bacons"></bar>
        </repeat>
    </chart>
</div>

我们还需要一些附带的 CSS 来设置图表的大小。为此，我们将所有标记包装在 a 中 <div class='container'> ，并将以下样式添加到 style.css 文件中：

.container {
width:50%;
margin:60px auto;
}

.container chart {
width:100%;
height:400px;
}

请注意这里的几件事：

• 图表标记看起来很像 HTML。事实上，它是 Variance 用来构建我们的条形图的有效 XML。我们还使用此自定义标记来包装 CSV 数据。chart 我们在标签中引用该 CSV 元素 。

• scale-y-linear 告诉我们 y 方向的比例应该是多少。在我们的例子中，我们的数据集达到 16000，但开始时低至 20。为了覆盖该范围，我们将底端设置为 0，将顶部设置为 20000。

• guide-x / guide-y 在各个轴上创建刻度线指南。

• <repeat> 循环我们的数据并根据每个数据点创建项目。

• annotation 是可以放置在特定项目周围的标签，例如 bar. curl y 大括号允许您显示一条数据；在我们的例子中， year 在我们的 CSV 中，所以我们可以很容易地输出年份。

• bar 创建一个条形元素，并将条形图 map-length的宽度定义为  bacons CSV。

伟大的！现在我们如何让它不那么难看？

样式化图表

要为图表设置样式，我们只需按照 CSS 中的普通元素设置样式即可。图表的 bar 元素是块级普通dom元素，并使用flexbox进行定位。我们将向我们的 CSS 添加一些样式，然后看起来应该是这样的。

body {
color:#3f130c;
height:100%;
font-family:sans-serif;
background-image:url(../bg.jpg);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
}

h1,h2,h3,h4 {
font-family:Tauri, sans-serif;
}

.container {
width:50%;
position:relative;
background-image:url(../bg-blur.jpg);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
margin:100px auto;
padding:100px;
}

.bacon-chart {
position:relative;
z-index:999;
}

.bacon-chart h3 {
margin:0 0 1em;
}

.container:after {
background-color:rgba(255,255,255,0.4);
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
content:"";
}

.container chart {
width:100%;
height:400px;
}

.bacon-chart bar {
background-color:rgba(96,28,18,0.7);
border:none;
}

注意： 我们在 style.css 链接上方的索引文件中添加了 Google 字体：

<link href='http://fonts.googleapis.com/css?family=Tauri' rel='stylesheet' type='text/css'>

我们在这里添加了一点好处：可以看到在容器和主体元素之间创建了“模糊窗口”效果。我们利用第二个背景图像来实现这一点。

现在我们有了一个更有用的图表。但它变得好多了，好多了。

动画和工具提示

是时候进行一些繁荣了，从栏上的一些工具提示开始。首先，我们将为每个条添加一个新注释，以便我们的图表标记如下所示：

<chart data="#yearly-bacons" scale-y-linear="0 20000" scale-y-linear="1990 2015">
    <guide-x></guide-x>
    <guide-y></guide-y>
    <repeat>
        <annotation class="bottom">{{year}}</annotation>
        <annotation class="tooltip" map-position="bacons">{{bacons}}</annotation>
        <bar map-length="bacons"></bar>
    </repeat>
</chart>

之后，我们将在 CSS 中添加一些新样式，这些样式将允许一些有趣的悬停效果和工具提示的简单过渡：

.bacon-chart bar {
background-color:rgba(96,28,18,0.7);
border:none;
margin:0!important;
}

datum {
overflow:hidden;
}

.tooltip {
width:auto;
height:auto;
background-color:#444;
color:#fff;
opacity:0;
left:-100%;font-size:.6em;
-webkit-transition:all .4s;
-moz-transition:all .4s;
-ms-transition:all .4s;
-o-transition:all .4s;
transition:all .4s;
padding:6px;
}

datum:hover {
background-color:rgba(255,255,255,0.1);
}

datum:hover .tooltip {
display:block;
opacity:1;
left:0;
}

动画片

最后，我们想要为我们的酒吧设置动画。我们将使用关键帧动画来完成此操作：

@-webkit - keyframes barsIn {
    0 % {
        bottom: -100 % ;
    }
    100 % {
        bottom: 0;
    }
}

然后我们将其应用于我们的 bar 元素：

.bacon - chart bar {
    background - color: rgba(96, 28, 18, 0.7);
    margin: 0!important;
    border: none;
    height: 0; - webkit - animation: barsIn 1s;
}

这也可以使用类似的东西来完成-webkit-transform: scale( 1, 0 )，但我们希望让它尽可能简单。您还应该确保根据需要添加正确的前缀。

更多关于方差

Variance 在解释更复杂的示例方面做得很好 ，并且还提供了很好的 文档索引。您会发现 Variance 能够进行 更复杂的可视化。我们将在这里简要介绍一些要点。

Variance 利用图表不同核心部分的名称来简化图表的构建，包括 point、dot、  range、  bar、 boxplot和 line。这些中的每一个都有自己的可确定输入。这些都可以相互结合使用，并且可以使用 repeat 块以迭代方式创建。

Variance 还可以使用 链接数据，这允许具有动态更新信息的 API 驱动的可视化。

结论

今天，您学习了如何使用方差图创建一个完全声明性的、动画的、样式化的图表。为了让您快速入门，我们遗漏了 Variance 中的许多可用功能，因此请务必亲自检查一下！