1991-2016—25 years of Art & Logic

Interactive SVG Charts With D3 – Part 2

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…)

Interactive SVG Charts With D3 – Part 1

Interactive SVG Charts With D3 – Part 1

thumbnail

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 bl.ocks.org 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.

Enjoy!

D3: Getting Interactive With Your SVG Elements

D3: Getting Interactive With Your SVG Elements

In my previous two articles about D3, I wrote about what D3 is (and is not) and data binding. This month we’ll begin exploring user interaction with elements on a SVG canvas.

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 requring a modern browser (tested on recent chrome, firefox, IE). This tutorial can be run live in your browser at the wonderful bl.ocks.org 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.

Enjoy!

D3: Binding Data

Introduction

In my previous article, Meet D3: Data Driven Documents, I discussed my experience learning D3, in particular, discovering what D3 is not: it is not, strictly speaking, a SVG library. You will not find a function in the library to draw a circle or rectangle. Instead, you use its powerful selections interface to manipulate the DOM.

For example, assuming the DOM contains this element:

        <svg id="mychart"></svg>

If we want to add a green circle with radius 10px at point (100,100), there is no draw-a-circle function in D3. Instead we do this:

        d3.select('#mychart')
            .append('circle')
            .attr('cx', 100)
            .attr('cy', 100)
            .attr('r', 10)
            .attr('fill', 'green');

After the above, the DOM will look like this:

        <svg id="mychart">
          <circle cx="100" cy="100" r="10" fill="green"></circle>
        </svg>

What I found confusing (and countless questions on the internets suggest I was not alone) was all the functions in the D3 library under the d3.svg namespace. What do you mean d3.svg.line doesn’t draw a line? It isn’t until you fully grok D3’s powerful data binding paradigm that those functions begin to make sense.

(more…)

Meet D3: Data Driven Documents

Meet D3: Data Driven Documents

Introduction

There are many tutorials on the web to get one started using D3. Links to some of these works will follow later in this article. While they are all wonderful (and I thank each author for getting me over the steep D3 learning curve), most of these tutorials assume you know what D3 is, know you want to use it, and jump into the heart of D3 (data joins), which is kind of mind blowing and hard to wrap your head around.

Being on the flip-side of the learning curve, I look back at these tutorials and understand why the learning curve was so steep: D3 is not what you think it is (i.e, it’s not an SVG library), but is exactly as its name implies, a tool to drive data through your documents. D3’s heart is a mechanism to bind data to the DOM, including tools for handling deltas in a changing stream of data, which makes it a powerful tool for managing, in particular, visualizations. And that means dynamic, interactive SVG.

But even now I’m getting ahead of myself. I’m going to start from the beginning…

(more…)