SVG Charts and Graphics with Ruby

Conclusion:

Starr Horne concludes by encouraging attendees to harness the power of SVG in Ruby applications for efficient and visually appealing graphics while acknowledging the pitfalls and complexities of working with SVG. Users can access example codes in Horne’s GitHub repository to experiment with their implementations.

00:00:08.960 Hello, everyone. Today, we’re going to be talking about SVG charts and graphics in Ruby.

00:00:23.199 SVG, or Scalable Vector Graphics, is one of the big comeback stories in the tech world. SVG started out back in 1999, quite some time ago, before the burst of the dot-com bubble. Back then, XML had been invented a couple of years prior. At the time, if you walked into a bookstore and purchased a copy of XML Magazine, you might have been led to believe that XML was the greatest invention in the history of mankind. I certainly was! However, I must admit that I'm somewhat disappointed with how things turned out, as I expected to be browsing the web in 3D using the power of VRML by now.

00:00:54.480 I pictured a world where, for simple text-based pages, we would be utilizing XSLT, because who needs HTML when XSLT can do so much more? And for graphics, SVG should be the go-to choice. Thankfully, this vision is gradually becoming a reality; SVG is indeed making a comeback. But what is SVG, and why is it so important now?

00:01:21.760 As I mentioned, SVG stands for Scalable Vector Graphics. Now, I know most of you are familiar with this, but for those watching at home, let’s go through it. Raster graphics, like JPEGs and GIFs, are made up of pixels. If you take a 10-pixel by 10-pixel image and enlarge it to 1000 by 1000 pixels, it looks terrible unless you happen to be watching CSI: Miami! In contrast, vector images, like those created using SVG, do not suffer from this issue because they are defined mathematically. You can scale them up and down without losing quality.

00:01:49.920 The increasing importance of SVG is driven by manufacturers of display devices. These makers predictably increase pixel density, which means screens have been growing exponentially sharper in their resolution. Just recently, I got a 4K monitor, and while it's made images appear sharper, it also presents challenges for web developers like us. Specifically, we have to ensure our graphics and logos look good on a variety of screens.

00:02:08.640 In the past, I would export a PNG from Photoshop, upload it to the web, and the assurance was that it would look consistently good on every monitor. But those days are gone! If I use the standard resolution for my logo, it often appears fuzzy on retina or other high-resolution displays, since they scale images and often end up looking blurry around the edges.

00:02:37.840 That's when SVG comes into the picture. Star’s First Rule of Web Design is: you have to make your logo look good! SVG does exactly that. It's not just for logos though; it's also fantastic for illustrations. For instance, there's a great JavaScript library called Snap, which can be used to create impressive animations. If you want to add an engaging intro page to your website or craft any animations, Snap can be a wonderful choice.

00:03:12.000 In addition to that, D3.js is an extremely powerful library in the graphing industry, allowing for fantastic visualizations. You can create visual representations for various data sets, such as the outbreak of measles across the United States or create complex interconnected charts. D3 does amazing work, and many other charting libraries, like Rickshaw, rely heavily on its foundational layout.

00:03:40.000 Here’s an interesting nugget: have you ever looked at some code and thought to yourself how badly it was written, only to check the version control system and realize you were the one who wrote it? That's essentially my life! I had no knowledge of SVG at that time, but I suspected that the charts must be relatively simple to design—how complex could it possibly be? So, I decided to explore the SVG code using the web inspector in Chrome.

00:04:01.520 What I found was eye-opening. For instance, the amount of JavaScript used to create some simple SVG graphics was astonishing. The entire library was roughly 100k minified, which seemed excessive for just a few lines of SVG code! This sparked my curiosity: could we create these graphics more efficiently using Ruby? So, the first question on my mind was, what does SVG even look like?

00:04:35.600 SVG generally resembles XML or HTML. The fantastic aspect is that you can directly embed it into your web pages without the need for a doctype declaration. There are a couple of ways to include SVG in your applications. The simplest method is treating it like an image, using an <img> tag, or you could even use it as a background image, which can be quite handy.

00:05:01.760 Another method is by using the <object> tag, which offers a fallback mechanism and allows JavaScript manipulation. However, this option does have limitations. If you want maximum flexibility, the best approach is directly embedding the SVG markup into your HTML. This way, you can manipulate it using your CSS and JavaScript just as you would with any HTML element.

00:05:25.760 Now let's take a closer look at SVG with some examples. In SVG, you describe shapes rather than text. You can create circles and ellipses using designated tags. For ellipses, there are two radii to keep track of, which can be a little daunting at first, especially if you had trouble with them in math class!

00:05:50.560 But don't worry! SVG supports various shapes—rectangles come with incredible rounding options for their corners, and paths allow you to connect lines together freely. You can also embed and manipulate raster images within SVG.

00:06:19.760 What’s exciting is that, within the browser, SVG functions much like HTML. You can assign IDs and classes to SVG elements, and then use CSS selectors to style them. You even have the ability to interact with them using jQuery or vanilla JavaScript.

