2 - ol3.8ex 125b - Raster Source 2

「raster.js（2125-ol3ex.js）」は、マップを表示するための JavaScript ファイルです。
「2125-ol3ex.js」

var minVgi = 0;
var maxVgi = 0.25;
var bins = 10;

/**
 * Calculate the Vegetation Greenness Index (VGI) from an  
 * input pixel. This is a rough estimate assuming that pixel 
 * values correspond to reflectance.
 * 植生緑指数（VGI）は入力画素から計算されます。
 * これは、画素値が反射率に対応すると仮定する概算です。
 * @param {ol.raster.Pixel} pixel An array of [R, G, B, A] values.
 * @return {number} The VGI value for the given pixel.
 */

/** 「@param」
 * The @param tag provides the name, type, and 
 * description of a function parameter.
 * The @param tag requires you to specify the name of 
 * the parameter you are documenting. You can also 
 * include the parameter's type, enclosed in curly 
 * brackets, and a description of the parameter.
 * @paramタグは、関数パラメータの名前と型、説明を提供します。
 * @paramタグを使用すると、文書化されたパラメータの名前を
 * 指定する必要があります。また、パラメータのタイプと、中括弧
 * で囲まれたおよびパラメータの説明を含めることができます。
 * （@use JSDoc [http://usejsdoc.org/tags-param.html]）
 */

 /** @return（@returns と同義）
  * The @returns tag documents the value that a function 
  * returns.
  * @returns タグは、関数が返す値について説明します。
  * （@use JSDoc [http://usejsdoc.org/tags-returns..html]）
  */

function vgi(pixel) {
 var r = pixel[0] / 255;
 var g = pixel[1] / 255;
 var b = pixel[2] / 255;
 return (2 * g - r - b) / (2 * g + r + b);
}

/**
 * Summarize values for a histogram.
 * @param {numver} value A VGI value.
 * @param {Object} counts An object for keeping track of VGI counts.
 */

function summarize(value, counts) {

 var min = counts.min;
 /** Math.min() 
  * 引数として与えた複数の数の中で最小の数を返します。
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/Math/min]）
  */

 var max = counts.max;
 /** Math.max() 
  * 引数として与えた複数の数の中で最大の数を返します。
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/Math/max]）
  */

 var num = counts.values.length;
 /** Array.length
  * 配列の要素数を表す符号なし 32 ビット整数。
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/Array/length]）
  */

 if (value < min) {
 // do nothing
 } else if (value >= max) {
  counts.values[num - 1] += 1;
 } else {

  var index = Math.floor((value - min) / counts.delta);
  /** Math.floor()
   * The Math.floor() function returns the largest 
   * integer less than or equal to a given number.
   * Math.floor() 関数は、指定された数以下の最大の整数、
   * または、等しい数を返します。
   * （MDN[https://developer.mozilla.org/en-US/docs/Web/
   * JavaScript/Reference/Global_Objects/Math/floor]）
   */

  counts.values[index] += 1;
 }
}

/**
 * Use aerial imagery as the input data for the raster source.
 */

var bing = new ol.source.BingMaps({
/** ol.source.BingMaps
 * Layer source for Bing Maps tile data.
 * Bing Maps タイルデータのレイヤソース。（ol3 API）
 */

 key: 'Ak-dzM...（省略）',
 imagerySet: 'Aerial'
});

/**
 * Create a raster source where pixels with VGI values above 
 * a threshold will be colored green.
 * しきい値以上の VGI 値を持つ画素が緑色に着色されたラスタ·ソー
 * スを作成します。
 */

