javascript可视化_7个用于特定可视化JavaScript库

javascript可视化

除了用于创建交互式数据可视化的常用图表库之外， 这里还提供了许多鲜为人知JavaScript库，专门针对可视化类型，这些库可以提供陡峭的学习曲线，这是它们强大的多功能性的代价。 当您通过交互体验来说明数据新闻中的内容时，它们非常有用。 这里有一些开始。

JSPlumb

JSPlumb帮助您直观地连接元素：流程图，厨房水槽，状态机和层次结构图。 它使用SVG（如果有），并在IE8及更低版本上使用VML，因为它向下兼容IE6。 它的不同实现支持动画和拖放功能，这可能需要特定的插件。 它的代码与jQuery，MooTools和YUI兼容，也可以在原始JavaScript中使用。 该免费库可在GitHub上获得。

它的四个主要概念是锚点（特定位置），端点（连接端的视觉表示，连接到锚点），连接器（连接两个元素的线的直观表示）和覆盖层（连接器装饰，如箭头或标签） 。 仅使用这四个元素，您就可以开始使用。

• 演示版
• 文献资料

JS序列图

JS序列图将文本转换为矢量UML序列图。 它依赖于Raphaël和Underscore.js ，如果不需要交互式结果（例如通过用户输入动态创建图表），则可以将结果下载到SVG中，甚至可以将其保存为纯图像。

提供两种不同的主题：直线和矩形代表整洁的专业外观，手绘线和手写文字代表新的餐巾外观。 文本输入代表带有箭头链接的过程的UML序列图。 这些示例使用这种易于理解的语法进行了自我解释。 文本输入示例如下所示。

Title: Here is a title
A->B: Normal line
B-->C: Dashed line
C->>D: Open arrow
D-->>A: Dashed open arrow

时间线

时间线是用于创建交互式响应时间线的开源工具。 您可以嵌入许多媒体源，例如YouTube或Vimeo视频，Google Maps，SoundCloud或Twitter feed。 数据源可以是Google电子表格或JSON文件，您可以通过iframe嵌入托管在其网站上的时间轴，也可以直接自己托管它，代码可在GitHub上找到 。

• 演示版
• 文献资料

这是使用JSONP数据源的实现示例。 首先，我们在调用data.jsonp文件的地方设置时间线参数。

<script type="text/javascript">
    var timeline_config = {
        width:              '100%',
        height:             '600',
        source:             'data.jsonp',
        embed_id:           'timeline-embed',
        start_zoom_adjust:  '-1',
        lang:               'en',
        css:                'javascript/timeline/css/timeline.css',
        js:                 'javascript/timeline/timeline-min.js'
    }
</script>
<script type="text/javascript" src="javascript/timeline/storyjs-embed.js"></script>

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": "<p>David J. Peterson was born at Long Beach, California.</p>",
        "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": "M.A. in linguistics",
        "text": "<img width=\"246\" height=\"200\" src=\"images/articles/david-j-peterson/University-of-California-San-Diego.jpg\" class=\"article-pic article-left-pic\" alt=\"University of California, San Diego\" /><p>M.A. in linguistics at the University of California, San Diego, with the subject “Front Vowels in Velar Coda Contexts: An Examination of the Front Vowels of Southern Californian English”.</p>"
      },
    ]
  }
}

最终的时间表是David J. Peterson的传记 。

小世界

免费的smallworld.js实用程序可帮助您使用GeoJSON和HTML Canvas生成地图概述。 它没有依赖关系，并带有一个简单的包装器，可用于jQuery或Zepto。 该地图可以以纬度/经度坐标为中心，可以给水和陆地指定颜色，并可以添加具有不同大小和颜色的标记。 没有开箱即用的交互功能，因为它主要用于说明目的，但是您应该能够在此之上编写自己的交互需求。

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

• GitHub源码

联合JS

JointJS是一个JavaScript图表库，可创建诸如有限状态机，组织图，实体关系图，Petri网，UML和逻辑电路之类的图。 这些教程已得到很好的解释，对初学者和高级用户都非常有用。

其许可模式基于每个开发人员：每个开发人员许可证使他们能够在任意数量的服务器上创建无限数量的商业应用程序。

代码示例如下所示。

var graph = new joint.dia.Graph;

var paper = new joint.dia.Paper({
  el: $('#myholder'),
  width: 600,
  height: 200,
  model: graph,
  gridSize: 1
});

var rect = new joint.shapes.basic.Rect({
  position: { x: 100, y: 30 },
  size: { width: 100, height: 30 },
  attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } }
});

var rect2 = rect.clone();
rect2.translate(300);

var link = new joint.dia.Link({
  source: { id: rect.id },
  target: { id: rect2.id }
});

graph.addCells([rect, rect2, link]);

热图

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

Heatmap.js是一个专用于热图显示的库，其中矩阵中包含的数据值以颜色表示。 它的代码可在GitHub上使用 ，已经引起了其他开发人员的足够兴趣，他们可以为Google Maps， Open Layers和Leaflet提供插件。 该代码是开源的，但公司和商业产品也可以获得支持许可证。

示例代码：

var heatmap = h337.create({
  container: domElement
});

heatmap.setData({
  max: 5,
  data: [{ x: 10, y: 15, value: 5}, ...]
});

纠纷

独立的Tangle库可创建React式文档，用户可以在其中使用文本或图形区域中的参数来更改其他内容。 这些示例比此简短描述令人印象深刻，因此您应该检查一下以获得更好的主意。

示例代码：

When you eat <span data-var="cookies" class="TKAdjustableNumber"> cookies</span>, you consume <span data-var="calories"> calories</span>.

var tangle = new Tangle(document, {
  initialize: function () { this.cookies = 3; },
  update: function () { this.calories = this.cookies * 50; }
});

结论

正如您在这些重点关注的库中所看到的那样，当可视化项目的范围受到限制时，无需使用庞大的图表库，例如D3.js或InfoVis。 对于特定项目，量身定制的库可以很好地完成工作，并且更易于实现。

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

翻译自: https://www.sitepoint.com/7-javascript-libraries-specific-visualizations/

javascript可视化