n1n9-jp/README.md

## README.md

      
    Raw
  

              README.md
            
          
I wrote an simple article about 'reusable' way of D3.js as a part of Advent Calendar called "Data Visualization Advent Calendar 2014." This code is a example of an implementation of a toggle navigation.


Data Visualization Advent Calendar 2014の記事として、D3.jsのreusableについてかんたんに紹介記事を書きました。これはreusableなコードの例として、トグルナビゲーションを実装してみました。


## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>reusable Toggle Navigation</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://d3js.org/queue.v1.min.js" charset="utf-8"></script>
<script src="toggleNavigation.js" charset="utf-8"></script>
<style>

#navigation {
  width: 960px;
  height: 50px;
  margin: 0 auto;
  padding-top: 225px;
}

</style>
</head>
<body>
<div id="navigation"></div>
<script>

var toggleNav = d3.n1n9.toggleNavigation().indexNum(0).on("customClick", customClicked);

queue()
    .defer(d3.tsv, "navData.tsv")
    .await(loadReady);

function loadReady(_error, _nav) {
        d3.select("#navigation").datum(_nav).call(toggleNav);
};

function customClicked() {
  console.log( "indexNum: " + toggleNav.indexNum() );
}

</script>
</body>
</html>

## navData.tsv

          
            label
            value

            
              1956年
              1956

            
              1960年
              1960

            
              1964年
              1964

            
              1968年
              1968

            
              1972年
              1972

            
              1976年
              1976

            
              1980年
              1980

            
              1984年
              1984

            
              1988年
              1980

            
              1992年
              1992

            
              1996年
              1996

            
              2000年
              2000

            
              2004年
              2004

            
              2008年
              2008

            
              2012年
              2012

## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## toggleNavigation.js
d3.n1n9 = {};

