Welcome to our talk on Creating Info Graphics using Standard Web Technologies. I want to start by asking you all a question. How many people here have to build websites? That's good. That means I'm in the right presentation. And so let me ask you one other question. How many have to have data? Have to present data to their users, to their visitors to their website? So that's good. That means that you're in the right presentation.

So we want to say why are we going to do Info Graphics? Well Info Graphics is all about data. It's all about presenting data, presenting it in interesting and engaging ways for the visitors to your websites. There's a lot of ways to present data. You know you could certainly present it this way.

There's a lot of data here. And it's useful data, its good data, it's interesting, it's something that people really want to know. But this is probably not the best way to present it. Because it doesn't give you any context, it doesn't really give you much kind of relationships between all the different pieces of information that are there.

So here's another way to present some graphics, or to present some data. It's graphically. It not only gives you much more compact representation of that information, but it shows you a lot of relationships. This is some population data for all the states, county by county. And it really allows you to see sort of you know where the population concentrations are and things like that. And so Info Graphics allows us to present information in interesting and engaging ways.

This information could be in a magazine or a newspaper or a book even. It's just sort of static data. So what would we, what could we bring to the party if we can put these Info Graphics on a web page? Well for one thing we can interact with the graphs.

Here maybe we have some users who are going to roll over and look at information about the different states and the populations there. And maybe other information too. Maybe links off of Wikipedia pages for each state. And so you can add a lot of interesting interaction for the users. Make it more engaging for them.

Another thing that we can do is we can make the graph dynamic. Here we've changed the data to some newer information that shows kind of where populations are moving. So putting Info Graphics on the web allows us to engage the users. Allow to bring them into the experience.

So why would we want to use Standard Web Technologies to do these? There's a lot of different ways you can do it. But with Standard Web Technologies we can do it all without plug-ins. We can have it so that it'll display on the iPad and the iPod Touch and on the iPhone.

But more than that, we can use a lot of other Standard Web Technologies. These graphs can interact with the Dom. They can use CSS to style the Info Graphics elements just like they're styling the rest of the page. You're probably using CSS to do a lot of style on your page. You can use that same CSS to do the style on your graphics as well. It also allows us to very easily do accessibility. Accessibility with Standard Web Technologies is either free or very easy to do. Easy to add.

And so let's talk about, I just want to get you started on doing Info Graphics. We're certainly not going to go into all the details here. But what we're going to talk about today is, first of all how we're going to take that data that we're going to start with and bring it into the client so that we can use it and I'm going to give as an example just a really simple bar chart, just to kind of get us started with how to use that data. And then Sam is going to talk to us about how we can go further. Do more rich visualizations. He's going to give some examples of different kinds of charts that go beyond just the boxes and text that we can do with HTML and CSS.

And then he'll tell you about going further than just using graphic representations, going into actually putting the data in context. So we'll use a U.S. map as an example of that. He'll show you how to do some of those things. So let's go ahead and get started. First thing I want to do is we talked about data.

We talked about the fact that data is where we start. And so how do we get that data into the client so that we can start making graphs? Well the first question is where does the data come from? And I'm sure a lot of you, for a lot of you, that's not the problem.

You already have data. You've got some data from your company that you want to show. Or you've got some information that you've collected that you have and all you need is a way to show it to users. So you might have that. And so that's real easy to be able to get that into a client.

But also you might want to go out and find some data in the public and create interesting Info Graphics that kind of show some relationships that you've thought about. And so I'm going to show you. In fact, the demos we're doing today, we've got some data from Data.gov which is a good U.S. government resource.

It has tons and tons of data. We've chosen some population data from the last census, and we're going to use that as our example. What kind of formats do we have available to us? Again, there are a lot of them. Some of them are really pretty web friendly. XML, you know that we all know and love. It's very easy to bring that into a client and then you know use the Dom to dig through it and get the data out that we need.

JSON is another way. This is kind of a newer technology. A lot of web browsers support it. It's really just a JavaScript notation. But there are a lot of new technologies that are in WebKit that make it very fast and efficient to use JSON, so it's another really good choice.

CSV is an example of a lot of other formats that you can get things in. If you go to Data.gov there are a lot of different formats. And sometimes it's the only format you can get it in. So I'll show you a couple things that we can do to try to adapt that data into the client so that we can use it.

