Interactive SVG Charts With D3 – Part 2

D3
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

D3

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

thumbnail

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!

Find programming resources through Pineapple

menu barSoftware screen capturePineapple.io is a brand-new programmer-focused site that is a mash-up of existing concepts:

  1. An alternative to “google tutorial {programming problem}
  2. A replacement for crusty web browser bookmarks
  3. A new reddit-style source for procrastination and community link-sharing, but one more edifying than r/bronies

And though its individual parts are little more than attractively-executed clones of existing systems, the whole has potential.  I see myself using it both to discover new ideas I hadn’t thought to search for previously, and to find resources for my immediate coding problems.

The site divides content by tags as well as by three color-coded categories: tutorials, tools, and assets.  See its about page and its FAQ for more.

How is this site different than Reddit or Digg?

Pineapple is a place to submit things you LEARN from, usually in the form of tutorials. In addition, we allow you to submit things that make your workflow easier, whether thats a tool, asset, or some other resource. Here are a few examples of what you might find here:

  • A beginner’s guide to using Emacs
  • A sprite generator, downloadable app for CSS images
  • How to set up ruby on rails with nginx and unicorn
  • How to use layer comps in Photoshop CS6