dviz

  • 所有者: akngs/dviz
  • 平台:
  • 许可证: MIT License
  • 分类:
  • 主题:
  • 喜欢:
    0
      比较:

Github星跟踪图

DViz

by Alan Kang (@alankang)

DViz is a declarative data visualization library written in Javascript.

See live example on tumblr.

What is Declarative Data Visualization?

I coined the term declarative data visualization to describe a way of
embedding visual representations such as sparklines or conventional
statistical charts into HTML document without using the hand-written scripts
or graph drawing tools.

All you need to do is writing a plain HTML document. DViz then automatically
detects data elements embedded in the document and turns them into cognitively
efficient visualizations on the fly.

Documentation

Basic Usage

Paste following code into the <head> element of your HTML:

<link rel="stylesheet" href="http://akngs.github.com/dviz/css/dviz.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://akngs.github.com/dviz/js/dviz.js"></script>
<script type="text/javascript">$(function() {dviz.run();});</script>

Or you can add ?autorun=true parameter instead of direct call to dviz.run:

<link rel="stylesheet" href="http://akngs.github.com/dviz/css/dviz.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://akngs.github.com/dviz/js/dviz.js?autorun=true"></script>

And add dviz-content class to somewhere in the <body> tag. DViz will scan and process all elements in there:

<div class="dviz-content"> ... </div>

Now you can do some magic. Add following code into dviz-content area:

<p>Here goes sparkline: <code>1,3,6,3,5,2,4 (@sparkline)</p>

It will replace the <code> element into a sparkline.

Or you can draw a bar chart:

<pre>
   <code>
   Name, A, B
   Apple, 1323, 1232
   Orange, 3563, 2452
   Banana, 1356, 3222
   </code>
</pre>
<p><code>(@bar)</code></p>

DViz currently supports following declarations:

  • scatter (scatter plot)
  • scattermatrix (scatter plot matrix)
  • bar (horizontal bar chart)
  • line (line chart)
  • column (vertical bar chart)
  • area (area chart)
  • steppedarea (stepped area chart)
  • sparkline (sparkline)
  • table (table chart)
  • graph (force-directed graph)

See following examples:

Dependencies

You can explicitly load optional javascript files using script tags, but you
can also let DViz to load them when they are needed.

Browser Support

DViz supports all major modern browsers including:

  • Safari (and Mobile Safari)
  • Chrome
  • Firefox
  • Opera
  • Internet Explorer 9+

License

Licensed under the MIT license.

概览

名称与所有者akngs/dviz
主编程语言JavaScript
编程语言JavaScript (语言数: 1)
平台
许可证MIT License
发布数1
最新版本名称v0.1.0 (发布于 2012-08-28 23:47:11)
第一版名称v0.1.0 (发布于 2012-08-28 23:47:11)
创建于2012-08-28 14:41:37
推送于2012-09-17 16:58:52
最后一次提交2012-09-18 01:55:03
星数371
关注者数19
派生数12
提交数39
已启用问题?
问题数2
打开的问题数2
拉请求数0
打开的拉请求数0
关闭的拉请求数0
已启用Wiki?
已存档?
是复刻?
已锁定?
是镜像?
是私有?
去到顶部