Protovis
Upcoming SlideShare
Loading in...5
×
 

Protovis

on

  • 1,169 views

 

Statistics

Views

Total Views
1,169
Views on SlideShare
1,169
Embed Views
0

Actions

Likes
0
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Protovis Protovis Presentation Transcript

  • Protovis:A GRAPHICAL APPROACH TO VISUALIZATIONIT for Business Intelligence Sudeep Yadav(10BM60089) Udit Kheterpal(10BM60093)
  •  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
  •  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
  •  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; }
  •  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.
  •  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 tick.html This example shows the performance of Wipro’s share prices.Example– Wipro Share Prices
  • 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
  •  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.
  •  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 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
  •  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.
  • Thank You