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

codeA guest post by Peter Le Bek. He tweets at @_lebek and writes code at github.com/lebek.

In this short introduction to using D3.js with Polymer, we’re going to build a custom HTML element that contains a sparkline for a given stock symbol. Custom elements are used just like any other HTML element.

Here’s an example of a D3.js+Polymer sparkline component <stock-sparkline symbol="MSFT"></stock-sparkline> inline with text.

And this is the result:

figure_1

Historical stock data is fetched from the Yahoo! Finance API at runtime.

Custom Elements

Custom Elements enable you to add to the standard set of HTML elements with your own elements. There are a number of libraries out there for building custom elements: Polymer, AngularJS and Ember.js. Polymer’s interesting because it emulates the Web Components standard that will soon be available natively in the browser.

Setup

The code for this post is available on github. stock-history.js contains a simple function, fetchStockHistory(), which fetches historical stock data from Yahoo via AJAX.

Defining a Custom Element

To define a custom element, begin by including Polymer, D3.js and stock-history.js.

Now let’s define a custom element:

On the first line we give the element a name and list its attributes:

Polymer conveniently allows us to define styles, templates, and JavaScript for an element all in one place. The template contains the <svg> element we’ll be drawing in:

The symbols enclosed in curly braces are bound to variables defined in JavaScript. Anything updated in JavaScript will be updated in the template. For example, lastClose, which represents the most recent closing price of the stock, is unknown until after the AJAX call returns.

The sparkline() function contains standard D3.js code, so we’ll assume it’s familiar to you. The interesting part comes next:

This code sets up the variables referenced in the template. It also binds to the element’s ready event. After the element has loaded, this event fires and we fetch the stock history for the given symbol. We update lastClose so it’s available to the template, and we draw the sparkline using the data.

Conclusion

Hopefully you’ve seen enough to appreciate the power of being able to define every aspect of a D3.js visualization (CSS/HTML/JS) in one place. By packaging it all up in a custom element we hide the complexity and give designers or other non-technical members of the team ability to leverage this code.

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

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!
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.
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: AngularJS, D3, D3.js, Ember.js, Polymer, Reusable D3, sparkline, stock, Yahoo! Finance,

One Response to “Building Reusable D3.js Elements with Polymer”

  1. The Armadillo

    So how would you modify this to include multiple stocks on the same page?