SVG Charts and Graphics with Ruby

by Starr Horne

In the presentation "SVG Charts and Graphics with Ruby" at RailsConf 2015, Starr Horne discusses how to create visuals and charts using SVG and Ruby, challenging the common belief that JavaScript is necessary for such tasks.

Key Points:

- Introduction to Speaker and Topic: Starr Horne, working with Honeybadger, introduces the idea that simple charts and graphics can be created using SVG rather than heavy JavaScript libraries.

- What is SVG?: Horne explains that SVG (Scalable Vector Graphics) is based on XML and allows the creation of graphics that scale without losing quality, countering the limitations of raster images that become blurry when scaled.

- Historical Context: The speaker shares a history of SVG's development since 1999, mentioning that while expected technological advancements were delayed, SVG has emerged as a favorable web standard.

- Benefits of SVG: SVG graphics maintain sharpness across different display resolutions, making them ideal for various applications, including logos, animations, and interactive data visualizations.

- Comparison with JavaScript Libraries: Highlighting the efficiency of using SVG directly, Horne points out that D3.js, a popular JavaScript library for visualizations, requires substantial file sizes, whereas SVG offers simpler, direct methods.

- Creating SVG: The speaker discusses how SVG can be embedded directly in HTML, allowing for easy manipulation through CSS and JavaScript. Examples include creating bar charts, line charts, and area charts using appropriate SVG tags.

- Interactivity in SVG: By treating SVG components like HTML elements, Horne showcases how interactivity can be added to charts, enhancing user engagement.

- Advanced Chart Types: Techniques for creating more complex visuals like donut charts are covered, emphasizing SVG's flexibility and ability to represent data effectively.

- Learning and Challenges: Horne encourages experimentation with SVG while noting some limitations, such as issues with word wrapping and a lack of comprehensive documentation.

- Conclusion and Encouragement: The presentation concludes with Horne urging participants to explore SVG's capabilities in web development, highlighting its fun and beneficial aspects for creating dynamic visuals.

The main takeaway is that SVG is a powerful tool for crafting graphics and charts without the need for cumbersome JavaScript libraries, offering simplicity and scalability.

Overall, the talk is an insightful exploration of SVG's potential in the context of modern web development, providing both technical guidance and practical examples.

00:00:11.620 So in case you guys don't know me, my name is Starr Horne. I work for Honeybadger, where we do exception monitoring and uptime monitoring. Today, we're going to be talking about SVG charts and graphics in Ruby.

00:00:18.980 I was excited to give this talk because many people tend to think that the only way to add interesting charts and visualizations to web applications is via JavaScript. However, that's not the case. You don't need a 900 kB JavaScript library to generate simple charts. Instead, you can use SVG and Ruby.

00:00:32.780 SVG is actually quite simple. There's really no reason why we can't manipulate it ourselves in Ruby. There's nothing magical about SVG, despite how a lot of developers view it as a complicated black box.

00:00:40.550 To truly appreciate this, we need to look back at its history. SVG is one of the most amazing technological comebacks of all time in the realm of web standards. If we rewind to 1999, which is when SVG came around, XML had just been invented, and people thought it would save the world. It was an era when tools and technologies such as KDE were emerging.

00:01:06.409 However, I can't help but feel disappointed with how the web has turned out since then. I thought by now, I'd be browsing the web in 3D using VRML, interacting with a birthday cake and a creepy rabbit. Instead, I'm still looking at text, and I thought we'd be using XSLT for all that.

00:01:17.870 Fortunately, one of the standards, SVG, is making a comeback. For those who don't know, SVG stands for Scalable Vector Graphics. The big difference between SVG and raster graphics is that raster images are made up of pixels. When you scale a 10x10 raster image by two, to a 1,000 by 1,000, it will look terrible.

00:01:31.310 On the other hand, vector images are constructed using mathematical equations, so they don't have fixed pixel dimensions. You can scale them up or down, and that flexibility is crucial today. The manufacturers of computer monitors have been advancing rapidly, offering devices like Retina MacBook Pros and 4K monitors, which significantly impacts web development.