d3.n1n9.toggleNavigation = function module() {

    var navWidth = 960,
        navHeight = 60,
        navMarginWidth = 50,
        buttonSize = 6,
        fontSize = 10;
    var indexNum = 0;
    var btnColorOut = "#999",
        btnColorOver = "#333",
        btnColorSelected = "#333";
    var dispatch = d3.dispatch("customClick");
    var _svg, _container;

    function _my(_selection) {

        _selection.each(function(_data) {

            if (!_svg) {
                _svg = d3.select(this)
                    .append("svg")
                    .attr({width: navWidth, height: navHeight});

                _container = _svg.append("g").classed("g-navigation", true)
                                    .attr("transform", "translate(" + navMarginWidth/2 + ",0)");
                _container.append("g").classed("g-chart", true);
                _container.append("g").classed("g-focus", true);
                _container.append("g").classed("g-label", true);
            }

            /* button */
            var btns = _container.select(".g-chart")
                    .selectAll(".btn")
                    .data(_data);

            btns
                .enter().append("circle")
                .classed("btn", true)
                .on("mouseover", function(){
                    d3.select(this).attr("fill", btnColorOver);
                })
                .on("click", function(d,i){

                    indexNum = i;

                    d3.selectAll(".btn").attr("fill", btnColorOut);
                    d3.select(this).attr("fill", btnColorSelected);

                    d3.select("#focus").transition().duration(750).attr({
                        cx: d3.select(this).attr("cx")
                    });

                    dispatch.customClick();
                })
                .on("mouseout", function(d,i){
                    if (indexNum != i) {
                        d3.select(this).attr("fill", btnColorOut);
                    } else {
                        d3.select(this).attr("fill", btnColorSelected);
                    }
                });

            btns
                .transition()
                .attr("id", function(d) {
                      return d.value;
                })
                .attr({
                    cx: function(d,i) { return i * navMarginWidth;},
                    cy: buttonSize*2,
                    r: buttonSize,
                    stroke: "none"
                })
                .style("fill", function(d,i) {
                    if (indexNum == i) {
                        d3.select(this).attr("fill", btnColorSelected);
                    } else {
                        d3.select(this).attr("fill", btnColorOut);
                    }
                });

            btns
                .exit().remove();

            /* label */
            var labels = _container.select(".g-label")
                    .selectAll(".label")
                    .data(_data);

            labels
                .enter().append("text")
                .attr("class", "label");

            labels
                .transition()
                .attr({
                    x: function(d,i) { return i * navMarginWidth;},
                    y: (buttonSize*6),
                    fill: btnColorOut,
                    "text-anchor": "middle",
                    "font-size": fontSize,
                    pointerEvents: "none"
                })
                .text(function(d) {
                    return d.label;
                });

            labels
                .exit().remove();

            /* focus */
            var focus = _container.select(".g-focus")
                    .selectAll(".focusCircle")
                    .data([0]);

            focus
                .enter().append("circle")
                .attr("class", "focusCircle")
                .attr("id", "focus")
                .attr({
                    cx: indexNum * navMarginWidth,
                    cy: buttonSize*2,
                    r: buttonSize+2,
                    fill: "none",
                    "stroke-width": 2,
                    stroke: btnColorSelected
                });

        });
    }

    _my.navWidth = function(_value) {
        if (!arguments.length) return navWidth;
        navWidth = parseFloat(_value);
        return this;
    };

    _my.navHeight = function(_value) {
        if (!arguments.length) return navHeight;
        navHeight = parseFloat(_value);
        return this;
    };

    _my.navMarginWidth = function(_value) {
        if (!arguments.length) return navMarginWidth;
        navMarginWidth = parseFloat(_value);
        return this;
    };

    _my.buttonSize = function(_value) {
        if (!arguments.length) return buttonSize;
        buttonSize = parseFloat(_value);
        return this;
    };

    _my.fontSize = function(_value) {
        if (!arguments.length) return fontSize;
        fontSize = parseFloat(_value);
        return this;
    };

    _my.indexNum = function(_value) {
        if (!arguments.length) return indexNum;
        indexNum = parseInt(_value);
        return this;
    };

    _my.btnColorOut = function(_value) {
        if (!arguments.length) return btnColorOut;
        btnColorOut = _value;
        return this;
    };

    _my.btnColorOver = function(_value) {
        if (!arguments.length) return btnColorOver;
        btnColorOver = _value;
        return this;
    };

    _my.btnColorSelected = function(_value) {
        if (!arguments.length) return btnColorSelected;
        btnColorSelected = _value;
        return this;
    };

    d3.rebind(_my, dispatch, "on");
    return _my;

};
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>reusable Toggle Navigation</title>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="http://d3js.org/queue.v1.min.js" charset="utf-8"></script>
	<script src="toggleNavigation.js" charset="utf-8"></script>
	<style>

	#navigation {
	width: 960px;
	height: 50px;
	margin: 0 auto;
	padding-top: 225px;
	}

	</style>
	</head>
	<body>
	<div id="navigation"></div>
	<script>

	var toggleNav = d3.n1n9.toggleNavigation().indexNum(0).on("customClick", customClicked);

	queue()
	.defer(d3.tsv, "navData.tsv")
	.await(loadReady);

	function loadReady(_error, _nav) {
	d3.select("#navigation").datum(_nav).call(toggleNav);
	};

	function customClicked() {
	console.log( "indexNum: " + toggleNav.indexNum() );
	}

	</script>
	</body>
	</html>
	label	value
	1956年	1956
	1960年	1960
	1964年	1964
	1968年	1968
	1972年	1972
	1976年	1976
	1980年	1980
	1984年	1984
	1988年	1980
	1992年	1992
	1996年	1996
	2000年	2000
	2004年	2004
	2008年	2008
	2012年	2012
	d3.n1n9 = {};

	d3.n1n9.toggleNavigation = function module() {

	var navWidth = 960,
	navHeight = 60,
	navMarginWidth = 50,
	buttonSize = 6,
	fontSize = 10;
	var indexNum = 0;
	var btnColorOut = "#999",
	btnColorOver = "#333",
	btnColorSelected = "#333";
	var dispatch = d3.dispatch("customClick");
	var _svg, _container;

	function _my(_selection) {

	_selection.each(function(_data) {

	if (!_svg) {
	_svg = d3.select(this)
	.append("svg")
	.attr({width: navWidth, height: navHeight});

	_container = _svg.append("g").classed("g-navigation", true)
	.attr("transform", "translate(" + navMarginWidth/2 + ",0)");
	_container.append("g").classed("g-chart", true);
	_container.append("g").classed("g-focus", true);
	_container.append("g").classed("g-label", true);
	}

	/* button */
	var btns = _container.select(".g-chart")
	.selectAll(".btn")
	.data(_data);

	btns
	.enter().append("circle")
	.classed("btn", true)
	.on("mouseover", function(){
	d3.select(this).attr("fill", btnColorOver);
	})
	.on("click", function(d,i){

	indexNum = i;

	d3.selectAll(".btn").attr("fill", btnColorOut);
	d3.select(this).attr("fill", btnColorSelected);

	d3.select("#focus").transition().duration(750).attr({
	cx: d3.select(this).attr("cx")
	});

	dispatch.customClick();
	})
	.on("mouseout", function(d,i){
	if (indexNum != i) {
	d3.select(this).attr("fill", btnColorOut);
	} else {
	d3.select(this).attr("fill", btnColorSelected);
	}
	});

	btns
	.transition()
	.attr("id", function(d) {
	return d.value;
	})
	.attr({
	cx: function(d,i) { return i * navMarginWidth;},
	cy: buttonSize*2,
	r: buttonSize,
	stroke: "none"
	})
	.style("fill", function(d,i) {
	if (indexNum == i) {
	d3.select(this).attr("fill", btnColorSelected);
	} else {
	d3.select(this).attr("fill", btnColorOut);
	}
	});

	btns
	.exit().remove();

	/* label */
	var labels = _container.select(".g-label")
	.selectAll(".label")
	.data(_data);

	labels
	.enter().append("text")
	.attr("class", "label");

	labels
	.transition()
	.attr({
	x: function(d,i) { return i * navMarginWidth;},
	y: (buttonSize*6),
	fill: btnColorOut,
	"text-anchor": "middle",
	"font-size": fontSize,
	pointerEvents: "none"
	})
	.text(function(d) {
	return d.label;
	});

	labels
	.exit().remove();

	/* focus */
	var focus = _container.select(".g-focus")
	.selectAll(".focusCircle")
	.data([0]);

	focus
	.enter().append("circle")
	.attr("class", "focusCircle")
	.attr("id", "focus")
	.attr({
	cx: indexNum * navMarginWidth,
	cy: buttonSize*2,
	r: buttonSize+2,
	fill: "none",
	"stroke-width": 2,
	stroke: btnColorSelected
	});

	});
	}

	_my.navWidth = function(_value) {
	if (!arguments.length) return navWidth;
	navWidth = parseFloat(_value);
	return this;
	};

	_my.navHeight = function(_value) {
	if (!arguments.length) return navHeight;
	navHeight = parseFloat(_value);
	return this;
	};

	_my.navMarginWidth = function(_value) {
	if (!arguments.length) return navMarginWidth;
	navMarginWidth = parseFloat(_value);
	return this;
	};

	_my.buttonSize = function(_value) {
	if (!arguments.length) return buttonSize;
	buttonSize = parseFloat(_value);
	return this;
	};

	_my.fontSize = function(_value) {
	if (!arguments.length) return fontSize;
	fontSize = parseFloat(_value);
	return this;
	};

	_my.indexNum = function(_value) {
	if (!arguments.length) return indexNum;
	indexNum = parseInt(_value);
	return this;
	};

	_my.btnColorOut = function(_value) {
	if (!arguments.length) return btnColorOut;
	btnColorOut = _value;
	return this;
	};

	_my.btnColorOver = function(_value) {
	if (!arguments.length) return btnColorOver;
	btnColorOver = _value;
	return this;
	};

	_my.btnColorSelected = function(_value) {
	if (!arguments.length) return btnColorSelected;
	btnColorSelected = _value;
	return this;
	};

	d3.rebind(_my, dispatch, "on");
	return _my;

	};