d3.layout とは?

pie layout

Your borwser is not supporting object tag. Please use one of the latest browsers.
Go to /D3JSExam/D3JS-layout-pie.html

https://github.com/kagyuu/D3JSExam/blob/master/D3JS-layout-pie.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Pie</title>
        <style type="text/css">
            text {
                font-family: sans-serif;
                font-size: 10px;
                fill: white;
            }
        </style>
    </head>
    <body>
        <div id="chart">
        </div>
        <script type="text/javascript" src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <script type="text/javascript">
            //Width and height
            var w = 600;
            var h = 300;

            // グラフ描画領域
            var svg = d3.select("#chart").append("svg").attr({width: w, height: h});

            // データ 
            // (順番がでたらめになっているけど、ソートされる)
            // (ソート順を変えたければ、d3.layout.pie().sort(function(a,b){...}) 
            //  で比較用の function を指定する。d3.ascending ,d3.descending を使える)
            var dataset = [
                {votes: 71076,name:"柏木 由紀"},  {votes:67339,name:"指原 莉乃"},
                {votes: 54483,name:"小嶋 陽菜"},  {votes:50483,name:"板野 友美"},
                {votes: 67017,name:"篠田 麻里子"},{votes:65480,name:"高橋 みなみ"},
                {votes: 45747,name:"松井 珠理奈"},{votes:42030,name:"松井 玲奈"},
                {votes:108837,name:"大島 優子"},  {votes:72574,name:"渡辺 麻友"},
                {votes: 40261,name:"宮澤 佐江"},  {votes:27005,name:"河西 智美"}];

            var outerRadius = w / 2;
            var innerRadius = w / 16;

            // {startAngle, endAngle} を与えるとポリゴンを返す function
            var arc = d3.svg.arc()
                            .innerRadius(innerRadius)
                            .outerRadius(outerRadius);

            // データを与えると {startAngle, endAngle} の配列を返す function
            // (アニメーションの初期状態)
            var pie = d3.layout.pie()
                            .value(function(d){ return d.votes; })
                            .startAngle(- Math.PI/2)
                            .endAngle(- Math.PI/2);

            // データを与えると {startAngle, endAngle} の配列を返す function
            // (アニメーションの最終状態)
            var pie2 = d3.layout.pie()
                            .value(function(d){ return d.votes; })
                            .startAngle(- Math.PI/2)
                            .endAngle(Math.PI/2);

            // color(i) で適当な色を返してくれる
            var color = d3.scale.category10();

            //Set up groups
            var arcs = svg.selectAll("g.arc")
                          .data(pie(dataset))
                          .enter()
                          .append("g")
                          .attr("class", "arc")
                          .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");

            //Draw arc paths
            arcs.append("path")
                .attr("fill", function(d, i) {
                    return color(i);
                })
                .attr("d", arc)
                .style("opacity", 0.8)
                .each(function(d) {
                    // DOMオブジェクト <path> に _current フィールドを追加して、
                    // 扇形の基本データ {startAngle, endAngle} を格納する
                    this._current = d;
                });

            //Labels
            arcs.append("text")
                .attr("class", "name")
                .attr("transform", function(d) {
                    // console.log(arc.centroid(d));
                    var center = arc.centroid(d);
                    return "translate(" + center + ")";
                })
                .attr("text-anchor", "middle")
                .text(function(d, i) {
                    return dataset[i].name;
                })
                .each(function(d) { this._current = d; });

            //Labels
            arcs.append("text")
                .attr("class", "vote")
                .attr("transform", function(d) {
                    var center = arc.centroid(d);
                    center[1] += 12;
                    return "translate(" + center + ")";
                })
                .attr("text-anchor", "middle")
                .text(function(d, i) {
                    return dataset[i].votes;
                })
                .each(function(d) { this._current = d; });

            // Animation
            var arcs2 = svg.selectAll("g.arc").data(pie2(dataset));

            arcs2.select("path")
                .transition()
                .duration(6000)
                .ease("bounce")
                .attrTween("d", function(d, i){

                    // C = (d3.interpolate(A,B))(t) は、
                    // A,Bの各要素を t (0〜1) で案配した C を返す
                    // Ci = (Ai * (t-1) + Bi * t)
                    var iop = d3.interpolate(this._current, d);

                    // <path> の d 要素に、iop(t) で返される {startAngle, endAngle}
                    // を SVG のポリゴンに変換したものを返す
                    return function(t){return arc(iop(t));};
                });

            arcs2.select("text.name")
                .transition()
                .duration(6000)
                .ease("bounce")
                .attrTween("transform", function(d, i){
                    var iop = d3.interpolate(this._current, d);
                    return function(t){
                        var center = arc.centroid(iop(t));
                        return "translate(" + center + ")"
                    };
                });

            arcs2.select("text.vote")
                .transition()
                .duration(6000)
                .ease("bounce")
                .attrTween("transform", function(d, i){
                    var iop = d3.interpolate(this._current, d);
                    return function(t){
                        var center = arc.centroid(iop(t));
                        center[1] += 12;
                        return "translate(" + center + ")"
                    };
                });

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

