Interactive SVG Charts With D3 – Part 2

Adding tool-tips to an interactive chart.

Adding tool-tips to an interactive chart.

This is Part 2 of a three part tutorial exploring building interactive charts with D3. Part 1 can be found here.

Other blog posts which can be used as introductory material to this series:

This tutorial is Part 2 in a multi-part tutorial exploring interactive SVG charts. We will pick up where we left off in Part 1 by adding tool-tips to each data point in the chart which become activated when a mouse hovers over a point. (more…)

Bootstrap Radio Buttons as DataTable Filters

bootstrap image

This is the first of a series of tutorials on using Bootstrap radio buttons in the wild to filter real datasets in concert with other commonly-used UI components like DataTables and jQuery UI.

Part 1: Converting a classic input radio to the Bootstrap label

Photo by Dawid Zawiła on UnsplashFiltering tables of data is the central task of many a business web-app. DataTables are searchable by default, but records often beg to be batch-filtered into several status modes like: current | archived | all.

Bootstrap Radio Buttons provide a nice, clean look, but many developers shy away from them due to unfamiliarity with their CSS label-based class manipulation and/or compatibility issues with other component libraries like jQuery UI.

Bootstrap checkbox and radio btn-groups work ‘out of the box’, but the simple activation of a default button decouples active button highlighting from the input tag checked state. In this case, the active label class must be handled manually, but the docs don’t explain how, so a stack-overflow of posts for dev-help ensues. (more…)

Interactive SVG Charts With D3 – Part 1



This is my fourth blog post in a series on using D3. Previous posts include:

This tutorial is Part 1 in a multi-part tutorial exploring interactive SVG charts. Herein we will explore zooming in on detail within a chart and, indirectly, how one might organize their charting code in a single javascript object.

We’ll progress over a series of “slides,” each showing an active SVG element with narrative text describing the key points of the slide, along with the javascript code that generated the SVG. As this is a tutorial on user interaction with SVG, you get to play along as we go.

This tutorial is a single-page app requiring a modern browser (tested on recent chrome, firefox, IE). Because this tutorial explores zooming, you will need to be using a computer with a wheel mouse. This tutorial can be run live in your browser at the wonderful site. If so inclined, you can also clone the tutorial from gist and run it locally on your computer.

Regardless of how you view the tutorial, you can leave comments about it here.


Payment Processing with Braintree

CC-BY licensed, via

You’ve built the web application of the century, and the users have rightly flooded to it. Cat pictures for everyone!

But alas, while your users indulge in cat-induced bliss, the cold hard reality of server costs cannot help but harsh your mellow. What is to be done?

Maybe, you could get the users to… pay for access to your incredible web application in all its multivarious splendour?

Braintree is a payment processor (now a subsidiary of PayPal), which boasts of a "simple, robust way to accept payments", and with features like a drop-in payment ui and libraries for various programming languages enabling fairly easy integration, is a solid choice for accepting payments via credit card or PayPal.

While Braintree’s developer documentation is blessedly detailed, it’s possessed of a potentially confusing bevy of options, and its various implementation examples are spread out amongst a number of pages and platforms. So today, rather than reiterate any particular section of the docs, we’re going to take a look at an end-to-end example of a specific, straightforward scenario – accepting and processing a one-time, immediately settled payment in a web application.


Configuring Backbone.Model Properties With Less Code

Elephant backs, Photo by Alan Jones

My previous post demonstrated the use of Object.defineProperty to programmatically add a list of properties to an ES6 class, such as a Backbone.Model subclass, reducing the amount of boilerplate code necessary. The example in that post added simple getters and setters, but it’s possible to go further for Backbone.Model properties, also configuring in a single data structure functionality like:

  • Options for properties, such as disabled setters
  • Default values for properties
  • Mappings for parsing date strings and model relationships

This technique uses a common base class from which all other model classes descend. The model subclasses (e.g. a user model) provide a list of property definitions, which centralize various aspects of those properties. The base class has configuration methods which iterate over the property definition objects.

In the particular examples below, the base configuration methods handle attribute to property name mapping, default values, and server data parsing, but this technique can be applied to other configurable property-related tasks, such as marking some properties blacklisted or viewable only by admins.