var raster = new ol.source.Raster({
/** ol.source.Raster
 * A source that transforms data from any number of input 
 * sources using an array of ol.raster.Operation functions 
 * to transform input pixel values into output pixel values.
 * 入力画素値を出力画素値に変換するために ol.raster.Operation
 * 関数の配列を使用して、任意の数の入力ソースからデータを変換する
 * ソース。
 * （ol3 API[説明は Stable Only のチェックを外すと表示]）
 */

 sources: [bing],

 operation: 
 /** operation
  * Raster operation. The operation will be called with data 
  * from input sources and the output will be assigned to 
  * the raster source.
  * ラスタオペレーション。operation は入力ソースからデータととも
  * に呼び出され、出力データはラスタ·ソースに割り当てられます。
  * （ol3 API[説明は Stable Only のチェックを外すと表示]）
  */

 function(pixels, data) {
  var pixel = pixels[0];
  var value = vgi(pixel);
  summarize(value, data.counts);
  if (value >= data.threshold) {
   pixel[0] = 0;
   pixel[1] = 255;
   pixel[2] = 0;
   pixel[3] = 128;
  } else {
   pixel[3] = 0;
  }
  return pixel;
 },

 lib: {
 /** lib
  * Functions that will be made available to operations 
  * run in a worker.
  * ワーカで実行される operation が利用可能となる関数。
  * （ol3 API[説明は Stable Only のチェックを外すと表示]）
  */

  vgi: vgi,
  summarize: summarize
 }
});

raster.set('threshold', 0.1);
/** set(key, Value)
 * Sets a value.
 * 値を設定します。
 * （ol3 API[説明は Stable Only のチェックを外すと表示]）
 */

function createCounts(min, max, num) {

 var values = new Array(num);
/** Array(arraylength)
 * JavaScript は配列を扱うことができます。配列とは順序を持つ複
 * 数のデータの集合であり、JavaScript のグローバルオブジェクト 
 * である Array は、高位の、（C言語等で云うところの）「リス
 * ト」の様な、配列のコンストラクタです。
 * arraylength
 * Array コンストラクタに渡される唯一の引数（arrayLength）に 
 * 0 から 4,294,967,295( 232-1 ) までの整数値を指定する場合
 * その値を要素数とする配列が作成されます。その際に範囲外の値
 * は、を指定した場合には、例外: RangeError がスローされます。
 * （MDN[https://developer.mozilla.org/ja/docs/Web/
 * JavaScript/Reference/Global_Objects/Array]）
 */

 for (var i = 0; i < num; ++i) {
  values[i] = 0;
 }
 return {
  min: min,
  max: max,
  values: values,
  delta: (max - min) / num
 };
}

raster.on('beforeoperations', function(event) {
/** on(type, listener, opt_this)
 * Listen for a certain type of event.
 * あるタイプのイベントをリッスンします。（ol3 API）
 */

 event.data.counts = createCounts(minVgi, maxVgi, bins);

 event.data.threshold = raster.get('threshold'); /** get(key)
  * Gets a value. 値を取得します。（ol3 API）
  */
});

raster.on('afteroperations', function(event) {
 schedulePlot(event.resolution, event.data.counts, event.data.threshold);
});

var map = new ol.Map({
 layers: [

  new ol.layer.Tile({
 /** ol.layer.Tile 
  * For layer sources that provide pre-rendered, tiled 
  * images in grids that are organized by zoom levels for 
  * specific resolutions. 
  * プリレンダリング（事前描画）を提供するレイヤソースのための、
  * 特定の解像度でのズームレベルによって編成されているグリッドの
  * タイルイメージ。（ol3 API）
  */

   source: bing
  }),

  new ol.layer.Image({
 /** ol.layer.Image
  * Server-rendered images that are available for arbitrary 
  * extents and resolutions. 
  * 任意の範囲と解像度で利用可能な server-rendered イメージ。
  * （ol3 API）
  */

   source: raster
  })
 ],
 target: 'map',
 view: new ol.View({
  center: [-9651695, 4937351],
  zoom: 13,
  minZoom: 12,
  maxZoom: 19
 })
});

