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.

概況

主要編程語言JavaScript
程式設計語言JavaScript
許可證MIT License
最新版本名稱v0.1.0
第一版名稱v0.1.0
最後發佈時間2012-08-28 23:47:11
首次發佈2012-08-28 23:47:11
最後提交時間2012-09-18 01:55:03
創建於2012-08-28T14:41:37
推送於2012-09-17T16:58:52
Commits Count39
關注者數19
名稱與所有者akngs/dviz
派生數12
星數372
問題數2
打開的問題數2
發佈數1
語言數1
已啟用問題?
已啟用Wiki?
已存檔?
是派生?
已鎖定?
是鏡像?
是私有?
To the top