はじめに

http://blogs.yahoo.co.jp/dk521123/35446731.html

では、既存のプラグインを紹介したが、独自でプラグインを実装できる

サンプル

例1：地図上に棒グラフ

* 負の値は未対応(積み上げ縦棒グラフで対応版は以下の関連記事に記載)
http://blogs.yahoo.co.jp/dk521123/35549099.html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="">http://d3js.org/d3.v3.js">
<script src="">http://d3js.org/topojson.v1.min.js">
<script src="datamaps.world.js"></script>
<div id="container" style="position: relative; width: 1000px; height: 800px;"></div>
<script>
var map = new Datamap({
  scope: 'world',
  element: document.getElementById('container'),
});

map.addPlugin('bars', function(layer, dataset, options) {  
// hold this in a closure
var self = this;

// a class you'll add to the DOM elements
var className = 'bars';

// make a D3 selection.
var bars =
  layer
   .selectAll(className)
   .data(dataset, JSON.stringify );

bars
  .enter()
  .append('rect')
  .attr('class', className)
  .attr('width', options.barWidth)
  .attr('height', function(datum) { return datum.yVal; })
  .attr('x', function(datum) {
    return self.latLngToXY(datum.latitude, datum.longitude)[0];
  })
  .attr('y', function(datum) {
    return self.latLngToXY(datum.latitude, datum.longitude)[1] - datum.yVal;
  })
  .style('fill', function(datum) { return datum.gColor; });
});

var dataset = [  
    {latitude: 35.686533327621, longitude: 139.69192653894, yVal: 40, gColor: 'red'},
    {latitude: -33.873793, longitude: 151.208054, yVal: 20, gColor: 'orange'},
];

map.bars(dataset, {barWidth: 5});
</script>
</body>
</html>

例2：地図上に円グラフ

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="">http://d3js.org/d3.v3.js">
<script src="">http://d3js.org/topojson.v1.min.js">
<script src="datamaps.world.js"></script>
<div id="container" style="position: relative; width: 1000px; height: 800px;"></div>
<script>
var map = new Datamap({
  scope: 'world',
  element: document.getElementById('container'),
});

map.addPlugin('pies', function(layer, dataset, options) {  
// hold this in a closure
var self = this;

// a class you'll add to the DOM elements
var className = 'bars';

var dataGroup = d3.nest()
    .key(function(d) { return d.city; })
    .entries(dataset);

var arc = d3.svg.arc()
    .outerRadius(options.outerRadius)
    .innerRadius(options.innerRadius);

var colors = d3.scale.category20c();

dataGroup.forEach(function(d, i) {
  var pie = d3.layout.pie()
    .sort(null)
    .value(function(datum) { return datum.yVal; });

  var pies =
    layer
      .selectAll(className)
      .data(pie(d.values), JSON.stringify );

  pies
    .enter()
    .append('path')
    .attr("d", arc)
    .attr("transform", function(datum) {
       return 'translate('
         + self.latLngToXY(datum.data.latitude, datum.data.longitude)[0] + ', '
         + self.latLngToXY(datum.data.latitude, datum.data.longitude)[1] + ')'; })
    .attr("fill", function(datum, j) { return colors(j); })
    // アニメーション効果
    .transition()
    .duration(1000) // 1秒間でアニメーションさせる
    .attrTween("d", function(datum) {
       var interpolate = d3.interpolate(
          { startAngle : 0, endAngle : 0 },
          { startAngle : datum.startAngle, endAngle : datum.endAngle });
       return function(t) {
          return arc(interpolate(t));
       }
     });
 });
});

var dataset = [  
    {city: 'Tokyo', latitude: 35.686533327621, longitude: 139.69192653894, yVal: 15 },
    {city: 'Tokyo', latitude: 35.686533327621, longitude: 139.69192653894, yVal: 50 },
    {city: 'Tokyo', latitude: 35.686533327621, longitude: 139.69192653894, yVal: 35 },
    {city: 'Sydney', latitude: -33.873793, longitude: 151.208054, yVal: 25 },
    {city: 'Sydney', latitude: -33.873793, longitude: 151.208054, yVal: 35 },
    {city: 'Sydney', latitude: -33.873793, longitude: 151.208054, yVal: 40 },
    {city: 'Roma', latitude: 41.902784, longitude: 12.496366, yVal: 10 },
    {city: 'Roma', latitude: 41.902784, longitude: 12.496366, yVal: 20 },
    {city: 'Roma', latitude: 41.902784, longitude: 12.496366, yVal: 30 },
    {city: 'Roma', latitude: 41.902784, longitude: 12.496366, yVal: 40 },
];

map.pies(dataset, {outerRadius: 15, innerRadius: 0});
</script>
</body>
</html>

以下の関連記事に続く
http://blogs.yahoo.co.jp/dk521123/35549099.html