Creating a Custom D3 Visualization

This course barely scratches the surface of what D3 is capable of. A more complicated example will show how you can make custom visualizations with D3 that are impossible with standard charting libraries. This is where D3 really shines. The goal is to make a chart of day lengths throughout the year, like this one drawn by a child from M&M child care.

This chart has several interesting aspects that are worth noting. It is centred on noon and the length of the day is shown with two lines over the central axis, which forms a shape which is coloured in and the background is blue to represent night. There are four labeled axes, top and bottom and left and right. Building a visualization like it is not likely to come from a pre-packaged library.

Planning the Visualization

To plan the attack, a diagram of the desired visualization is helpful.

This brings several points to the foreground:

  • The visualization will be inset with a margin of 40 pixels to print the axes. Using transform will make the math for this simple.
  • Axes will go above and below and left and right of the graphic. Since the axes are all time-related, it makes sense to use time scales.
  • Helpfully, the y axis counts up the same way as the SVG coordinate system so you do not need to reverse the axis.
  • The sunrise section will be yellow and will be made up of what is left of a rect after drawing shapes with a svg:path for sunrise time and sunset time. d3.svg.area makes this easy.
  • The points on the path need to be connected into a smooth curve. There are different kinds of interpolation for this.

New Concepts

For this example, some new concepts will be introduced:

  • Time scales, an extension of linear scales tailored for time values.
  • The svg:g element which groups other elements like a div and can be transformed as a group.
  • Drawing complex shapes with svg:path, which is complicated, but made easy with the d3.svg.area function.
  • Using d3.range to create an array of numbers.
  • Using scale.ticks to generate tick marks for the axes.
  • Using SVG translation to simplify positioning.
  • Styling text with CSS.
  • Adjusting pixel positions to avoid anti-aliasing

Digression: Anti-aliasing

Anti-aliasing helps make text and curved lines look smoother, but can make straight lines appear fuzzy. If you are using a WebKit-based browser, the lines on the left should be fuzzy, while those on the right should be crisp.

Anti-aliasing often happens when drawing straight lines with D3. If the line is 1 pixel tall and positioned exactly on a pixel, it will straddle the pixel and become fuzzy. To avoid it, add or subtract 0.5 to the pixel position. The example below uses this technique to prevent fuzziness.

However, rendering differs depending on the SVG layout engine. In the example above, Firefox 5 renders fuzzy vertical lines when positioned exactly on a pixel, while the horizontal lines are not.

Setting the SVG shape-rendering property to crispEdges disables anti-aliasing for some or all lines. However, this may have unwanted side-effects if the visualization has curved lines, making them look jagged.

svg {
  shape-rendering: crispEdges;
}

A better solution may be to target the crispEdges property at certain (vertical or horizontal) lines with a CSS class.

line.crisp {
  shape-rendering: crispEdges;
}

Using this solution without pixel munging seems to work better across different browsers, but you should test it yourself and see what works best for your audience.

Getting the Data

Having game-planned the graphic, the first step is to collect the data. You can find sunrise and sunset times for cities around the world at timeanddate.com. I could not find a source of sunrise and sunset times in a computer-readable format and didn’t feel like writing a scraper, so I selected a few days throughout the year for the selected location (Minneapolis, Minnesota).

The data format is like this:

{
 date: new Date(2011, 4, 15), // day of year
 sunrise: [7, 51],            // sunrise time as array of hours and minutes
 sunset: [16, 42]             // likewise, sunset time (24 hour clock)
}

Sunrise and sunset times are stored as an array of hour and minute values. These are used to construct a Date to represent the time of day when plotting.

Building the Visualization

The JavaScript code for the visualization is below, with comments in line.
Here’s my codePen:

var width = 700;
var height = 525;
var padding = 40;

// the vertical axis is a time scale that runs from 00:00 - 23:59
// the horizontal axis is a time scale that runs from the 2011-01-01 to 2011-12-31

var y = d3.time.scale().domain([new Date(2011, 0, 1), new Date(2011, 0, 1, 23, 59)]).range([0, height]);
var x = d3.time.scale().domain([new Date(2011, 0, 1), new Date(2011, 11, 31)]).range([0, width]);

var monthNames = ["Jan", "Feb", "Mar", "April", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

// Sunrise and sun set times for dates in 2011. I have picked the 1st
// and 15th day of every month, plus other important dates like equinoxes
// and solstices and dates around the standard time/DST transition.

var data = [
  {date: new Date(2011, 0, 1), sunrise: [7, 51], sunset: [16, 42]},
  {date: new Date(2011, 0, 15), sunrise: [7, 48], sunset: [16, 58]},
  {date: new Date(2011, 1, 1), sunrise: [7, 33], sunset: [17, 21]},
  {date: new Date(2011, 1, 15), sunrise: [7, 14], sunset: [17, 41]},
  {date: new Date(2011, 2, 1), sunrise: [6, 51], sunset: [18, 0]},
  {date: new Date(2011, 2, 12), sunrise: [6, 32], sunset: [18, 15]}, // dst - 1 day
  {date: new Date(2011, 2, 13), sunrise: [7, 30], sunset: [19, 16]}, // dst
  {date: new Date(2011, 2, 14), sunrise: [7, 28], sunset: [19, 18]}, // dst + 1 day
  {date: new Date(2011, 2, 14), sunrise: [7, 26], sunset: [19, 19]},
  {date: new Date(2011, 2, 20), sunrise: [07, 17], sunset: [19, 25]}, // equinox
  {date: new Date(2011, 3, 1), sunrise: [6, 54], sunset: [19, 41]},
  {date: new Date(2011, 3, 15), sunrise: [6, 29], sunset: [19, 58]},
  {date: new Date(2011, 4, 1), sunrise: [6, 3], sunset: [20, 18]},
  {date: new Date(2011, 4, 15), sunrise: [5, 44], sunset: [20, 35]},
  {date: new Date(2011, 5, 1), sunrise: [5, 30], sunset: [20, 52]},
  {date: new Date(2011, 5, 15), sunrise: [5, 26], sunset: [21, 1]},
  {date: new Date(2011, 5, 21), sunrise: [5, 26], sunset: [21, 3]}, // solstice
  {date: new Date(2011, 6, 1), sunrise: [5, 30], sunset: [21, 3]},
  {date: new Date(2011, 6, 15), sunrise: [5, 41], sunset: [20, 57]},
  {date: new Date(2011, 7, 1), sunrise: [5, 58], sunset: [20, 40]},
  {date: new Date(2011, 7, 15), sunrise: [6, 15], sunset: [20, 20]},
  {date: new Date(2011, 8, 1), sunrise: [6, 35], sunset: [19, 51]},
  {date: new Date(2011, 8, 15), sunrise: [6, 51], sunset: [19, 24]},
  {date: new Date(2011, 8, 23), sunrise: [7, 1], sunset: [19, 9]}, // equinox
  {date: new Date(2011, 9, 1), sunrise: [7, 11], sunset: [18, 54]},
  {date: new Date(2011, 9, 15), sunrise: [7, 28], sunset: [18, 29]},
  {date: new Date(2011, 10, 1), sunrise: [7, 51], sunset: [18, 2]},
  {date: new Date(2011, 10, 5), sunrise: [7, 57], sunset: [17, 56]}, // last day of dst
  {date: new Date(2011, 10, 6), sunrise: [6, 58], sunset: [16, 55]}, // standard time
  {date: new Date(2011, 10, 7), sunrise: [6, 59], sunset: [16, 54]}, // standard time + 1
  {date: new Date(2011, 10, 15), sunrise: [7, 10], sunset: [16, 44]},
  {date: new Date(2011, 11, 1), sunrise: [7, 31], sunset: [16, 33]},
  {date: new Date(2011, 11, 15), sunrise: [7, 44], sunset: [16, 32]},
  {date: new Date(2011, 11, 22), sunrise: [7, 49], sunset: [16, 35]}, // solstice
  {date: new Date(2011, 11, 31), sunrise: [7, 51], sunset: [16, 41]}
];

function yAxisLabel(d) {
  if (d == 12) { return "noon"; }
  if (d < 12) { return d; }
  return (d - 12);
}

// The labels along the x axis will be positioned on the 15th of the
// month

function midMonthDates() {
  return d3.range(0, 12).map(function(i) { return new Date(2011, i, 15) });
}

var dayLength = d3.select("#day-length").
  append("svg:svg").
  attr("width", width + padding * 2).
  attr("height", height + padding * 2);

// create a group to hold the axis-related elements
var axisGroup = dayLength.append("svg:g").
  attr("transform", "translate("+padding+","+padding+")");

// draw the x and y tick marks. Since they are behind the visualization, they
// can be drawn all the way across it. Because the  has been
// translated, they stick out the left side by going negative.

axisGroup.selectAll(".yTicks").
  data(d3.range(5, 22)).
  enter().append("svg:line").
  attr("x1", -5).
  // Round and add 0.5 to fix anti-aliasing effects (see above)
  attr("y1", function(d) { return d3.round(y(new Date(2011, 0, 1, d))) + 0.5; }).
  attr("x2", width+5).
  attr("y2", function(d) { return d3.round(y(new Date(2011, 0, 1, d))) + 0.5; }).
  attr("stroke", "lightgray").
  attr("class", "yTicks");

axisGroup.selectAll(".xTicks").
  data(midMonthDates).
  enter().append("svg:line").
  attr("x1", x).
  attr("y1", -5).
  attr("x2", x).
  attr("y2", height+5).
  attr("stroke", "lightgray").
  attr("class", "yTicks");

// draw the text for the labels. Since it is the same on top and
// bottom, there is probably a cleaner way to do this by copying the
// result and translating it to the opposite side

axisGroup.selectAll("text.xAxisTop").
  data(midMonthDates).
  enter().
  append("svg:text").
  text(function(d, i) { return monthNames[i]; }).
  attr("x", x).
  attr("y", -8).
  attr("text-anchor", "middle").
  attr("class", "axis xAxisTop");

axisGroup.selectAll("text.xAxisBottom").
  data(midMonthDates).
  enter().
  append("svg:text").
  text(function(d, i) { return monthNames[i]; }).
  attr("x", x).
  attr("y", height+15).
  attr("text-anchor", "middle").
  attr("class", "xAxisBottom");

axisGroup.selectAll("text.yAxisLeft").
  data(d3.range(5, 22)).
  enter().
  append("svg:text").
  text(yAxisLabel).
  attr("x", -7).
  attr("y", function(d) { return y(new Date(2011, 0, 1, d)); }).
  attr("dy", "3").
  attr("class", "yAxisLeft").
  attr("text-anchor", "end");

axisGroup.selectAll("text.yAxisRight").
  data(d3.range(5, 22)).
  enter().
  append("svg:text").
  text(yAxisLabel).
  attr("x", width+7).
  attr("y", function(d) { return y(new Date(2011, 0, 1, d)); }).
  attr("dy", "3").
  attr("class", "yAxisRight").
  attr("text-anchor", "start");

// create a group for the sunrise and sunset paths

var lineGroup = dayLength.append("svg:g").
  attr("transform", "translate("+ padding + ", " + padding + ")");

// draw the background. The part of this that remains uncovered will
// represent the daylight hours.

lineGroup.append("svg:rect").
  attr("x", 0).
  attr("y", 0).
  attr("height", height).
  attr("width", width).
  attr("fill", "lightyellow");

// The meat of the visualization is surprisingly simple. sunriseLine
// and sunsetLine are areas (closed svg:path elements) that use the date
// for the x coordinate and sunrise and sunset (respectively) for the y
// coordinate. The sunrise shape is anchored at the top of the chart, and
// sunset area is anchored at the bottom of the chart.

var sunriseLine = d3.svg.area().
  x(function(d) { return x(d.date); }).
  y1(function(d) { return y(new Date(2011, 0, 1, d.sunrise[0], d.sunrise[1])); }).
  interpolate("linear");

lineGroup.
  append("svg:path").
  attr("d", sunriseLine(data)).
  attr("fill", "steelblue");

var sunsetLine = d3.svg.area().
  x(function(d) { return x(d.date); }).
  y0(height).
  y1(function(d) { return y(new Date(2011, 0, 1, d.sunset[0], d.sunset[1])); }).
  interpolate("linear");

lineGroup.append("svg:path").
  attr("d", sunsetLine(data)).
  attr("fill", "steelblue");

// finally, draw a line representing 12:00 across the entire
// visualization

lineGroup.append("svg:line").
  attr("x1", 0).
  attr("y1", d3.round(y(new Date(2011, 0, 1, 12))) + 0.5).
  attr("x2", width).
  attr("y2", d3.round(y(new Date(2011, 0, 1, 12))) + 0.5).
  attr("stroke", "lightgray");

Using CSS helps remove duplication from the text formatting attributes:

div#day-length text {
  fill: gray;
  font-family: Helvetica, sans-serif;
  font-size: 10px;
}

And the final result:

JanFebMarAprilMayJunJulAugSepOctNovDecJanFebMarAprilMayJunJulAugSepOctNovDec567891011noon123456789567891011noon123456789

Next Steps

Now that the visualization is complete, think of what could be done to improve it. You could label the solstices and equinoxes with exact times, or plot different sunset and sunrise times for different locations against each other, or make a label that shows exact times for the day the user is are mousing over…

The possibilities are endless.

Debugging D3

Lest you assume these examples were coded straight through, let me assure you this was not the case. There was a significant amount of trial-and-error coding needed to get them working.