Well which format is the best one to use? And of course that depends on the source. Maybe you have data in one source and you got to deal with that. Sometimes that data is in a format that maybe you can't use. And so I've actually, for this demo, found a very nice offline tool, the data that we got was in CSV format. Not really very easy to use that. So I used a tool to convert into JSON and now we've got a really easy format to use for our demo.

Now you could use CSV or even an Excel spreadsheet format directly and write some client side code to parse that then get it into a form that you can use. I don't really recommend doing this because those formats can be very, you know, kind of randomly different in the way that they represent their records. And so you can get a lot of education. They're going to be really hard to take care of. And so sticking with the web standard formats is going to be a lot easier for you to use.

There are a lot of server side tools, so if you're using, if you have your own database especially, and it's got you know Sequel access or you have some way to access it, there are a lot of server side tools that allow you to make queries on that data, get some XML records, bring them into the client, parse them, get into that data and use it. So that's a really good choice if you've got an online database you're trying to access. Whatever you're using, whether it's JSON or XML, XMLHttpRequest is the typical way that you get data into the client so that you can start using JavaScript to work with that data.

So JSON is this pretty new format I was mentioning before that it has a really fast parser. A specific JSON parser in Safari that allows you to very quickly parse data. So this data set that we're using for the U.S. Government, it's a huge data set, it's a really a lot of text. And so JSON is able to parse it almost instantaneously so you don't have to worry about the size of the data and trying to pare it down or anything like that.

Here's a little graphic of what we're going to do. It's pretty simple. It's, you know, all another way that you would access any data on the web. You're going to do an XMLHttpRequest. Get the data out of some database, get it back in some form, in our demo example we're going to be using JSON, but it could also be XML. And then you're going to use JavaScript to use that data and convert it dynamically into some kind of chart.

So let's get into how we actually are going to access this data. The first thing we need to do is we need to request it. That means we create an XMLHttpRequest Object. We need to tell that object what to do when the request is ready. And in this case we're going to say call this process response function and we will process it from there. The next thing you do is you set up the query that you're going to do.

In this case all we're going to do is apt test this JavaScript file that true bullion value there, that says do it asynchronously. So we're going to send off the request, it's going to return immediately. We're going to go off and do something else. Later on the process we request is going to get called and we're going to do all the rest of our job there. And then the last thing is, we just call send. And we, that sends off the request and then we go off.

At some point process response is going to come in. Process response gets called a lot of times to give us progress and to tell us, you know the kind of status of the request that we've made. But at some point it's going to give us a done message and that's going to say that the data's ready.

We're going to call the JSON parse message to, method to parse that into a JavaScript data structure that we can access later. And then we're going to call some function that's going to dynamically construct a chart. And that's really all there is to it. That's, we've accessed the data. We have it on our client, we can do anything we want with it.

So like I said, let's make a really simple bar chart just to show how easy it is to, to actually create the data, use the data to create a bar chart. So a lot of you have seen this kind of code before. It's all pretty simple. We're going to dynamically create some HTML elements. We have a loop here and so I'm displaying data for each region of the United States. There's four regions I'm going to go into a loop and construct four bars that are going to show the population in each of those regions. So I'm going through this loop.

First thing I'm going to do is I'm going to go and access my JavaScript object and I'm going to pull out the population for the region that I'm asking for. And then I'm going to create a little group of elements. It's going to have a root that's going to contain the bar and the title. And it's going to be very simple. I'm using CSS to style it all so that I don't have to change this JavaScript when I want to restyle the object. I can just go and change my CSS and I can give it a very different look.

Next I'm going to create the bar. This is going to be the actual bar that's going to show the height that's going to correspond to the population. I'm going to style it as well. And for it I'm going to set its height corresponding to the population of that region. And then I'm going to append that to the container that I've just created.

Similarly, I'm going to create an object for the bar title. I'm going to give it a class. And then I'm going to put the string which is the region name in it. Append that, and then finally I'm going to add that to the list of the other bars I've got, and eventually I get a bar chart.

But that gives you a static bar chart, which could be useful. You know that might be all you need to show your users what you need. But it's really better if we can add some interaction to it. So let me do a real quick demo to try to show you some of that.

