Graphics Programs Reference
In-Depth Information
<div id=”figure”>
</div><!-- @end figure -->
</body>
</html>
If you've ever created a web page, this should be straightforward, but
in case you haven't, the preceding is basic HTML that you'll find almost
everywhere online. every page starts with an
<html>
tag and is followed by
a
<head>
that contains information about the page but doesn't show in your
browser window. everything enclosed by the
<body>
tag is visible. Title the
page
Donut Chart
and load the Protovis library, a JavaScript file, with the
<script>
tag. Then specify some CSS, which is used to style HTML pages.
Keeping it simple, set the width and height of the
<div>
with the id “figure”
at 400 pixels. This is where you draw our chart. The preceding HTML isn't
actually part of the chart but necessary so that the JavaScript that follows
loads properly in your browser. All you see is a blank page if you load the
preceding
donut.html
file in your browser now.
Inside the figure
<div>
, specify that the code that you're going to write is
JavaScript. everything else goes in these
<script>
tags.
<script type=”text/javascript+protovis”>
</script>
Okay, first things first: the data. You're still looking at the results from the
FlowingData poll, which you store in arrays. The vote counts are stored in
one array, and the corresponding category names are stored in another.
var data = [172,136,135,101,80,68,50,29,19,41];
var cats = [“Statistics”, “Design”, “Business”, “Cartography”,
“Information Science”, “Web Analytics”, “Programming”,
“Engineering”, “Mathematics”, “Other”];
Then specify the width and height of the donut chart and the radius length
and scale for arc length.
var w = 350,
h = 350,
r = w / 2,
a = pv.Scale.linear(0, pv.sum(data)).range(0, 2 * Math.PI);
Search WWH ::
Custom Search