Form Here:http://code.csdn.net/news/2819345

Vis.js 是一个动态的、基于浏览器的可视化库,可处理大量的动态数据并能与这些数据进行交互操作。该项目是由Almende B.V公司开发的,包含 DataSet、Timeline, 和 Graph。

Vis.js 是一个动态的、基于浏览器的可视化库,可处理大量的动态数据并能与这些数据进行交互操作。该项目是由Almende B.V公司开发的,包含 DataSet、Timeline和Graph组件。

Vis.js组件介绍:

  • 数据集(DataSet):灵活的键/值。可添加、更新和删除项目。DataSet可以过滤和订制项目,转换项目领域。
  • 数据视图(DataView):在DataSet过滤和/或格式化视图。
  • 图表(Graph):显示图形或网络。
  • 时间轴(Timeline):显示不同类型的时间轴上的数据。在时间轴上的时间和项可以交互移动、缩放及控制。

安装方式:

  • npm方式:npm install vis
  • bower方式: bower intall vis

或者前往官方站点下载该库文件。下载地址(版本0.7.2)

开源许可证:Apache License, Version 2.0

官方主页: http://visjs.org/

项目文档: http://visjs.org/docs/index.html

示例:

<!doctype html>
<html>
<head>
<title>Timeline | Basic demo</title>
<script src="http://visjs.org/dist/vis.js"></script>
<link href="http://visjs.org/dist/vis.css" rel="stylesheet" type="text/css" /> <style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
</head>
<body>
<div id="mytimeline"></div> <script type="text/javascript">
var container = document.getElementById('mytimeline');
var data = [
{id: 1, content: 'item 1', start: '2013-04-20'},
{id: 2, content: 'item 2', start: '2013-04-14'},
{id: 3, content: 'item 3', start: '2013-04-18'},
{id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
{id: 5, content: 'item 5', start: '2013-04-25'},
{id: 6, content: 'item 6', start: '2013-04-27'}
];
var options = {};
var timeline = new vis.Timeline(container, data, options);
</script>
</body>
</html>

可视化效果:

时间轴 基本用法

dataset

much data

html data

图表基本用法

random nodes

images

shapes

social network

groups

创意应用:社交网站朋友关系或者与您有关的人和事。

动态可视化库Vis.js:社交关系谱的更多相关文章

  1. Vis.js图表插件

    Vis.js是一款基于JavaScript的可视化图表库,Vis.js不像其他的图表库那样仅仅支持几种常用的数据图表,比如线形图.柱状图.饼图等,Vis.js支持上百种不同类型的可视化图表类型,比如时 ...

  2. Pycon 2017: Python可视化库大全

    本文首发于微信公众号“Python数据之道” 前言 本文主要摘录自 pycon 2017大会的一个演讲,同时结合自己的一些理解. pycon 2017的相关演讲主题是“The Python Visua ...

  3. Vis.js – 基于浏览器的动态 JavaScript 可视化库

    Vis.js 是一个动态的,基于浏览器的可视化库.该库被设计为易于使用,能处理大量的动态数据.该库由以下几部分组成:一是数据集和数据视图,基于灵活的键/值数据集,可以添加,更新和删除项目,订阅数据集变 ...

  4. MOOC课程信息D3.js动态可视化

    版权声明:本文为博主原创文章,转载 请注明出处:https://blog.csdn.net/sc2079/article/details/83153693 - 写在前面 好久没更新博客了,主要还是最近 ...

  5. 日常英语---四、vis.js是什么

    日常英语---四.vis.js是什么 一.总结 一句话总结:A dynamic, browser based visualization library. 动态基于浏览器的可视库 http://vis ...

  6. Python可视化库

    转自小小蒲公英原文用Python可视化库 现如今大数据已人尽皆知,但在这个信息大爆炸的时代里,空有海量数据是无实际使用价值,更不要说帮助管理者进行业务决策.那么数据有什么价值呢?用什么样的手段才能把数 ...

  7. 动态可视化 数据可视化之魅D3,Processing,pandas数据分析,科学计算包Numpy,可视化包Matplotlib,Matlab语言可视化的工作,Matlab没有指针和引用是个大问题

    动态可视化 数据可视化之魅D3,Processing,pandas数据分析,科学计算包Numpy,可视化包Matplotlib,Matlab语言可视化的工作,Matlab没有指针和引用是个大问题 D3 ...

  8. vis.js绘图库的一个BUG以及源码修正

    1. BUG 1.1 BUG触发情况 在使用vis.js绘图时,加入两个节点A和B之间既存在一条从A指向B的边,同时也存在一条从B指向A的边,那么这个绘图库就会崩溃. 1.2 BUG解析 vis.js ...

  9. Bokeh 0.9.0dev 发布,交互式可视化库

    快速使用Romanysoft LAB的技术实现 HTML 开发Mac OS App,并销售到苹果应用商店中.   <HTML开发Mac OS App 视频教程> 土豆网同步更新:http: ...

随机推荐

  1. ubuntu下配置安装conky

    由于默认的conky配置不好看,于是下载了一些配置,网上一抓一大把. 首先  sudo apt-get install conky-all 然后下载想要的配置文件,下载下来的是压缩文件,解压就行了,解 ...

  2. 【转】Linux里如何查找文件内容

    原文网址:http://blog.chinaunix.net/uid-25266990-id-199887.html Linux查找文件内容的常用命令方法. 从文件内容查找匹配指定字符串的行: $ g ...

  3. 剑指offer-面试题10:二进制中1的个数

    题目:请实现一个函数,输入一个函数,输出该数二进制表示中1的个数.例如把9 表示成二进制是1001,有2位是1.因此如果输入9,该函数输出2. 这道题最典型的方法就是用移位统计,就比如统计9的二进制1 ...

  4. 【Python】Coding the Matrix:Week 5: Dimension Homework 5

    这一周的作业,刚压线写完.Problem3 没有写,不想证明了.从Problem 9 开始一直到最后难度都挺大的,我是在论坛上看过了别人的讨论才写出来的,挣扎了很久. Problem 9在给定的基上分 ...

  5. C语言结构体的内存对齐问题

    在C语言开发当中会遇到这样的情况: #include <stdio.h> struct test { int a; char b; }; int main(int argc, const ...

  6. POJ3071:Football(概率DP)

    Description Consider a single-elimination football tournament involving 2n teams, denoted 1, 2, …, 2 ...

  7. Android中ExpandableListView控件基本使用

    本文採用一个Demo来展示Android中ExpandableListView控件的使用,如怎样在组/子ListView中绑定数据源.直接上代码例如以下: 程序结构图: layout文件夹下的 mai ...

  8. WPF实现窗体最小化后小图标在右边任务栏下

    一 基本功能 1. 这里是用 NotifyIcon 控件来实现,但 WPF 下没有 NotifyIcon  控件,怎么办,用 WinForm 下的呗. 先引用  .NET 自带的两个程序集 Syste ...

  9. Spring Ioc知识整理

    Ioc知识整理(一): IoC (Inversion of Control) 控制反转. 1.bean的别名 我们每个bean元素都有一个id属性,用于唯一标识实例化的一个类,其实name属性也可用来 ...

  10. SQL SERVER中如何格式化日期(转)

    原文地址:http://blog.sina.com.cn/s/blog_95cfa64601018obo.html   1. SELECT convert(varchar, getdate(), 10 ...