Didn't do it. What is this machine? I thought so. Okay. So here we have our bar chart, showed you a picture of this. It's got four regions that it's representing. But if we roll over this, you can see it has a nice little pop up. And I'm showing all the states that are in that region just so the user can find that out and I'm highlighting the bar so you really know what's going on. And when you do the other ones, one goes away and the other one comes in.

It, you know, you can do it really fast. And all the animation works really well. So how do we do that? It seems complicated, but it's not. And if you've been seeing any of the CSS talks this week, you've seen that that's actually really, really simple to do. So let's go back to the slides and see how we did that.

So that's all done with CSS transitions. This is a very simple effect. What I've done is in that loop that you just saw, I've added another object. It's going to be a pop up object. I've put in it, in this case, just a simple image of the states in that region. But I'm calling it bar pop up, that's just its CSS name. Then I'm doing some standard styling stuff to give it some nice borders and rounded corners and things like that. But the interesting parts are I'm setting, so passage is zero.

So you're not going to see it. And I'm also scaling it and rotating it. Putting it in a position that it's going to zoom up from when I select it. And then this little piece is the thing that actually causes all of the animation to take place. I'm saying, I want the opacity to change over one second, and I want the transform to actually change over half second. So it's going to zoom into place and then kind of just smoothly fade in after that bit.

So I think it's going to be a nice effect and you saw it just a second ago. Then the other thing we need to do is we add another style selector which is going to say, whenever I hover over the bar, hover is one of the pseudo classes that allows you to very automatically do something when the mouse goes over some object. I'm going to say when I hover over that bar I want this, this style to be added to the pop up object.

And that style is setting zero passe to one and basically taking away the transform that's going to cause the object to fade in and kind of zoom up and like you saw. And the nice thing about it is when you take that away it's going to slide back.

And if you go over another object, both of those animations can be happening at the same time. You don't have to worry about dealing with, you know, having one start after the other one stops or anything like that. It's all taken care of with CSS transitions. And you'll notice this required no additional JavaScript. This was all very simple to do and it's all done in CSS so very easy to change if you want to change to a new style, a new animation style or a new kind of visual style.

But what about the iPhone and the iPad? Well let's take a quick look at how we would, how this would look on those. So here's the same bar chart. Move it this way so you can see it better. So same bar chart, but here, well when we roll over it, you know you don't really roll over on iPad and iPhone. So here we got to click. But when you click, you get the same effect. Everything works pretty much the same and the same highlight happens. But how do you do that? Well let's take a look.

So you do that with Touch Events. Like I said, hover doesn't really work with those devices because you're not really moving a mouse around, you're using your finger and so you got to touch. And so the way we do that is with these Touch Events. The events we use are touch start and touch end. So when I'm doing that loop where I'm constructing the bars, I add a couple lines of JavaScript. I add an EventListener for the touchstart event. And I say, when the touchstart event happens I want to add this bar-show class name to, to the bar.

And when I lift my finger up I want to take away that class name. That's all the JavaScript we needed to add. And then we add one more small thing. Here is the style selector that caused the hover animation to happen. And we're going to add one other thing to that. We're going to say not only when you hover over the bar, but when this bar-show style appears, we also want to run this animation.

And that's all there is to it. So the iPad and the iPhone can have the same effects with just a small change that causes it to work in both places. So that was just a simple bar chart and I showed you how to get the data in. And now Sam's going to come up and tell you how to do even cooler bars and graphs.

Thanks Chris. So that's Chris Marrin and I'm Sam Weinig and I'm going to be talking to you about how to make Richer Visualizations. So what Chris is talking about so far is how to take data that is already sitting on your servers, get it into your web page and then use it to create a simple graph. And in this case he used the bar chart. But for most data visualizations we don't want to use a bar chart.

It's just not the best kind of graph. There are lots better graphs for things. For instance, if we have data that is, we want to see in comparison to the whole, we use the pie chart. For data along two axes, often you know time is one of them, we'd want to use a line chart.

For scientific data a scatter chart, which is also along two axes are, is pretty powerful. But HTML and CSS as you know it today is not the best technology to do these kind of things. You can't make a circle out of squares. Fortunately, there is a technology that's available in WebKit across our entire platform called Canvas.

