Archive for the ‘D3’ Category

D3 in Depth

Saturday, August 27th, 2016

D3 in Depth by Peter Cook.

From the introduction:

D3 is an open source JavaScript library for:

  • data-driven manipulation of the Document Object Model (DOM)
  • working with data and shapes
  • laying out visual elements for linear, hierarchical, network and geographic data
  • enabling smooth transitions between user interface (UI) states
  • enabling effective user interaction

Let’s unpick these one by one.

Peter forgets to mention, there will be illustrations:


Same data as a packed circle:


Same data as a treemap:


The first two chapters are up and I’m waiting for more!


PS: Follow Peter at: @animateddata.

D3 4.0.0

Tuesday, June 28th, 2016

Mike Bostock tweets:

After 12+ months and ~4,878 commits, I am excited to announce the release of D3 4.0! … #d3js

After looking at the highlights page on Github, I couldn’t in good conscience omit any of it:

D3 is now modular, composed of many small libraries that you can also use independently. Each library has its own repo and release cycle for faster development. The modular approach also improves the process for custom bundles and plugins.

There are a lot of improvements in 4.0: there were about as many commits in 4.0 as in all prior versions of D3. Some changes make D3 easier to learn and use, such as immutable selections. But there are lots of new features, too! These are covered in detail in the release notes; here are a few highlights.

Colors, Interpolators and Scales

Shapes and Layouts

Selections, Transitions, Easings and Timers

Even More!

Don’t complain to me that you are bored over the Fourth of July weekend in the United States.

Downloads:, Source code (zip), Source code (tar.gz).

SVGs beyond mere shapes

Tuesday, April 26th, 2016

SVGs beyond mere shapes by Nadieh Bremer

From the post:

I was exhilarated (and honored) to have my talk accepted for OpenVis 2016. Yesterday April 25th, 2016, I was on the stage of the Simons IMAX Theatre in Boston’s New England Aquarium to inspire the audience with some dataviz eye candy. My talk was titled SVGs beyond mere shapes:

SVG can do much more than create nice shapes and paths. In my talk I discuss several techniques and demonstrate how to implement them in D3: from dynamic gradients based on data, to SVG filters, to creating glow, gooey, and fuzzy effects that brighten up any visual.

My eventual goal was to give people a whole bunch of effective or fun examples but to also show them that, even if I focus on a subject as narrow as SVG gradient and filters, if you try to experiment and use things in an unconventional manner you can create some very interesting results. I hope I’ve managed to inspire the audience to show a dedication to the details, to go beyond the norm, so they have to make as few concessions to the computer as possible to recreate the image that they have in their mind.

I’ve received so many wonderful reactions, it was really an amazing experience and well worth the time invested and the nerves I’ve had building up inside of me since hearing I’d been accepted last November 🙂

Are you ready to take SVG beyond shapes?

The start of a series so check back often and/or follow @NadiehBremer.

World Flag Map (D3.js)

Thursday, February 25th, 2016

D3.js Boetti by sepinielli

For those who believe in national borders:


D3.js is powerful enough to portray self-serving fictions.

Source code included.

I first saw this in a tweet by Christophe Viau.

networkD3: D3 JavaScript Network Graphs from R

Monday, February 15th, 2016

networkD3: D3 JavaScript Network Graphs from R by Christopher Gandrud, JJ Allaire, & Kent Russell.

From the post:

This is a port of Christopher Gandrud’s R package d3Network for creating D3 network graphs to the htmlwidgets framework. The htmlwidgets framework greatly simplifies the package’s syntax for exporting the graphs, improves integration with RStudio’s Viewer Pane, RMarkdown, and Shiny web apps. See below for examples.

It currently supports three types of network graphs:

I haven’t compared this to GraphViz but the Sankey diagram option is impressive!

Introducing d3-scale

Sunday, January 24th, 2016

Introducing d3-scale by Mike Bostock.

From the post:

I’d like D3 to become the standard library of data visualization: not just a tool you use directly to visualize data by writing code, but also a suite of tools that underpin more powerful software.

To this end, D3 espouses abstractions that are useful for any visualization application and rejects the tyranny of charts.

…(emphasis in original)

