JavaScript Jabber

JavaScript Jabber is a weekly discussion about JavaScript, front-end development, community, careers, and frameworks.

Subscribe

Get episodes automatically

014

014 JSJ SVG and Data Visualization with Chris Bannon


Panel

Discussion

Picks

This episode is sponsored by

comments powered by Disqus

TRANSCRIPT

CHUCK: Okay. Well, let’s do this. We are on episode 14. AJ: Is that before or after 15? CHUCK: [Laughs] [This podcast is sponsored by Harvest. I use them for tracking work and invoicing clients. You can get a 30-day trial at getharvest.com. Use the offer code “RR” after your 30-day trial to get 50% off your first month.] CHUCK: Hey everybody and welcome to episode 14 of the JavaScript Jabber Show. This week on our panel, we have AJ O’Neal. AJ: Coming to you live from my apartment. CHUCK: And I’m Charles Max Wood from teachmetocode.com. I’m not sure where the other panelists are. We also have a guest and that is Chris Bannon from ComponentOne. CHRIS: Hey guys, thanks for having me today. CHUCK: Yeah no problem. So, I have to admit we did record this once and the line in wasn’t plugged in to my audio recorder, and I neglected to start my backup recording. And so, yeah we are recording this again. So if it feels a little rehearsed, it is. [Laughs] I guess. So Chris, do you wanna tell us a little bit about ComponentOne? CHRIS: Yeah sure. So ComponentOne, my employer, we basically build user interface components. We’ve done it for over 20 years now. And traditionally, we’ve built user interface components on top of Microsoft technologies. But about 2-3 years ago, we ventured into JavaScript and specifically jQuery and jQueryUI. And I became the product manager for what is now called Wijmo, which is our complete kit of UI tools for jQuery UI development. We utilize a lot of HTML5 technology and of course JavaScript in that. CHUCK: Right. So do you guys still do the windows technology components? CHRIS: Oh yeah. So you know, we are still selling and supporting ActiveX components. So we pretty much are still supporting really ancient legacy stuff and then also we have to still have innovate and be on the bleeding edge. So yeah, there couldn’t be a broader spectrum here of technology. CHUCK: Sounds like fun. But you’re focused specifically on Wijmo? CHRIS: I am. I also focus on our ASP.Net tools, which actually inherit Wijmo. But yes that’s pretty much my core technology here at ComponentOne. CHUCK: All right. I’m going to get around to the point really quickly for the people who are interested in JavaScript and not necessarily in Microsoft technologies; what we have him here for is we actually going to be talking about some of the SVG stuff that they use and have written in JavaScript. So, but you know, kind of get an idea of what ComponentOne is about and then do you wanna talk about Wijmo a little bit and tell us what’s there and how it works? CHRIS: Yeah sure. I’d love to. So, Wijmo is essentially a kit of user interface widgets built on jQueryUI’s widget factory and what we try to do is create components that can be used to build enterprise applications — you know, CRUD apps, data visualization apps. So we have things like charting, grids, and we also have navigation elements and layout manager, stuff like that. But our core knowledge set is in our charting, our gauges and our grids. So we have what you would expect in a desktop application as far as performance and interaction and feature, we have that in the browser purely written — purely in JavaScript. CHUCK: Nice. So is Wijmo open source? CHRIS: Wijmo has two basically groups of widgets; we have 18 open source widgets that are licensed the same as jQueryUI and jQuery. So its MIT or GPO, whichever you prefer. They are pretty much unrestricted in what you can use them for any project. I’m sure you are all familiar with those licenses. So, those are like the menus, tooltips, tabs, accordions; all the things for putting together a website and layout, stuff like that – a lot of really useful tools. And then the things that are more data centric are in our commercial offering and we licensed that basically per developers, so it’s similar to what you find from Sentia in that respect. CHUCK: Okay. And that’s all built on SVG, right? CHRIS: The charting is all built on SVG. And also the gauges, so we have linear and radio gauges. So all the data visualization components we have are built using some cool SVG libraries. I can give you a little bit more detail on that soon. CHUCK: Okay. Cool. So I guess the next question is, for those that don’t know what it is, what is SVG? CHRIS: SVG is Scalable Vector Graphics. And what that is, is it’s a way of drawing and programming graphics in markup, that defines a vector image. So it’s points and connecting points together; so its polygons and circles and squares and putting these shapes together in such a markup and format, allows you to scale them to any size. So they are very different in raster graphics, where you’re defining pixels and you are drawing each pixel. SVG allows you to create a vector-based graphic that can be scaled down, scaled up. And it’s going to have the same crispness and rendering at any revolution. So it’s a really powerful technology that’s been around a long time actually, and it’s been around longer than HTML5. But it’s just now coming of age in the browser, where they pretty much all support it and there’s some little tricks to getting it to work in all of IE browsers too. CHUCK: Oh wow, so you can actually do it on old IE browsers? CHRIS: You can. SVG actually when it was first proposed, came — or derived I should say — from a spec that Microsoft was working on called “VML”. So, VML is Vector Markup Language, and this spec goes way back I think it predates XHTML2 — I mean it’s been around. And IE6 even implemented VML. So it’s almost the same API, it’s almost the same markup that it supports. So all you really have to do with a couple little tweaks is change the document type — so from SVG to VML. And yeah, you get all those features. So you can even do animation, interaction, of course you can draw vector graphics on it too. So yeah, this technology is something you can use and utilize in modern browsers and really get hardware acceleration but you can still fall back and still work in IE6, which is awesome for a technology like this. CHUCK: Right. That’s interesting. So it makes me wonder a little bit then, can you take something like SVG or VML — you know, whatever the technology is — is it performant enough to like write a game in it? CHRIS: It can be done for you know, I would say maybe something like your pongs and your tetrises –things that are more shape driven and aren’t as point of view stuff where you really need textures things like that — yes totally. This stuff can be very performant, to the point where you can do gaming. What I kind of like to break it down for in its two analogies; SVG to me is kind of like the Legos where you have these blocks, like these shapes and you can actually have them in your hand, they’re physical blocks, there in the DOM, you can inspect them in the browser, see how they look, see how they feel and you can snap them together and basically build things. So they’ve very conducive for things like data visualization, charting, graphing, doing infographics, it’s basically where you’re drawing needs vector based images. But when you get to the point where you’ve really need to draw something with a lot of detail, basically where you need a raster graphic, that’s where I would say you cross over to Canvas. So like, traditionally I would say gaming, mostly you would probably stick to Canvas. And the analogy for Canvas is it’s more like etch a sketch, where you have a drawing API and you have a Canvas and you are just kind of sending your pixels out there on to the Canvas and it’s not as much physical pieces like you have in SVG. So it’s a little bit weird of analogy, but it kind of works if you are trying to understand the two different drawings tools in the browser right now and when to use what. AJ: So I saw a demo; it looked like a mix between the Windows Maze Screensaver and Doom. CHRIS: Oh, yeah yeah. AJ: So did you see that one too? CHRIS: I did see that one. Yeah. AJ: So, in that kind of case, that’s a game there where the whole thing I think is made of SVG, right? CHRIS: It’s SVG. They are loading in some raster graphics in there too. Yeah. AJ: Okay. So what part about that was SVG? Like with the SVG, can you take something and give it a 3D context like that? CHRIS: Yeah. That’s more of like the 2.5D stuff where you are kind of like skewing graphics, you know what I mean and you are faking it, you are not doing like ray tracing and stuff like that, where you would in in traditional 3D environment. So yeah, it can certainly be done — there’s no doubt. But that on is more taking shapes, putting these raster graphics on it of like the walls and the sky and all that, and then skewing them to make the perspective look like it was 3D. You know what I mean? It wasn’t as much as a real 3D environment. So it can be done. It certainly can be done. But what SVG is best suited for I would say is more of the 2D vector graphics that you want to scale on anything. Like a really good example is like icons, you wanna make an icon set that is going to work on a retina display iPad, at the same crispness and rendering that you are going to have on a desktop that’s 72dpi. That’s really where its strength is, not as much in the raster arena. CHUCK: So that kind of brings up a point then, if you are using an icon like that, something that looks great on like high resolution and low resolution, how do you get that into your web page? CHRIS: Yeah so. There is a couple of ways; SVG can be used as an external file, so just like you would create a PNG or a GIF, you can create an SVG file. And that file can be used as an object tag; you can put it right in the page and reference an external file. You can also do inline SVG, and that’s mostly what we work with. So just like what you would create div tag with some elements, you can create an SVG tag and then you can add SVG elements to that SVG tags. So right in the DOM, you can actually build an SVG document. To me, that’s my preferred way of working with it because usually, we’re programmatically creating that based on parameters. So, and then also with external files and stuff, you can do that in CSS. So background images could be SVG. And imagine you are building something responsive that maybe scales, doing an SVG document with a background image that’s scales is very desirable because you can have the same size image as far as bandwidth you are sending across, but it actually will scale to fit whatever you want on the screen. So you compare that to like a PNG or a JPEG, you are going to have like a million pixels versus just a couple K just to get that definition I would call it, which is the SVG doc. So as far as doing inline SVG, the way we do it here is we use a library, and the library is called “Raphaël”. Raphaël is a really handy; it is a drawing API – so, its JavaScript library — and it gives you a common API in the browser to draw SVG or VML graphics. And you don’t have to know which one you are drawing; all l you do is use the same API to draw a circles, to draw polygons. Ad basically, it’s going to do what jQuery does. It’s going to do all the cross browser stuff so you don’t have to worry, you don’t have to write the exceptions in there for old IE and it’s just going to work. And it’s got support for animation, so using all the transforms you can create sets so you can group elements, move them around and then of course you can draw whatever elements you want on the screen. So if you are doing inline SVG and you wanna program SVG into your page, definitely use Raphaël. We totally depend on that for all of our charting and gauges, and it really just helped us a lot in focusing on just programming the data visualization logic and not worrying about cross browser SVG. CHUCK: Yeah I’ve heard a lot of good things about Raphaël. When I was first looking at it though, I was looking for charting library and it seemed like, yeah I went and look at and I’m like, “Well, this looks like something I could use to draw anything.” And you know, it’s not necessarily focused on solving a problem of making a pretty graph. Are there any other considerations you have to make when you are drawing the graphs or other visualizations? CHRIS: Yeah, I mean just becoming familiar with the different APIs. I mean if you are talking specifically about Raphaël, you know, just becoming familiar with it, how to draw with it. There’s some things that we did to extend it. So, what we do is we’ve made a couple of shape functions, so if you find yourself drawing triangles or say a diamond — it’s a polygon. Everything is a polygon there, it’s not a circle. So, what you are doing is drawing those points. If you are doing it over and over, you can create functions that do that. So you could pass in like the size and maybe the style, stuff like that to really easily create these common polygon shapes. That’s definitely something that can save you time. And then other than that, definitely you want to understand transforms and how to do the animations because, if you think about using SVG versus PNG other than the performance you can get out of it, animation is probably one of the biggest features you have. So you have these drawings that you are doing on the surface of the browser where you can animate them and bring them to life. And that’s definitely something that you want to take advantage of because you have it. CHUCK: So basically, you can make your graph get up and Dance across the screen? CHRIS: Yeah. Yeah, sure. And somebody will do that. [Laughter] Yeah its really, you know, that’s one of the benefits is that it’s in the DOM and most of the new browsers are basically just have tweak rendering on that for performance, so it’s hardware accelerated in most cases and you can do some really cool, really fast visualizations, very interactive applications when you start using SVG. CHUCK: So when you say, “It’s in the DOM”, you don’t mean that it’s in the DOM in the sense that you have like one Canvas element and then you just kind of change what’s inside. With SVG, you make it sound like each part of the graphic is its own DOM element. CHRIS: Yeah, yeah exactly. It’s that is the big, huge difference between Canvas and SVG. Yet the Canvas is one element, you can’t expect it in the DOM and see what’s drawn on it. You know what I mean? It’s just basically been painted on and you don’t have access to that when you are debugging and going in and inspecting the DOM in like Firebug and Chrome Developer tools. So, what you can literally do is go to like Wijmo site, open up a sample and you can right click on any of the charts and go to inspect element and you are going to see, the polygon or the ellipse or whatever it is that’s drawn on the surface. You are going to see its X and Y offset, you are going to see its style and you can actually change all those. Just like you would changing the style of a menu or something that you created in a webpage and you can tweak it, you can get it to a point where you really like it, take those same properties and you know, save them. So if you really are looking to debug like you would a normal DOM element, all of those pieces of an SVG document are right there in the DOM browser. CHUCK: So does that mean that you could also attach jQuery events to it? So click events and hover events and stuff? CHRIS: That’s a good question. So, one of the basically I would say… it’s not a downfall, but it’s definitely a hurdle if you want to stick to jQuery. No, it’s SVG and its inner elements are not all supported in jQuery yet. I know it’s something on the radar, but it’s to there yet. So, Raphaël gives you an API for that. It has an events API so yes, you can do hovers, clicks, using the Raphaël syntax. But jQuery itself, no, not yet. And you know, you can also extend Raphaël as well. So like we did an add class feature, we class all of the elements that we put in so that you can access in CSS or JavaScript more easily. So each thing has each chart has a class systems; so you have pie chart, you have like slices as a class and you can access those through CSS. So to do that, we added a little add class, has class and remove class set of functions to be able to do that. And it’s very to do. The shortest jQuery doesn’t yet support it, Raphaël does and you can easily extend Raphaël to add similar things that you’d find in jQuery. CHUCK: That makes sense. Of course I have no class. But that’s a completely different problem. CHRIS: [Chuckles] Yeah you can add class to programmers. We tried it; it just doesn’t work. CHUCK: [Laughs] they either have it or they don’t, right? CHRIS: Yeah. Nor should you. CHUCK: [Chuckles] Alright. I’m just looking over some of the stuff we’ve talked about before because there was so much there. AJ: So there was something that I don’t know if I mentioned before or not. So there’s this image, I’m looking at it right now with a wrench and as you hover over the wrench, it shows in a table a different part of… i’ll send you the link in just a moment. But I’m kind of curious to understand how that works in SVG. So give me just two seconds here. I wanna hand this over to you. CHRIS: So this is a SVG element in a browser that you are looking at? AJ: Yeah so there I pasted the link here. Take a look at that and… CHRIS: Oh, very cool. AJ: …and explain this to me. Because this kind of fits in also with the idea of events in the DOM and what not. How is this thing working? CHRIS: Yeah. Actually I don’t… this doesn’t look to be using Raphaël, no. So this is something that looks like was just basically written in pure SVG itself as a document and it has grouped elements. The groups is a way of kind of… well, it’s a way of grouping. So what you do though is you can add a G element inside an SVG and that is a group. And then anything that you put inside of that is a group. So it’s an easy way of applying events to a group and they will bubble up from all the elements. It’s an easy way of styling; also you can style groups. So what’s happening here is they have the wrench pieces are on a group and it looks like they are adding some handlers – event handlers – which are basically JavaScript. And what they are doing is highlighting a row and what looks like a table, it’s not a real table but it’s a drawn table in SVG. So it looks like an HTML table, but it’s not. And I think… are they in the same group? Like the table row maybe in the same group as the piece that it’s correlated to. I’m not sure. I can’t quite tel. But basically that’s it. So basically, this is a really cool example of what you can do in SVG alone. So there’s really no outside forces working on this as far as a bunch of script written or anything in the page. This is an SVG document that has interaction programed within itself. AJ: I actually just opened this up here and it does have a script tag in it. But interestingly enough, it’s marked as “ECMAScript” rather than “JavaScript”. CHRIS: Yes. Yes. Yeah I mean, I think you could do the same with JavaScript here. AJ: Well yeah I mean, JavaScript is ECMAScript but it’s interesting that I don’t know, is that something you have to do in SVG if you use script, you have to call it ECMAScript instead of calling it JavaScript? You know? CHRIS: no, I don’t know I think if you just change the Ecma to JavaScript, it should still work. I don’t know, I’m going to defer that to the browser vendor’s panel. — has been silent the whole time. AJ: Because they don’t wanna get in the same room with us. CHUCK: [Laughs] AJ: Because then coherent standards would happen and that’s just not how they roll. CHRIS: They are just quietly observing here as panelists, aren’t they? They really… AJ: Just making sure that if we say anything intelligent, they do the opposite. CHUCK: There you go. CHRIS: Yes. Yeah, so I don’t know the answer to that. I mean, we can try it. [Chuckles] CHUCK: Speaking of silent panelists, Joachim just joined us. CHRIS: Oh, welcome. CHUCK: So, yeah anyway sorry to interrupt. But yeah, heaven forbid the standards are doing anything intelligent. AJ: So I had another couple of questions for you. This one is just kind of out in the blue. But how does SVG relate to fonts? CHRIS: Umm… AJ: Because fonts are like Scalable Vector Format, right? CHRIS: Yes, they are. AJ: So how does font and SVG similar and how they differ? CHRIS: Well, I mean you know, obviously a font can only represent characters like in text, right? I mean that’s a given. AJ: Well but there’s like Unicode fonts like the steaming pile of poo for example is one of the latest ratified Unicode fonts. CHRIS: Yes. But again, you have to have the character right in the mark up in order to get that. So in some sense, you can only represent something that is a character that are Unicode character that a  browser supports. And sure you can make a custom font, but I promise you that it’s easier to just draw a vector graphic than it is to write your own font — for most developers I would say. AJ: Like on Android, like a year ago, you had to use SVG in order to do fonts in a webpage. Like the format you save your font as was SVG and now the format you are supposed to use is like WOFF, I think Web Open Font Format? CHRIS: Yeah. So I mean, I guess the SVG they are using there was just a way of defining a vector font face. I don’t know honestly. But the weird thing is that SVG itself, like inline SVG, wasn’t supporting the Android then. So that was a little backwards. But yeah I don’t know the differences technically and what Android was doing there, but I imagine yeah you were just defining the font characters in SVG. And I mean, they each had their purpose and there’s people doing the icon font faces now, which is definitely cool stuff. So yeah, they had their uses for sure. I would say that you are going to get a lot further with SVG though in most cases, but yeah, the font stuff has its place. CHUCK: So you mentioned — and I’m going to kind off in a tangent here real quick — when you mentioned SVG in the mobile browsers like in Android, is SVG supported across the board in mobile browsers? CHRIS: No it’s not, unfortunately. It’s pretty solid. The real exception in mobile browsers is Android browsers older than  like the latest and greatest release. Is it Ice Cream Sandwich? CHUCK: I think so. CHRIS: Ice Cream Sandwich is the latest. So, that has a SVG support finally, which is awesome. So like anyone that goes out and gets a new Android OS will have it, but you know, how many people are out there with you know, Ginger Bread and who knows what version of Android that you have to figure out how to support that. And you can’t do VML, you can’t do SVG, but you can do Canvas. So there are some little libraries out there; Fabric.js is one. And that lets you interrupt between Canvas and SVG. So there’s an API for basically parsing an SVG document and drawing it on the Canvas so it basically translates it into how you will draw it in the Canvas. Obviously, once it’s drawn in the Canvas, it’s no longer scalable. But if you are looking to do something like take SVG you have already built, and just make it work on an Android, that is a way of doing it. CHUCK: Wow. How big can you really scale on an Android anyway, right? CHRIS: Yeah that’s true. The scalability, I mean, it’s not that big of a deal once you’ve drawn it. But for you know, generically building applications, the scalabilities is nice. I’ve seen some people start experimenting with like whole app frameworks in SVG, which is pretty crazy like if you would think about something like what Flex or Silverlight have done you know, where they are essentially SVG on steroids in a plugin, right? It’s just all vector drawing that you do and they have a control concept and stuff like that. But that’s just all sitting on top of a vector drawing plugin. That’s all they really are. So essentially, it was some JavaScript and you know, the SVG you could build like a framework like that where you have interface components and it’s all drawn in SVG. So there’s some crazy people out there doing that, which is really cool stuff. I don’t know that that’s necessarily personally, just because the HTML is much better suited for a lot of that, but I can see it. I can see that would be pretty neat for building an app framework there. But you know, that’s edge case. CHUCK: So what’s the coolest thing that you’ve seen done with SVG in the browser? CHRIS: Oh man, Wijmo clearly. [Laughter] CHUCK: Oh, of course. What am I thinking? AJ: While we are on that topic, so there’s something we talked about last time when we did this that I wanted to bring up again like the importance of good visualization, right? Because we talked about the Challenger Explosion and how that was caused by poor visualization tools. CHRIS: Yes. Yeah. The question was, “What makes good data visualization?” And my answer was, “Good developers make good data visualizations.” And what I found just working with a lot of customers —  myself included — of Wijmo and how you are building data visualizations with your bare hands and the tools that we provide. The key is to understand the data and understand what value you can portray with the data. And a perfect scenario of data visualization going wrong was the Challenger Explosion. So there was a report given to the people deciding whether the temperature outside was okay to launch at, so taking into account basically the Fahrenheit outdoors, what the safe area is and what the ratio is for failure at different temperature levels. And the visualization did not represent the data well, in that it didn’t show the most prone temperature first. And I think it grouped them chronologically, so you had to look through all these things chronologically to find incidents of mechanical failure and then you had to figure out what temperature that that failure happened at. So that it really was just not thought out of what you are trying to represent and the message that you are trying to convey with data. And you know what happened was that caused people’s lives. So it’s a very dramatic story, but it’s a perfect example of you have to really sit down and think about what you are trying to portray with your data visualization before you just go and throw your data in a chart. You know what I mean? It’s something that a lot of I think developers don’t really think through. And of course not all developers have and you know, the business analysts or someone that has that knowledge. So we kind of have to take it on to ourselves to really understand the business behind the data before we can do good data visualizations. AJ: And I don’t know if we mentioned this last show or somebody else was showing me, but there’s also one of the news channels had a pie chart where it showed like Obama had a 60% approval rating and… who’s the woman from Alaska that had like… Palin, yeah. Palin had also like a 60% approval rating and somebody adds that up to 50% approval rating. So the pie chart adds up to like a 160% or 170%. CHRIS: Yeah that’s like I would say any news coverage of politics is classic example of bad visualizations. But here is the gotcha; so the Challenger Explosion was just a case of poor data visualization, in a sense that whoever built it didn’t really understand the purpose of it. CHUCK: It wasn’t on purpose. CHRIS: it wasn’t on purpose but you have bad data visualization that can be a very evil and useful tool. People can take data visualization and use it for evil — and people do. And when I say that, I mean they can take data and do things like omission of data, do things like manipulating the axises and that can give you a very different visualization than what the actual reality is. You know, so a pie chart that adds up to more than 100% is a very good example of that. AJ: My favorite example is the original Pentium4 versus Pentium3 chart in like one of those tech magazines. So it shows like the performance and so the Pentium 4 is running at like 1.2GHz and the Pentium 3 is running at like 800MHz and then they capped the charts so that there’s a little squiggly. And so, it looks like performance-wise, the Pentium 4 is like way above. But then when you zoom out, the 800MHz Pentium3 is like 10% less powerful than the 1.2GHz Pentium 4. CHUCK: All right. So you set your minimum so that it looks like the Pentium 3 is like at the rock bottom of the chart. AJ: Yeah and really it’s 400MHz faster and it only has 100MHz game. CHUCK: Right. CHRIS: Yeah. You can do all kinds of stuff. There is a blog I can link to that kind of finds these just the blatant bad visualizations or evil visualizations and kind of calls them out and actually they always look up the data that it was based on, and almost always, it’s like government data that’s public, so that you can get it. And usually, whatever bureau is publishing it, they actually publish the real chart with it too. [Chuckles] So you can literally compare them and see how blatantly bad they are. CHUCK: [Laughs] CHRIS: It’s very amusing stuff. So beware. I mean your visualization could be costing people jobs or causing people to make bad decisions. Just keep that in mind you know, it’s so easy to misconstrue data in those visualization. CHUCK: So, if I’m using a tool like Wijmo, what kinds of things should I be doing to make my data visualizations better? Assuming I’m not this malicious person trying to tell my own story. CHRIS: I mean, just the most common stuff is keeping eye on the axises to make sure A. you are not skewing the data by having too wide of a range; and then B. make sure that if there’s a difference, make sure that it’s very clear what the scale of that difference is. So let’s say we are looking at like page views or something for two different websites. And we’ll say the website A has 300,000 page views/day and website B has 400,000 page views/day. So that’s a huge difference. You know, 100,000 in a day, that’s very significant. But let’s say that when we are drawing our y axis labels, let’s say we start the bottom at zero and the top at one million. When you draw those, they are both going to be about a third of the way up, and they are almost going to be on top of each other, right? So you are barely going to see a difference between the two and you are going to say, “Oh they look like they are pretty even,” you know, that they are both at this roughly the same page views a day because you are not going to see that there’s 100,000 page view difference a day. So what you would do then is start the low-end, it maybe 200,000 and high end like at like 500,000 and then you’d get the picture of just how big of a difference it is between the two. So, watching the axes very important thing to do. If you are doing day time stuff, definitely make sure that like in a timeline scenario along the X-axis you wanna make sure that it’s very clear, like you wanna make sure that’s spaced out either chronologically so that there was a gap there or make sure that there’s labels there and some kind of indicator that you’ve omitted some kind of time and this is in a linear timeline. So that’s another one that can be very misleading. And you will see that in a lot of the political ones too; that’s very common. So I would say that the biggest thing is to watch your axises and make sure you are very clearly indicating differences between your series and then also time is another big thing to make sure you are conveying properly. Because usually what people do is they’ll look at the first one or two labels and they will make an assumption that the rest are like that. So you just be aware of that. CHUCK: Right. That’s one thing that I always think is interesting is that people, when they are pulling these numbers together, they will actually like yank out the stuff doesn’t say what they wanted to say because its “statistically irrelevant”. CHRIS: Oh, yeah. CHUCK: “This person’s an anomaly because he likes the other party”, yeah. CHRIS: That’s tough but, are you going to do. That’s the reality, so just be aware. CHUCK: Well cool, we are really right on track with where we want to be. We have another five minutes or so before we need to get into the picks. Is there anything else that we should know about SVG that we didn’t think to ask? CHRIS: I’m trying to think of the previous recording and like I think we covered most of the same big topics. Yeah, I think we’ve covered it. My biggest, biggest point would just be go out and try SVG. I just hope that everyone understands that it’s probably one for the greatest tools you can use now for doing graphics. And any time you are going to draw icons, anytime you are doing something that might need to be drawn on a mobile site different than it will on a desktop site, consider SVG; anytime you’re doing visualizations, consider using SVG instead of just saving and outputting a PNG or something like that. Of course, we’d love for you to try Wijmo but I hope you try SVG in general. Keep an eye on it, play around with it. Here is something we didn’t touch on; if you’ve really would like to get started quickly in using Raphaël, there is a website that is for converting an SVG drawing into the JavaScript, what you would need to draw it with Raphaël. So that’s just awesome. So you can open up Illustrator or anything and start drawing shapes on there and you can save the file as SVG. Then what you do is to upload to this website and it’s going to give you back the Raphaël script that it would take to draw that. So that’s a really nice way of saying, “Oh, here’s what I want to draw and then here it is in SVG markup and then if I go upload it to this site, I can see what programmatically it would look like when I’m drawing it.” Obviously, you can tweak the programming but you’ll get that kind of conversion path and you’ll understand which way it goes and you know, vice versa. If you draw something in Raphaël in the browser, you can actually right click on most SVG elements in most browsers and save that as an SVG graphic. So you can save it to your desktop. So when we were doing these charts and gauge development, what I would do is I would kind of get it to a decent point. I would save it to SVG, send it off to our designer, he would open it up in Illustrator or whatever tool, tweak it to his liking, send it back to me and I would be consume that and make modifications where I needed it to. So it’s really nice way to sending SVG back and forth between different developers, designers and understanding how it goes from SVG to the JavaScript programming in Raphaël and vice versa. CHUCK: That’s really cool. JOACHIM: I came a little in the community late to the party, but I was wondering, could you recommend any learning resources and how did you yourself come to learn about SVG? CHRIS: I’m not an expert. Let me make that very clear. [Laughs] But I do love SVG. I would say I’m like an SVG fan boy if anything. It’s very under-utilized, I think. I first came across it… my gosh… I would say like 2005-ish maybe, just screwing around with different stuff in a design and seeing some… I think I maybe saw blog post where somebody was experimenting with it from the W3C, one of the SVG guys there and I just thought it was such a cool thing to be able to do in the browser. And a lot of companies have been using that VML stuff for things like mapping for a long time. So I saw some other cool stuff there in mapping. They were using that in like IE6 and doing some crazy desktop version of IE6 in their desktop apps that use SVG. So that’s kind of where I got the taste for it. Honestly, a lot of learning it was just by getting into the markup and seeing what did what. There’s not any resources off the top of my head that I can recommend and other than Raphaël and the documentation and samples there. Definitely check that out, but that’s geared more towards programming it in JavaScript. If you go to W3C’s SVG site, you are going to see a lot of samples. There’s like the classic quintessential SVG sample which is the roaring tiger. I’m sure you’ve seen it. That one is fun. They just inspect it and see what’s going on how you build it. Again just opening up in a text editor and changing stuff and seeing what happens. And it’s not hard to understand once you start playing around with it and messing with it. It’s just like HTML. It is, in a sense. So I can’t give you any resources, I could look some up and maybe link them, but for the most part, it’s just experimenting; that’s how I came about it. JOACHIM: Fair enough. Cool. CHUCK: So one other question I have that just kind of occurred to me; what instances do you think Canvas maybe a good fit, that SVG isn’t? CHRIS: Definitely, 3D gaming; you should be using like webGL for that and looking at Canvas. Definitely, raster drawing; so working with photography and stuff like that. There some gotchas in general but, I would say that’s the key. Any time you wanna do raster stuff like… and I would consider most gaming as in games I’m familiar with and play is texture-based, raster-based where you are doing a lot of drawing in pixel by pixel, you are ray tracing and stuff like that, definitely Canvas there. I think that’s probably it. I wanna say kind of like things that are live and hooked up to like constantly changing data. But it’s not really true because like we have like streaming charts we made like using websockets like against it, like literally your like live drawing from the server. So you can do that in SVG. The difference is that you are redrawing the whole document versus just you know, with Canvas you can just draw whatever pixels you want on there. So I wanna say that, but I don’t because you can do both. So for the most part, when you are working with raster stuff, gaming mostly, do Canvas. And when you want just like SVG icons, drawing charts, visualizations, things like that check out SVG. CHUCK: All right. Cool. Well, let’s go ahead and get into the picks. AJ, what are your picks? AJ: My pick is most assuredly Chris’s profile pic. CHRIS: Oh, nice. We are going to have to link that I think if you are going to pick that, I might have to send you guys a link to that one. It’s bad. That one, just to explain, we were doing like  photo-shoot just because somebody needed a picture or article for something and we just turned into a total joke, so we pull out blue steel magnum and they ended up, the communications go here sending one of those so it’s now all over the web. CHUCK: Right. Any other picks, AJ? AJ: You know, I wish I can remember what I talked about last week. But I did finish reading catching fire just last night, out of the Hunger Games series. And I think that book was actually more engaging than the first. Once you get past like first couple of chapters, because there’s a lot of repeat info from the first book, which I think is really annoying. I like this style where they just take you into the story and they’ll tell you all the back story as you go. But when you’ve read the first book, and the second book’s first couples of chapters are recap of the first, it’s like… but other than that, very engaging. Loved it. CHUCK: All right. Cool. Joachim, do you have some picks for us? JOACHIM: Yeah I do. I had some really, funny and interesting ones last week that I’m not really in the funny mood this week. So instead, I’m going to give a shout out to Google Wallet. Because I don’t do banking stuff, I got burned by PayPal [chuckles]. But what happened was I saw a link in my Gmail account about I can call phones and stuff like that. You know, click on that and then I was like, “Oh, I can put in some money there and call cheaply.” And then I had to set up my debit card with Google Wallet and my address is in Thailand, and there’s this whole thing with dropdowns and it was a horrible and I tried it like 3 times like my account got blocked. And you know, I kind of resigned myself to never being able to use Google Wallet again because I was not going to scan 50,000 documents and send it to them. And I sent an email to them and said, “Hey, I got this problem and maybe you guys should fix how addresses are in or entered.” And I got an email back 3 days later and they said, “We looked at account and your account is active, and you debit card is now connected.” Which is, you know, I’ve never seen a service like that before from any payment merchant. Awesome. CHUCK: Nice. JOACHIM: Could’ve just fixed it, you now? Normally, they don’t fix that. They don’t like want you to kind of… you need push through these barriers where you can go higher and higher up until you get someone that can actually make a decision. And here apparently, to figure out like how to do that from themselves which is awesome. CHUCK: Nice. Awesome. Any other picks? JOACHIM: I’ve got a link for JSFiddle, which might be useful. It’s JSFiddle for using Raphaël, which we’ll be linking to. That’s it. CHUCK: All right. I’ll go ahead and go next. So I’m also not goigng to pick what I picked last time. I was listening to Geek Beat. I don’t know if you guys follow their videos at all, but I think some were interesting and I really enjoy them. They do cover a lot of interesting tech stuff and they have a lot of cool tech toys that they talk about there. So, Geek Beat is one of my picks. And then the other one is one that I found off of Geek Beat, and this is Google Maps Cube Game. And you can get them at playmapscube.com. Anyway, I played it for a little while and then I decided that I didn’t have time to play it, but it was a nice reprieve from writing talks for conferences. So, i’ll put a link to that in the show notes. Basically, it just follows your mouse around and it’s sort of like pinball I guess and so you are trying to figure how you get this ball to roll to the different points in the different cities that you’re in. And one of the is actually in the mall, and so you are rolling through the map of the mall. Anyway, it’s really cool. So go check it out. And those are my picks. So Chris, what are your picks? CHRIS: I have a couple from last week I’m going to stick with, but I think the music I’ve been listening to is Bass Drum of Death and I’ve just killed their album, so I’d love them to put out a new one. That would be awesome. They only have one album, but it’s really good music when you are just heads down and just wanna write some code. It’s awesome. That’s my pick for some good developing music. There’s a book that I just finished called Directive 51. I mean the book was pretty good, but it was more of like how it made me think in every day now about my role in the world. And the book was about basically these terrorists take down technology in the whole world. They have this nano that just eats away a computer chip, so anything at all that had any computer electronics in it just was destroyed and eaten away. So it just makes you think like in the world, what you do, like what you do that isn’t with technology and what isn’t worth working with information that’s not physical. It’s really neat because all the bankers and the people were highest paid and the most valued in society became the lowest because they didn’t have any physical skills where they can sit down and build something like a house. Things like that. So it was really interesting if you are technology worker to read it and think about the world and how dependent we are on this stuff and you know, it’s a mazing stuff but it is so like it’s crazy to think about. So I highly recommend that. The Inventing on Principle talk by Bret Victor is another pick. I won’t even talk too much about it, just Google that, watch the video, and I’m sure we’ll link it. It’s just so inspiring and so awesome to watch. And my last pick is urban chicken farming. And since I last talked to you guys, I went to my mother in law’s school where they were hatching chicks, rescued a baby chick that was trapped in an egg and we have since adopted it and we have named it Douglas. So we now have a chicken living at our house and I’ve found it that there’s apparently a trend called “urban chicken farming” that is happening right now in the US. So that’s my picks. JOACHIM: Was it housebroken? CHRIS: No. They had to be like outside. He’s like tiny though, so he’s in our house and he is in a little cage. Really, he’s like a cute little fluff ball right now, but he’ll be a big ugly chicken pretty soon I think, and he’ll be in the backyard. JOACHIM: I find that ducks are a little bit more charismatic. CHRIS: Oh, yeah definitely. They have more attitude though. Ducks will come at you. CHUCK: [Laughs] JOACHIM: I actually have a chicken here, because I live in Thailand. I live out in a middle of nowhere in Thailand, so we have one chicken that we like have here and it’s… I don’t know, its lacking personality. CHRIS: So what’s life like with a chicken? I need to be prepared for this. JOACHIM: They cannot be housebroken or at least I have not managed to housebroken any of them. So you know, there are things we walk around and leave stuff for you to step in. And you know, they lose their feathers. They have dust. They have like a dry skin or something like that. They are do made for eating that’s their best use. CHUCK: [Laughs]. CHRIS: Yeah I figured. One day Douglas might have to be a delicious meal. JOACHIM: But all babies are cute when they are small, that’s the problem you know? CHRIS: Oh, I know. CHUCK: You might rename it to “dinner” huh? JOACHIM: …even when they are big. CHRIS: Yeah. CHUCK: Yeah I have several neighbors here — and we are not in the middle of nowhere — that have chickens in their backyards and you know, and they keep them for the eggs and stuff. I’m not that brave. I would forget to feed them and they would die. Anyway, let’s go ahead and wrap this up. Thanks again for coming, Chris. CHRIS: Sure guys. I really, I had a blast. Thanks for having me.

x