00:01:52.130 Previously, I could export a logo from Photoshop, and it would look decent on most screens. Now, however, viewing that same logo on a Retina screen can result in a blurry image. The typical solution of doubling the resolution creates files twice the size, which becomes problematic for mobile networks.

00:02:10.399 SVG addresses this issue because it makes logos, images, and graphics look sharp regardless of the screen resolution. For instance, the RailsConf logo is an SVG file available for download on their website. Unfortunately, Keynote does not support SVG, so I had to use a PNG screenshot instead.

00:02:30.740 In addition to logos, you can use SVG for animations, games, and visualizations—an area where D3.js excels. If you haven't explored D3.js, I highly recommend checking out its demos. It allows for an incredible variety of visualizations, such as plotting the spread of a zombie virus across the U.S.!

00:02:51.509 D3.js serves as the backbone for many graphing frameworks. For example, Rikshaw uses D3.js for the heavy lifting, and at Honeybadger, we use simple sparklines to convey information like memory usage and CPU load in our user interface.

00:03:10.909 I often go through our front-end code looking for places to reduce JavaScript file sizes, and I noticed that D3.js code, when minified, is about 100 kilobytes. That code can produce complex visualizations, but I realized that generating SVG directly might offer more efficiency.

00:03:32.070 Thus, I decided to explore how SVG is generated. SVG is just XML, so I questioned why I couldn't build it using Ruby.

00:03:44.780 To use SVG in your web applications, the easiest method is to refer to it as an image, allowing you to utilize caching. However, doing so prevents you from manipulating the graphics with JavaScript or CSS since it's an external resource.

00:04:02.120 A better approach would be to embed the SVG directly into your HTML. This way, you can leverage CSS and JavaScript for real-time manipulation. SVG tags and HTML tags are relatively similar in structure.

00:04:24.210 For example, to create a circle in SVG, you use the <circle> tag with attributes like radius and center point, formatted as XML. In addition to circles, SVG supports ellipses, squares, lines, and paths, among others.

00:04:38.590 SVG also allows the embedding of raster images, which can be referred to externally or embedded as base64. You can apply filters and effects, replicating many image manipulation functions you'd find in software like Photoshop.

00:05:06.519 SVG elements operate similarly to HTML elements, meaning you can assign classes and IDs to them, applying CSS for style adjustments. Attributes differ slightly, so instead of 'border,' you use 'outline,' and instead of 'color,' you use 'stroke' and 'fill.'

00:05:21.929 Using JavaScript, you can manipulate SVG elements just like DOM elements, allowing for dynamic interaction within your web applications.

00:05:43.199 For example, while freelancing, I worked with a client who wanted an online flyer creator. Designers would create templates in Illustrator and export them as SVG to be imported into our web app, where users could customize these templates.

00:06:06.560 SVG can also be utilized for sprite sheets, offering advantages over font icons. Unlike font icons, which don't represent the shapes meaningfully, SVG allows you to define and style shapes with CSS.

00:06:18.820 Now that I've explained the basics of SVG, let’s discuss charts. The charts we use at Honeybadger inspired this talk.

00:06:25.439 We'll start by building a simple bar chart. Bar charts are straightforward, consisting of several rectangles next to one another. For instance, if we draw three rectangles with heights of 50, 75, and 100, we can visualize our data.

00:06:44.639 The original representation may look unattractive or upside-down because SVG, like most computer graphics, has its origin in the top-left corner, whereas many standard charts place the origin at the bottom left.

00:07:02.210 To remedy this, you can add some styling with stroke width and fill attributes, resulting in a more visually appealing bar chart. Next, let’s consider interactivity.

00:07:21.050 For interactivity, I often treat SVG as if it were HTML. For example, when a user hovers over a bar, we can display its value.

00:07:37.030 By using the <g> tag, which stands for 'group,' I can combine a rectangle and text. I can set the text opacity to zero by default, and make it visible upon hovering over the group.