And Canvas is a part of HTML5. But it actually hasn't always been. Canvas started as something we needed for Dashboard. Are you all familiar with the Dashboard program on Microsend? Well it's okay. If you are or you aren't it is there. And what we found when we were making Dashboard was to make the Widgets that we wanted, we needed something beyond images if we wanted them to be interactive and dynamic.

For instance, to make the hands of the clock, we needed something to draw the hands and the circle around it. To draw the flight plan of a plane we really needed a path and the same was true for the stock ticker. So we decided to create an API that we were familiar with and so what we did was we based a JavaScript API on the CG context API that we have on Mac OS 10 and iPhone and iPad.

So if you're familiar with it, you're probably going to be pretty familiar with how Canvas works. It actually was really popular and we, it was picked up as part of HTML5 and it's actually now available in most major browsers. The one exception is our favorite browser Internet Explorer. But there actually is a solution.

Many people use the EXCanvas.JS, JavaScript to get Canvas-like functionality based on Microsoft proprietary technologies. So let's take a look at a demo of what we can do with Canvas to create a nice chart. Now we have a circle. Which is something that Chris couldn't have done with the CSS he was showing you. Just to prove to you that it's not an image, we can do some dynamic things like this.

We can also inspect it and show you that it is indeed a Canvas element. These dibs that you see below here are the pop-ups that are popping in. And they've just been transformed off the side of the page. The thing to note, while we highlight the Canvas is that it is the entire area of the circle, but it doesn't include the text on the side.

So let's talk about what Canvas is for those of you who aren't familiar with the CG Context, API. Canvas is an immediate mode of graphics drawing API, which means that it's as if you have a canvas and you're taking a pen and drawing on to it. And as soon as you draw on to it, you no longer know where you've drawn explicitly.

So it's not like HTML where you have a Div, and as you move that Div WebKit will keep redrawing it for you. With Canvas, if you want to change what's drawn into it, you actually have to redraw the scene yourself. So let's take a look at how you do that.

The first step to using Canvas is to just create a canvas element. Just like you would an image element or a Div or anything else. Then from JavaScript you're actually going to obtain what's called its context. You do this using the Get Context method passing 2D as the argument. Canvas is designed to be extensible in the future, so if we decide to use other kinds of context we have that option. In this case we're just using HTML Dimensional context.

We've illustrated that you have the context by drawing a small black border inside the Canvas area to show that it, it takes up the entire area and you have that entire area to draw in. To create a circle, which is our goal for right now, we use a path, which we end on each side with the begin and a closed path methods.

And in the middle we use the Art Command to draw 360 degrees around a circle. Before we can actually draw it, we have to tell Canvas what we want it to look like. In this case we're going to set a line width and a color of sort of a transparent red, because that's the kind of circle I like.

And then we're going to call stroke, which just draws around the edge of the circle, not filling it in. So this is pretty simple. But you can also draw a text. For instance if you want to draw this text you would set a font. You don't actually have to learn a new Syntax as the comment says, it uses a Syntax you're familiar with from CSS. And then you use fill text just like you use stroke to draw the text at the position provided by the X and Y.

We didn't draw a circle, we drew a pie. So let's see what that is because it's very similar and it's going to use a path as well. So we start in the path by moving our pen to the center of the circle. Now move to won't draw any lines, it will just move where you're going to start drawing. We then create an Arc out to the edge of the circle and around the portion that we want to draw for this particular slice. We then draw a line back to the center and close the path. We set a fill style and we fill it.

Like stroke, fill just uses the path as a guide and draws it on to the context. To draw the rest of the pie we're going to simply iterate this process. The thing to note in this slide is the save and restore that bracket the call to draw a pie slice.

What we are doing here is if drawPieSlice were to do anything fancy, like transform the Canvas, which is in API, we're not going to get into today. It would allow the graphic state of the Canvas to be reset so that the next call to drawPieSlice is not affected by it. This is something you're probably familiar with if you're familiar with the CG context of APIs.

Now I should not that our Canvas was interactive. And so far everything I've told you has been in that it's an immediate mode of API. You have to redraw everything. It's just an image like thing. It's a scriptable bitmap. So how did we do those hover effects where we knew which Pie Slice we were over? Now we could probably do the math ourselves. Since the Canvas is going to be, sorry the Dom Event System is actually going to provide an offset into the Canvas where we were. But it won't tell us which Pie Slice we're hovering over.

