Posted by & filed under Content - Highlights and Reviews, Programming & Development.

code A guest post by John Williams, a web developer who has worked for media, education, and government organizations for seventeen years. For the last seven, he has been working for NewCity in Blacksburg, VA, assisting with several data visualization projects in bioinformatics. He can be found on Twitter @thudfactor. If you are at the Fluent conference, be sure to listen to John’s D3 talk today, March 11th.

Labels are a critical part of any data visualization, and formatting labels deserves a lot of attention. Unfortunately, SVG itself doesn’t do us any many favors in that department. Yes, there are a lot of text formatting options. And you can do impressive layouts with text. But you pretty much have to do it manually. That’s a shame, since we already have an excellent text layout engine built in the browser. If only we could use HTML to make labels inside SVG elements.

It turns out you can as long as you’re okay with giving IE a less-rich experience. But first, let’s look at an example using SVG text elements: http://jsfiddle.net/thudfactor/LL3gU/.

That’s a simple bar chart, with labels centered in each bar. That layout is a bit tricky because of the way SVG handles text. Let’s look:

By default, SVG places text anchors at the left edge of the text and in the vertical middle. To center the label and push it in the bar, you have to monkey a bit with the x and y values and use a couple of SVG-specific CSS rules to jockey it in place. See how we’re adding 50% of the bar width to x just to center the text? That’s the kind of thing I’m talking about. Sure, it’s doable, but throw in tags and word-wrapping and you’ll find yourself well down the path of re-building the browser.

Fortunately, SVG has the foreignObject element, which lets you embed XHTML (and other XML-based languages) inside SVG. Here’s a full example: http://jsfiddle.net/thudfactor/QPg7h/.

Take a closer look at the labels section. First, you bind your data to the foreignObject and tell D3 to append foreignObjects for each item in the enter() selection, just as you would any other SVG element.

In addition to setting the foreignObject‘s position on the canvas, you also have to set height and width so the browser knows what it has to work with. Here, I’ve chosen to make the foreignObject the same height and width as the bar.

Next, you tell D3 you’re changing namespaces by adding a namespaced body tag to each foreignObject:

Once that’s done, everything else is typical D3 to create the labels, and some style rules targeting HTML to make everything look neat.

Conclusion

Looks good, and it works in most modern browsers with the exception of IE. There is a way to cater to IE, though, using the SVG switch element. Here’s a fiddle that displays basic labels on IE: http://jsfiddle.net/thudfactor/bK6VD/.

Look below for some great D3.js books from Safari Books Online.

Not a subscriber? Sign up for a free trial.

Safari Books Online has the content you need

Interactive Data Visualization for the Web shows you how to create and publish your own interactive data visualization projects on the Web – even if you have little or no experience with data visualization or web development. It’s easy and fun with this practical, hands-on introduction. Author Scott Murray teaches you the fundamental concepts and methods of D3, a JavaScript library that lets you express data visually in a web browser.
Developing a D3.js Edge D3 is a powerful framework for producing interactive data visualizations. Many examples created in the real world with D3, however, can best be described as “spaghetti code.” So, if you are interested in using D3 in a reusable and modular way, which is of course in line with modern development practices, then this book is for you!
Data Visualization with d3.js walks you through 20 examples. You can finally stop struggling to piece together examples you’ve found online. With this book, you will learn enough of the core concepts to conceive of and build your own visualizations from scratch.
It begins with the basics of putting lines on the screen, and builds on this foundation all the way to creating interactive animated visualizations using d3.js layouts.
Visual Storytelling with D3: An Introduction to Data Visualization in JavaScript provides readers with a strong framework of principles for making well-conceived and well-crafted infographics, as well as detailed and practical instructions for how to really wield D3, the best tool for making web infographics available. An extended example is used in the book to explain how to put theory to practical use.

Tags: D3, D3.js, html, Labels, SVG,

Comments are closed.