Getting Started

Follow a few simple steps to get d4 up and running with your data.

Installation

Either download d4 directly from the repository or install it using a package manager like bower.


$ bower install d4

Once you have a local copy of d4 simply include it after d3 in your source file.


<!DOCTYPE html>
<html>
<head>
  <!-- sensible defaults for styles -->
  <link href="d4.css" rel="stylesheet" />
</head>
<body>
  ...
<script src="d3.js"></script>
<script src="d4.js"></script>
</body>
</html>

Hello World

Here is the most basic example, which uses all the preset defaults provided by d4.


var data = [
  { x : '2010', y : 5 },
  { x : '2011', y : 15 },
  { x : '2012', y : 20 }
];
var columnChart = d4.charts.column();

d3.select('test')
  .datum(data)
  .call(columnChart);

Overriding the defaults

Of course, it is very rare for charts to be fit for purpose right out of the box. Therefore d4 strives to make configuration as natural as possible. d4 uses a declarative chaining style, which should feel very familiar to even developers new to D3.


var data = [
  { x : '2010', y : 5 },
  { x : '2011', y : 15 },
  { x : '2012', y : 20 }
];
var columnChart = d4.charts.column()
.margin({
  top: 15,
  right: 10,
  bottom: 30,
  left: 0
});

d3.select('test')
  .datum(data)
  .call(columnChart);

Mix it up

In d4 charts are composed of features, which are visual components of a chart. Features in d4 help convey meaning in the data, and can easily be mixed in or out of a chart.


var data = [
  { x : '2010', y : 5 },
  { x : '2011', y : 15 },
  { x : '2012', y : 20 }
];

// Create a column chart without a yAxis, but with a grid in the background.
var columnChart = d4.charts.column()
.mixout('yAxis')
.mixin('grid', d4.features.grid, 0)

d3.select('test')
  .datum(data)
  .call(columnChart);

Using features

d4 allows developers to control individual features of the chart in a clear declarative style.


var data = [
  { x : '2010', y : 5 },
  { x : '2011', y : 15 },
  { x : '2012', y : 20 }
];

// Add styles based on the sign of a value.
var columnChart = d4.charts.column()
.using('bars', functions(bars){
  bars
  .classes(function(d, i){
    return d[1] < 0 ? 'negative' + i : 'positive' + i;
  });
});

d3.select('test')
  .datum(data)
  .call(columnChart);