So we could do the math ourselves and figure out where, which Pie Slice we are, but that means we have to actually remember high school math. Which we don't want to, because, you know. But Canvas actually now provides an API to do this. Because it already knows about the paths you're drawing. You can actually use the same technique to construct a path like we did for this Pie Slice.

But instead of calling fill, we can actually test whether a specific point is in that path. And Canvas will do the heavy lifting to tell us whether it's true. So for our example, we would just iterate all the Pie Slices, just like we did when we were hit testing, I'm sorry, when we were painting. But instead this time it tests the Pie Slices.

When we found which Pie Slice returns true, we can then redraw the scene with the Pie Slice slightly extracted from the pie, giving us that nice effect. At the same time, we would probably set the position of the popover that you saw fly in to the correct position, thus allowing the CSS animation to perform at the same time.

There's actually a lot more to Canvas. Since it's based on pixels, some of the coolest things you can do are pixel manipulation. And there are two APIs to do that to get image data and set image data which allow you to get a, basically a pixel buffer that you can poke at yourself. And this is really useful for creating cool effects like filters. But also doing very neat things like creating fluid dynamic simulations as one of my colleagues did.

There's also the ability to save the entire Canvas as an image. Since it's basically an image that you're drawing, we give you the ability to save it out to disk or send to a server as a data URL in the format of PNG or JPEG or any other image format that we support natively. You can see a really cool demo about how to use these on Safari Demos. I believe it's Developer.Apple.com.

There are a lot of resources for using Canvas, including the HTML5 Specification. But I want to call out two APIs that are really great for constructing simple graphs like the one I showed you that do most of the work for you, but provide enough hooks to allow you to do a lot of styling and hooks for putting in your own data and interaction into these graphs.

And that's the Flot and Flotr library. Though very similar in name, they are slightly different. I believe, sorry, they are quite different. One is more prototype based and the other is JQuery based. So depending on what type of API you're familiar with or comfortable with, you might want to choose one over the other.

So that was Canvas. And it was showing you how to make nicer graphs. But I mean graphs are just, you know, graphs. They're map class. And graphs are great for showing data. But they're not the whole picture when it comes to Info Graphics. And in fact the really important part about Info Graphics is showing data in context. So let's take a look at a couple examples of what I mean by that.

In this example, we're showing immigration data, who's coming into the United States. And what they're doing is they're using the American flag to both, you know, show that it's something about national identity, at the same time giving you the important data that you need. Who are these different nationalities that are immigrating to the United States? It doesn't have to be that heavy. It can be just a, you know, visualization of how to make different coffees. But there, there are things that you wouldn't necessarily want to do in HTML or Canvas because they're probably something you want to do in PhotoShop.

So traditionally you would probably just use an image, slap it on your website and call it a day. That's great, but it doesn't have all the virtues that Chris was espousing of, you know, Standard Web Technologies. It's not accessible, there's no way to make it dynamic. You can't add interaction.

But there actually is an image format that WebKit knows how to deal with natively that allows you to do this. And that's called SVG and it's a big scary technology, but we do support it across our platform. So it works really well in WebKit and it even works on the iPhone really well.

So SVG unlike Canvas is a retain mode API. So it's not immediate mode, it's retain mode. It's a lot like HTML in that there's a model, there's a circle element that WebKit knows about. And as you change its properties, WebKit is going to do the job of drawing it on the screen for you. In this case, when we change the size of the radius, the circle grows.

And there's much rejoicing. It's pretty easy to draw basic shapes. SVG as you note in this example is a lot like an HTML document. So instead of starting it with HTML, we start with SVG. And we, again, draw a circle and we give it a position and a color.

So instead of giving it attributes like you know a title or alternate text, we're giving it information that describes how we want it to draw. Animation is also part of the bread and butter of SVG. And adding on to that previous example, we can simply animate it down just by adding an animation animate motion tag beneath it.

So SVG is a document format so you can't like just stick it in your HTML, how do you use it? There are actually three ways to do that. The first way is to reference it as an image. And this is actually a really cool technique because first you can just use it as an image tag, but you can also use it anywhere you use images in CSS.