00:07:51.679 While this may not be the prettiest implementation, it lays the groundwork for a functional and interactive chart.

00:08:00.660 Now let’s move on to line charts, which introduce the path tag. The path tag is more complex than the basic shapes like circles and rectangles because it requires a 'd' attribute that contains drawing commands.

00:08:20.960 For example, we move to coordinate (0,10) without drawing anything, then draw lines to subsequent coordinates. This creates a simple line chart.

00:08:38.110 To transform this into an area chart, I need to draw another path that fills the area beneath the line. I just take care to close it, with the 'Z' command marking the end.

00:09:01.240 To enhance the chart further, dots can be added to indicate data points, simply by using the <circle> tag.

00:09:23.250 You can style these elements using attributes similar to those used previously and make the visualization as detailed as desired.

00:09:32.920 The math involved in creating these charts is relatively straightforward. The key steps are converting raw data into a usable graph space and positioning the values appropriately.

00:09:45.580 For instance, if you have raw data points, you might convert them into a scale from 0 to 100 for percentage display. Using a scale and an invert function assists in getting the proper placements.

00:10:10.140 Now let's up our game and create donut charts. Donut charts consist of two paths, typically one colored and one gray.

00:10:33.480 The paths' D attributes guide the drawing of arcs, which are crucial to creating donut shapes. You will see the radius specified, and various flags indicate the direction of the arcs.

00:10:50.050 If you'd like, you can further adjust the math to ensure the chart behaves like a clock, where zero begins at the top, enhancing the visual representation.

00:11:10.010 SVG is powerful, offering various transformation capabilities. You can set colors and dynamically adjust your charts. Issues like polar coordinates can be expressed through percentages for measurement.

00:11:27.980 When implementing SVG in Ruby, it works similarly to HTML, which makes it relatively simple. You can use builders, HTML, or construct SVG standalone files.

00:11:45.070 Utilizing string concatenation is another option, allowing more straightforward SVG creation without worrying about complex scripts.

00:12:04.830 I encourage you to play around with SVG to discover its possibilities. It's a fun tool that can enhance your front-end development significantly.

00:12:22.760 However, SVG does have some limitations. The most glaring issue is a lack of word wrapping and multi-line text support, which is a hindrance for web developers.

00:12:34.920 Additionally, comprehensive documentation can be hard to find. Often, specification pages provide more complexity than necessary.

00:12:50.080 Older versions of Internet Explorer might not support SVG, and while IE 9 handles it reasonably well, expect quirkiness compared to modern browsers.

00:13:05.560 If you're looking for resources to learn SVG, there's a commendable book published by Microsoft that might be of interest.

00:13:12.250 Thank you for being here! If you’re interested in learning more, I often post on my blog and share updates on Twitter.

00:13:36.030 Now, does anyone have any questions?

00:13:45.240 As for building SVG, when I started, I found it easiest to use a text editor and load the files in Chrome to see the visual changes.

00:14:02.440 You can also export SVG from Illustrator, tweak it, and understand how it works by editing the hex code directly.

00:14:09.900 Regarding unit measurements in SVG, many dimensions are expressed in pixels, but because SVG is scalable, it often assumes relative measurements based on viewboxes.

00:14:19.450 If you receive large SVG files from designers, you might want to inspect the SVG in a text editor. You can remove unnecessary elements and embedded images that increase the file size.

00:14:30.680 To maintain efficiency, you can also serve your SVG as compressed files, which might alleviate size concerns.

00:14:49.130 SVG performance largely depends on the complexity of the graphics and the hardware being used to view them.

00:15:05.960 When comparing SVG to raster images, SVG tends to perform better on larger scales. As the pixels size grows, SVG often yields smaller file sizes.

00:15:22.130 Lastly, SVG can be made dynamically responsive—changed in real-time based on user data. Libraries such as Snap.js or D3.js facilitate this functionality.

00:15:35.870 If there are no other questions, thank you for your attention! I hope you feel inspired to explore SVG.