stack layout

Your borwser is not supporting object tag. Please use one of the latest browsers.
Go to /D3JSExam/D3JS-layout-stack.html

https://github.com/kagyuu/D3JSExam/blob/master/D3JS-layout-stack.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Stack</title>
		<style type="text/css">
            fieldset {
                vertical-align: top;
                display:inline;
            }
            text {
                font-family: sans-serif;
                font-size: 8px;
            }
        </style>
	</head>
	<body>
	    <fieldset>
	        <legend>zero(default)</legend>
            <div id="chart_zero"></div>
	    </fieldset>
	    <fieldset>
	        <legend>widdge</legend>
            <div id="chart_wiggle"></div>
	    </fieldset>
	    <fieldset>
	        <legend>expand</legend>
            <div id="chart_expand"></div>
	    </fieldset>
	    <fieldset>
	        <legend>silhouette</legend>
            <div id="chart_silhouette"></div>
	    </fieldset>
        <script type="text/javascript" src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
		<script type="text/javascript">

			//Width and height
			var w = 200;
			var h = 100;
			var margin = {x:0,y:15};

			//Original data
			var dataset = [
			    {
    			    name : "apple",
    			    values : [
    					{ x: 2012, y: 5 },
    					{ x: 2013, y: 4 },
    					{ x: 2014, y: 2 },
    					{ x: 2015, y: 7 },
    					{ x: 2016, y: 23 }
                    ]
                },
			    {
    			    name : "orange",
    			    values : [
    					{ x: 2012, y: 10 },
    					{ x: 2013, y: 12 },
    					{ x: 2014, y: 19 },
    					{ x: 2015, y: 23 },
    					{ x: 2016, y: 17 }
                    ]
                },
			    {
    			    name : "grape",
    			    values : [
    					{ x: 2012, y: 22 },
    					{ x: 2013, y: 28 },
    					{ x: 2014, y: 32 },
    					{ x: 2015, y: 35 },
    					{ x: 2016, y: 43 }
                    ]
                }
			];
			
			drawChart("zero");
			drawChart("wiggle");
			drawChart("expand");
			drawChart("silhouette");
			
			function drawChart(offset) {
    			//Set up stack method
    			var stack = d3.layout.stack()
                                .offset(offset)
                                .values(function(d) { return d.values; });
    
    			//Data, stacked
    			stack(dataset);
    			
    			console.log(dataset);
    
    			//Set up scales
    			var xScale = d3.scale.ordinal()
    				.domain(dataset[0].values.map(function(d){return d.x;}))
    				.rangeRoundBands([0, w], 0.05);
                
                var yMax = d3.max(dataset, function(d) {
                    return d3.max(d.values, function(d) {
                        return d.y0 + d.y;
                    });
                });
                
    			var yScale = d3.scale.linear()
    				.domain([0,	yMax])
    				.range([margin.y, h - margin.y]);
    
                var xAxis = d3.svg.axis()
                                .scale(xScale)
                                .orient("top")
                                .tickSize(0);
                                
    			//Easy colors accessible via a 10-step ordinal scale
    			var colors = d3.scale.category10();
    		
    			//Create SVG element
    			var svg = d3.select("body").select("#chart_" + offset)
    						.append("svg")
    						.attr("width", w)
    						.attr("height", h);
    	
    			// Add a group for each row of data
    			var groups = svg.selectAll("g")
    				.data(dataset)
    				.enter()
    				.append("g")
    				.style("fill", function(d, i) {
    					return colors(i);
    				});
    	
    			// Add a rect for each data value
    			var rects = groups.selectAll("rect")
    				.data(function(d) { return d.values; })
    				.enter()
    				.append("rect")
    				.attr("x", function(d) {
    					return xScale(d.x);
    				})
    				.attr("y", function(d) {
    					return yScale(d.y0);
    				})
    				.attr("height", function(d) {
    					return yScale(d.y);
    				})
    				.attr("width", xScale.rangeBand());
    
                // Add axis
                svg.append("g")
                    .attr("class", "axis")
                    .attr("transform", "translate(0," + (margin.y) + ")")
                    .call(xAxis);
            }
		</script>
	</body>
