Protovis is a JavaScript library for creating interactive data visualizations in web browsers without plugins. It uses SVG and composable views to declaratively specify visualizations like bar charts, line charts, and scatter plots. Examples show stock price candlestick charts and GDP data visualized across Indian states. Protovis allows both conventional and custom visualizations through its declarative syntax and interaction capabilities.

1. Protovis:
A GRAPHICAL APPROACH TO
VISUALIZATION
IT for Business Intelligence
Sudeep Yadav(10BM60089)
Udit Kheterpal(10BM60093)

2.  It is a very graphical toolkit for
visualization
 It uses JavaScript and SVG for web-
native visualizations; no plugin
required
 Protovis is free and open-source
 Composes of custom views of data with
simple marks such as bars and dots
Protovis

3.  Download Protovis zip file from the download tab at
the following link :
 http://mbostock.github.com/protovis/
 Protovis uses JavaScript. It helps if you’re already
familiar with the language, but it's not necessary.
<script type="text/javascript" src="protovis-d3.2.js"></script>
<script type="text/javascript+protovis">
new pv.Panel()
.width(150)
.height(150)
.anchor("center").add(pv.Label)
.text("Hello, world!") .root.render();
</script>
 The first <script> element loads Protovis.
 The second <script> element is your visualization
Getting Started

4.  Protovis uses a declarative, rather
than imperative, syntax. Eg:
 A non protovis code for a pie chart may
look like:
 for (int i = 0; i < data.length; i++)
 { fill(data[i] * 120);
 float ang = data[i] / sum * 2 * PI;
 arc(75, 75, 140, 140, lastAng, lastAng + ang); lastAng += ang;
}

5.  While the protovis code for the same
is:
 vis.add(pv.Wedge)
 .data(data) .left(75) .bottom(75) .outerRadius(70)
.angle(pv.Scale.linear(0, pv.sum(data)).range(0, 2 * Math.PI));
 A for loop is almost never used. A set of related graphical
elements, such as the arcs in a pie chart, are specified as a
single mark which is associated with data and properties
are specified as functions.

6.  Conventional: Standard Chart types like
bar charts, line charts, scatter plots etc.
Where can we use Protovis

7.  Custom
 Like Candlestick Charts, coxcomb diagram
Continued..

8.  Interaction
Like Tooltips, Spline Editor, Bubbles etc
Continued..

9.  Statistics
Like Histogram etc
 Art
Like Polar Clock, etc.
Continued..

10.  Candlestick Diagram representing a company’s
Share Prices
 http://mbostock.github.com/protovis/ex/candles
tick.html
 This example shows the performance of Wipro’s
share prices.
Example– Wipro Share Prices

11. Net Turnover
Date Open Price High Price Low Price Close Price Total Volume No of Trades -Rs. Thousand
19-03-2012 426.4 428.35 420 426.75 33605 1015 14,254.22
16-03-2012 430 435.7 426.1 428.05 65857 1804 28,423.09
15-03-2012 420 431.75 420 427.05 103301 2239 43,936.68
14-03-2012 432 432.05 421.85 425.4 149376 3745 63,740.32
13-03-2012 433.1 434.7 427.5 431.5 123816 2620 53,337.20
12-03-2012 430 439.8 430 437.15 71579 1370 31,245.43
09-03-2012 444 447.95 430 432.15 58114 1753 25,454.87
07-03-2012 430.7 442.6 429.25 439.3 128021 2771 56,134.72
06-03-2012 429 438.95 426 430.8 76435 1559 33,032.83
05-03-2012 426.1 433.4 422 430.6 48453 1136 20,720.09
Data

12.  Output
 A candlestick chart concisely encodes several dimensions of data into a simple glyph. This
example shows the performance of Wipro’s share prices. The thick bar represents the
opening and closing prices, while the thin bar shows intraday high and low prices; if the
index closed higher on a given day, the bars are colored green rather than red.

13.  Example2: GDP data for Indian States
and Union Territories for 2009
 Data

14.  Output

15.  Example3:
 Visualize the performance of top10 soccer
players in the last season using the
heatmap
Example:Soccer

16.  Data
Aug Sep Oct Nov Dec Jan Feb Mar Apr
Messi 6 8 6 8 3 7 7 13 2
Cristiano Ronaldo 4 5 3 8 4 5 6 10 2
Van Persie 2 3 7 5 4 4 4 4 0
Ibrahimovic 0 2 4 5 4 4 1 7 0
Rooney 5 6 2 1 4 2 4 7 0
Auguero 3 5 2 3 3 2 2 3 0
Benzema 1 5 2 5 1 4 3 7 0
Higuain 1 1 11 3 1 3 0 7 0
Balotelli 0 2 4 3 2 1 2 3 0
Hernandez 2 3 2 3 2 1 0 2 0

17.  Output:
This example uses a heatmap to visualize the
performance of the top 10 soccer players in the
league season 2011-12 The heatmap is
generated using colored bars rather than
a dynamic image.

18. Thank You