d3.js

Page Content hide
1 What is d3.js
2 What has d3 to do with this site
3 Approach
4 Visualizations
5 cv-viz: Virus infection simulation with D3.js
6 HTML service without caja
7 Centering text in arc textpath with D3
8 Zoomable Partition Charts
9 Making sense of joins in D3
10 Flight data from Fusion
11 Excel tables to d3.js Force diagram
12 Eurovision results with crossfilter and dc.js
13 Creating d3.js Tree diagrams
14 Sankey diagram from Excel
15 Excel-free Examples

What is d3.js

d3.js is a javaScript library that provides a ‘declarative framework’ for DOM manipulation and simplified access to SVG. d3 is the work of Mike Bostok and you should spend some time taking a look at the material on his web site to get an idea of the great things that can be done with d3.js Note that some  visualizations with d3.js do not work with IE8 and below. Chrome and Firefox are ok. I haven’t tested Safari yet.

What has d3 to do with this site

This site is primarily about Excel, but more importantly about extending Excel to integrate with all good things out there. I have already covered topics such as Get Data From Google Docs, Mapping and adding markers to maps, Data Driven Mapping applications, From VBA to Google Apps Script, Google Visualization, Excel JSON conversion, Rest to Excel library and many more. Using d3.js as a framework will open up a whole new opportunity for integrating Excel with modern web based visualizations.

Approach

As with many of the other solutions mentioned, in all cases for d3.js integration a web page containing the necessary javaScript will be generated from your Excel data and parameters. There are also a number of d3 examples which are nothing to do with Excel – consider them to be ‘post excel liberation’ examples.

Visualizations

Here is the list of visualizations available. Each solution is part of the cDataSet.xlsm download.

cv-viz: Virus infection simulation with D3.js

The coronavirus is with us, and naturally, there's much interest in data on its mortality, reach and spread, and of ...
Read More

HTML service without caja

If you are reading this in 2015, you probably won't have come across caja, since you'll be using this, as was ...
Read More

Centering text in arc textpath with D3

You'd think this would be easier than it turned out to be. I want to do this. In other, words ...
Read More

Zoomable Partition Charts

How to create a d3 zoomable partition chart straight from Excel.As always, acknowledgement to Mike Bostock on whose zoomable partition chart this is ...
Read More

Making sense of joins in D3

I come back to D3 about once every 6 months, and every single time I've forgotten how joins work. To ...
Read More

Flight data from Fusion

I've been playing around with the live integration of large cloud based data sets with D3.js. Most visualizations with D3 use ...
Read More

Excel tables to d3.js Force diagram

How to create d3.js force diagrams from  excel tablesIn Sankey diagrams from Excel and Creating d3.js Tree diagrams the input data for these d3.js visualizations was ...
Read More

Eurovision results with crossfilter and dc.js

Since the 50's, there has been an annual song contest involving many European countries. It's a fairly bizarre event, but ...
Read More

Creating d3.js Tree diagrams

Acknowledgementd3.js is from Mike Bostok's site. If you use any of this material, please be sure to maintain the acknowledgement for ...
Read More

Sankey diagram from Excel

AcknowledgementMuch of the JavaScript and d3.js came from Mike Bostok's site. If you use any of this material, please be sure ...
Read More

Excel-free Examples