One of the advantages of D3 using SVG as its native graphical representation is that it is easier to debug the WebKit Inspector or Firebug.

SVG in the WebKit Inspector

This is incredibly useful. You can try it on this page to see how the SVG code for these examples is generated.

Another technique that has been helpful for me is to use console.log in positioning functions. This lets you inspect the datum and index of an element as well as the calculated position for the x or y value. For example:

attr("x", function(d, i) {
  console.log(d);
  console.log(i);

  return x(d.whatever);
})

Further Reading

Now you know about as much about D3 as I do. Obviously, this barely scratches the surface. For more tutorials and resources about D3, read the following articles:

D3 Refresh

This article aims to give you a high level overview of D3’s capabilities, in each example you’ll be able to see the input data, transformation and the output document. Rather than explaining what every function does I’ll show you the code and you should be able to get a rough understanding of how things work. I’ll only dig into details for the most important concepts, Scales and Selections.

William Playfair invented the bar, line and area charts in 1786 and the pie chart in 1801. Today, these are still the primary ways that most data sets are presented. Now, these charts are excellent but D3 gives you the tools and the flexibility to make unique data visualizations for the web, your creativity is the only limiting factor.

A Bar Chart

Although we want to get to more than William Playfair’s charts we’ll begin by making the humble bar chart with HTML – one of the easiest ways to understand how D3 transforms data into a document. Here’s what that looks like:

See code in codePen

d3.select('#chart')
  .selectAll("div")
  .data([4, 8, 15, 16, 23, 42])
  .enter()
  .append("div")
  .style("height", (d)=> d + "px")

The selectAll function returns a D3 “selection”: an array of elements that get created when we enter and append a div for each data point.

This code maps the input data [4, 8, 15, 16, 23, 42] to this output HTML.

<div id="chart">
  <div style="height: 4px;"></div>
  <div style="height: 8px;"></div>
  <div style="height: 15px;"></div>
  <div style="height: 16px;"></div>
  <div style="height: 23px;"></div>
  <div style="height: 42px;"></div>
</div>

All of the style properties that don’t change can go in the CSS.

#chart div {
  display: inline-block;
  background: #4285F4;
  width: 20px;
  margin-right: 3px;
}

GitHub’s Contribution Chart

With a few lines of extra code we can convert the bar chart above to a contribution chart similar to Github’s.

A GitHub-style contribution chart

See code in codepen

Rather than setting a height based on the data’s value we can set a background-color instead.

const colorMap = d3.interpolateRgb(
  d3.rgb('#d6e685'),
  d3.rgb('#1e6823')
)

d3.select('#chart')
  .selectAll("div")
  .data([.2, .4, 0, 0, .13, .92])
  .enter()
  .append("div")
  .style("background-color", (d)=> {
    return d == 0 ? '#eee' : colorMap(d)
  })

The colorMap function takes an input value between 0 and 1 and returns a colour along the gradient of colours between the two we provide. Interpolation is a key tool in graphics programming and animation, we’ll see more examples of it later.

An SVG Primer

Much of D3’s power comes from the fact that it works with SVG, which contains tags for drawing 2D graphics like circles, polygons, paths and text.

<svg width="200" height="200">
  <circle fill="#3E5693" cx="50" cy="120" r="20" />
  <text x="100" y="100">Hello SVG!</text>
  <path d="M100,10L150,70L50,70Z" fill="#BEDBC3" stroke="#539E91" stroke-width="3">
</svg>

The code above draws:

  • A circle at 50,120 with a radius of 20
  • The text “Hello SVG!” at 100,100
  • A triangle with a 3px border, the d attribute has the following instructions
    • Move to 100,10
    • Line to 150,70
    • Line to 50,70
    • Close path(Z)

<path> is the most powerful element in SVG.

Circles

Labeled circles showing sales by time of day

See code in codepen

The data sets in the previous examples have been a simple array of numbers, D3 can work with more complex types too.

const data = [{
  label: "7am",
  sales: 20
},{
  label: "8am",
  sales: 12
}, {
  label: "9am",
  sales: 8
}, {
  label: "10am",
  sales: 27
}]

For each point of data we will append a <g>(group) element to the #chart and append <circle> and <text>elements to each with properties from our objects.

const g = d3.select('#chart')
  .selectAll("g")
  .data(data)
  .enter()
  .append('g')
g.append("circle")
  .attr('cy', 40)
  .attr('cx', (d, i)=> (i+1) * 50)
  .attr('r', (d)=> d.sales)
g.append("text")
  .attr('y', 90)
  .attr('x', (d, i)=> (i+1) * 50)
  .text((d)=> d.label)

The variable g holds a d3 “selection” containing an array of <g> nodes, operations like append() append a new element to each item in the selection.

This code maps the input data into this SVG document, can you see how it works?

<svg height="100" width="250" id="chart">
  <g>
    <circle cy="40" cx="50" r="20"/>
    <text y="90" x="50">7am</text>
  </g>
  <g>
    <circle cy="40" cx="100" r="12"/>
    <text y="90" x="100">8am</text>
  </g>
  <g>
    <circle cy="40" cx="150" r="8"/>
    <text y="90" x="150">9am</text>
  </g>
  <g>
    <circle cy="40" cx="200" r="27"/>
    <text y="90" x="200">10am</text>
  </g>
</svg>

Line Chart

A basic line chart

See the codepen

Drawing a line chart in SVG is quite simple, we want to transform data like this:

const data = [
  { x: 0, y: 30 },
  { x: 50, y: 20 },
  { x: 100, y: 40 },
  { x: 150, y: 80 },
  { x: 200, y: 95 }
]

Into this document:

<svg id="chart" height="100" width="200">
  <path stroke-width="2" d="M0,70L50,80L100,60L150,20L200,5">
</svg>

Note: The y values are subtracted from the height of the chart (100) because we want a y value of 100 to be at the top of the svg (0 from the top).

Given it’s only a single path element, we could do it ourselves with code like this:

const path = "M" + data.map((d)=> {
  return d.x + ',' + (100 - d.y);
}).join('L');
const line = `<path stroke-width="2" d="${ path }"/>`;
document.querySelector('#chart').innerHTML = line;

D3 has path generating functions to make this much simpler though, here’s what it looks like.

const line = d3.svg.line()
  .x((d)=> d.x)
  .y((d)=> 100 - d.y)
  .interpolate("linear")

d3.select('#chart')
  .append("path")
  .attr('stroke-width', 2)
  .attr('d', line(data))

Much better! The interpolate function has a few different ways it can draw the line around the x, y coordinates too. See how it looks with “linear”, “step-before”, “basis” and “cardinal”.

A linear-style line chart
A step-before-style line chart
A basis-style line chart

Scales

Scales are functions that map an input domain to an output range.

See the codepen

In the examples we’ve looked at so far we’ve been able to get away with using “magic numbers” to position things within the charts bounds, when the data is dynamic you need to do some math to scale the data appropriately.

Imagine we want to render a line chart that is 500px wide and 200px high with the following data:

const data = [
  { x: 0, y: 30 },
  { x: 25, y: 15 },
  { x: 50, y: 20 }
]

Ideally we want the y axis values to go from 0 to 30 (max y value) and the x axis values to go from 0 to 50 (max x value) so that the data takes up the full dimensions of the chart.

We can use d3.max to find the max values in our data set and create scales for transforming our x, y input values into x, y output coordinates for our SVG paths.

const width = 500;
const height = 200;
const xMax = d3.max(data, (d)=> d.x)
const yMax = d3.max(data, (d)=> d.y)

const xScale = d3.scale.linear()
  .domain([0, xMax]) // input domain
  .range([0, width]) // output range

const yScale = d3.scale.linear()
  .domain([0, yMax]) // input domain
  .range([height, 0]) // output range

These scales are similar to the colour interpolation function we created earlier, they are simply functions which map input values to a value somewhere on the output range.

xScale(0) -> 0
xScale(10) -> 100
xScale(50) -> 500

They also work with values outside of the input domain as well:

xScale(-10) -> -100
xScale(60) -> 600

We can use these scales in our line generating function like this:

const line = d3.svg.line()
  .x((d)=> xScale(d.x))
  .y((d)=> yScale(d.y))
  .interpolate("linear")

Another thing you can easily do with scales is to specify padding around the output range:

const padding = 20;
const xScale = d3.scale.linear()
  .domain([0, xMax])
  .range([padding, width - padding])

const yScale = d3.scale.linear()
  .domain([0, yMax])
  .range([height - padding, padding])

Now we can render a dynamic data set and our line chart will always fit inside our 500px / 200px bounds with 20px padding on all sides.

Linear scales are the most common type but there’s others like pow for exponential scales and ordinal scales for representing non-numeric data like names or categories. In addition to Quantitative Scales and Ordinal Scales there are also Time Scales for mapping date ranges.

For example, we can create a scale that maps my lifespan to a number between 0 and 500:

const life = d3.time.scale()
  .domain([new Date(1986, 1, 18), new Date()])
  .range([0, 500])

// At which point between 0 and 500 was my 18th birthday?
life(new Date(2004, 1, 18))

If you’d like to go further with this, try the Animated Flight Visualization

Animated Flight Visualization

So far we’ve only looked at static lifeless graphics with a few rollovers for additional information. Let’s make an animated visualization that shows the active flights over time between Melbourne and Sydney in Australia.

See the Pen D3 – scales by Haig Armen (@haigarmen) on CodePen.

The SVG document for this type of graphic is made up of text, lines and circles.

<svg id="chart" width="600" height="500">
  <text class="time" x="300" y="50" text-anchor="middle">6:00</text>
  <text class="origin-text" x="90" y="75" text-anchor="end">MEL</text>
  <text class="dest-text" x="510" y="75" text-anchor="start">SYD</text>
  <circle class="origin-dot" r="5" cx="100" cy="75" />
  <circle class="dest-dot" r="5" cx="500" cy="75" />
  <line class="origin-dest-line" x1="110" y1="75" x2="490" y2="75" />

  <!-- for each flight in the current time -->
  <g class="flight">
    <text class="flight-id" x="160" y="100">JQ 500</text>
    <line class="flight-line" x1="100" y1="100" x2="150" y2="100" />
    <circle class="flight-dot" cx="150" cy="100" r="5" />
  </g>

</svg>

The dynamic parts are the time and the elements within the flight group and the data might look something like this:

let data = [
  { departs: '06:00 am', arrives: '07:25 am', id: 'Jetstar 500' },
  { departs: '06:00 am', arrives: '07:25 am', id: 'Qantas 400' },
  { departs: '06:00 am', arrives: '07:25 am', id: 'Virgin 803' }
]

To get an x position for a dynamic time we’ll need to create a time scale for each flight that maps its departure and arrival times to an x position on our chart. We can loop through our data at the start adding Date objects and scales so they’re easier to work with. Moment.js helps a lot here with date parsing and manipulation.

data.forEach((d)=> {
  d.departureDate = moment(d.departs, "hh-mm a").toDate();
  d.arrivalDate = moment(d.arrives, "hh-mm a").toDate();
  d.xScale = d3.time.scale()
    .domain([departureDate, arrivalDate])
    .range([100, 500])
});

We can now pass our changing Date to xScale() to get an x coordinate for each flight.

Render Loop

Departure and arrival times are rounded to 5 minutes so we can step through our data in 5m increments from the first departure to the last arrival.

let now = moment(data[0].departs, "hh:mm a");
const end = moment(data[data.length - 1].arrives, "hh:mm a");

const loop = function() {
  const time = now.toDate();

  // Filter data set to active flights in the current time
  const currentData = data.filter((d)=> {
    return d.departureDate <= time && time <= d.arrivalDate
  });

  render(currentData, time);

  if (now <= end) {
    // Increment 5m and call loop again in 500ms
    now = now.add(5, 'minutes');
    setTimeout(loop, 500);
  }
}

Enter, Update and Exit

D3 allows you to specify transformations and transitions of elements when:

  • New data points come in (Enter)
  • Existing data points change (Update)
  • Existing data points are removed (Exit)
const render = function(data, time) {
  // render the time
  d3.select('.time')
    .text(moment(time).format("hh:mm a"))

  // Make a d3 selection and apply our data set
  const flight = d3.select('#chart')
    .selectAll('g.flight')
    .data(data, (d)=> d.id)

  // Enter new nodes for any data point with an id not in the DOM
  const newFlight = flight.enter()
    .append("g")
    .attr('class', 'flight')

  const xPoint = (d)=> d.xScale(time);
  const yPoint = (d, i)=> 100 + i * 25;

  newFlight.append("circle")
    .attr('class',"flight-dot")
    .attr('cx', xPoint)
    .attr('cy', yPoint)
    .attr('r', "5")

  // Update existing nodes in selection with id's that are in the data
  flight.select('.flight-dot')
    .attr('cx', xPoint)
    .attr('cy', yPoint)

  // Exit old nodes in selection with id's that are not in the data
  const oldFlight = flight.exit()
    .remove()
}

Transitions

The code above renders a frame every 500ms with a 5 minute time increment:

  • It updates the time
  • Creates a new flight group with a circle for every flight
  • Updates the x/y coordinates of current flights
  • Removes the flight groups when they’ve arrived

This works but what we really want is a smooth transition between each of these frames. We can achieve this by creating a transition on any D3 selection and providing a duration and easing function before setting attributes or style properties.