var timer = null;
function schedulePlot(resolution, counts, threshold) {
 if (timer) {

  clearTimeout(timer);
 /** Window.clearTimeout(timeoutID)
  * window.setTimeout() によって設定された遅延を解除します。
  * timeoutID は、解除したいタイマの ID です。ID は、
  * window.setTimeout() の戻り値によって取得できます。
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * API/WindowTimers/clearTimeout]）
  */

  timer = null;
 }

 timer = setTimeout(plot.bind(null, resolution, counts, threshold), 1000 / 60);
 /** setTimeout(func, dylay)
  * 指定された遅延の後に、コードの断片または関数を実行します。
  * func : delay ミリ秒後に実行したい関数。
  * delay : 関数呼び出しを遅延させるミリ秒(1/1000 秒)。
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * API/Window/setTimeout]）
  */

 /** Function.prototype.bind()
  * bind() メソッドは、呼び出された時に新しい関数を生成しま
  * す。最初の引数  thisArg は新しい関数の this キーワード
  * にセットされます。2 個目以降の引数は、新しい関数より前に、
  * ターゲット関数の引数として与えられます。
  * （下記ページ内「setTimeout とともに」も参照してください。）
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/Function/bind]）
  */

}

var barWidth = 15;
var plotHeight = 150;

var chart = d3.select('#plot').append('svg')
/** d3.select(node)
 * Selects the specified node. This is useful if you 
 * already have a reference to a node, such as 
 * d3.select(this) within an event listener, or a 
 * global such as document.body. This function does 
 * not traverse the DOM.
 * 指定されたノードを選択します。イベントリスナー内の 
 * d3.select（this）のようなノード、または、document.body 
 * のようなグローバルへの参照をすでに持っている場合に便利です。
 * この関数は、DOM をトラバースすることはありません。
 * （mbostock/d3[https://github.com/mbostock/d3/wiki/
 * Selections#d3_select]）
 */

/** selection.append(name)
 * Appends a new element with the specified name as 
 * the last child of each element in the current 
 * selection, returning a new selection containing 
 * the appended elements. Each new element inherits 
 * the data of the current elements, if any, in the 
 * same manner as select for subselections.
 * The name may be specified either as a constant 
 * string or as a function that returns the DOM 
 * element to append. When the name is specified as 
 * a string, it may have a namespace prefix of the 
 * form "namespace:tag". For example, "svg:text" 
 * will create a "text" element in the SVG namespace. 
 * By default, D3 supports svg, xhtml, xlink, xml 
 * and xmlns namespaces. Additional namespaces can 
 * be registered by adding to d3.ns.prefix. If no 
 * namespace is specified, then the namespace will 
 * be inherited from the enclosing element; or, if 
 * the name is one of the known prefixes, the 
 * corresponding namespace will be used (for example, 
 * "svg" implies "svg:svg").
 * 追加された要素を含む新しい selection を返すとき、現在 
 * の　selection に各要素の最後の子として指定された名前を
 * 持つ新しい要素を追加します。新しい各要素は、もしあれば、
 * サブセレクションのための選択と同じ方法で、現在の要素の
 * データを継承します。
 * 名前は文字列定数として、または追加する DOM 要素を返す関
 * 数として指定することができます。名前が文字列として指定さ
 * れた場合は、「namespace:tag」フォームの名前空間接頭
 * 辞を持ちます。たとえば、「svg:text」は、SVG 名前空間
 * に「text」要素を作成します。デフォルトでは、D3は、svg、
 * xhtml、xlink、xml、xmlns 名前空間をサポートしていま
 * す。追加の名前空間は d3.ns.prefix に追加することに
 * よって登録することができます。名前空間が指定されていな
 * い場合、名前空間は、外側の要素から継承されます。または、
 * 名前が既知の接頭辞の一つである場合、対応する名前空間が
 * 使用されます（例えば、「svg」は「svg：svg」を意味し
 * ます）。
 * （mbostock/d3[https://github.com/mbostock/d3/wiki/
 * Selections#append]）
 */

 .attr('width', barWidth * bins)