00:06:42.640 This opens up a vast range of possibilities! For example, if you want to personalize items, like postcards for your users—each one with custom text or images—you can load an SVG file into the browser, manipulate it, and then use tools like PhantomJS to export it into PDF format.

00:07:02.080 So, now that you’ve all become SVG experts, it’s time to delve into creating charts. We’ll create three types: a bar chart, a line chart, and a donut chart.

00:07:14.560 Starting with the bar chart, the concept is simple—it's basically just a set of rectangles aligned next to each other. Each rectangle will represent a value, and I’ve chosen three heights: 50%, 75%, and 100%.

00:07:35.760 But we’ve hit a snag; this chart is upside down! In SVG, the origin point is the top left of the canvas. Therefore, to get our bars aligned correctly, we must position them relative to their maximum height.

00:08:05.760 To achieve this, we set the 'y' value of each rectangle to the maximum height minus the height of the rectangle itself. This process might seem a bit awkward at first, but once you get a hang of it, it becomes intuitive!

00:08:31.040 The resulting chart can look a bit bare, so we can style it with CSS. For instance, we’ll add a stroke to separate the bars visually. In SVG, instead of using CSS attributes like 'background' or 'border', we use 'stroke' for the borders and 'fill' to color the shapes.

00:08:51.920 To add interactivity, let's display the value of each bar when hovered over. I'm going to add code to show the values at the bottom of each bar using the <text> element, grouped with the <g> element, allowing for organized structural relations.

00:09:13.760 Next, when implemented, I’ll hide these values by default and reveal them on hover with a transition for a smoother presentation. This will ensure our bar charts are both functional and visually appealing.

00:09:29.800 Next up, we have line charts. In this case, we'll introduce the <path> element, which can include various segments like lines, arcs, and curves, making it incredibly versatile for drawing complex shapes.

00:09:52.560 The 'd' attribute for the <path> element contains a list of instructions. You can imagine these instructions as commands given to a person holding a pencil. At first, we tell it where to move and plot points based on our data.

00:10:17.760 We'll also add fill to create a visually appealing area beneath the line, thereby enhancing the overall chart presentation. The specifics, such as adding points to the line chart—represented as circles—are similarly simple.

00:10:41.520 The math involved in creating charts often resembles basic programming rather than complex mathematics. Creating a chart can be distilled into a simple three-step process: taking raw data, scaling it to a defined range, and finally mapping that scaled data onto pixel values.

00:11:06.080 So now that we have two types of charts completed, let’s tackle the last one: the donut chart. It’s not as complicated as it sounds, consisting of two paths—one for the data representation and the other to serve as a decorative background.

00:11:32.400 To begin, we’ll assign commands to create the outer path, draw circular arcs according to specific radii, and close the path after finishing the outer shape. Afterward, similar commands are applied to create the inner radius.

00:11:53.840 It's worth noting that while drawing, we’ve noticed a slight rotation issue with how our donut chart displays. However, we can easily rectify this with a transform command, applying a simple rotation to the entire chart.

00:12:23.600 Next, we can enhance the visual appeal by adding a CSS background and drawing the second path, which serves as the primary visual cue for our chart data.

00:12:50.000 While handling circles and arcs mathematically can appear daunting because of their floating-point values, the concept can be simplified when considering them in terms of polar coordinates, as this allows for easier visual interpretation into Cartesian coordinates.

00:13:14.960 When working with JSON and Ruby, we typically create a minimal implementation. I have outlined basic examples in my GitHub repo for those interested, but I would advise caution, as this code could undergo changes.

00:13:32.960 Before wrapping things up, let’s reflect on the journey of preparing this talk. It seems putting together a presentation is about what gets left out. Yet the process typically presents challenges—let’s call them 'dragons'—that you must navigate thoughtfully.

00:13:57.360 One major 'dragon' arises when dealing with SVG: it isn't suited for substantial blocks of text to be rendered. SVG does not replace HTML in this regard. However, there are alternatives, like embedding HTML directly into your SVG, depending on the browser's compatibility. Alternatively, you could also utilize JavaScript to create word-wrapping and centering functions.

00:14:21.760 Another tricky concept can be the SVG coordinate system. While it’s true that it simplifies layout in many cases, once you start manipulating them, it can become confusing, especially if you don't have a solid understanding of how to approach transformations.

00:14:44.800 The resources available for SVG aren’t as abundant as those for HTML. SVG standards date back to 2000, and though improvements are slowly being made over time, many developers still find themselves consulting and experimenting heavily to find answers.

00:15:05.760 For those eager to learn more about SVG implementation, I highly recommend picking up a valuable resource. While I didn’t author the book myself, it is available and well-regarded, even being published by Microsoft.

00:15:27.360 In closing, thank you for being here and engaging with my presentation on SVG charts and graphics in Ruby. I hope you found this information helpful!

SVG Charts and Graphics with Ruby

MountainWest RubyConf 2015