</html>

sequence

Your borwser is not supporting object tag. Please use one of the latest browsers.
Go to /D3JSExam/D3JS-layout-sequence.html

https://github.com/kagyuu/D3JSExam/blob/master/D3JS-layout-sequence.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Sequence</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <script type="text/javascript" src="temp.js" charset="utf-8"></script>
        <style type="text/css">
            .axis path,
            .axis line {
                fill: none;
                stroke: black;
                shape-rendering: crispEdges;
            }
             
            .axis text {
                font-family: sans-serif;
                font-size: 8px;
            }
        </style>
    </head>
    <body>
        平均気温の変化 (2000年基準)
        <div id="chart"></div>
        <script type="text/javascript">
            var w = 480;
            var h = 240;
            var margin = {x:50, y:20};
             
            // min value
            var minX = d3.min(dataset, function(d) {
                return d.year;
            });
              
            // max value
            var maxX = d3.max(dataset, function(d) {
                return d.year;
            });
             
            var scaleX = d3.scale.linear()
                .domain([minX, maxX])
                .rangeRound([margin.x, w - margin.x])
                .clamp(true);
             
            var axisX = d3.svg.axis()
                .scale(scaleX)
                .orient("bottom");
             
            // min value
            var minY = d3.min(dataset, function(d) {
                return Math.min(Math.min(d.global, d.n), d.s);
            });
              
            // max value
            var maxY = d3.max(dataset, function(d) {
                return Math.max(Math.max(d.global, d.n), d.s);
            });
             
            var scaleY = d3.scale.linear()
                .domain([minY, maxY])
                .nice()
                .rangeRound([h - margin.y, margin.y])
                .clamp(true);
             
            var axisY = d3.svg.axis()
                .scale(scaleY)
                .orient("left");
                             
            var svg = d3.select("#chart").append("svg").attr({width: w, height: h}).style("padding","5px");

            // 南半球の温度変化
            var sLine = d3.svg.line()
                .x(function(d) { return scaleX(d.year); })
                .y(function(d) { return scaleY(d.s); });

            svg.append("path")
                .attr("d", sLine(dataset))
                .attr("stroke", "pink")
                .attr("stroke-width", 1)
                .attr("fill", "none");
            
            // 北半球の温度変化
            var nLine = d3.svg.line()
                .x(function(d) { return scaleX(d.year); })
                .y(function(d) { return scaleY(d.n); });

            svg.append("path")
                .attr("d", nLine(dataset))
                .attr("stroke", "cyan")
                .attr("stroke-width", 1)
                .attr("fill", "none");
            
            // 世界平均の温度変化
            var gLine = d3.svg.line()
                .x(function(d) { return scaleX(d.year); })
                .y(function(d) { return scaleY(d.global); });

            svg.append("path")
                .attr("d", gLine(dataset))
                .attr("stroke", "black")
                .attr("stroke-width", 2)
                .attr("fill", "none");

            // X軸
            svg.append("g")
                .attr("class", "axis")
                .attr("transform", "translate(0," + (h - margin.y) + ")")
                .call(axisX);                
                 
            // Y軸
            svg.append("g")
                .attr("class", "axis")
                .attr("transform", "translate(" + margin.x + ",0)")
                .call(axisY);
        </script>
    </body>
</html>

histgram layout

Your borwser is not supporting object tag. Please use one of the latest browsers.
Go to /D3JSExam/D3JS-layout-histgram.html

