Protovis:A GRAPHICAL APPROACH TO                VISUALIZATIONIT for Business Intelligence               Sudeep Yadav(10BM6...
 It is a very graphical toolkit for  visualization It uses JavaScript and SVG for web-  native visualizations; no plugin...
 Download Protovis zip file from the download tab at  the following link : http://mbostock.github.com/protovis/   Proto...
  Protovis uses a declarative, rather  than imperative, syntax. Eg: A non protovis code for a pie chart may  look like:...
   While the protovis code for the same    is: vis.add(pv.Wedge) .data(data) .left(75) .bottom(75) .outerRadius(70)  .a...
   Conventional: Standard Chart types like    bar charts, line charts, scatter plots etc.Where can we use Protovis
 Custom Like Candlestick Charts, coxcomb diagramContinued..
   Interaction     Like Tooltips, Spline Editor, Bubbles etcContinued..
 Statistics   Like Histogram etc Art  Like Polar Clock, etc.Continued..
   Candlestick Diagram representing a company’s    Share Prices    http://mbostock.github.com/protovis/ex/candles    tic...
Net TurnoverDate                Open Price           High Price            Low Price            Close Price            Tot...
   Output   A candlestick chart concisely encodes several dimensions of data into a simple glyph. This    example shows ...
 Example2: GDP data for Indian States  and Union Territories for 2009 Data
   Output
 Example3: Visualize the performance of top10 soccer  players in the last season using the  heatmapExample:Soccer
   Data                        Aug       Sep       Oct        Nov       Dec       Jan       Feb       Mar        Apr    M...
   Output:This example uses a heatmap to visualize the performance of the top 10 soccer players in the league season 2011...
Thank You
Upcoming SlideShare
Loading in …5
×

Protovis

847 views
734 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
847
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Protovis

  1. 1. Protovis:A GRAPHICAL APPROACH TO VISUALIZATIONIT for Business Intelligence Sudeep Yadav(10BM60089) Udit Kheterpal(10BM60093)
  2. 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 dotsProtovis
  3. 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 its 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 visualizationGetting Started
  4. 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. 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. 6.  Conventional: Standard Chart types like bar charts, line charts, scatter plots etc.Where can we use Protovis
  7. 7.  Custom Like Candlestick Charts, coxcomb diagramContinued..
  8. 8.  Interaction Like Tooltips, Spline Editor, Bubbles etcContinued..
  9. 9.  Statistics Like Histogram etc Art Like Polar Clock, etc.Continued..
  10. 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. 11. Net TurnoverDate 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. 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. 13.  Example2: GDP data for Indian States and Union Territories for 2009 Data
  14. 14.  Output
  15. 15.  Example3: Visualize the performance of top10 soccer players in the last season using the heatmapExample:Soccer
  16. 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. 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. 18. Thank You

×