JavaScript

7个用于特定可视化的JavaScript库

10月17日

除了通常用于创建交互式数据可视化的图表和图形库之外已经讲过了，作为其强大的多功能性的代价，这可能会带来陡峭的学习曲线，但有许多不太为人所知的JavaScript库专门处理可视化类型。它们在你绘制插图时非常有用数据新闻内容通过互动体验。下面是其中的一些开始。

JSPlumb

JSPlumb帮助您可视化地连接元素:流程图、厨房水槽、状态机和层次图表。它在可用的地方使用SVG，在IE8及以下使用VML，因为它兼容到IE6。它的不同实现支持动画和拖放功能，这可能需要特定的插件。它的代码与jQuery、MooTools和YUI兼容，也可以在普通JavaScript中使用。这个免费的库在GitHub上可用。

它的四个主要概念是锚点(特定位置)、端点(连接端点的可视化表示，附加到锚点)、连接器(连接两个元素的线的可视化表示)和覆盖(连接器装饰，如箭头或标签)。有了这四个元素，您就可以开始了。

JS序列图

JS序列图将文本转换为矢量UML序列图。这取决于两者拉斐尔而且Underscore.js，并且结果可以以SVG格式下载，如果不需要交互部分(比如通过用户输入动态地创建图表)，甚至可以保存为普通图像。

餐巾纸有两种不同的主题:直线和矩形为整洁的专业外观，手绘线条和手写文字为清新的外观和感觉。文本输入表示一个UML序列图，其中的过程由箭头链接。这些示例使用这样一种可理解的语法进行自我解释。文本输入示例如下所示。

标题:这里有一个标题a ->B:法线B——>C:虚线C->>D:开箭头D——>> a:开箭头虚线

时间轴

Timeline是一个用于创建交互式响应时间轴的开源工具。您可以嵌入许多媒体来源，如YouTube或Vimeo视频，谷歌地图，SoundCloud或Twitter提要。数据源可以是谷歌电子表格或JSON文件，您可以通过iframe嵌入您的时间轴托管在他们的网站或直接托管自己，代码是可以在GitHub上找到．

下面是一个使用JSONP数据源的实现示例。我们首先设置时间线参数，在其中调用data.jsonp文件。

.js

JSONP文件为每个日期设置时间轴参数和数据数组，包括标题和提供的媒体旁边的文本。在时间轴中显示的缩略图将自动从给定的媒体资产中获取，除非明确提供。

storyjs_jsonp_data = {"timeline": {"headline": "David J. Peterson"， "type": "default"， "text": "" lang": "en"， "startDate": "1981,01,20"， "date": [{"startDate": "1981,01,20"， "headline": "Birth"， "text": "David J. Peterson出生在加州长滩。
"， "asset": {"media": "images/articles/david-j-peterson/Long-beach-CA.jpg"， "thumbnail": "images/articles/david-j-peterson/Long-beach-s.jpg"， "credit": "Wikimedia commons"}}， {"startDate": "2006"， "headline": "语言学硕士"，"text": "M.A.他在加州大学圣地亚哥分校的语言学专业学习，课题是“尾元音语境中的前元音:南加州英语的前元音考察”。
"}，]}}

生成的时间轴为大卫·彼得森的传记．

Smallworld

免费的smallworld.js实用程序可以帮助您使用GeoJSON和HTML Canvas生成地图概览。它没有依赖关系，附带一个简单的包装器，可以与jQuery或Zepto一起使用。地图可以以纬度/经度坐标为中心，可以为水域和陆地提供颜色，并且可以添加不同大小和颜色的标记。没有现成的交互功能，因为它主要是用于演示目的，但您应该能够在此基础上编写自己的交互需求。

$ (' . map)。smallworld({center: [45， -50]， marker: [[37.757719928168605， -122.43760000000003]， [51.528868434293145， -0.10159864999991441]， [40.705960705452846， -73.9780035]]， markerSize: 8});

GitHub源

JointJS

JointJS是一个JavaScript图表库，用于创建有限状态机、组织图、实体关系图、Petri网、UML和逻辑电路等图表。这些教程解释得很好，对初学者和高级用户都很有用。

它的授权模式以每个开发人员为基础:每个开发人员许可允许他们在任意数量的服务器上创建无限数量的商业应用程序。

代码示例如下所示。

var graph = new joint.dia.Graph;Var paper = new joint.dia。纸({el: $('#myholder')，宽度:600，高度:200，模型:图形，gridSize: 1});Var rect = new joint.shape .basic。矩形({位置:{x: 100, y: 30}，大小:{宽度:100，高度:30}，attrs:{矩形:{填充:'蓝色'}，文本:{文本:'我的盒子'，填充:'白色'}}});Var rect2 = ret .clone();rect2.translate (300);Var链接=新的关节。链接({源:{id: rect2. id}，目标:{id: rect2. id}。Id}});图。addCells([rect, rect2, link]);

的热图

js是一个专门用于显示热图的库，其中包含在矩阵中的数据值以颜色表示。上可用GitHub，它的代码已经引起了其他开发者的兴趣，他们也开始为谷歌Maps提供插件，打开层,传单．虽然代码是开源的，但支持许可证也可用于公司和商业产品。

示例代码:

Var热图= h337。创建({容器:domElement});热图。setData({马克斯:5、数据:[{x: 10, y: 15日值:5},…]});

纠结

Tanglemap

独立的Tangle库创建响应式文档，用户可以在文本或图形区域中使用参数来更改其他内容。这些例子比这个简短的描述更令人印象深刻，所以你应该看看它们来更好地理解。

示例代码:

当您吃 cookies时，您消耗 calorie 。

var tangle = new tangle(文档，{初始化:函数(){this. this.)Cookies = 3;}，更新:函数(){this。卡路里=这个。饼干* 50;}});

结论

正如你所看到的这些集中的库，当你的可视化项目范围有限时，没有必要使用像D3.js或InfoVis这样的大型图表库。对于特定的项目，定制的库可以很好地完成工作，并且更容易实现。

如果您正在使用其他特定的数据可视化库，您可以在评论中与我们分享。