https://github.com/kagyuu/D3JSExam/blob/master/D3JS-layout-histgram.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Histgram</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <script type="text/javascript" src="temp.js" charset="utf-8"></script>
        <style type="text/css">
            .axis path,
            .axis line {
                fill: none;
                stroke: black;
                shape-rendering: crispEdges;
            }

            .axis text {
                font-family: sans-serif;
                font-size: 8px;
            }
        </style>
    </head>
    <body>
        平均気温の頻度 <span id="from">1891</span>-<span id="to">2012</span> (2000年基準)
        <div id="chart"></div>
        <button value="1891">1891-1921</button>
        <button value="1921">1921-1951</button>
        <button value="1951">1951-1981</button>
        <button value="1981">1981-2011</button>
        <button value="all">ALL</button>
        <script type="text/javascript">
            var w = 480;
            var h = 240;
            var margin = {x:50, y:20};

            // min value
            var minX = d3.min(dataset, function(d) { return d.global; });

            // max value
            var maxX = d3.max(dataset, function(d) { return d.global; });

            // 温度(X軸)設定
            var scaleX = d3.scale.linear()
                .domain([minX, maxX])
                .rangeRound([margin.x, w - margin.x])
                .clamp(true);

            var axisX = d3.svg.axis()
                .scale(scaleX)
                .orient("bottom");

            // histgram 初期化
            var histgram = d3.layout.histogram()
                               .bins(scaleX.ticks(20))
                               .value(function(d) { return d.global; })

            // 生データを頻度情報に加工
            var hDataset = histgram(dataset);

            console.log(hDataset);

            // 気温(Y軸)設定
            var maxY = d3.max(hDataset, function(d){ return d.y; });
            var scaleY = d3.scale.linear()
                .domain([0, maxY])
                .rangeRound([h - margin.y, margin.y])
                .nice();

            var axisY = d3.svg.axis()
                .scale(scaleY)
                .orient("left");

            // 塗りつぶし色設定
            var color = d3.scale.quantile()
                .domain([minX, maxX])
                .range(['blue','cyan','pink','red']);


            var svg = d3.select("#chart").append("svg").attr({width: w, height: h}).style("padding","5px");

            // 平均温度の頻度
            svg.append("g").selectAll("rect")
                .data(hDataset)
                .enter()
                .append("rect")
                .attr({
                    "x" : function(d){ return scaleX(d.x); },
                    "y" : function(d){ return scaleY(d.y); },
                    "width" : 10,
                    "height" : function(d){ return h - margin.y - scaleY(d.y); },
                    "fill" : function(d){ return color(d.x); }
                });

            // X軸
            svg.append("g")
                .attr("class", "axis")
                .attr("transform", "translate(0," + (h - margin.y) + ")")
                .call(axisX);

            // Y軸
            svg.append("g")
                .attr("class", "axis")
                .attr("transform", "translate(" + margin.x + ",0)")
                .call(axisY);

            d3.selectAll("button").on("click", function() {
                var btn = this.value;

                var from = 1891;
                var to   = 2012;

                if ("all" === btn) {
                    hDataset = histgram(dataset);
                } else {
                    from = Math.max(from, btn);
                    to   = Math.min(to, from + 30);
                    var subset = dataset.filter(
                                     function(elem){
                                         return (from <= elem.year && elem.year < to);
                                     }
                                 );
                    hDataset = histgram(subset);
                }

                d3.select("body").select("#from").text(from);
                d3.select("body").select("#to").text(to);

                svg.select("g").selectAll("rect").data(hDataset)
                    .transition()
                    .duration(1000)
                    .ease("bounce")
	                .attr("y", function(d){ return scaleY(d.y); })
	                .attr("height", function(d){ return h - margin.y - scaleY(d.y); });
            });
        </script>
    </body>
</html>

force layout

Your borwser is not supporting object tag. Please use one of the latest browsers.
Go to /D3JSExam/D3JS-layout-force.html