For example, let’s fade in the opacity of entering flight groups.

const newFlight = flight.enter()
  .append("g")
  .attr('class', 'flight')
  .attr('opacity', 0)

newFlight.transition()
  .duration(500)
  .attr('opacity', 1)

Let’s fade out exiting flight groups.

flight.exit()
  .transition()
  .duration(500)
  .attr('opacity', 0)
  .remove()

Add a smooth transition between the x and y points.

flight.select('.flight-dot')
  .transition()
  .duration(500)
  .ease('linear')
  .attr('cx', xPoint)
  .attr('cy', yPoint)

We can also transition the time between the 5 minute increments so that it displays every minute rather than every five minutes using the tween function.

const inFiveMinutes = moment(time).add(5, 'minutes').toDate();
const i = d3.interpolate(time, inFiveMinutes);
d3.select('.time')
  .transition()
  .duration(500)
  .ease('linear')
  .tween("text", ()=> {
    return function(t) {
      this.textContent = moment(i(t)).format("hh:mm a");
    };
  });

t is a progress value between 0 and 1 for the transition.

D3 Mega List

Here is an updated list of d3 examples, sorted alphabetically. Most of the D3 examples in this list come from this excel list but I also added some updates and my examples to push the list over 2K. Examples are really helpful when doing any kind of development so I am hoping that this big list of D3 examples will be a valuable resource. Bookmark and share with others. Here is the huge list of D3 demos:

  1. “Elbow” Dendrogram
  2. 113th U.S. Congressional Districts
  3. 20 years of the english premier football league
  4. 20000 points in random motion
  5. 2012 NFL Conference Champs
  6. 2012-2013 NBA Salary Breakdown
  7. 2013 Country Population World Map in D3.js
  8. 25 great circles
  9. 2D Matrix Decomposition
  10. 300 Outings
  11. 3D bar chart with D3.js and x3dom
  12. 3D scatter plot using d3 and x3dom
  13. 401k Fees Vary Widely for Similar Companies (Scatter)
  14. 512 Paths to the White House
  15. 582781
  16. 619560
  17. 777029
  18. 779986
  19. 7th Grade Graphs with D3
  20. 9-Patch Quilt Generator
  21. 908051
  22. 908382
  23. 913077
  24. A Bar Chart
  25. A Bar Chart, Part 1
  26. A Bar Chart, Part 2
  27. A Chicago Divided by Killings
  28. A Christmas Carol
  29. A CoffeeScript console for d3.js visualization
  30. A fun, difficult introduction to d3
  31. A JSNetworkX example
  32. A KoExtensions example: #d3js KnockoutJS, RavenDB, WebAPI, Bootstrap
  33. A line chart plotting unit sales, colored by price for d3 data visualisations
  34. A map of translations of Othello into German
  35. A marimekko chart showing SKUs grouped by owner and brand.
  36. A matrix chart where each point is replaced with a marimekko
  37. A Migration of Unmarried Men
  38. A physics model of a physics model
  39. A Race to Entitlement
  40. A Radius Follows the Mouse
  41. A sea of tweets: what are italians saying about the election
  42. A simpler variation of Kepler’s Tally
  43. A Slice of Canadian Life
  44. A sprintf-like function using d3,js
  45. A statistical model for blood pressure in patients with hypertension
  46. A Visit From The Goon Squad – Interactive Character Map
  47. Abusing The Force Talk
  48. AC Milan vs Juventus
  49. Across U.S. Companies, Tax Rates Vary Greatly
  50. Adaptive Resampling
  51. Adaptive Resampling
  52. Addepar
  53. Advanced object constancy
  54. Advanced visualizations with D3.js and Kartograph
  55. Adventures in D3
  56. AFL Brownlow Medalists
  57. AFL Brownlow Medalists
  58. Aid Explorer
  59. Air pollution
  60. Airbnb vs Hotels: A Price Comparison
  61. Airocean World
  62. Airocean World (Dymaxion) map
  63. Airy’s Minimum Error
  64. Airy’s Minimum Error
  65. Aitoff
  66. Aitoff Graticule
  67. Alaska Albers
  68. Albers Equal-Area Conic
  69. Albers Projection
  70. Albers Siberia
  71. Albers Tiles
  72. Albers USA
  73. Albers USA Projection
  74. Albers with Resampling
  75. Albers without Resampling
  76. AlbersUSA + PR
  77. All the Medalists: Men’s 100-Meter Freestyle
  78. Alpha-shapes aka concave hulls
  79. Alternative D3.js documentation
  80. American Forces in Afghanistan and Iraq
  81. Among the Oscar Contenders, a Host of Connections
  82. An inlet to Tributary
  83. An introduction to d3.js video with synced visualisation
  84. An overview of the Hong Kong budget in 2013-14
  85. Analog clock
  86. Andrew Berls, Visualizing your bash history with d3.js
  87. Angel List compensation scatterplot
  88. AngularJS + D3.js = Radian
  89. Animated Bézier Curves
  90. Animated Bubble Chart of Gates Educational Donations
  91. Animated bubble charts for school data analysis
  92. Animated Clipped textPath
  93. Animated Quasicrystals
  94. Animated Sankey (alluvial) diagram
  95. Animated Spirographs
  96. Animated textPath
  97. Animated tree
  98. Animated Trigonometry
  99. Annual traffic entering from station to Paris
  100. Antimeridian Cutting
  101. Antipodes
  102. antulik’s Gists
  103. Apollonian Gasket
  104. Apple logo with gradient
  105. Arc Deduplication
  106. Arc Tween (Clock)
  107. Arc Tween Commented Example
  108. Arcs Around
  109. Area chart
  110. Area Chart
  111. Area Choropleth
  112. Area Transition
  113. Area with Missing Data
  114. Argentina Census
  115. Arlington Visual Budget
  116. Armadillo Projection
  117. Arnold’s Cat Map
  118. Array Subclassing Test
  119. Arrows are Beautiful
  120. Article-Level Metrics over time
  121. Asia Lambert Conic Conformal
  122. At the Democratic Convention the Words Being Used
  123. At the National Conventions the Words They Used
  124. Atlantis
  125. Atlas zur Landtagswahl Bayern 2013
  126. AttrTween, Transitions and MV* in Reusable D3
  127. Audio Spectrum Analyzer
  128. August Projection
  129. Autofocus
  130. Autoforking
  131. Automatic floating labels using d3 force-layout
  132. Automatic Projection Tiles
  133. Automatically sizing text
  134. Axis Component
  135. Axis Examples
  136. Axis Styling
  137. Azimuth and Distance from London
  138. Azimuthal Equidistant
  139. Azimuthal Equidistant
  140. Azimuthal Projections
  141. Baby Names in England & Wales
  142. Backbone-D3: Simple visualisations of Backbone collections via D3.js
  143. Baker Dinomic
  144. bar + sum: d3.js & angular.js
  145. bar + sum: d3.js & backbone.js
  146. bar + sum: d3.js & ember.js
  147. bar + sum: reusable d3.js
  148. bar + sum: vanilla d3.js
  149. Bar Chart
  150. Bar chart code generator and online editor
  151. Bar Chart I
  152. Bar Chart II
  153. Bar Chart II
  154. Bar Chart II
  155. Bar Chart II
  156. Bar Chart III
  157. Bar Chart III
  158. Bar Chart III
  159. Bar Chart with Negative Values
  160. barStack (flex layout)
  161. Bart particles
  162. Bartholomew’s Regional Projection
  163. Base64.js
  164. Baseball 2012 Predictions based on past 6 years
  165. Basic Gantt Chart
  166. Basic Reusable Slopegraph
  167. Bathymetry of Lake Michigan
  168. Bay Area d3 User Group
  169. Bay Area earthquake responses by zip code
  170. BBEdit Preferences
  171. Bearcart
  172. Beautiful Spiral Things
  173. Beautiful visualizations with D3.js
  174. Beer taxes in your state – CNNMoney
  175. Beeswarm plot
  176. Behind the Australian Financial Review’s Budget Explorer
  177. Berghaus Star
  178. Better force layout node selection
  179. Bharat Bhole
  180. Bibly v2: Visualizing word distribution within the KJV bible
  181. Bieber Fever Meter with HTML5 Web Socket d3.js and Pusher
  182. Big Money in Tax Breaks
  183. Biham-Middleton-Levine Traffic Model
  184. Bilevel Partition
  185. Binify + D3 = Gorgeous honeycomb maps
  186. Binned Line Chart
  187. BioVis Project: Identification of Mutations that Affect Protein Function
  188. BIS Derivative Data
  189. Bitdeli: Custom analytics with Python and GitHub
  190. Bitly link Co-occurrence
  191. Bivariate Area Chart
  192. Bivariate Hexbin Map
  193. Bl.ocks RSS
  194. Blobular
  195. Blocky Counties
  196. Blocky Counties
  197. Bloom Filters
  198. Blur/fade effect
  199. Boeing 777 Descent Profiles, SFO
  200. Boggs Eumorphic
  201. Bonne Projection
  202. Boomstick motion
  203. Boomstick motion coffee
  204. Boston d3.js User Group
  205. Boulder County Wildfires
  206. Bounded Force Layout
  207. Box plot
  208. Bracket Layout
  209. Briesemeister
  210. Bromley
  211. Browser usage plurality
  212. Brush
  213. Brush as Slider
  214. Brush Handles
  215. Brush Snapping
  216. Brush Snapping II
  217. Brush Transitions
  218. Brushable Network
  219. Brushable Network II
  220. Bubble Chart
  221. Bubble My Page Visualization
  222. Bubbles
  223. Bubbles generator using a simplex noise
  224. Build world clocks
  225. Build Your Own Graph!
  226. Building a lightweight, flexible D3.js dashboard
  227. Building a tree diagram
  228. Building a UML editor in JS
  229. Building Cubic Hamiltonian Graphs from LCF Notation
  230. BulleT (a variant of mbostock’s Bullet Charts)
  231. Bullet chart variant
  232. Bullet Charts
  233. Bump Chart with rCharts and Rickshaw
  234. Caged/d3-tip
  235. Calculating quadtree bounding boxes and displaying them in leaflet
  236. Calendar View
  237. Calendar View
  238. California Population Density
  239. Calkin-Wilf Tree
  240. Calroc
  241. Calroc: Web as Theater
  242. Can people localize sounds with one functional ear?
  243. Can’t we all get along?
  244. Can’t we all get along?
  245. Candlestick charts
  246. Canvas Geometric Zooming
  247. Canvas Semantic Zooming
  248. Canvas Swarm
  249. Canvas Voronoi
  250. Canvas with d3 and Underscore
  251. Capturing Listeners
  252. Capturing Mousemove
  253. Caravaggio’s Bacco (1597)
  254. Carotid-Kundalini Fractal Explorer
  255. Carotid-Kundalini Fractal Explorer
  256. CartoDB + D3 Bubble Map
  257. CartoDB makes D3 maps a breeze
  258. Cartogram.js: Continuous Area Cartograms
  259. Case-Sensitivity and SVG-in-HTML
  260. Cassini
  261. Cellular automata
  262. Cellular automata
  263. Central Limit Theorem Visualized in D3
  264. CFCLTWiki
  265. Chained Transitions
  266. Chained Transitions
  267. Chamberlin Trimetric
  268. Chamberlin Trimetric Projection
  269. Changes in Employment and Salary by Industry
  270. Chart Wheel Visualization
  271. Chart.io: The Easiest Business Dashboard You’ll Ever Use
  272. Chartbuilder
  273. Chernoff faces
  274. Chernoff faces Fisheye Geodesic grid Hive plot Horizon chart Sankey diagram
  275. Chicago Lobbyists
  276. Chicago Ward Remap Outlines
  277. CHIPMOD
  278. Chord Diagram
  279. Chord diagram with Dex
  280. Chord Diagram: Dependencies Between Classes
  281. Chord diagram: Fade on Hover
  282. Chord diagram: Updating data
  283. Chord Layout Transitions
  284. Choropleth
  285. Choropleth classification systems
  286. Choropleth with interactive parameters for NYC data visualization
  287. Christchurch Earthquakes
  288. christophermanning’s bl.ocks
  289. Chroma + Phi (ϕ)
  290. Chrome Circle Precision Bug
  291. Chrome Circle Precision Bug
  292. Circle Packing
  293. Circle Packing with Zero Values
  294. Circle Packing Zero Values
  295. Circle-bound D3 force layout
  296. Circle-Circle Intersection
  297. Circle-Polygon Intersection
  298. Circles
  299. Circular heat chart
  300. Circular key scale
  301. Circular Layout
  302. Circular Layout (Arc)
  303. Circular Layout (Recursive)
  304. Circular Layout (Slider)
  305. Circular Segment
  306. Circular tree comparing the src directory for three versions of d3
  307. Classements par étape – Tour de France 2012
  308. Clean Up for Natural Earth GeoJSON
  309. click-to-center
  310. click-to-center via transform
  311. Click-to-Recenter Brush
  312. Click-to-Recenter Brush II
  313. Click-to-Zoom via Transform
  314. click-to-zoom via transform
  315. Clickme: Render JavaScript visualizations using R objects
  316. Clinical trials in Multiple Sclerosis
  317. Close Votes – visualizing voting similarities for the Dutch 2012 national elections
  318. Closest Point on Path
  319. Closest Point on Path II
  320. Closest Point to Segment
  321. Cluster Dendrogram
  322. Cluster Dendrogram
  323. Cluster Dendrogram II
  324. Cluster Force Layout IV
  325. Clustered Force Layout
  326. Clustered Force Layout
  327. Clustered Force Layout III
  328. Co-Authors Chords
  329. CodeFlower Source code visualization
  330. CoderDojo – Intro to D3.js
  331. Coffee Flavour Wheel
  332. Collapsible Force Layout
  333. Collapsible Force Layout
  334. Collapsible Force Layout
  335. Collapsible Indented Tree
  336. Collapsible Tree
  337. Collapsible tree
  338. Collapsible Tree Layout
  339. Collapsible tree with labels
  340. Collatz Graph: All Numbers Lead to One
  341. Collective.js.d3 Integrates D3.js in Plone
  342. Collider – a d3.js game
  343. Collignon Projection
  344. Collision Detection
  345. Collision Detection
  346. Collision Detection (Canvas)
  347. Collpase/expand nodes of a tree
  348. Collusion FireFox Addon
  349. Colony – Visualising Javascript projects and their dependencies
  350. Color Brewer
  351. Color scheme sunburst
  352. Color via Clipping
  353. Color: a color matching game
  354. Combinatorial Necklaces and Bracelets
  355. Combining D3 and Ember to Build Interactive Maps
  356. Comic Book Narrative Charts
  357. Commented bar chart code
  358. Comparing the same surveys by different polling organizations (polish)
  359. Comparison of MS trials baseline characteristics
  360. Complete Graphs
  361. Composite Map Projection
  362. Composition of Church Membership by State: 1890
  363. Computationally Endowed
  364. Concentric Circles Emanating
  365. Concurrent Transitions
  366. Concurrent Transitions II
  367. Confidence interval in poll surveys
  368. Congressional Network Analysis
  369. Connections in time
  370. Constrained Zoom
  371. Constraint relaxation 1
  372. Constraint relaxation 1
  373. Constraint relaxation 2
  374. Contextual Pie Menu in AngularJS
  375. Contour Plot
  376. Converting dynamic SVG to PNG with node.js, d3 and Imagemagick
  377. Convex Hull
  378. Conway’s game of life with JS and D3.js
  379. Conway’s Game of life as a scrolling background (broken link)
  380. Conway’s game of life in D3.js
  381. Coordinated visualizations for Consumer Packaged Goods
  382. Coordinated Visualizations: An introduction to crossfilter.js
  383. Copper: Wrapper around python packages with D3.js viz
  384. Cost of living
  385. Cost of Living – Parallel Coordinates
  386. Costa Rica shaded relief
  387. Counting Weekdays
  388. Countries and Capitals D3 Demo
  389. Countries and Capitals with D3 and Natural Earth
  390. Countries by Area
  391. County Circles
  392. CPI Interactive index, with Angular.js, bootstrap and d3.js
  393. Craig Retroazimuthal
  394. Craig Retroazimuthal
  395. Craster Parabolic
  396. Crayola Colour Chronology
  397. Create a JavaScript bar chart with D3
  398. Create any map of the world in SVG
  399. Creating a Polar Area Diagram
  400. Creating Animated Bubble Charts in D3
  401. Creating Animations and Transitions With D3
  402. Creating Basic Charts using d3.js
  403. Creating Reusable D3, MVC, and Events
  404. Creating Thumbnails with GraphicsMagick
  405. Crime in Mexico
  406. Cross-linked Mouseover
  407. Crossfilter.js
  408. CS6964: Information Visualization
  409. CSS3 Modal Button
  410. CSSdeck: Repulsion example
  411. CSSOM/SVG Test
  412. CSV Syntax Definition
  413. csv2tsv
  414. Cube Metrics Client (Node.js + WebSockets)
  415. Cube Realtime Map
  416. Cube: Time Series Data Collection & Analysis
  417. Cubism.js: Time Series Visualization
  418. Current Article Popularity Trends on Hacker News
  419. Current rainfall, weather and buoy information for Ventura County and nearby counties
  420. Curved Links
  421. Curved textPath
  422. Custom Axis
  423. Custom Cartesian Projection
  424. Custom Easing
  425. Custom Multi Scale Time Format Axis
  426. Custom Path and Area Generator
  427. Custom Projection
  428. Cylindrical Equal-Area
  429. D#.js and Hawaii Open Data
  430. D3 and Custom Data Attributes
  431. D3 and the Power of Projections : MapBrief
  432. D3 and WordPress
  433. D3 Arc Diagram
  434. D3 Bookmarklet
  435. D3 Chart Builder
  436. D3 concept browser
  437. D3 Conceptually
  438. D3 Dependencies
  439. D3 Dorling cartogram with rectangular states
  440. D3 examples
  441. D3 Examples on Heroku
  442. D3 flights
  443. D3 for Mere Mortals
  444. D3 Geo Boilerplate: Responsive, Zoom Limits, TopoJson, and Tooltips
  445. D3 GeoJSON and TopoJSON Online Renderer with Drag and Drop
  446. D3 Globe with Natural Earth Image wrapped around using Canvas
  447. D3 graph plugin
  448. D3 graphics in a Pergola SVG UI
  449. D3 heatmap using Backbone.js and CoffeeScript
  450. D3 Hello World
  451. D3 js slides
  452. D3 line chart for Angularjs
  453. D3 linked view with a hexagonal cartogram
  454. d3 meta-visualization
  455. D3 node focus
  456. d3 O’Clock: Building a Virtual Analog Clock with d3.js, Part I
  457. d3 pie plugin
  458. D3 PJAX
  459. d3 rendered with RaphaelJS for IE Compatibility
  460. D3 selection transform syntax
  461. d3 several time scales
  462. D3 Show Reel
  463. D3 Slopegraph I
  464. D3 Slopegraph II
  465. D3 tag at Empire5
  466. D3 tag at Exploring Data
  467. D3 Time Zone World Map
  468. D3 Treemap with Title Headers
  469. D3 Tutorials
  470. D3 Waveform Live demo
  471. D3 with HTML: divs as datavis
  472. d3 workshop
  473. D3 Workshop Slides
  474. D3 World Map Game
  475. D3 World Map that Zooms to each Country on Click
  476. D3 World Map with Country Tooltips and Colors
  477. D3 World Map with local image tiles
  478. D3 World Map with Smooth Mouse Zooming
  479. D3 World Map with Zoom, ToolTips, and Data Points
  480. D3 World Maps: Tooltips, Zooming, and Queue
  481. D3-Builder
  482. d3-comparator: sort arrays of objects by multiple dimensions
  483. D3-curvy/
  484. D3-plugins
  485. D3-tip on a bar chart
  486. D3-tree
  487. d3-tree-heatmap
  488. D3, Conceptually
  489. D3: Data-Driven Documents
  490. d3.bayarea( ) Celebrating 1024 members!
  491. d3.chart Choropleths
  492. d3.chart.tooltips
  493. d3.create + selection.adopt
  494. d3.geo.path + Canvas
  495. d3.geo.path and d3.behavior.zoom
  496. d3.geo.tile
  497. d3.geo.tile
  498. d3.geo.tiler
  499. D3.java script by Vienno – Keenjar
  500. D3.js and a little bit of ClosureScript
  501. D3.js and Excel
  502. D3.js and GWT proof-of-concept
  503. D3.js and Meteor to generate SVG
  504. D3.js and MongoDB
  505. D3.js and vega.js plots in the IP notebook
  506. D3.js and X-Requested-With Header
  507. D3.js crash course
  508. D3.js Docco documentation
  509. D3.js Documentation Generator for Dash and HTML
  510. D3.js experiments in the console
  511. d3.js for Attacker Reports
  512. D3.js force diagram from Excel
  513. D3.js force diagrams straight from Excel
  514. D3.js force diagrams with markers straight from Excel
  515. D3.js Geo fun
  516. D3.js graphs for RHQ
  517. D3.js Lessons: Create a Basic Column Chart
  518. D3.js Meta Tutorial
  519. D3.js nested data
  520. d3.js on Veengle
  521. D3.js Playground
  522. D3.js playground
  523. D3.js Premiership Season
  524. D3.js Presentation
  525. D3.js Slider Examples
  526. D3.js Sublime2 snippets
  527. D3.js tag at Frakturmedia
  528. d3.js tag at Monkeyologist
  529. D3.js tag on The JavaDude Weblog
  530. D3.js talk at Github
  531. D3.js talk from Iowa City Feb 2013 Iowa JS Meetup
  532. D3.js Tips and Tricks
  533. D3.js tree with drag nea logic
  534. D3.js tutorial on CodeAcademy
  535. d3.js video tutorial
  536. D3.js, elasticsearch, bordeaux open data
  537. D3.js,Data Visualisation in the Browser
  538. D3.js: Data-Driven Delight
  539. d3.micromaps
  540. d3.nest
  541. d3.phylogram
  542. d3.sticker plugin
  543. d3.time.format localization
  544. d3.time.scale nice
  545. d3.tsv
  546. d34raphael
  547. DAG as force graph
  548. Dagre: Directed graph rendering
  549. Daily data return rates for seismic networks in the EarthScope USArray
  550. Dance.js: D3 with Backbone and Data.js
  551. Dangle
  552. Dashifyr
  553. Dat achart plugin
  554. Data Science Venn Diagram
  555. Data Stories #22: NYT Graphics and D3
  556. Data Story
  557. Data Visualization at MinnPost
  558. Data Visualization Libraries Based on D3.JS
  559. Data Visualization Using D3.js
  560. Data visualization with D3.js and python
  561. Data Visualization with D3.js, slides and video
  562. Data-Driven Documents, Defined, Resources, Data Driven Journalism
  563. Datadog
  564. DataFart
  565. Dataflow programming with D3 and Blockly
  566. DataMaps: Interactive maps for data visualizations.
  567. Datameer Smart Analytics
  568. Datawrapper: An open source tool to create embeddable charts
  569. Date Ticks
  570. DavaViz for Everyone: Responsive Maps With D3
  571. David Foster Wallace’s ‘Infinite Jest’
  572. DC Code Browser
  573. DC government
  574. Dc.js
  575. De Maastricht au traité budgétaire : les oui et les non de 39 personnalités politiques
  576. De Maastricht au traité budgétaire : les oui et les non de 39 personnalités politiques
  577. Deadly Tornado Outbreak – April 25-28, 2011
  578. Decomposing an image from canvas to SVG
  579. Delaunay Force Mesh
  580. Delaunay Triangulation
  581. Delta-flora for IntelliJ analyze project source code history
  582. Density map of homicides in Monterrey
  583. Dependo: force directed graph of JavaScript dependencies
  584. Description: A little language for d3js
  585. Design process of The Electoral Map
  586. Designing a Reusable Line Chart in D3JS
  587. Detecting Duplicates in O(1) Space and O(n) Time
  588. Dex Motion Chart Demo
  589. DexCharts: A new reusable charting library for D3.js
  590. Diagram of Patients and Symptoms
  591. Dial examples
  592. Difference Chart
  593. Diffusion-limited aggregation
  594. Dimensional Changes in Wood
  595. Dimple Pong
  596. Dimple.js: An oo API for business analytics powered by d3.
  597. Direct Flights with Connections
  598. Directed Graph Editor
  599. Directly render and serve d3 visualizations from a nodejs server.
  600. Disc
  601. Dispatching Events
  602. Dissecting a Trailer: The Parts of the Film That Make the Cut
  603. Distances from North Korea
  604. DOM-to-Canvas using D3
  605. Donut Chart
  606. Donut Multiples
  607. Donut Transitions
  608. Dorling World Map
  609. Dot Append video tutorials
  610. Dot Enter video tutorials
  611. Dot enter( ) stage left
  612. Dot plot with jittering
  613. Dots
  614. Double Cordiform
  615. Downton Ipsum ~ A Downton Abbey-inspired lorem ipsum text generator
  616. Drag + Zoom
  617. Drag and Drop Container Divs
  618. Drag and Drop SVG Geography Game with D3.js
  619. Drag and resize a D3.js chart with JqueryUI
  620. Drag Multiples
  621. Drag rectangle
  622. Draggable Network
  623. Draggable Network II
  624. Draw tangent on a line on mouseover
  625. Drawing Chemical Structures with Force Layout
  626. Drawing Hexagon Mesh with contour using TopoJSON
  627. Driving from Thailand to the Netherlands
  628. Drop shadow example
  629. Drought and Deluge in the Lower 48
  630. Drought during Month
  631. Drought Extends Crops Wither
  632. DRY Bar Chart
  633. Dual scale line chart
  634. DViz: a declarative data visualization library
  635. Dymo
  636. Dynamic Distance Cartogram for ORBIS
  637. Dynamic Hexbin
  638. Dynamic Simplification
  639. Dynamic Simplification II
  640. Dynamic Simplification III
  641. Dynamic Simplification IV
  642. Dynamic Visualization LEGO
  643. Dynamic-Graphs: charting lib for real-time data
  644. Dynamics of Swedish politics
  645. Earthquakes
  646. Easy infographics with D3.js
  647. Eckert I Projection
  648. Eckert II Projection
  649. Eckert III Projection
  650. Eckert IV Projection
  651. Eckert V Projection
  652. Eckert VI Projection
  653. Eckert–Greifendorff
  654. eCommerce API Wheel for eBay
  655. Economic performance of the Amsterdam Metro Area by sector and year
  656. Edge labels
  657. Eisenlohr Projection
  658. El Patrón de los Números Primos
  659. Elastic collisions
  660. Elbow Dendrogram
  661. Election 2012 Social Dashboard (interactive Twitter visualization)
  662. Electro 2013: The magnetic force between political candidates and objectives
  663. Elezioni 2013 – I risultati del voto per la Camera dei deputati
  664. Embed D3.js Animations in Slidify
  665. Embedly Blog, Visualizing discussions on Reddit with a D3 network and Embedly
  666. Ember Table
  667. Ember Timetree
  668. English Football Tickets: Value For Money
  669. Enumerating vertex induced connected subgraphs
  670. Epicyclic Gearing
  671. Epicyclical Gears
  672. EPSG:2163 Coordinates
  673. Equidistant Conic Projection
  674. Equirectangular (Plate Carrée)
  675. Error bars reusable component
  676. Eurozone crisis: more than debt
  677. Events in the Game of Thrones
  678. Every ColorBrewer Scale
  679. Every known drone strike and victim in Pakistan
  680. Example of interactive MDS visualisation
  681. Example of map with routes in Gunma
  682. Exit, Update, Enter
  683. Exit, Update, Enter II
  684. Exoplanets
  685. Exoplanets: an interactive version of XKCD 1071
  686. Expandable Menu
  687. Exploration of the Google PageRank Algorithm
  688. Explore Analytics: cloud-based data analytics and visualization
  689. Exploring d3.js with data from my runs to plot my heart rate
  690. Exploring Health Care Cost and Quality
  691. Exploring Reusability with D3.js
  692. Explosions
  693. Export to SVG/PNG/PDF server-side using Perl
  694. Extending the D3 Zoomable Sunburst with Labels
  695. Extent Ticks
  696. External SVG
  697. Extradition Treaties
  698. Eyedropper
  699. Eyedropper
  700. F1 Championship Points as a d3.js Powered Sankey Diagram
  701. Facebook IPO
  702. Facebook Mutual Friends
  703. Facebook Open Graph with Angular
  704. Faces
  705. Factorisation Diagrams
  706. Fahey
  707. Fahrradunfälle in Deutschland
  708. Fancy Markers
  709. Fancy Markers (No Gradient)
  710. Farid Rener CV
  711. Fast Multidimensional Filtering for Coordinated Views
  712. Fast Pointing
  713. Faster pan/zoom on big TopoJSON of Iceland
  714. Faux-3D Arcs
  715. Faux-3d Shaded Globe
  716. Feltronifier
  717. Fibonacci Numbers
  718. Fill-Rule Evenodd
  719. Filling Geometric Objects
  720. Financial visualization of top tech companies
  721. Fineo: an app based on Sankey diagrams
  722. Finite State Stream
  723. First steps in data visualisation using d3.js
  724. Fisheye Distortion
  725. Fisheye Grid
  726. Fixed-width Histogram Irwin-Hall distribution
  727. Fixed-width Histogram of Durations log-normal distribution
  728. Flat-Polar Parabolic
  729. Flat-Polar Quartic
  730. Flat-Polar Sinusoidal
  731. Floating Landmasses
  732. Floor Plan Map
  733. Flow – Straight, Arrows
  734. Flows of refugees between the world countries in 2008
  735. Focus+Context via Brushing
  736. Focusable Maps
  737. Football passes
  738. For Example
  739. For Protovis Users
  740. Force Directed States of America
  741. Force Editor + Pan/Zoom
  742. Force layout big
  743. Force Layout from Adjacency List
  744. Force Layout from CSV
  745. Force Layout from List
  746. Force layout graph with colour-coded node neighbours
  747. Force Layout Multiples (Independent)
  748. Force layout on composite objects
  749. Force Layout with Canvas
  750. Force Layout with Mouseover Labels
  751. Force Layout with Tooltips
  752. Force-based label placement
  753. Force-Based Label Placement
  754. Force-Directed Graph
  755. Force-Directed Graph
  756. Force-Directed Graph with Mouseover
  757. Force-Directed Graphs: Playing around with D3.js
  758. Force-Directed Layout from XML
  759. Force-directed layout with custom Forces
  760. Force-directed layout with drag and drop
  761. Force-directed layout with from Matrix Market format
  762. Force-directed layout with images and Labels
  763. Force-directed layout with multi Foci and Convex Hulls
  764. Force-directed layout with multiple Foci
  765. Force-directed layout with symbols
  766. Force-directed lollipop chart
  767. Force-Directed Parallel Coordinates
  768. Force-directed Splitting
  769. Force-Directed States
  770. Force-Directed SVG Icons
  771. Force-Directed Tree
  772. ForceEdgeBundling on US airline routes
  773. ForceLayoutEditor
  774. Forecast of Mexican 2012 presidential election
  775. Foreign aid, corruption and internet use
  776. Formula 1 Lap Chart
  777. Forrst, Visualizing US Foreign Aid with D3.js
  778. Foucaut’s Stereographic Equivalent
  779. Four Ways to Slice Obama’s 2013 Budget Proposal
  780. France – Data Explorer
  781. From Random Polygon to Ellipse
  782. From tree to cluster and radial projection
  783. Fuzzy Counties
  784. Fuzzy Link-Bot
  785. G3plot-1
  786. Gall Stereographic
  787. Gall–Peters
  788. Game of life
  789. GAMEPREZ Developer Kit
  790. Gantt Chart plugin
  791. Gantt Chart, example 3
  792. Gauge
  793. Gaussian Primes
  794. General Update Pattern I
  795. General Update Pattern II
  796. General Update Pattern III
  797. GeoDash
  798. Geodesic Grid
  799. Geodesic Rainbow
  800. Geographic Bounding Boxes
  801. Geographic Bounding Boxes
  802. Geographic Clipping
  803. GeoJOIN
  804. GeoJSON Transforms
  805. Geometry daily #129
  806. GeoMobilité – Application cartographique de la mobilité
  807. Get dirty with data using d3.js
  808. getBBox
  809. Getting Started with D3
  810. ggplot2 + d3 = r2d3
  811. ggplot2-Style Axis
  812. Gilbert’s Two-World Perspective
  813. Ginzburg IV
  814. Ginzburg IX
  815. Ginzburg V
  816. Ginzburg VI
  817. Ginzburg VIII
  818. Giraffe : A Graphite Dashboard with a long neck
  819. Girko’s Circular Law
  820. Girls Lead in Science Exam, but Not in the United States
  821. Gist API Latency
  822. Git-backed Node Blob Server
  823. GitHub visualization
  824. Github Visualizer
  825. gka’s blocks
  826. Glimpse.js: a new chart library on top of D3.js
  827. Global Life Expectancy
  828. Global Oil Production & Consumption since 1965
  829. Global Surface Temperature: 500 … 2009
  830. Globe rendered with WebGL and Three.js.
  831. Glucose heatmap over hours of day
  832. Glucose with panning
  833. Gnomonic
  834. Gnomonic Butterfly
  835. Goode Homolosine
  836. Google calendar like display
  837. Google Flu Trends
  838. Google Hurdles
  839. Google Maps + D3
  840. GOV.UK’s web traffic
  841. Gradient Along Stroke
  842. Gradient Bump
  843. Gradient Encoding
  844. Graph diagram of gene ontology
  845. Graph of my current interests and aspirations
  846. Graph Rollup
  847. Graphicbaseball: 2012 Batters
  848. Graphicbaseball: 2012 Pitchers
  849. Graphs
  850. Gravity balls
  851. Gray Earth
  852. Great Arc
  853. Great Circle Arc Intersections
  854. Great-Circle Distance
  855. Grid layout
  856. Gringorten Equal-Area
  857. Grouped Bar Chart
  858. Grouped Bar Chart
  859. GSA-Leased Opportunity Dashboard
  860. Gun homicides in America 2010
  861. Gun ownership versus gun violence
  862. Guts of EnergyPlus Source Code Visualized with d3.js
  863. Guyou Projection
  864. Hacker News statistics using PhantomJS
  865. Hacker Notes, d3 tag
  866. Hamiltonian Graph
  867. Hammer
  868. Hammer Retroazimuthal
  869. Hamming Quilt
  870. Haphazard collection of examples for a book
  871. HarvardX Research: worldwide student enrollment
  872. Hashing Points
  873. Hata’s tree-like set (with slider)
  874. Hatnote Listen to Wikipedia
  875. HEALPix
  876. Health and Wealth of Nations
  877. Healthvis R package – one line D3 graphics with R
  878. Heatmap
  879. Heatmap and 2D Histogram
  880. Heatmap of gene expression with hierarchical clustering
  881. Heatmap with Canvas
  882. Heavily annotated scatterplot
  883. Hedonometer: Daily Happiness Averages for Twitter
  884. Heightmap
  885. Hell is Other People: Scott Made This
  886. Hello WebGL
  887. Hello WebGL II
  888. Hello WebGL III
  889. Hello WebGL IV
  890. herrstucki on bl.ocks
  891. Hexagonal Binning
  892. Hexagonal Binning (Area)
  893. Hexagonal cartogram of Asian economies and potential shifts in manufacturing
  894. Hexagonal Grids
  895. Hexbin Edits on OpenStreetMap
  896. Hierarchical Bar Chart
  897. Hierarchical Bars
  898. Hierarchical classification
  899. Hierarchical Edge Bundling
  900. Hierarchical Edge Bundling
  901. Hierarchical Edge Bundling
  902. Hierarchical Edge Bundling
  903. Hierarchical Edge Bundling
  904. Hilbert Curve
  905. Hilbert Stocks
  906. Hilbert Stocks
  907. Hilbert Tiles
  908. Hill Eucyclic
  909. Histogram
  910. Histogram (Redirect)
  911. Histogram Chart
  912. Histogram Generator with D3
  913. Historical UK Maps
  914. History of the WWE Title
  915. Hive Plot
  916. Hive Plot (Areas)
  917. Hive Plot (Links)
  918. Hive Plot for Student Systems
  919. Hobo–Dyer
  920. Home energy consumption
  921. Horizon Chart
  922. Horse Exports/Imports in the EU
  923. Hotspots
  924. House Hunting All Day, Every Day – Trulia Insights
  925. How does Quartz create visualizations so quickly on breaking news?
  926. How educated are world leaders?
  927. How Obama Won Re-election
  928. How selectAll Works
  929. How Selections Work
  930. How the Chicago Public School District Compares
  931. How to Animate Transitions Between Multiple Charts
  932. How to convert to D3js JSON format
  933. How to design a dashboard using d3.js
  934. How to Embed Open Spending Visualizations
  935. How to get a significant correlation value by moving just one point around
  936. How to Make an Interactive Network Visualization
  937. How to Make Choropleth Maps in D3
  938. How to visualise funnel data from Google Analytics
  939. HTML Overlay with pageX / pageY
  940. HTML5 input type nodes
  941. http://nowherenearithaca.blogspot.com/2012/06/annotating-d3-example-with-docco.html
  942. Hypercube Edges in Orthogonal Projection
  943. Hypercube with Parallel Coordinates
  944. Iceland Topography
  945. Icelandic population pyramid
  946. Icequake
  947. Icicle
  948. Icosahedron
  949. Icosahedron
  950. iD Architecture: Map Rendering and Other UI
  951. iD: a friendly editor for OpenStreetMap
  952. IDH des communes du Nord-Pas de Calais.
  953. iLearning – D3.js Basic for iPad
  954. Image Markers
  955. Image Processing
  956. Image tiles with float: left
  957. Immersion: a people-centric view of your email life
  958. Income diff. between male and female dominated occupations 1
  959. Income diff. between male and female dominated occupations 2
  960. Increased Border Enforcement, With Varying Results
  961. Increased Border Enforcement, With Varying Results – Interactive Graphic – NYTimes.com
  962. Indented tree layout
  963. Indian Village Components
  964. Indo-Europeans
  965. Inequality and NY Subway
  966. Inequality in America
  967. Infinite Plasma Fractal
  968. Infinite Queue
  969. Infro
  970. Infro.js: Filtering Tabular Data
  971. Infro.js: Nutrient Dataset
  972. Inkscape-s3-server
  973. Input Value Interpolation
  974. Inspired by geometry daily
  975. Instant interactive visualization with d3 + ggplot2
  976. Integrating D3 with a CouchDB database 1
  977. Integrating D3 with a CouchDB database 2
  978. Integrating D3 with a CouchDB database 3
  979. Integrating D3 with a CouchDB database 4
  980. Interactive azimuthal projection simulating a 3D earth with stars
  981. Interactive Data Visualization for the Web
  982. Interactive Data Visualization for the Web: read online
  983. Interactive Gnomonic
  984. Interactive Line Graph
  985. Interactive Line Graph
  986. Interactive MDS visualisation
  987. Interactive Orthographic
  988. Interactive Publication History
  989. Interactive Stereographic
  990. Interactive Streamgraph
  991. Interactive visual breakpoint detection on SegAnnDB
  992. Interpolating with d3.tween
  993. Interrupted Boggs Eumorphic
  994. Interrupted Goode Homolosine
  995. Interrupted Goode Raster
  996. Interrupted Mollweide
  997. Interrupted Sinu-Mollweide
  998. Interrupted Sinusoidal
  999. Interrupted Transverse Mercator
  1000. Intro to d3
  1001. Introducing Contributions on GitHub
  1002. Introduction
  1003. Introduction to D3
  1004. Introduction to D3
  1005. Introduction to D3.js
  1006. Introduction to d3.js and data-driven visualizations
  1007. Introduction to Network Analysis and Representation
  1008. IPython-Notebook with D3.js
  1009. Irish Horse Breeding Data
  1010. IRL Trnspttr
  1011. Irregular Histogram (Lollipop)
  1012. Is Barack Obama the President? (Balloon charts)
  1013. iTunes Music Library Artist/Genre Graph
  1014. Jan Willem Tulp portfolio
  1015. Japanese Government Bonds Rates
  1016. Japanese Government Bonds Yield Curve
  1017. Javascript and MapReduce
  1018. Javascript Idioms in D3.js
  1019. Jerome Cukier » Selections in d3 – the long story
  1020. Jérôme Cukier portfolio
  1021. JezzBall
  1022. Jim Vallandingham portfolio
  1023. Job Flow
  1024. Jobs by state
  1025. johan’s blocks
  1026. JSNetworkX: A port of the NetworkX graph lib to JS
  1027. Jsplotlib
  1028. Junction Finding
  1029. Just Enough SVG
  1030. K-means
  1031. Kaleidoscope
  1032. Kaprekar Routine
  1033. Kavrayskiy VII Projection
  1034. Kentucky Population Density
  1035. Kentucky Population Density
  1036. Kepler’s Tally of Planets
  1037. Kernel Density Estimation
  1038. Kind of 3D with D3
  1039. Kindred Britain
  1040. Know Huddle – Correlation
  1041. Koalas to the Max
  1042. L*a*b* and HCL color spaces
  1043. La Nuit Blanche
  1044. Labeled points
  1045. Labeling in OpenStreetMap’s iD Editor
  1046. Lagrange Projection
  1047. Lambert Azimuthal Equal-Area
  1048. Lambert Conformal Conic Projection
  1049. Language Network
  1050. Lantern
  1051. Larrivée Projection
  1052. Laskowski Tri-Optimal
  1053. Last Chart! – See the Music
  1054. Latest Earthquakes
  1055. Lazy Scale Domain
  1056. LDA Topic Arcs: The DaVinci Code
  1057. LDAviz
  1058. Leaflet + D3js: Hexbin
  1059. Leaflet Template
  1060. leaflet.d3
  1061. Leap Motion D3.js Demo
  1062. Leap motion map tests
  1063. Learn how to make Data Visualizations with D3.js
  1064. Learning D3, Speaker Deck
  1065. Left-Aligned Ticks
  1066. Left-Aligned Ticks
  1067. Legend
  1068. Leibniz Spiral
  1069. Lepracursor
  1070. Les Misérables Co-occurrence Matrix
  1071. Let’s Make a Map
  1072. Letter Frequency
  1073. Liberal Revolution of 1820 in Lisbon
  1074. Library for visualizing Go games
  1075. License Usage Dashboard
  1076. Life expectancy 1960-2009 choropleth
  1077. Life expectancy 1960-2009 panel chart
  1078. Life expectancy 1960-2009 slopegraph
  1079. Limaçon as envolve of circles around a circle
  1080. Line Chart
  1081. Line Chart with tooltips
  1082. Line chart with zoom, pan, and axis rescale
  1083. Line Interpolation
  1084. Line Intersection Brushing
  1085. Line Simplification
  1086. Line Tension
  1087. Line Transition
  1088. Line Transition (Broken)
  1089. Linear Gradient
  1090. Linear Programming
  1091. Lines with Rounded Turns
  1092. Linked Jazz network graph
  1093. List of all the Gists from Mike Bostock
  1094. Littrow
  1095. Live coding based on Bret Victor’s Inventing on Principle talk
  1096. Loading a thumbnail into Gist for bl.ocks.org d3 graphs
  1097. Loading Adobe Photoshop ASE color palette
  1098. Lobster Catch Analyst
  1099. Log Axis
  1100. Log Axis with Zero
  1101. London D3.js Meetup #2
  1102. London d3.js Meetup #5
  1103. London d3.js User Group
  1104. London Olympics Perceptions – Donuts to Chord Diagram Transition
  1105. Long Scroll
  1106. Lorenz System
  1107. Lorenz Toy
  1108. Loupe
  1109. Loximuthal
  1110. Loxodrome
  1111. Made with D3.js
  1112. Major League Baseball Home Runs 1995-2010
  1113. Make a bubble chart using d3.js demo
  1114. Making maps with d3.js
  1115. Mandel for Controller Bulldog Budget
  1116. Manipulating data like a boss with d3
  1117. Manual Axis Interpolation
  1118. Map Direct Flights with D3
  1119. Map from GeoJSON data with zoom/pan
  1120. Map of all M2.5+ earthquakes of the last 24h.
  1121. Map of COMIPEMS Scores
  1122. Map of Germany using D3.js and Simplify.js
  1123. Map of Italiens
  1124. Map of pro sports teams by territory
  1125. Map Projection Distortions
  1126. Map Projection Transitions
  1127. Map with faux-3D globe
  1128. Map Zooming
  1129. Map Zooming II
  1130. Map Zooming III
  1131. Mapbox: add vector features to your map with D3
  1132. Mapping Hate Crimes in Iran
  1133. Mapping the Melting Pot
  1134. Mapping Tours with D3 and SeatGeek
  1135. Maps and sound
  1136. Maps Garage: Exploring Map Data with Crossfilter
  1137. Marey’s Trains
  1138. Marey’s Trains II
  1139. Margin Convention
  1140. Marimekko Chart
  1141. Marimekko, Mekko or Mosaic Chart
  1142. Markov processes
  1143. Marmoset chimerism dotplot
  1144. Masking with external svg elements
  1145. MathBox animation vs d3.js enter/exit
  1146. MathJax label
  1147. Matrix Layout
  1148. Maurer No. 73
  1149. Men’s 100m Olympic champions
  1150. Mercator
  1151. Mercator Projection
  1152. Merge Sort
  1153. Merging States
  1154. Merging States II
  1155. Meshu turns your places into beautiful objects.
  1156. Messing around wih D3.js and hierarchical data
  1157. Metaevil
  1158. meteor-deployments
  1159. Metrica
  1160. Metropolitan Unemployment
  1161. Mexican Presidential Election 2012
  1162. mgrafeeds
  1163. Mike Bostock portfolio
  1164. Milky Way
  1165. Miller Projection
  1166. Minecraft Overviewer
  1167. Minimalist example of reusable D3.js plugin
  1168. Miniviz
  1169. Minute: record of all of my keystrokes
  1170. Mirrored Easing
  1171. Misc. Examples
  1172. Miscellaneous utilities for D3.js
  1173. Mitchell’s Best-Candidate
  1174. Mitchell’s Best-Candidate 1
  1175. Mitchell’s Best-Candidate 2
  1176. Mitchell’s Best-Candidate 3
  1177. MLB Hall of Fame Voting Trajectories
  1178. MN Giving Day 2012
  1179. Mobile Patent Lawsuits
  1180. Mobile Patent Suits
  1181. Modal Logic Playground
  1182. Modifying a Force Layout
  1183. Moiré Patterns
  1184. Molecule
  1185. Mollweide
  1186. Mollweide Hemispheres
  1187. Mollweide Watercolour
  1188. Monday-based Calendar
  1189. Money Wins Elections
  1190. Monotone Interpolation Bug
  1191. Monotone Line Interpolation
  1192. Monte Carlo simulation of bifurcations in the logistic map
  1193. Month Axis
  1194. More Data Visualization Libraries Based on D3.JS
  1195. More Introduction to D3
  1196. Morley’s trisector theorem
  1197. Morphogenesis Simulation
  1198. Most simple d3.js stack bar chart from matrix
  1199. Mouseenter
  1200. mousewheel-zoom + click-to-center
  1201. Movie color analysis with XBMC, Boblight, Java and D3.js
  1202. Moving Histogram
  1203. Moving Squares
  1204. Mower game
  1205. Muerte Materna en Argentina
  1206. Multi-Foci Force Layout
  1207. Multi-Foci Force Layout
  1208. Multi-Line Voronoi
  1209. Multi-Series Line Chart
  1210. Multi-series Line Chart with Long Format Data (columns instead of rows)
  1211. Multi-Series Line to Stacked Area Chart Transition
  1212. Multi-Value Maps
  1213. Multiline chart with brushing and mouseover
  1214. Multiline with zoomooz
  1215. Multiple Area charts and a brush tool
  1216. Multiple area charts with d3.js
  1217. Multiple Leap Motions over WebSockets – YouTube
  1218. Multiple Lines grid
  1219. Multiple time-series with object constancy
  1220. Multiple visualization from the Société Typographique de Neuchâtel
  1221. My Force Directed Graph
  1222. Natural Earth
  1223. Natural Log Scale
  1224. NCAA 2012 March Madness Power Rankings
  1225. Negative stacked bar chart
  1226. Nell–Hammer Projection
  1227. Nested Selections
  1228. Network of World Merchandise Trade
  1229. Neuroscience and brain stimulation publication counts
  1230. New Jersey Blocks
  1231. New Jersey State Plane
  1232. New York Block Groups
  1233. New Zealand Earthquakes Pattern of Life
  1234. Newton’s balls
  1235. Newton’s cradle
  1236. NFL salaries by team and position
  1237. Nick Jaffe’s Polymap
  1238. No Antimeridian Cutting
  1239. Nodal is a fun way to view your GitHub network graph
  1240. Node + MySQL + JSON
  1241. Node-Link Tree
  1242. Non-Computed Style Tween
  1243. Non-contiguous Cartogram
  1244. Non-Contiguous Cartogram
  1245. Non-contiguous cartogram of seats allocated in the canadian House of Commons
  1246. Noob on JSON : Data for d3.js documents
  1247. Normalized Stacked Bar Chart
  1248. Number of heat stroke
  1249. Number of unique rectangle-free 4-colourings for an nxm grid
  1250. Nutrient Database Explorer
  1251. NVD3
  1252. NVD3 for BI
  1253. nvd3.py
  1254. NY Times Strikeouts Graphic, recreated using rCharts and PolychartJS
  1255. NYC Bike Share
  1256. NYC D3.js
  1257. Obesity map
  1258. Object Constancy
  1259. Object constancy with multiple sets of time-series
  1260. Ocean
  1261. OECD Health Government Spending and Obesity Rates (nvd3)
  1262. offsetX / offsetY
  1263. offsetX / offsetY
  1264. Ohio State Plane (N)
  1265. Old Visualizations Made New Again
  1266. Oliver Rolle / Logarithmic Line Chart
  1267. Olympic Medal Rivalry
  1268. OMG Particles!
  1269. One Path for All Links
  1270. One System, Every Kepler Planet
  1271. One-Way Markers
  1272. Online GeoJSON and TopoJSON renderer
  1273. Open Knowledge Festival Hashtag Graph Visualization
  1274. OpenBudget
  1275. OPHZ Zooming
  1276. ORBIS v2
  1277. Order
  1278. Ordinal Axis
  1279. Ordinal Brushing
  1280. Ordinal Tick Filtering
  1281. Ordinal Tick Filtering
  1282. Orthographic
  1283. Orthographic Clipping
  1284. Orthographic Grid
  1285. Orthographic Projection
  1286. Orthographic Shading
  1287. Orthographic to Equirectangular
  1288. Over the Decades How States Have Shifted
  1289. Pack Test
  1290. Pack Test
  1291. Pair Contribution and Selection
  1292. Pale Dawn
  1293. Pan+Zoom
  1294. Papa
  1295. Parallel Coordinates
  1296. Parallel Coordinates
  1297. Parallel Coordinates
  1298. Parallel Coordinates
  1299. Parallel Coordinates
  1300. Parallel coordinates with fisheye distortion
  1301. Parallel Lines and Football using Dex and D3.js
  1302. Parallel Sets
  1303. Paris Transilien
  1304. Partition Layout (Zoomable Icicle)
  1305. Path and Transform Transitions
  1306. Path from function 2
  1307. Path from function 3
  1308. Path Tween
  1309. path_from_function_2
  1310. Path_from_function_2
  1311. Pedigree Tree
  1312. Peirce Quincuncial
  1313. Peirce Quincuncial
  1314. Percent women in city councils
  1315. Percentile line chart of gene expression microarrays
  1316. Percolation model
  1317. Periodic table
  1318. Periodic table
  1319. Perlin circles
  1320. Perlin Ink
  1321. Perlin Landscape
  1322. Perlin Worms
  1323. Peter Cook Web Developer
  1324. Ph.D. Thesis Progress
  1325. PhD in the Bundestag
  1326. Phylogenetic Tree of Life
  1327. Pictograms
  1328. Pie Chart
  1329. Pie Chart Update I
  1330. Pie Chart Update II
  1331. Pie chart update III
  1332. Pie chart update IV
  1333. Pie Chart Update, III
  1334. Pie Chart Update, IV
  1335. Pie Chart Update, V
  1336. Pie Chart Updating with Text
  1337. Pie Multiples
  1338. Pie Multiples with Nesting
  1339. Pimp my Tribe
  1340. Pixymaps (Dragging)
  1341. Pixymaps (Scrolling)
  1342. Placename patterns
  1343. Places in the Game of Thrones
  1344. Plan du métro interactif
  1345. Plan interactif du métro
  1346. Planarity
  1347. Planck-cl
  1348. Plant Hardiness Zones
  1349. Plants
  1350. Plot.io (swallowed by Platfora)
  1351. Plotly: create graphics, analyze with Python, annotate and share
  1352. Plotsk: A python/coffeescript/d3.js-based library for plotting data in a web browser
  1353. Plotting library for python based on D3.js
  1354. Población de Argentina, Experimento D3.js
  1355. Poincaré Disc
  1356. Point-Along-Path Interpolation
  1357. Point-Along-Path Interpolation
  1358. Polar Azimuthal Equal-area
  1359. Polar Plot
  1360. PolarClock
  1361. Polls on the 2012 U.S. Election
  1362. Polybrush.js
  1363. Polychart: A browser-based platform for exploring data and creating charts
  1364. Polyconic Projection
  1365. Polygonal Lasso Selection
  1366. Polylinear Time Scale
  1367. Polymaps / Andrew Mager
  1368. Polymaps / Andrew Mager
  1369. Polymaps / Andrew Mager
  1370. Polymaps / Andrew Mager
  1371. Polymaps / Andrew Mager
  1372. Polymaps / CSS Hover
  1373. Polymaps / Heatmap
  1374. Polymaps / JSONP Queue
  1375. Polymaps / Procedural Perlin
  1376. Polymaps + D3
  1377. Polymaps + D3 Part 2
  1378. Polymaps bad projection example
  1379. polymaps.appspot.com
  1380. Poor Anti-Aliasing in SVG #1
  1381. Poor Anti-Aliasing in SVG #2
  1382. Population Choropleth
  1383. Population of the cantons and of the 10 largest cities of Switzerland
  1384. Population Pyramid
  1385. Portfolio
  1386. Portrait in Chinese ascii: Chris Viau
  1387. Portrait in Chinese ascii: EJFox
  1388. Predsjednik Republike Srpske
  1389. Presentation on Visualizing Data in D3.js and mapping tools at NetTuesday
  1390. Price Changes: animated dimple.js chart
  1391. Processing Fixed-Width Data
  1392. Profils des cyclistes
  1393. Programmatic Pan+Zoom
  1394. Progress Events
  1395. Project Groups – IS428: Visual Analytics for Business Intelligence
  1396. Project to Bounding Box
  1397. Projected Choropleth
  1398. Projected TopoJSON
  1399. Projection Contexts
  1400. Projection Transitions
  1401. Proof of Pythagoras’s Theorem
  1402. Proportion of Foreign Born in Large Cities: 1900
  1403. Prose-only Blocks
  1404. Prototype Chart Template (WIP)
  1405. Prototype: d3.geo
  1406. Protovis / David Karr
  1407. Protovis / Nelson Minar
  1408. Protovis / Quomo Pete
  1409. Pseudo-Demers Cartogram
  1410. Pseudo-Dorling Cartogram
  1411. Psi man
  1412. Public Interest Evaluation Project
  1413. Pushing D3.js commands to the browser from iPython
  1414. Pyramid charts: demographic transition in the US
  1415. Python-NVD3
  1416. Q-Q Plots
  1417. Quadratic Koch Island Simplification
  1418. Quadtree
  1419. Quadtree Madness Round 2
  1420. Quartic Authalic
  1421. Quartile plots
  1422. Quartile plots with outliers
  1423. Queue.js Demo
  1424. Quick Charting with D3js
  1425. Quick scatterplot tutorial for d3.js
  1426. Quicksort
  1427. Radar chart
  1428. Radial Arc Diagram
  1429. Rainbow Colors
  1430. Rainbow showing how to use mask and clipPath
  1431. Rainbow Worm
  1432. Rainbows are Harmful
  1433. Raindrops
  1434. Rainflow
  1435. Rakie & Jake
  1436. Random Arboretum
  1437. Random Points on a Sphere
  1438. Random Walk in Configuration Space
  1439. Range Transition
  1440. Raster & Vector Zoom
  1441. Raster Reprojection
  1442. Rbspd3
  1443. rCharts Custom, Cancer, Fantasy Football, and Three Level Mixed Effects Logistic Regression
  1444. rCharts: R interface for NVD3, Polycharts, MorrisJs and soon Rickshaw, DexCharts, Dc.js
  1445. Reactive Charts with D3.js and Reactive.js
  1446. Read File or HTTP
  1447. Real time sales
  1448. Real-time sentiment analysis of Obama 2012 victory speech
  1449. Really cool wordpress theme
  1450. Realtime Visualizations w/ D3 and Backbone
  1451. Realtime webserver stats
  1452. Recettear Item Data
  1453. Rectangular Polyconic
  1454. Rectilinear Grid
  1455. Reddit Insight
  1456. Rega: Experimental Ruby Vega generator
  1457. Reingold–Tilford Tree
  1458. Reingold–Tilford Tree (Redirect)
  1459. Relations of football players participating in Euro 2012
  1460. Remittance flows
  1461. Remittances
  1462. Render Geographic Information in 3D With Three.js and D3.js
  1463. Render sever-side using Phantomjs
  1464. Rendering Tests
  1465. Reorderable Stacked Bar Chart
  1466. Replicating a New York Times d3.js Chart with Tableau
  1467. Reports for Simple
  1468. Reprojected Raster Tiles
  1469. Republic of Ireland – Data Explorer
  1470. Resampling Comparison
  1471. Resampling Comparison
  1472. Resizable Force Layout
  1473. Resizable Markers
  1474. Responsive D3
  1475. Responsive SVG resizing without re-rendering
  1476. Responsive TopoJSON Sizing
  1477. Retrofit Analysis Report
  1478. Reusable D3 With The Queen, Prince Charles, a Corgi and Pie Charts
  1479. Reusable D3.js, Part 1: Using AttrTween, Transitions and MV*
  1480. Reusable D3.js, Part 2: Using AttrTween, Transitions and MV*
  1481. Reusable Interdependent Interactive Histograms
  1482. Reusable Pie Charts
  1483. Reusable text rotation
  1484. Reveal animation on a tree with a clip path
  1485. Reverse Geocoding Plug-in using an offline canvas
  1486. Rhodonea Curve
  1487. RHQ – Project Documentation Editor
  1488. Rickshaw: JavaScript toolkit for creating interactive real-time graphs
  1489. Ring Cutting
  1490. Ring Extraction
  1491. Rivers of the U.S.A.
  1492. Robinson Projection
  1493. Romanian parliamentarian bubble chart. In Romanian
  1494. Rotated Axis Labels
  1495. Rotating Cluster Layout
  1496. Rotating Equirectangular
  1497. Rotating Icosahedron
  1498. Rotating Orthographic
  1499. Rotating Orthographic
  1500. Rotating Orthographic
  1501. Rotating Transverse
  1502. Rotating Transverse Mercator
  1503. Rotating Transverse Mercator
  1504. Rotating Voronoi
  1505. Rotating Winkel Tripel
  1506. Rounded Rectangle
  1507. Rounded Rectangles
  1508. Route Probability Exploration with Parallel Coordinates
  1509. Running Away Balloons – simple game
  1510. sammyt/see
  1511. San Francisco Contours
  1512. San Francisco Movies (Beta Version)
  1513. Sankey Diagram
  1514. Sankey diagram with cycles
  1515. Sankey diagram with horizontal and vertical node movement
  1516. Sankey Diagram with Overlap
  1517. Sankey diagrams from Excel
  1518. Sankey Diagrams of Local Economic Flows
  1519. Sankey from Excel, inherited cell colors for links
  1520. Sankey Interpolation
  1521. Sankey your Google Spreadsheet Data
  1522. saraquigley bl.ocks
  1523. SAS ANALYSIS
  1524. SAS and D3.js: a macro to draw scatter plot
  1525. SAS and D3.js: map to display US cities murder rates
  1526. Satellite Projection
  1527. Satellite Projection Test
  1528. Satellite Raster
  1529. Save SVG as PNG
  1530. Scale-Dependent Sampling
  1531. Scatterize
  1532. Scatterplot
  1533. Scatterplot and Heatmap
  1534. Scatterplot for K-Means clustering visualization
  1535. Scatterplot Matrix
  1536. Scatterplot Matrix
  1537. Scatterplot Matrix Brushing
  1538. Scatterplot with Multiple Series
  1539. Scatterplot with Shapes
  1540. Schelling’s segregation model
  1541. School Absenteism
  1542. SCION simulation environment
  1543. Scott Murray tutorials in Japanese
  1544. See-Through Globe
  1545. See-Through Globe II
  1546. Segmented Lines
  1547. Selectable elements
  1548. Selecties EK 2012
  1549. selection.order
  1550. Self-Immolation In Tibet
  1551. Self-Organising Maps
  1552. Sensitivity/Specificity Plot
  1553. Sequential Tiles
  1554. Series of D3.js video tutorials
  1555. Set Partitions
  1556. Seven years of SSLC in Karnataka
  1557. Shape of My Library — Comics
  1558. Shape Tweening
  1559. Shared Data
  1560. SHEETSEE.JS: Fill up Websites with Stuff from Google Spreasheet
  1561. Shiboronoi
  1562. Shiny and R adaptation of Mike Bostock’s d3 Brushable Scatterplot
  1563. Shiny R and D3.js
  1564. Simple Bar Graph in Angular Directive with d3.js and Prototype.js
  1565. Simple D3.js Bar Chart Webcast
  1566. Simple Dashboard Example
  1567. Simple example using Vega, D3, and Jstat
  1568. Simple HTML data tables
  1569. Simple Junctions
  1570. Simple Radar Chart
  1571. Simple Reusable Bar Chart
  1572. Simple scatterplot
  1573. Simple table
  1574. Simple-map-d3
  1575. Simplex Noise Code 39 Barcode
  1576. Simplex Noise Dots
  1577. Simplifying and cleaning Shapefiles.
  1578. Sinu-Mollweide
  1579. Sinusoidal
  1580. Skillpedia: an open encyclopedia for skills
  1581. Sky Open Source, Behavioral Database
  1582. Skybox
  1583. SKYFALL. Meteorite falls map.
  1584. Slides and live code from the GAFFTA d3 intro workshop
  1585. Slippy map + extent indicator
  1586. SlopeGraph
  1587. Slopegraph lines in SVG and Canvas
  1588. Slopegraphs
  1589. Small Multiples
  1590. Small Multiples with Details on Demand
  1591. Smoke charts
  1592. Smooth Scrolling
  1593. Smooth Slider
  1594. SnakeViz: An In-Browser Python Profile Viewer
  1595. Snowden’s Route
  1596. Snowflake Simplification
  1597. Snowflakes
  1598. Snowflakes with D3
  1599. Social trust vs ease of doing business
  1600. Social web use in 2009
  1601. SOCR Violin Chart
  1602. Solar Terminator
  1603. SOM Animation
  1604. Sortable Bar Chart
  1605. Sortable Bar Chart
  1606. Sortable Table with Bars
  1607. Sorting Visualisations
  1608. Sparkline Directive for Angular with d3.js
  1609. Sparklines
  1610. SPARQLy GUIs: Linked Data and Semantic Web technologies
  1611. Spermatozoa
  1612. Sphere Spirals
  1613. Spherical Mercator
  1614. Spilhaus Maps
  1615. Spinny Globe
  1616. Spiral experiment
  1617. Spiral for John Hunter
  1618. Splay Tree animation with Dart D3.js and local storage
  1619. Spline Editor
  1620. Spline Transition
  1621. Split line game
  1622. Square Circle Spiral Illusion
  1623. Squares ↔ Hexagons
  1624. SRTM Tile Grabber: downloading elevation data
  1625. Stacked and grouped bar chart
  1626. Stacked Area Chart
  1627. Stacked Area via Nest
  1628. Stacked Bar Chart
  1629. Stacked Bar Chart
  1630. Stacked bar chart from a structure description of an R table
  1631. Stacked layout with time axis
  1632. Stacked Radial Area
  1633. Stacked-to-Grouped Bars
  1634. Stacked-to-multiple bar charts
  1635. Stage rankings – Tour de France 2013
  1636. Startseite – NZZ.ch
  1637. Startup Salary & Equity Compensation
  1638. Stat 221
  1639. Stat 221
  1640. Static Force Layout
  1641. SteamGraphs and Dex
  1642. Step by Step-Road Accidents in cities by years 2010
  1643. Steps Walked per Day
  1644. Stereographic
  1645. Sticky Force-Directed Graph
  1646. Stitching States from Counties
  1647. Stowers Group Collaboration Network
  1648. Strange attractor
  1649. Strata 2013 D3 Tutorial, Speaker Deck
  1650. Streamgraph
  1651. Streamgraph
  1652. Streamgraph
  1653. Streamgraph realtime streaming mouse coordinates
  1654. Streams
  1655. Streams
  1656. Street Extent Visualization Using #d3js and CartoDB
  1657. Strikeouts Are Still Soaring
  1658. Stripe Gross Volume witth D3.js
  1659. Stroke Dash Interpolation
  1660. stroke-dasharray
  1661. Students’s seating habits
  1662. style.setProperty
  1663. Subsecond Ticks
  1664. SugarForge: SolCRM by AlineaSol: Project Info
  1665. Summer Olympics Home Ground Advantage
  1666. Sunburst
  1667. Sunburst Layout with Labels
  1668. Sunburst with Distortion
  1669. Sunflower Phyllotaxis
  1670. Sunlight Heatmap
  1671. Sunny side of the Earth, for any date and time
  1672. Superformula Explorer
  1673. Superformula Tweening
  1674. Superscript Format
  1675. Superscript Format II
  1676. SVG feGaussianBlur
  1677. SVG foreignObject Example
  1678. SVG Geometric Zooming
  1679. SVG Group Element and D3.js
  1680. SVG Open Keynote Slides
  1681. SVG Path Cleaning
  1682. SVG Patterns
  1683. SVG resize to container
  1684. SVG Semantic Zooming
  1685. SVG Swarm
  1686. SVG to Canvas
  1687. SVG to Canvas to PNG using Canvg
  1688. Swimlane
  1689. Swiss Cantons
  1690. Swiss Topography
  1691. Symbol Map
  1692. Symbol Map
  1693. Table of Progress
  1694. Table Sorting
  1695. Table-driven plot
  1696. Tag Cloud
  1697. TAGSExplorer: Visualising Twitter graphs from a Google Spreadsheet
  1698. Talk at JS.geo 2013
  1699. Tampa Bay Rays Streamgraph
  1700. Telostats: Public bike stations in Tel Aviv
  1701. Templating ala Mustache with Chernoff faces example
  1702. Test Env
  1703. Tetris
  1704. Tetris
  1705. Text on arc path
  1706. TGI Models
  1707. The Amazing Pie
  1708. The Beautiful Table: fancy bar chart of football statistics
  1709. The business of Bond
  1710. The Concept Map
  1711. The d3 Community: How to Get Involved
  1712. The Diabetes Dashboard
  1713. The electoral map: building path to victory
  1714. The Euro Debt Crisis
  1715. The first commented line is your dabblet’s title
  1716. The first thing that should be shown in any Trigonometry class
  1717. The Gist to Clone All Gists
  1718. The Holy Bible Visualizaiton
  1719. The last slice of PIE
  1720. The Music of Graphs
  1721. The open source card report
  1722. The Polya process
  1723. The Polyconic Projection
  1724. The Polyglots Project
  1725. The Quest for the Graphical Web
  1726. The Senate Social Network
  1727. The Sentinal project
  1728. The Story of The US Told In 141 Maps
  1729. The Sun’s View of the Earth
  1730. The Wealth & Health of Nations
  1731. Thinking with Joins
  1732. Threat Report
  1733. Three Little Circles
  1734. Three-Axis Rotation
  1735. Threshold Choropleth
  1736. Threshold Encoding
  1737. Threshold Key
  1738. Time Bubble Lines
  1739. Time Series
  1740. Timeline
  1741. Timeline
  1742. Timeline of earthquake in Christchurch 2010
  1743. Times
  1744. Tissot’s Indicatrix
  1745. Tmcw’s bl.ocks
  1746. tnightingale bl.ocks
  1747. Tobler World-in-a-Square
  1748. Tooltips for D3.js visualizations
  1749. TopoJSON Examples
  1750. TopoJSON Layers
  1751. TopoJSON Parallax
  1752. TopoJSON Points
  1753. TopoJSON vectors on raster image tiles, with zoom and pan
  1754. Topology-Preserving Geometry Simplification
  1755. Towards Reusable Charts
  1756. TradeArc – Arc Diagram of Offseason NHL Trades
  1757. Traffix jitsu
  1758. Transform Interpolation
  1759. Transform Transitions
  1760. Transition End
  1761. Transition Example
  1762. Transition from a streamgraph to multiple area charts
  1763. Transition Speed Test
  1764. TransportView
  1765. Transverse Mercator
  1766. Transversing Equirectangular
  1767. Tree Layout from CSV
  1768. Tree layout mods
  1769. Tree Layout Orientations
  1770. Treemap
  1771. Treemap
  1772. Treemap Padding
  1773. Tributary
  1774. Tributary, optical_illusion_001_motion2
  1775. Tributary, simple globe canvas
  1776. Trisul Network Analytic
  1777. TruliaTrends
  1778. TruliaTrends
  1779. Try D3 Now
  1780. Trying out D3’s geographic features
  1781. Tübingen
  1782. Tufte’s slope graphs
  1783. Tweening Polygons
  1784. Tweitgeist: Live Top Hashtags on Twitter
  1785. Twitter Activity During Hurricane Sandy
  1786. Twitter Influencer Visualization
  1787. Twitter SVG Logo
  1788. Two Point Equidistant
  1789. Two Point Equidistant
  1790. Two Tables, Understanding D3 Selections
  1791. U.S. Airports
  1792. U.S. Counties TopoJSON
  1793. U.S. Counties TopoJSON Mesh
  1794. U.S. Land TopoJSON
  1795. U.S. Population Pyramid
  1796. U.S. Rivers
  1797. U.S. State Mesh
  1798. U.S. States TopoJSON
  1799. U.S. TopoJSON
  1800. U.S. TopoJSON
  1801. U.S. Urban Areas
  1802. Uber Rides by Neighborhood
  1803. UK University Statistics
  1804. UK Wind
  1805. UMLS (Unified Medical Language System) Visualizer
  1806. UN Global Pulse 2010 Visualization
  1807. Underscore’s Equivalents in D3
  1808. Understanding the D3 Parallel Plot Example
  1809. Unemployment ranked with horizontal bars
  1810. Unit circle animation
  1811. United Kingdom Peace Index
  1812. University of Washington Departments
  1813. Unknown Pleasures
  1814. Untitled-2
  1815. Update-Only Transition
  1816. Upside-Down Text
  1817. Urban bus races
  1818. Urban Water Explorer
  1819. US Budget
  1820. US Census Visualization
  1821. US Elections 2012 / Twitter
  1822. US energy consumption since 1775
  1823. US History in Maps
  1824. US, CA, MX and PR
  1825. Use Inkscape shapes in D3.js tree diagram
  1826. Use the Force! Slides
  1827. Use the Force! Video
  1828. Using and Abusing the force
  1829. Using d3 visualization for fraud detection and trending
  1830. Using D3, backbone and tornado to visualize histograms of a csv file
  1831. Using D3.js to Brute Force the Pirate Puzzle – Azundo Design
  1832. Using Inkscape with d3
  1833. Using Plunker for development and hosting your D3.js creations
  1834. Using Selections in D3 to Make Data-Driven Visualizations
  1835. Using SMASH for custom D3.js builds
  1836. Using SVG and canvas on the same force-directed layout
  1837. Using SVG Gradients and Filters With d3.js
  1838. Using the D3.js Visualization Library with AngularJS
  1839. UT1 – UTC
  1840. uvCharts
  1841. Van der Grinten II
  1842. Van der Grinten III
  1843. Van der Grinten IV
  1844. Van der Grinten Projection
  1845. Van Wijk and Nuij Zooming
  1846. van Wijk Smooth Zooming
  1847. Variable-width Histogram
  1848. Various visualisations especially with d3.geo
  1849. Vector Tiles
  1850. Vector Tiles
  1851. Vector Tiles
  1852. Vega for time series chart with shaded blocks
  1853. Vegetable Nutrition w/ Parallel Coordinates
  1854. Vélib network visualization
  1855. Venn diagram
  1856. Venn Diagram using Clipping
  1857. Venn Diagram using Opacity
  1858. Venn Diagrams with 3+ circles
  1859. Vertical Bullet Charts
  1860. Vertical Bullet Charts
  1861. Very limited in-progress attempt to hook d3.js up to three.js
  1862. Veteran Survival Data
  1863. Video tutorials in Japanese
  1864. Viewing OpenLearn Mindmaps Using d3.js
  1865. Viewing Relations, Attributes, and Entities in RDF
  1866. VIM keymap
  1867. Violin: Instrumenting JavaScript
  1868. Violin/Box plots
  1869. Virginia Counties
  1870. Visual Hacker News
  1871. Visual Search
  1872. Visual Sedimentation
  1873. Visual Sedimentation Tweet
  1874. Visual Storytelling with D3: An Introduction to Data Visualization in JS
  1875. Visual.ly Meetup Recap: Introductory D3 Workshop
  1876. Visual.ly tagged D3.js
  1877. Visualising a real-time DataSift feed with Node and D3.js
  1878. Visualising Change in Presidential Vote
  1879. Visualising ConAir Data With Cubism.js Arduino TempoDB Sinatra
  1880. Visualising New Zealand’s Stolen Vehicle Database Part1
  1881. Visualising New Zealand’s Stolen Vehicle Database Part2
  1882. Visualization of Beijing Air Pollution
  1883. Visualization of music suggestion
  1884. Visualize online conversion journeys
  1885. Visualize with d3js: Bring life to your data
  1886. Visualize Words on My Blog Using D3.js
  1887. Visualizing a network with Cypher and d3.js
  1888. Visualizing a newborn’s feeding and diaper activity
  1889. Visualizing book production – Tools of Change for Publishing
  1890. Visualizing Data with Web Standards Slides
  1891. Visualizing Data with Web Standards Video
  1892. Visualizing document similarity over time
  1893. Visualizing Facebook Friends With D3.js
  1894. Visualizing Flight Options
  1895. Visualizing Hospital Price Data
  1896. Visualizing my entire website as a network
  1897. Visualizing NetworkX graphs in the browser using D3
  1898. Visualizing NFL Draft History
  1899. Visualizing opinons around the world (zoomable world map and interactive pie chart)
  1900. Visualizing San Francisco Home Price Ranges
  1901. Visualizing Swiss politicians on Twitter using D3.js
  1902. Visualizing the iOS App Store
  1903. Visualizing the News through Metro Maps
  1904. Visualizing The Racial Divide
  1905. Visualizing U.S. Births and Deaths in Real-Time
  1906. VizWiz: Displaying time-series data
  1907. VLS&STATS making off « @comeetie :: blog
  1908. Von der EEG Umlage befreite Unternehmen
  1909. Voronoi Arc Map
  1910. Voronoi Boids: Voroboids
  1911. Voronoi Clipping
  1912. Voronoi Diagram
  1913. Voronoi Diagram with Force Directed Nodes and Delaunay Links
  1914. Voronoi Labels
  1915. Voronoi Lookup
  1916. Voronoi paint
  1917. Voronoi Picking
  1918. Voronoi Tesselation
  1919. Voronoi Tessellation (Redirect)
  1920. Voronoi Tessellation (Redirect)
  1921. Voronoi Test (N=2)
  1922. Voronoi tests
  1923. Voynich Manuscript Voyager
  1924. VVVV viewer
  1925. W3C Validation Errors
  1926. Wagner IV
  1927. Wagner VI Projection
  1928. Wagner VII
  1929. Walmart locations
  1930. Waterfall chart of Tendulkar’s ODI career
  1931. Waterman Butterfly
  1932. Waterman Butterfly Map
  1933. Wave
  1934. We Love France: transition between the Hexagon and a heart
  1935. We’re In The Money: How Much Do The Movies We Love Make?
  1936. Weather of the World
  1937. Web reporting with D3js and R using RStudio Shiny
  1938. Web Traffic as flying bubbles
  1939. Web-Based Visualization Part 1: The D3.js Key Concept
  1940. Webplatform dancing logo
  1941. WebPlatform.org SVG Logo
  1942. Website Graph Bavigation
  1943. Weeknd3
  1944. What do countries look like?
  1945. What Do You Work For?
  1946. WHat makes us happy
  1947. What Size Am I? Finding dresses that fit
  1948. When is Easter?
  1949. Which career should I invest in?
  1950. White House Petition Choropleth
  1951. Who are Rennes Metropolis inhabitants?
  1952. Who do they serve
  1953. Who Voted for Rick Santorum and Mitt Romney
  1954. Why are people shooting up our schools?
  1955. Wiechel
  1956. Wikistalker
  1957. Wimbledon
  1958. Wimbledon 2013 Player bubbles
  1959. Wind
  1960. Wind History
  1961. Winkel Tripel Graticule
  1962. Winkel Tripel Projection
  1963. Wood Grain
  1964. Word Cloud
  1965. Word Frequency Bubble Clouds
  1966. Word Tree
  1967. Word with map image tiles clipped to the font
  1968. Word wrap in SVG using foreignObject
  1969. World Bank Global Development Sprint
  1970. World Bank Global Development Sprint
  1971. World Boundaries TopoJSON
  1972. World Map
  1973. World Map with Country Descriptions
  1974. World Population Density with D3 and Hammer Projection
  1975. World Tour
  1976. World Wide Women’s Rights
  1977. WorldBank Contract Awards
  1978. Wrapping Long Labels
  1979. X-Value Mouseover
  1980. x3dom event test
  1981. xCharts: a D3-based library for building custom charts and graphs
  1982. XKCD-style plots
  1983. Your Tax-paid Tweets
  1984. Zensus 2011 Atlas
  1985. Zero Ticks
  1986. Zip Codes
  1987. Zipdecode
  1988. zipdecode
  1989. ZJONSSON’s bl.ocks
  1990. zmaril/d3 » src › core › nest.js
  1991. Zoom a map to a Feature Bounding Box
  1992. Zoom Center
  1993. Zoom Transitions
  1994. Zoomable Area
  1995. Zoomable Area Chart
  1996. Zoomable Circle Packing
  1997. Zoomable map
  1998. Zoomable Pack Layout
  1999. Zoomable Partition Layout
  2000. Zoomable Sunburst
  2001. Zoomable Treemap
  2002. Zoomdata
  2003. ZUI in D3.js

Also, here are my d3 examples. Please share with others and enjoy.