/** selection.attr(name[, value])
 * If value is specified, sets the attribute with the 
 * specified name to the specified value on all selected 
 * elements. If value is a constant, then all elements 
 * are given the same attribute value; otherwise, if 
 * value is a function, then the function is evaluated 
 * for each selected element (in order), being passed 
 * the current datum d and the current index i, with the 
 * this context as the current DOM element. The 
 * function's return value is then used to set each 
 * element's attribute. A null value will remove the 
 * specified attribute.
 * If value is not specified, returns the value of the 
 * specified attribute for the first non-null element in 
 * the selection. This is generally useful only if you 
 * know that the selection contains exactly one element.
 * 値が指定されている場合、選択されたすべての要素で指定された名
 * 前とともに属性を指定した値に設定します。値が一定である場合、
 * 従って、すべての要素は同じ属性値が与えられます。それに対し、
 * 値が関数である場合、従って、現在の DOM 要素としてこのコンテ
 * キストで、現在のデータ d と現在のインデックス i を渡され、
 * 関数が選択した各要素に対して（順番に）評価されます。関数の戻
 * り値は、従って、各要素の属性を設定するために使用されます。
 *  null 値は、指定された属性を削除します。
 * 値が指定されていない場合、その selection で最初の非 null 
 * 要素に対して指定された属性の値を返します。これは、
 * selection が正確に一つの要素が含むことを知っている場合にの
 * み、一般的に有用です。
 * （mbostock/d3[https://github.com/mbostock/d3/wiki/
 * Selections#attr]）
 */

 .attr('height', plotHeight);

var chartRect = chart[0][0].getBoundingClientRect();
/** Element.getBoundingClientRect()
 * The Element.getBoundingClientRect() method returns 
 * the size of an element and its position relative to 
 * the viewport.
 * Element.getBoundingClientRect（）メソッドは、要素の
 * サイズとビューポートに対するその位置を返します。
 * （MDN[https://developer.mozilla.org/en-US/docs/Web/
 * API/Element/getBoundingClientRect]）
 */

var tip = d3.select(document.body).append('div')
 .attr('class', 'tip');

