Archive for the ‘D3’ Category

Financial Times Visual Vocabulary

Wednesday, June 7th, 2017

Financial Times Visual Vocabulary

From the webpage:

A poster and web site to assist designers and journalists to select the optimal symbology for data visualisations, by the Financial Times Visual Journalism Team. Inspired by the Graphic Continuum by Jon Schwabish and Severino Ribecca.

Read the Chart Doctor feature column for full background on why we made this: Simple techniques for bridging the graphics language gap

For D3 templates for producing many of these chart types in FT style, see our Visual Vocabulary repo.

The Financial Times sets a high bar for financial graphics.

Here it provides tools and guidance to help you meet with similar success.

Enjoy and pass this along.

The Hitchhiker’s Guide to d3.js [+ a question]

Sunday, May 14th, 2017

The Hitchhiker’s Guide to d3.js by Ian Johnson.

From the post:

[graphic omitted: see post]

The landscape for learning d3 is rich, vast and sometimes perilous. You may be intimidated by the long list of functions in d3’s API documentation or paralyzed by choice reviewing the dozens of tutorials on the home page. There are over 20,000+ d3 examples you could learn from, but you never know how approachable any given one will be.

[graphic omitted: see post]

If all you need is a quick bar or line chart, maybe this article isn’t for you, there are plenty of charting libraries out there for that. If you’re into books, check out Interactive Data Visualization for the Web by Scott Murray as a great place to start. D3.js in Action by Elijah Meeks is a comprehensive way to go much deeper into some regions of the API.

This guide is meant to prepare you mentally as well as give you some fruitful directions to pursue. There is a lot to learn besides the d3.js API, both technical knowledge around web standards like HTML, SVG, CSS and JavaScript as well as communication concepts and data visualization principles. Chances are you know something about some of those things, so this guide will attempt to give you good starting points for the things you want to learn more about.

Depending on your needs and learning style, The Hitchhiker’s Guide to d3.js (Guide), may be just what you need.

The Guide focuses on how to use d3.js and not on: What visualization should I create?

Suggestions on what should be considered when moving from raw data to a visualization? Resources?


Interactive Data Visualization (D3, 2nd Ed) / Who Sank My Battleship?

Wednesday, May 3rd, 2017

Interactive Data Visualization for the Web, 2nd Edition: An Introduction to Designing with D3 by Scott Murray.

From the webpage:

Interactive Data Visualization for the Web addresses people interested in data visualization but new to programming or web development, giving them what they need to get started creating and publishing their own data visualization projects on the web. The recent explosion of interest in visualization and publicly available data sources has created need for making these skills accessible at an introductory level. The second edition includes greatly expanded geomapping coverage, more real-world examples, a chapter on how to put together all the pieces, and an appendix of case studies, in addition to other improvements.

It’s pre-order time!

Estimated to appear in August of 2017 at $49.99.

This shipping map, created by Kiln, based on data from the UCL Energy Institute, should inspire you to try D3.

The Interactive version, using 2012 data, illustrates the ability to select types of shipping:

  • Container
  • Dry Bulk
  • Gas Bulk
  • Tanker
  • Vehicles

with locations, port information and a variety of other information.

All of which reminds me of the Who Sank My Battleship? episode with Gen. Paul Van Riper (ret.), who during war games, used pleasure craft and highly original tactics to sink the vast majority of the opposing American fleet. So much so that the American fleet had to be “refloated” to continue the games with any chance of winning. War game was fixed to ensure American victory, claims general.

Given the effectiveness of Gen. Van Riper’s tactics had on military vessels, you can imagine how unarmored civilian shipping would fare. You don’t need an self-immolating F-35 or a nuclear sub to damage civilian shipping.

What you need is shipping broken down into targeting categories with their locations (see, one or more pleasure craft stuffed with explosives and some rudimentary planning.

For the details of what I call the Who Sank My Battleship? episode, the official report, U.S. Joint Forces Command Millennium Challenge 2002: Experiment Report, runs some 752 pages.

D3 in Depth – Update

Tuesday, April 18th, 2017

D3 in Depth by Peter Cook

Peter has added three more chapters since my last visit:

There are another eight (8) to go.

I don’t know about you or Peter, but when people are showing interest in my work, I tend to work more diligently on it.

Drop by, ask questions, make suggestions.


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)