Quoting from both Leland Wilkinson (The Grammar of Graphics) and Jacques Bertin (Semiology of Graphics, Mike says D3 should be used for ordinal and categorical dimensions, in addition to real numbers.

Much as been done to expand the capabilities of D3 but it remains up to you to expand the usage of D3 in new and innovative ways.

I suspect you can already duplicate the images (most of them anyway) from the Semiology of Graphics, for example, but that isn’t the same as choosing a graphic and scale that will present information usefully to a user.

Much is left to be done but Mike has given D3 a push in the right direction.

Will you be pushing along side him?

D3 Maps without the Dirty Work

Monday, December 21st, 2015

D3 Maps without the Dirty Work by

From the post:

For those like me who aren’t approaching mapping in D3 with a GIS background in tow, you may find the propretary goe data structures hard to handle. Thankfully, Scott Murray lays out a simple process in his most recent course through By the time you are through reading this post you’ll have the guide post needed from mapping any of the data sets found on Natural Earths website in D3.

First in a series of posts on D3 rendering for maps. Layers of D3 renderings is coming up next.


d3.compose [Charts as Devices of Persuasion]

Friday, December 11th, 2015


Another essential but low-level data science skill, data-driven visualizations!

From the webpage:


Create small and sharp charts/components that do one thing one well (e.g. Bars, Lines, Legend, Axis, etc.) and compose them to create complex visualizations.

d3.compose works great with your existing charts (even those from other libraries) and it is simple to extend/customize the built-in charts and components.

Automatic Layout

When creating complex charts with D3.js and d3.chart, laying out and sizing parts of the chart are often manual processes.
With d3.compose, this process is automatic:

  • Automatically size and position components
  • Layer components and charts by z-index
  • Responsive by default, with automatic scaling

Why d3.compose?

  • Customizable: d3.compose makes it easy to extend, layout, and refine charts/components
  • Reusable: By breaking down visualizations into focused charts and components, you can quickly reconfigure and reuse your code
  • Integrated: It’s straightforward to use your existing charts or charts from other libraries with d3.compose to create just the chart you’re looking for

Don’t ask me why but users/executives are impressed by even simple charts.

(shrugs) I have always assumed that people use charts to avoid revealing the underlying data and what they did to it before making the chart.

That’s not very charitable but I have never been disappointed in assuming either incompetence and/or malice in chart preparation.

People prepare charts because they are selling you a point of view. It may be a “truthful” point of view, at least in their minds but it is still an instrument of persuasion.

Use well-constructed charts to persuade others to your point of view and be on guard for the use of charts to persuade you. Both of those principles will serve you well as a data scientist.

Introduction to d3.js [including maps!]

Friday, September 18th, 2015

Introduction to d3.js with Mike Taptich.

From part one of a two-part introduction to d3.js:

Don’t know Javascript? No problem.

This two-part introduction to d3.js is intended for beginners, even those with limited exposure to JavaScript — the language used by web browsers. Regardless of your background, I put together a few examples to get everyone (re)oriented to coding in the browser.

Sounds like your typical introduction to …. type tutorial until you reach:

My Coding Philosophy

Now, I am a firm believer in coding with a purpose. When you are first starting off learning JavaScript, you may want to learn everything there is to learn about the language (broad). I suggest that you instead only pick up the pieces of code you need in order to complete some bigger project (narrow). To give you a glimpse of what you could do in d3, check out Mike Bostock’s github repo here or Christopher Viau’s well-curated repository here.

You don’t know at that point but Part 2 is going to focus on maps and displaying data on maps! Some simple examples and some not quite so simple.

D3.js will do a lot of things but you can get a tangible result for many use cases by mapping data to maps.

Some random examples:

  • Where in your city have the police shot civilians?
  • Are there any neighborhoods where no one has been shot by the police?
  • Restaurants by ethnic cuisine.
  • Pothole incidence rates.
  • Frequency of police patrols.

This rocks!

I first saw this in a tweet by Christophe Viau.


Saturday, July 18th, 2015


From the webpage:

These code examples accompany the O’Reilly video course “Intermediate d3.js: Charts, Layouts, and Maps”.

This video is preceded by the introductory video course “An Introduction to d3.js: From Scattered to Scatterplot”. I recommend watching and working through that course before attempting this one.

Some of these examples are adapted from the sample code files for Interactive Data Visualization for the Web (O’Reilly, March 2013).

If you have been looking to step up your d3 skills, here’s the opportunity to do so!


Eye Candy: Spiral Triangle

Thursday, April 16th, 2015


Mike Bostock unpacked this impossible gif.

See Spiral Triangle for all its moving glory and code.

Combining the power of R and D3.js

Monday, April 6th, 2015

Combining the power of R and D3.js by Andries Van Humbeeck.

From the post:

According to wikipedia, the amount of unstructured data might account for more than 70%-80% of all data in organisations. Because everyone wants to find hidden treasures in these mountains of information, new tools for processing, analyzing and visualizing data are being developed continually. This post focuses on data processing with R and visualization with the D3 JavaScript library.

Great post with fully worked examples of using R with D3.js to create interactive graphics.

Unfortunate that it uses the phrase “immutable images.” A more useful dichotomy is static versus interactive. And it lowers the number of false positives for anyone searching on “immutable.”


I first saw this in a tweet by Christophe Lalanne.

Interactive Data Visualization for the Web

Wednesday, January 14th, 2015

Interactive Data Visualization for the Web by Scott Murray.

From the webpage:

This online version of Interactive Data Visualization for the Web includes 44 examples that will show you how to best represent your interactive data. For instance, you’ll learn how to create this simple force layout with 10 nodes and 12 edges. Click and drag the nodes below to see the diagram react.

When you follow the link to the O’Reilly site, just ignore the eBook pricing and go directly to “read online.”

Much crisper than the early version I mention at: Interactive Data Visualization for the Web [D3].

I first saw this in a tweet by Kirk Borne.

Who’s like Tatum?

Tuesday, January 13th, 2015

Who’s like Tatum? by Peter Cook.


Only a small part of the jazz musical universe that awaits you at “Who’s Like Tatum?

The description at the site reads:

Who’s like Tatum?

Art Tatum was one of the greatest jazz pianists ever. His extraordinary command of the piano was legendary and was rarely surpassed.

This is a network generated from‘s similar artist data. Using Art Tatum as a starting point, I’ve recursively gathered similar artists.

The visualisation reveals some interesting clusters. To the bottom-right of Art Tatum is a cluster of be-bop musicians including Miles Davis, Charlie Parker and Thelonious Monk.

Meanwhile to the top-left of Tatum is a cluster of swing bands/musicians featuring the likes of Count Basie, Benny Goodman and a couple of Tatum’s contemporary pianists Fats Waller and Teddy Wilson. Not surprisingly we see Duke Ellington spanning the gap between these swing and be-bop musicians.

If we work counter-clockwise we can observe clusters of vocalists (e.g. Mel Tormé and Anita O’Day), country artists (e.g. Hank Williams and Loretta Lynn) and blues artists (e.g. Son House and T-Bone Walker).

It’s interesting to spot artists who span different genres such as Big Joe Turner who has links to both swing and blues artists. Might this help explain his early involvement in rock and roll?

Do explore the network yourself and see what insights you can unearth. (Can’t read the labels? Use your browser’s zoom controls!)

Designed and developed by Peter Cook. Data from the API enquired with pylast. Network layout using D3.

At the site, mousing over the name of an artist in the description pops up their label in the graph.

As interesting as such graphs can be, what I always wonder about is the measure used for “similarity?” Or were multiple dimensions used to measure similarity?

I can enjoy and explore such a presentation but I can’t engage in a discussion with the author or anyone else about how similar or dissimilar any artist was or along what dimensions. It isn’t that those subjects are missing, but they are unrepresented so there is no place to record my input.

One of the advantages of topic maps being that you can choose which subjects you will represent and which ones you want. Which of course means anyone following you in the same topic map can add the subjects they want to discuss as well.

For a graph such as this one, represented as a topic map, I could add subjects to represent the base(s) for similarity and comments by others on the similarity or lack thereof of particular artists. Other subjects?

Or to put it more generally, how do you merge different graphs?

Developing a D3.js Edge

Wednesday, December 31st, 2014

Developing a D3.js Edge by Chris Viau, Andrew Thornton, Ger Hobbelt, and Roland Dunn. (book)

From the description:

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!

This book is aimed at intermediate developers, so to get the most from this book you need to know some JavaScript, and you should have experience creating graphics using D3. You will also want to have a good debugger handy (Chrome Developer panel or the Firefox/Firebug combo), to help you step through the many real world examples that you’ll find in this book. You should also be somewhat comfortable with any of these concepts:

If you read Kurt Cagle’s Ten Trends in Data Science 2015, you will recall him saying that 2014: “…demand for good data visualizers went from tepid to white hot” with the anticipation the same will be true for 2015.

Do note the qualifier “good.” That implies to me more than being able to use the stock charts and tools that you find in many low-end data tools.

Unlike the graphic capabilities of low-end data tools, D3 is limited more by your imagination than any practical limit to D3.

So, dust off your imagination and add D3 to your tool belt for data visualization.

PS: All the source code is here:

Cartographer: Interactive Maps for Data Exploration

Thursday, December 25th, 2014

Cartographer: Interactive Maps for Data Exploration by Lincoln Mullen.

From the webpage:

Cartographer provides interactive maps in R Markdown documents or at the R console. These maps are suitable for data exploration. This package is an R wrapper around Elijah Meeks’s d3-carto-map and d3.js, using htmlwidgets for R.

Cartographer is under very early development.

Data visualization enthusiasts should consider the screen shot used to illustrate use of the software.

What geographic assumptions are “cooked” in that display? Or are they?

Screenshot makes me think data “exploration” is quite misleading. As though data contains insights that are simply awaiting our arrival. On the contrary, we manipulate data until we create one or more patterns of interest to us.

Patterns of non-interest to us are called noise, gibberish, etc. That is to say there are no meaningful patterns aside from us choosing patterns as meaningful.

If data “exploration” is iffy, then so are data “mining” and data “visualization.” All three imply there is something inherent in the data to be found, mined or visualized. But, apart from us, those “somethings” are never manifest and two different people can find different “somethings” in the same data.

The different “somethings” implies to me that users of data play a creative role in finding, mining or visualizing data. A role that adds something to the data that wasn’t present before. I don’t know of a phrase that captures the creative interaction between a person and data. Do you?

In this particular case, the “cooked” in data isn’t quite that subtle. When I say “United States,” I don’t make a habit of including parts of Canada and a large portion of Mexico in that idea.

Map displays often have adjacent countries displayed for context but in this mapping, data values are assigned to points outside of the United State proper. Were the data values constructed on a different geographic basis than the designation of “United States?”

Spark, D3, data visualization and Super Cow Powers

Wednesday, November 26th, 2014

Spark, D3, data visualization and Super Cow Powers by Mateusz Fedoryszak.

From the post:

Did you know that the amount of milk given by a cow depends on the number of days since its last calving? A plot of this correlation is called a lactation curve. Read on to find out how do we use Apache Spark and D3 to find out how much milk we can expect on a particular day.

lactation chart

There are things that except for a client’s request, I have never been curious about. 😉

How are you using Spark?

I first saw this in a tweet by Anna Pawlicka

emeeks’s blocks

Tuesday, November 18th, 2014

emeeks’s blocks by Mike Bostock.

From the about page:

This is a simple viewer for code examples hosted on GitHub Gist. Code up an example using Gist, and then point people here to view the example and the source code, live!

The main source code for your example should be named index.html. You can also include a using Markdown, and a thumbnail.png for preview. The index.html can use relative links to other files in your Gist; you can also use absolute links to shared files, such as D3, jQuery and Leaflet.

Rather remarkable page that includes a large number of examples from D3.js in Action.

The Big List of D3.js Examples (Approx. 2500 Examples)

Monday, October 13th, 2014

The Big List of D3.js Examples by Christophe Viau.

The interactive version has 2523 examples, whereas the numbered list has 1897 examples, as of 13 October 2014.

There is a rudimentary index of the examples. That’s an observation, not a compliant. Effective indexing of the examples would be a real challenge to the art of indexing.

The current index uses chart type, a rather open ended category. The subject matter of the chart would be another way to index. Indexing by the D3 techniques used would be useful. Data that is being combined with other data?

Effective access to the techniques and data represented by this collection would be awesome!

Give it some thought.

I first saw this in a tweet by Michael McGuffin.

Introduction to Graphing with D3.js

Monday, October 13th, 2014

Introduction to Graphing with D3.js by Jan Milosh.

From the post:

D3.js ( stands for Data-Driven Documents, a JavaScript library for data visualization. It was created by Mike Bostock, based on his PhD studies in the Stanford University data visualization program. Mike now works at the New York Times who sponsors his open source work.

D3 was designed for more than just graphs and charts. It’s also capable of presenting maps, networks, and ordered lists. It was created for the efficient manipulation of documents based on data.

This demonstration will focus on creating a simple scatter plot.

If you are not already using D3 for graphics, Jan’s post is an easy introduction with additional references to take you further.


I first saw this in a tweet by Christophe Viau.

Creating Custom D3 Directives in AngularJS

Wednesday, August 13th, 2014

Creating Custom D3 Directives in AngularJS by Steven Hall.

From the post:

Among the most popular frameworks for making interactive data visualizations with D3 is AngularJS. Along with some great tools for code organization, Angular’s use of directives can be a powerful way to implement interactive charts and keep your code clean and organized. Here we are going to look at a simple example that creates a service that pulls data from using their public API. The returned data will be used to update two interactive charts created using Angular directives.

As usual in these tutorials the code is kept to a minimum to keep things clear and to the point. The code written for this example weighs in at about 250 lines of JavaScript and the results are pretty cool. The example uses D3’s enter, update, and exit selections to illustrate how thinking about object constancy when transitioning from one state to another can be really powerful for communicating relationships in the data that may be hard to spot otherwise.

I think the example presented here is a good one because it brings up a lot of the common concerns when developing using AngularJS (and in JavaScript in general really) with just a short amount of code.    

We’ll touch on all the following concerns:

  • Avoiding global variables
  • Creating data services
  • Dependency injection
  • Broadcasting events
  • Scoping directives
  • Making responsive charts

In addition to making a basic service to retrieve data from an API that can be injected into your controllers and directives, this article will cover different ways to scope your directives and using the AngularJS eventing tools.  As we’ll see, one chart in the example shares the entire root scope while the other creates an isolated scope that only has access to certain properties.  Your ability to manage scopes for directives is one of the most powerful concepts to understand in working with Angular.  Finally, we’ll look at broadcasting and listening for events in making the charts responsive.

Data delivery. Despite the complexity of data structures, formalisms used to develop algorithms for data analysis, network architectures, and the other topics that fill technical discussions, data delivery drives user judgments about your application/service.

This tutorial, along with others you will find here, will move you towards effective data delivery.

An A to Z of…D3 force layout

Wednesday, July 23rd, 2014

An A to Z of extra features for the D3 force layout by Simon Raper.

From the post:

Since d3 can be a little inaccessible at times I thought I’d make things easier by starting with a basic skeleton force directed layout (Mike Bostock’s original example) and then giving you some blocks of code that can be plugged in to add various features that I have found useful.

The idea is that you can pick the features you want and slot in the code. In other words I’ve tried to make things sort of modular. The code I’ve taken from various places and adapted so thank you to everyone who has shared. I will try to provide the credits as far as I remember them!

A great read and an even greater bookmark for graph layouts.

In Simon’s alphabet:

A is for arrows.

B is for breaking links.

C is for collision detection.

F is for fisheye.

H is for highlighting.

L is for labels.

P is for pinning down nodes.

S is for search.

T is for tooltip.

Not only does Simon show the code, he also shows the result of the code.

A model of how to post useful information on D3.


Monday, July 21st, 2014

Graffeine by Julian Browne

From the webpage:

Caffeinated Graph Exploration for Neo4J

Graffeine is both a useful interactive demonstrator of graph capability and a simple visual administration interface for small graph databases.

Here it is with the, now canonical, Dr Who graph loaded up:

Dr. Who graph

From the description:

Graffeine plugs into Neo4J and renders nodes and relationships as an interactive D3 SVG graph so you can add, edit, delete and connect nodes. It’s not quite as easy as a whiteboard and a pen, but it’s close, and all interactions are persisted in Neo4J.

You can either make a graph from scratch or browse an existing one using search and paging. You can even “fold” your graph to bring different aspects of it together on the same screen.

Nodes can be added, updated, and removed. New relationships can be made using drag and drop and existing relationships broken.

It’s by no means phpmyadmin for Neo4J, but one day it could be (maybe).

A great example of D3 making visual editing possible.

ease()-y as Math.PI…

Sunday, July 6th, 2014

ease()-y as Math.PI: 1,200,000ms of Fun with D3’s Animated Transitions by Scott Murray.

From the webpage:

This is a presentation I gave at the Eyeo Festival in Minneapolis on June 11, 2014, adapted for the web. The talk was entirely live-coded in the JavaScript console, an experience I’ve tried to recreate here.

I recommend viewing this in Chrome, with the developer tools open. Click the next button to step through the presentation. Or, of course you can retype any of the code directly into the console yourself. Click any code block to execute it (but note that running them out of the intended order may produce unexpected results).

If you have any interest in D3 or in graphics you are going to enjoy this presentation!

Perhaps it will inspire you to try a live coding presentation. 😉

Or at least give you more confidence in using D3 for visualization.

PS: One moment of confusion as I was stepping through the presentation. I did not have the DOM inspector open, so I did not see the SVG element containing circles. The circles on my monitor resembled a solid line. My bad. The lesson here is to: Follow the Directions!

Visualizing Philosophers And Scientists

Tuesday, July 1st, 2014

Visualizing Philosophers And Scientists By The Words They Used With Python and d3.js by Sahand Saba.

From the post:

This is a rather short post on a little fun project I did a couple of weekends ago. The purpose was mostly to demonstrate how easy it is to process and visualize large amounts of data using Python and d3.js.

With the goal of visualizing the words that were most associated with a given scientist or philosopher, I downloaded a variety of science and philosophy books that are in the public domain (project Gutenberg, more specifically), and processed them using Python (scikit-learn and nltk), then used d3.js and d3.js cloud by Jason Davies ( to visualize the words most frequently used by the authors. To make it more interesting, only words that are somewhat unique to the author are displayed (i.e. if a word is used frequently by all authors then it is likely not that interesting and is dropped from the results). This can be easily achieved using the max_df parameter of the CountVectorizer class.

I pass by Copleston’s A History of Philosophy several times a day. It is a paperback edition from many years ago that I keep meaning to re-read.

At least for philosophers with enough surviving texts in machine readable format, perhaps Sahand’s post will provide the incentive to return to reading Copleston. A word cloud is one way to explore a text. Commentary, such as Copleston’s, is another.

What other tools would you use with philosophers and a commentary like Copleston?

I first saw this in a tweet by Christophe Viau.

Snark Hunting: Force Directed Graphs in D3

Sunday, June 29th, 2014

Snark Hunting: Force Directed Graphs in D3 by Stephen Hall.

From the post:

Is it possible to write a blog post that combines d3.js, pseudo-classical JavaScript, graph theory, and Lewis Carroll? Yes, THAT Lewis Carroll. The one who wrote Alice in Wonderland. We are going to try it here. Graphs can be pretty boring so I thought I would mix in some fun historical trivia to keep it interesting as we check out force directed graphs in D3. In this post we are going to develop a tool to load up, display, and manipulate multiple graphs for exploration using the pseudo-classical pattern in JavaScript. We’ll add in some useful features, a bit of style, and some cool animations to make a finished product (see the examples below).

As usual, the demos presented here use a minimal amount of code. There’s only about 250 lines of JavaScript (if you exclude the comments) in these examples. So it’s enough to be a good template for your own project without requiring a ton of time to study and understand. The code includes some useful lines to keep the visualization responsive (without requiring JQuery) and methods that do things like remove or add links or nodes.

There’s also a fun “shake” method to help minimize tangles when the graph is displayed by agitating the nodes a little. I find it annoying when the graph doesn’t display correctly when it loads, so we’ll take care of that. Additionally, the examples incorporate a set of controls to help understand and explore the effect of the various D3 force layout parameters using the awesome dat.gui library from Google. You can see a picture of the controls above. We’ll cover the controls in depth below, but first I’ll introduce the examples and talk a little bit about the data.

I don’t think graphs are boring at all but must admit that adding Lewis Carroll to the mix doesn’t hurt a bit.

Great way to start off the week!

PS: The Hunting of the Snark (An Agony in 8 Fits) (PDF, 1876 edition)

Interactive Maps with D3.js, Three.js, and Mapbox

Tuesday, May 20th, 2014

Interactive Maps with D3.js, Three.js, and Mapbox by Steven Hall.

From the post:

Over the past couple of weeks I have been experimenting with creating 2D maps that can be explored in three dimensional space using D3.js and Three.js.  The goal was to produce some highly polished prototypes with multiple choropleth maps that could be easily navigated on a single page.  Additionally, I wanted to make sure to address some of the common tasks that arise when presenting map data such as applying well-formatted titles, legends and elegantly handling mouse-over events. The two examples presented below use D3.js for for generating nested HTML elements that contain the maps, titles and labeling information and use Three.js to position the elements in 3D space using CSS 3D transforms.  Importantly, there is no WebGL used in these examples.  Everything is rendered in the DOM using CSS 3D transforms which, at the time of writing, has much wider browser support than WebGL.

This article is an extension of two of my previous articles on D3.js and Three.js that can be found here and here.   Below, I’ll go into more depth about how the examples are produced and some of the roadblocks I encountered in putting these demos together, but for more background on the general process it may be good to look at the first article in this series: D3.js, Three.js and CSS 3D Transforms.

The maps here are geographical maps but what Steve covers could be easily applied to other types of maps.

Enter, Update, Exit… [D3.js]

Tuesday, April 15th, 2014

Enter, Update, Exit – An Introduction to D3.js, The Web’s Most Popular Visualization Toolkit by Christian Behrens.

From the webpage:

Over the past couple of years, D3, the groundbreaking JavaScript library for data-driven document manipulation developed by Mike Bostock, has become the Swiss Army knife of web-based data visualization. However, talking to other designers or developers who use D3 in their projects, I noticed that one of the core concepts of it remains somewhat obscure and is often referred to as »D3’s magic«: Data joins and selections.

Given a solid command of basic JavaScript, this article should help you to wrap your head around these two fundamental concepts and get you started using D3 for your dataviz projects.

If you encounter anyone not already using D3.js, pass this page along to them.

I first saw this in a tweet by Halftone.

D3.js, Three.js and CSS 3D Transforms

Friday, March 21st, 2014

D3.js, Three.js and CSS 3D Transforms by Steve Hall.

From the post:

This week I have been having some fun thinking about how you could use D3.js and Three.js together to do some data visualization work. We’ll have to put this one in the experimental column since there is a lot more work to be done, but I was pretty pleased with the results and thought I would blog about what I have done up to this point. While there are plenty of dramatic examples of three.js used to generate 3D globes with lines shooting everywhere, I was interested in a more subtle approach to complement work in D3. I would be curious to hear about other experiments going on along the same lines. A Google search didn’t turn up much.

The following example is using D3 to generate HTML elements and SVG charts and also to store coordinate information for transitions inside data properties. The objects created using D3 are then passed into a three.js scene and animated using CSS 3D transforms (no WebGL here, this is pure DOM).

You really need to run the full demo on a large, high-res monitor.

Wicked cool!

Definitely raises the bar for data visualization!

The only downside being you will be expected to find clever 3D ways to visualize data. Way more complicated than the visualization itself.


Saturday, February 15th, 2014

MPLD3: Bringing Matplotlib to the Browser

From the webpage:

The mpld3 project brings together Matplotlib, the popular Python-based graphing library, and D3js, the popular Javascript library for creating data-driven web pages. The result is a simple API for exporting your matplotlib graphics to HTML code which can be used within the browser, within standard web pages, blogs, or tools such as the IPython notebook.

See the Example Gallery or Notebook Examples for some interactive demonstrations of mpld3 in action.

For a quick overview of the package, see the Quick Start Guide.

Being a “text” person, I have to confess a fondness for the HTML tooltip plugin.

Data is the best antidote for graphs with labeled axes but no metrics and arbitrary placement of competing software packages.

Some people call that marketing. I prefer the older term, “lying.”