And we use this to great effect with the WebKit Mask property. So if you create a Starburst or something like that using SVG, you can then apply it as a Mask to your HTML content. Otherwise you would have to create a PNG on the server side, or you know on your find side and upload that. So this way you can actually do it dynamically.

You can also reference it as a document. So the downside of referencing it as an image is that any dynamic capability such as animation or scripts that run in the SVG don't work. However when you reference it as a document, all scripts and animation are fully functional. The two ways to reference it are as an iFrame, or an Object tag. These both work equally well. There's actually another way.

I said you couldn't reference it from HTML, but you actually can reference it directly inline with XHTML. And this is very easy. You just take your Div Tag and slap in some SVG. This is probably not going to be too useful for most of you as I image most of you are sending HTML still. And that's a good thing. There are plenty of other ways to use SVG in your document.

So we talked about paths with Canvas and paths are just as important with SVG if we want to create those complex mugs of coffee that we showed you. Or if we want to create the state of New York, my home state, the lovely state of New York. We have to do something like this. And I've actually alighted you know maybe 200 lines of path data. And I didn't write it by hand. There's no way I could write it by hand.

So am I, you know, selling you snake oil here? Is this something you can actually use? And of course it is because with SVG you also have content creation tools. There's actually a lot you can do in tools that you're pretty familiar with, including Illustrator. Or the Inkscape Tool which I'm going to show you today, which allow you to export SVG and use these natively in WebKit.

So let's take a look at a demo of exporting SVG. So this is Inkscape, it's a image editor that's very similar to Illustrator, except it's really tuned towards creating SVG documents. Just to prove to you that this is in fact a image editor and is working on objects and not just, you know a photo that I've taken I'm going to make some changes.

I'm going to move California to where it'll be in a couple years. Get rid of Arizona. You know. [Applause] This is Michigan, the home state of Vicky Murley. And I don't know. There's not much we're going to do here. But, what we're going to do is we're just going to export this image as an SVG.

You can imagine that this isn't just a map, but is something very complexly drawn such as the American flag with the different immigration data. I'm not a graphics artist, a graphic artist. I, you know, a lowly computer engineer. And, but I do know that many graphic artists do do a lot of these sort of contextualized visualizations. So they know how to make cool things.

So for this demo we've just made a map that I've, you know, traced. But if you can imagine it's something else. So I'm just going to save that onto the desktop and we're going to call it the map. We're going to save it as a plain SVG. And we're going to minimize this.

We're just going to open it in Safari. It's right here. And as you can see it, Safari can deal with it just well, just as well as it could. And if you look at the Inspector, it's just like an HTML file, it's totally inspectible. Now of course these aren't things that you would write normally, but you know, that's the case.

Another thing I want to note is that all of these objects have properties in them. So looking in the Object Properties we can see that Wyoming has a label and an ID. What this means is that from our scripts we'll be able to reference these objects directly. This is really important if you want to create interaction.

What we've done is we've taken those objects and we've combined them with our census data to create a more compelling visualization. Now it's not as good as what you know a great graphics artist could do, but it's what Chris and I could do in the time. So you know just as we hover over we can scale the SVG up with no loss in precision.

Okay. So I showed you the interaction.

How do we do that interaction? Do I need 20 slides to teach you interaction with SVG? Fortunately the answer is no. It's actually the same JavaScript and Dom and Event Model that you're familiar with from HTML. So we use Elements by Tag Name, we use Add Event Listener to add Mouse Over events. And it all just works. And it all will just work across our devices.

There's actually a lot more to SVG that we're not going to get into. And a couple of them that I really want you to know about but I don't have time to go into are SVG Fonts. Which allow you to define custom glyphs for fonts that you not only can use from SVG but also from HTML and CSS.

I want to note an important point is that on the iPhone and iPad, the only way to reference external fonts, other than the ones available on the system, is to use SVG fonts. So this is an important thing to know about. There's also text on a path, which can be really useful in creating compelling visualization of your data.

Using arbitrary paths this text is completely accessible and selectable. So even your less cited users and screen reader users will be able to interact with it. And finally there's Spriting using the use element, which allows you to take a single animation or a complex shape that you've created and stamp it across your web page. This is useful in certain types of animations. There are a bunch of resources for SVG.