function plot(resolution, counts, threshold) {

 var yScale = d3.scale.linear()
 /** d3.scale.linear()
  * Constructs a new linear scale with the default 
  * domain [0,1] and the default range [0,1]. Thus, 
  * the default linear scale is equivalent to the 
  * identity function for numbers; for example 
  * linear(0.5) returns 0.5.
  * デフォルトのドメイン[0,1]とデフォルトの範囲[0,1]で 
  * 新しいリニアスケールを構築します。このように、デフォ
  * ルトのリニアスケールは数字の identity 関数と同等で
  * す。例えば、リニア（0.5）は 0.5 を返します。
  * （mbostock/d3[https://github.com/mbostock/d3/wiki/
  * Quantitative-Scales#linear]）
  */

  .domain([0, d3.max(counts.values)])
 /** linear.domain([numbers])
  * If numbers is specified, sets the scale's input 
  * domain to the specified array of numbers. The 
  * array must contain two or more numbers. If the 
  * elements in the given array are not numbers, they 
  * will be coerced to numbers; this coercion happens 
  * similarly when the scale is called. Thus, a linear 
  * scale can be used to encode types such as date 
  * objects that can be converted to numbers; however, 
  * it is often more convenient to use d3.time.scale 
  * for dates. (You can implement your own convertible 
  * number objects using valueOf.) If numbers is not 
  * specified, returns the scale's current input domain.
  * 数字が指定されている場合は、スケールの入力ドメインは、
  * 数字の指定した配列に設定します。配列は、二つ以上の数字
  * が含まれている必要があります。指定された配列内の要素
  * が数字でない場合は、数字に強制変換されます。スケールが
  * 呼び出されたときに、この強制は、同様に発生します。従っ
  * て、リニアスケールは、そのような数字に変換することがで
  * きる日付オブジェクトのような型をエンコードするために使
  * 用することができます。しかし、それは日付に 
  * d3.time.scale を使用すると便利な場合があります。 
  * （あなたは、valueOf メソッドを使用して、独自のコンバー
  * チブルナンバーオブジェクトを実装することができます。）
  * 数字が指定されていない場合、スケールの現在の入力のドメ
  * インを返します。
  * （mbostock/d3[https://github.com/mbostock/d3/wiki/
  * Quantitative-Scales#linear_domain]）
  */

 /** d3.max(array[, accessor])
  * Returns the maximum value in the given array using
  * natural order. If the array is empty, returns 
  * undefined. An optional accessor function may be 
  * specified, which is equivalent to calling array.map
  * (accessor) before computing the maximum value. 
  * Unlike the built-in Math.max, this method ignores 
  * undefined values; this is useful for computing the 
  * domain of a scale while only considering the defined 
  * region of the data. In addition, elements are 
  * compared using natural order rather than numeric 
  * order. For example, the maximum of ["20", "3"] is 
  * "3", while the maximum of [20, 3] is 20.
  * 自然な順序を使用して、指定された配列の最大値を返します。
  * 配列が空の場合、未定義を返します。オプションのアクセサ関
  * 数が指定されますが、それは最大値を計算する前にarray.map
  * （アクセサ）を呼び出すのと同じです。組込みの Math.max
  * とは異なり、この方法は、未定義の値を無視します。これは、
  * データの定義された領域を考慮でけしながら、スケールのドメ
  * インを計算するのに便利です。また、要素が数字順ではな
  * く自然な順序を使用して比較されます。例えば、["20"、"3"]
  * の最大は "3" で、[20 3]最大値は 20 です。
  * （mbostock/d3[https://github.com/mbostock/d3/wiki/
  * Arrays#d3_max]）
  */

  .range([0, plotHeight]);
 /** linear.range([values])
  * If values is specified, sets the scale's output 
  * range to the specified array of values. The array 
  * must contain two or more values, to match the 
  * cardinality of the input domain, otherwise the 
  * longer of the two is truncated to match the other. 
  * The elements in the given array need not be numbers; 
  * any value that is supported by the underlying 
  * interpolator will work. However, numeric ranges are 
  * required for the invert operator. If values is not 
  * specified, returns the scale's current output range. 
  * 値が指定されている場合は、指定された値の配列にスケールの
  * 出力範囲を設定します。配列は、入力ドメインの基数と一致す
  * るように、2つまたはそれ以上の値が含まれている必要があり、
  * それ以外の場合は、2つより長いが、他に一致するように切り捨
  * てられます。与えられた配列内の要素は数字である必要はなく、
  * 基本的な保管回路でサポートされている任意の値が動作します。
  * しかし、数値範囲は反転演算子のために必要とされます。値が指
  * 定されていない場合、スケールの現在の出力範囲を返します。
  * （mbostock/d3[https://github.com/mbostock/d3/wiki/
  * Quantitative-Scales#linear_range]）
  */

 var bar = chart.selectAll('rect').data(counts.values);
 /** d3.selectAll(selector)
  * Selects all elements that match the specified 
  * selector. The elements will be selected in document 
  * traversal order (top-to-bottom). If no elements in 
  * the current document match the specified selector, 
  * returns the empty selection.
  * 指定されたセレクタに一致するすべての要素を選択します。要素
  * は、document traversal order（上から下）で選択されま
  * す。現在のドキュメント内に要素が指定したセレクタに一致しな
  * い場合は、empty selection を返します。
  * （mbostock/d3[https://github.com/mbostock/d3/wiki/
  * Selections#d3_selectAll]）
  */

 /** selection.data([values[, key]])
  * Joins the specified array of data with the current 
  * selection. The specified values is an array of data 
  * values (e.g. numbers or objects), or a function that 
  * returns an array of values. If a key function is not 
  * specified, then the first datum in values is 
  * assigned to the first element in the current 
  * selection, the second datum to the second selected 
  * element, and so on. When data is assigned to an 
  * element, it is stored in the property __data__ 
  * (defined by D3), thus making the data "sticky" so 
  * that it is available on re-selection.
  * The result of the data method is the update 
  * selection; this represents the selected DOM 
  * elements that were successfully bound to the 
  * specified data elements. The update selection also 
  * contains a reference to the enter and exit 
  * selections, for adding and removing nodes in 
  * correspondence with data. The update and enter 
  * selections are returned in data order and the exit 
  * selection in document order at the time that the 
  * selection was queried. For more details, see the 
  * short tutorial Thinking With Joins.
  * 現在の selection とともに指定されたデータの配列を結合し
  * ます。指定された値は、データ値（例えば番号またはオブジェ
  * クト）の配列、または値の配列を返す関数です。キー関数が指定
  * されていない場合は、従って、値の最初のデータは現在の 
  * selection で最初の要素に、第2のデータが第2の選択された要
  * 素にというように、割り当てられます。データが要素に割り当て
  * られている場合には、（D3によって定義された）プロパティ 
  * __data__ に格納され、これにより、それが再選択で手に入る
  * ために、データ「sticky」を作成します。データメソッドの結
  * 果は update selection です。これは、指定されたデータ要
  * 素に正常にバインドされた、選択された DOM 要素を表します。
  * update selection は、データに対応してノードの追加や削
  * 除のため、enter と exit の selection への参照も同じよ
  * うに含まれます。update と enter の selection は、デー
  * タの順序で返され、exit selection は、selection が照会
  * された時点での文書の順序で返されます。詳細については、短い
  * チュートリアル Thinking With Joins を参照してください。
  * （mbostock/d3[https://github.com/mbostock/d3/wiki/
  * Selections#data]）
  */

 bar.enter().append('rect');
 /** selection.enter()
  * Returns the enter selection: placeholder nodes for 
  * each data element for which no corresponding 
  * existing DOM element was found in the current 
  * selection. This method is only defined on the 
  * update selection, which is returned by the data 
  * operator. In addition, the enter selection only 
  * defines the append, insert, select and call 
  * operators; you must use these operators to 
  * instantiate the entering elements before modifying 
  * any content. Enter selections also support empty 
  * and size.
  * enter selection を返します。該当する既存の DOM 要素
  * が現在の選択 （current selection）に見つからなかった
  * ために、各データ要素のプレースホルダノード。このメソッド
  * は update selection 上に定義され、データの演算子に
  * よって返されます。また、enter selection は、append、
  * insert、select、および call 演算子を定義します。あ
  * なたは、任意のコンテンツを変更する前に、entering 要素
  * をインスタンス化するためにこれらの演算子を使用する必要
  * があります。enter selection は、空とサイズもサポート
  * します。
  * （mbostock/d3[https://github.com/mbostock/d3/wiki/
  * Selections#enter]）
  */

 bar.attr('class', function(count, index) {
  var value = counts.min + (index * counts.delta);
  return 'bar' + (value >= threshold ? ' selected' : '');
  /** 条件演算子 condition ? expr1 : expr2 
   * condition: true か false かを評価する条件文です。
   * expr1, expr2: 各々の値の場合に実行する式です。
   * condition が true の場合、演算子は expr1 の値を選択します。
   * そうでない場合は expr2 の値を選択します。
   * （MDN[https://developer.mozilla.org/ja/docs/Web/
   * JavaScript/Guide/Expressions_and_Operators]）
   */

 })
 .attr('width', barWidth - 2);

 bar.transition().attr('transform', function(value, index) {
 /** selection.transition([name])
  * Starts a transition for the current selection. 
  * Transitions behave much like selections, except 
  * operators animate smoothly over time rather than 
  * applying instantaneously.
  * Transitions of the same name are exclusive 
  * per-element. When the new transition starts on a 
  * given element, it will interrupt an active 
  * transition of the same name on the element, if 
  * any. If a name is not specified, the empty name 
  * (“”) is used. Note that transitions with a zero 
  * delay do not start until the next timer tick, 
  * which is typically about 17ms after scheduling.
  * 現在の selection に対して遷移を開始します。オペレータが
  * 瞬時に適用するのではなく、時間をかけて滑らかにアニメーショ
  * ンするのを除いて、遷移は selection のように動作します。
  * 同じ名前の遷移は、排他的要素単位 per-element です。新し
  * い遷移が与えられた要素に始まると、その要素で同じ名前の活性
  * 遷移（存在する場合）を中断します。名前が指定されてない場
  * 合、空の名前（ ""）が使用されます。ゼロ遅延の遷移は、典型
  * 的にスケジュール後に約17msの、次のタイマティックまで開始
  * されません。
  * （mbostock/d3[https://github.com/mbostock/d3/wiki/
  * Selections#transition]）
  */

  return 'translate(' + (index * barWidth) + ', ' +
   (plotHeight - yScale(value)) + ')';
 })
 .attr('height', yScale);

 bar.on('mousemove', function(count, index) {
  var threshold = counts.min + (index * counts.delta);
  if (raster.get('threshold') !== threshold) {
   raster.set('threshold', threshold);
   raster.changed();
  }
 });

 bar.on('mouseover', function(count, index) {
 /** selection.on(type[, listener[, capture]])
  * Adds or removes an event listener to each element 
  * in the current selection, for the specified type. 
  * The type is a string event type name, such as 
  * "click", "mouseover", or "submit". (Any DOM event 
  * type supported by your browser may be used.) The 
  * listener is stored by decorating the selected DOM 
  * elements using the naming convention "__ontype". 
  * The specified listener is invoked in the same 
  * manner as other operator functions, being passed 
  * the current datum d and index i, with the this 
  * context as the current DOM element. To access the 
  * current event within a listener, use the global 
  * d3.event. The return value of the event listener 
  * is ignored.
  * 指定されたタイプのために、現在の selection の各要素に
  * イベントリスナを追加または削除します。タイプは、「クリッ
  * ク」、「マウスオーバ」、または「サブミット」などの文字列
  * のイベントタイプ名です。（ブラウザがサポートしているすべ
  * ての DOM イベントタイプを使用できます。）リスナが、命名
  * 規則「__ontype」を使用して、選択された DOM 要素を装飾
  * することによって保存されます。指定されたリスナは、現在の
  * データ d とインデックス i を渡され、現在の DOM 要素とし
  * てこのコンテキストとともに、他の演算子関数と同様に呼び出
  * されます。リスナ内の現在のイベントにアクセスするには、グ
  * ローバル d3.event を使用します。イベントリスナの戻り値
  * は無視されます。
  * （mbostock/d3[https://github.com/mbostock/d3/wiki/
  * Selections#on]）
  */

  var area = 0;
  for (var i = counts.values.length - 1; i >= index; --i) {
   area += resolution * resolution * counts.values[i];
  }

  tip.html(message(counts.min + (index * counts.delta), area));
 /** selection.html([value])
  *The html operator is based on the innerHTML 
  * property; setting the inner HTML content will 
  * replace any existing child elements. Also, you 
  * may prefer to use the append or insert operators 
  * to create HTML content in a data-driven way; 
  * this operator is intended for when you want a 
  * little bit of HTML, say for rich formatting.
  * html 演算子は、innerHTML プロパティに基づいています。
  * inner HTMLコンテンツを設定すると、既存の子要素に置き換
  * えられます。同じように、データ駆動型の方法でHTMLコンテン
  * ツを作成するために、append または insert 演算子を使用
  * を好んで出来ます。少ない HTML で、豊富な書式設定をするた
  * めにこの演算子が使用されます。
  * （mbostock/d3[https://github.com/mbostock/d3/wiki/
  * Selections#html]）
  */

  tip.style('display', 'block');
 /** selection.style(name[, value[, priority]])
  * If value is specified, sets the CSS style property 
  * with the specified name to the specified value on 
  * all selected elements. If value is a constant, then 
  * all elements are given the same style value; 
  * otherwise, if value is a function, then the 
  * function is evaluated for each selected element 
  * (in order), being passed the current datum d and 
  * the current index i, with the this context as the 
  * current DOM element. The function's return value is 
  * then used to set each element's style property. A 
  * null value will remove the style property. An 
  * optional priority may also be specified, either as 
  * null or the string "important" (without the 
  * exclamation point).
  * 値が指定されている場合は、選択したすべての要素で指定され
  * た名前のCSSスタイルプロパティを指定した値に設定します。
  * 値が一定であれば、すべての要素は同じスタイル値が与えられ
  * ています。一方で、値が関数である場合、関数は、現在のデー
  * タ d と現在のインデックス i を渡され、現在の DOM 要素と
  * してこのコンテキストで（順番に）選択した各要素に対して評
  * 価されます。関数の戻り値は、各要素のスタイルプロパティを
  * 設定するために使用されます。null 値は、スタイルプロパティ
  * を削除します。オプションプロパティのは同じように、null 
  * または文字列「important」（感嘆符なし）のいずれかを指定
  * することができます。
  * （mbostock/d3[https://github.com/mbostock/d3/wiki/
  * Selections#style]）
  */

  tip.transition().style({
   left: (chartRect.left + (index * barWidth) + (barWidth / 2)) + 'px',
   top: (d3.event.y - 60) + 'px',
   opacity: 1
  });
 });

 bar.on('mouseout', function() {

  tip.transition().style('opacity', 0).each('end', function() {
 /** selection.each(function)
  * Invokes the specified function for each element 
  * in the current selection, passing in the current 
  * datum d and index i, with the this context of the 
  * current DOM element. This operator is used 
  * internally by nearly every other operator, and 
  * can be used to invoke arbitrary code for each 
  * selected element. The each operator can be used 
  * to process selections recursively, by using 
  * d3.select(this) within the callback function.
  * 現在のデータ d と現在のインデックス i を渡し、現在の 
  * DOM 要素のこのコンテキストで、現在の selection の各
  * 要素に対して指定された関数を呼び出します。この演算子は、
  * ほぼすべての他の演算子によって内部的に使用され、選択し
  * た各要素の任意のコードを呼び出すために使用することがで
  * きます。各演算子は、コールバック関数内で 
  * d3.select(this) を使用して、再帰的に selection 
  * を処理するために使用することができます。
  * （mbostock/d3[https://github.com/mbostock/d3/wiki/
  * Selections#each]）
  */

   tip.style('display', 'none');
  });
 });

}

function message(value, area) {

 var acres = (area / 4046.86).toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
 /** Number.prototype.toFixed()
  * The toFixed() method formats a number using fixed-point 
  * notation.
  * toFixed() メソッドは、固定小数点表記を使用して数値をフォー
  * マットします。
  * （MDN[https://developer.mozilla.org/en-US/docs/Web/
  * JavaScript/Reference/Global_Objects/Number/toFixed]）
  */

 /** replace [メソッド]
  * 指定された URL に現在の文書を置き換えます。 assign() メソッ
  * ドとの違いは、replace() を用いた後、現在のページは、セッショ
  * ンの履歴には保持されないことです。つまり、ユーザは、置き換え
  * 前のページに戻るために、戻るボタンを使うことができません。
  * （MDN[https://developer.mozilla.org/ja/docs/Web/API/
  * Window/location]）
  */

 return acres + ' acres at
' + value.toFixed(2) + ' VGI or above';
}