https://github.com/kagyuu/D3JSExam/blob/master/D3JS-layout-force.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Force</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <script type="text/javascript" src="temp.js" charset="utf-8"></script>
        <style type="text/css">
            text {
                font-family: sans-serif;
                font-size: 8px;
            }
        </style>
    </head>
    <body>
        平均気温の関係 1891-2012
        <div id="chart"></div>
        <script type="text/javascript">
            var w = 800;
            var h = 600;

            // 平均気温順にソートする
            dataset = dataset.sort(function(a,b){ return a.global - b.global; });
            
            // 接続の目安のために、年平均気温の差の平均と分散を求める
            var avr = 0.0;
            for (var srcNo = 0; srcNo < (dataset.length - 1); srcNo++) {
                avr += Math.abs(dataset[srcNo].global - dataset[srcNo+1].global);
            }
            avr = avr / dataset.length;
            
            var sigma = 0.0;
            for (var srcNo = 0; srcNo < (dataset.length - 1); srcNo++) {
                sigma += Math.abs(Math.abs(dataset[srcNo].global - dataset[srcNo+1].global) - avr);
            }
            sigma = sigma / dataset.length;
            
            console.log(avr);
            console.log(avr + 2*sigma);
            // 隣同士と、年平均気温の差が ±3σ 以下のデータ同士を接続する
            var edges = new Array();
            for (var srcNo = 0; srcNo < (dataset.length - 1); srcNo++) {
                
                edges.push({source: srcNo, target: (srcNo + 1)});
                
                for (var targetNo = srcNo + 2; targetNo < dataset.length; targetNo++) {
                    if (Math.abs(dataset[srcNo].global - dataset[targetNo].global) < avr + 3*sigma) {
                        edges.push({source: srcNo, target: targetNo});
                    } else {
                        break;
                    }
                }
            }
            console.log(edges);
            
            //Initialize a default force layout, using the nodes and edges in dataset
            var force = d3.layout.force()
                                 .nodes(dataset)
                                 .links(edges)
                                 .size([w, h])
                                 .linkDistance([50]) // 接続されているもの同士の距離は 50
                                 .charge([-100])     // ノード同士の斥力 (デフォルトは -30)
                                 .start();
            
            // min value
            var minX = d3.min(dataset, function(d) { return d.global; });

            // max value
            var maxX = d3.max(dataset, function(d) { return d.global; });
            
            // 塗りつぶし色設定
            var colors = d3.scale.quantile()
                .domain([minX, maxX])
                .range(['blue','cyan','pink','red']);
            
            //Create SVG element
            var svg = d3.select("#chart")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);
            
            //Create edges as lines
            var edges = svg.selectAll("line")
                .data(edges)
                .enter()
                .append("line")
                .style("stroke", "lightgray")
                .style("stroke-width", 1);
            
            //Create nodes as circles
            var nodes = svg.selectAll("circle")
                .data(dataset)
                .enter()
                .append("circle")
                .attr("r", 5)
                .style("fill", function(d) {
                    return colors(d.global);
                })
                .call(force.drag);
                
            //Create nodes as text
            var texts = svg.selectAll("text")
                .data(dataset)
                .enter()
                .append("text")
                .text(function(d){return d.year;})
                .on("mouseover", function(d){ d3.select(this).text(d.global + "℃"); })
                .on("mouseout", function(d){ d3.select(this).text(d.year); })
                .call(force.drag);

            //Every time the simulation "ticks", this will be called
            force.on("tick", function() {

                edges.attr("x1", function(d) { return d.source.x; })
                     .attr("y1", function(d) { return d.source.y; })
                     .attr("x2", function(d) { return d.target.x; })
                     .attr("y2", function(d) { return d.target.y; });
            
                nodes.attr("cx", function(d) { return d.x; })
                     .attr("cy", function(d) { return d.y; });
                     
                texts.attr("x", function(d) { return d.x; })
                     .attr("y", function(d) { return d.y; });
    
            });
        </script>
    </body>
</html>

その他のレイアウト


HTML


*1 http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.39.2977&rep=rep1&type=pdf

添付ファイル: filehistgram.png 801件 [詳細] fileD3JS-layout-force.html 5259件 [詳細] fileD3JS-layout-histgram.html 5435件 [詳細] fileD3JS-layout-sequence.html 5251件 [詳細] filetemp.js 6905件 [詳細] filestack.png 748件 [詳細] fileD3JS-layout-stack.html 5741件 [詳細] fileD3JS-layout-pie.html 5913件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS   sitemap
Last-modified: 2016-07-08 (金) 00:27:53 (148d)
ISBN10
ISBN13
9784061426061