The image editor I used is Open Source and Free. And it's available at InkScape.org. A great library that abstracts some of the really jarring complexities of SVG is the Rafael JS Library. And so if you're interested in SVG, but a little scared of it, as I am, you might want to check that out. He has some really cool demos. And for those of you who are super bold, the SVG specification is available from the WFreeSave. Let's go over a little bit of what I've talked about just so we know which technology we want to use. Canvas or SVG.

You can use both, but let's talk about why you would use one. As I noted, Canvas is an immediate mode API whereas SVG is retained. So if you're just doing a simple drawing and it's based on data that is really accessible to you, and you can use to create the relationships, Canvas might be where you go. But if you want to use animations, and interaction, SVG might be a little easier. But they both can create arbitrarily complex paths for you.

Canvas has a great support for pixel manipulation as that's really its bread and butter. And in the end you can also save out these Canvases to disk. So if you really need the ability to save the graphs that you're creating to your users' home, to the disk, Canvas may be what you need to use. Whereas, SVG has built in support for accessibility. It has animation support.

And it also has the offering tools backing it. So if you want to create complex relationships and you really want to show your data in context, SVG is where you want to go. So with that, I'm actually going to hand it back to Chris, because we lied, and there's actually one more thing.

Thanks a lot Sam. That was some pretty cool stuff. I hope you liked it. But we have one more thing to show you. All those things are available in Safari.

But this is something that we're working on in WebKit. This looks like the map that Sam was showing you in SVG. But it's not done in SVG. It's done in something new that we're working on. Which is called.

This is in a new 3D technology that we're working on that's available in WebKit Nightlies. You can see that it's showing you the data in this really kind of visceral way where you're seeing the height of the state, telling you what its population is. So you can really quickly see you know where everybody is and you know where everybody isn't and you know whether your state's better than the next state or whatever. [Chuckles] So it makes it really easy to see. So that's WebGL.

Didn't think it was going to work. So WebGL. This is something that we're working on. This is an experiment. It lets you do a lot of very cool things. You know simple graphics, it does really high polygon count stuff. You can integrate it with the web page which is really one cool thing about it. And then I showed you that Info Graphic piece.

So there's a lot of stuff you're going to be able to do with it if you go and experiment with it in the WebKit Nightlies. So what is WebGL? Well it's something that we're working on in Khronos which is a group that controls the Open GL and Open GLES specs as well as KLot and a bunch of other things. So we've based WebGL on Open GLES so that it, it's using some standard libraries that a lot of 3D programs are already familiar with.

It's a collaboration between Apple, Google and Mozilla are involved, as well as several other companies that are interested in this space. I'm the spec editor, and so we're really excited about this. It's really something that I'm having a lot of fun with. And the spec went to public review in December. So all of you can look at it.

I encourage you to go check out the spec. There's a Wiki, it's a public Wiki it shows you a lot of demos, a lot of libraries and a lot of things that you can start playing with. And like I said, it's available in WebKit Nightly Builds. I did a blog post a little bit ago to introduce it, talk about how you can use it in WebKit on Mac.

So that's our talk. In summary, let me just say you know a few things we talked about. Info Graphics are engaging and informative. It allows you to kind of see data in a really kind of rich, interesting way. Putting Info Graphics on the web allows you to do interaction and animation really draws your users into the experience of looking at that Info Graphic. And using Standard Web Technologies allow you to run it everywhere without using plug-ins.

Allows you to do all the other Web Technology stuff. And it gives you good accessibility. And there are many Standard Web Technologies that are available in WebKit. We've shown you a few, including HTML and CSS, Canvas and SCG. I hope you all go out and do some great graphics.

Here is some information if you want to talk about Safari, Vicki Murley is our Evangelist. She can really help you a lot. The Safari Dev Center has got a lot of resources. Some of our demos will be there. And there's some general HTML5 demos and the Apple Developer Forum is someplace you can go and ask questions, and you know, interact with us and stuff.

There are some related sessions, all of which have happened already. But on Monday you'll be able to watch all of them and see them. I hope that you saw a lot of these. They were really great. I think that it really gives you a really good perspective on all the different things that you can do with Safari. And we still have some labs coming up. We have some iPhone labs that are happening tomorrow. And another Safari Open Lab that you can come to on Friday.