テキストフィールドに数列をタイプすると棒グラフに変換して表示する。
区切り文字としては空白、タブ、カンマが使用できる。
数字以外の値は0として扱われる。
Last active
February 6, 2016 10:12
-
-
Save osoken/f8eb76f7d2dd810a847c to your computer and use it in GitHub Desktop.
Input driven bar chart
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <body> | |
| <div id='control' style='height:20px;border:0;padding:0;margin:0'> | |
| <input type='text' style='width:640;height:18px;margin:0;padding:0;border:solid 1px'></input> | |
| </div> | |
| <div id='graph' style='height:480px;border:0;padding:0;margin:0'> | |
| </div> | |
| <script> | |
| var dim = {width:960,height:480}; | |
| var margin = {top: 0, left: 30, right: 30, bottom: 30}; | |
| dim.graphHeight = dim.height - margin.top - margin.bottom; | |
| dim.graphWidth = dim.width - margin.left - margin.right; | |
| var svg = d3.select('#graph').append('svg') | |
| .attr({width:dim.width,height:dim.height}); | |
| var axisLayer = svg.append('g').attr('transform','translate(' + margin.left + ',' + margin.top + ')'); | |
| var graphLayer = svg.append('g').attr('transform','translate(' + margin.left + ',' + margin.top + ')'); | |
| var xScale = d3.scale.linear().range([0,dim.graphWidth]); | |
| var yScale = d3.scale.ordinal().rangeBands([0,dim.graphHeight],0.1); | |
| var xAxis = d3.svg.axis().orient('bottom').scale(xScale); | |
| var yAxis = d3.svg.axis().orient('left').scale(yScale).tickValues([]); | |
| var xAxisObj = axisLayer.append('g') | |
| .attr('transform','translate('+0+','+dim.graphHeight+')') | |
| .attr('class','axis') | |
| .call(xAxis); | |
| var yAxisObj = axisLayer.append('g') | |
| .attr('transform','translate('+xScale(0)+','+0+')') | |
| .attr('class','axis') | |
| .call(yAxis); | |
| function update_axis() | |
| { | |
| axisLayer.selectAll('.axis text').style({'font':'"Lucida Grande", Helvetica, Arial','font-size': '14px'}); | |
| axisLayer.selectAll('.axis path.domain').style({fill:'none',stroke:'#000000','shape-rendering':'crispEdges'}); | |
| axisLayer.selectAll('.axis line').style({fill:'none',stroke:'#000000','shape-rendering':'crispEdges'}); | |
| } | |
| d3.select('input').on('keyup',function() | |
| { | |
| var data_ = d3.select(this) | |
| .property('value') | |
| .replace(/[,\n\t 、，]/g,' ').replace(/ +/g,' ') | |
| .replace(/[－０-９]/g, function(s){return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);}) | |
| .trim() | |
| .split(' ') | |
| .map(function(d){return d.replace(/"(.*)"/,'$1');}) | |
| .map(function(d){return {value:((isNaN(d))?void 0:+d),text:d};}); | |
| update_graph(data_); | |
| }); | |
| function update_graph(data) | |
| { | |
| var rng_ = d3.extent(data.map(function(d){return d.value;})); | |
| if (rng_[0] === void 0) {rng_[0] = 0;} | |
| if (rng_[1] === void 0) {rng_[1] = 0;} | |
| if (rng_[0] < 0 && rng_[1] < 0){rng_[1] = 0;} | |
| if (rng_[0] > 0 && rng_[1] > 0){rng_[0] = 0;} | |
| if (rng_[0] === 0 && rng_[1] === 0){rng_[1] = 1;} | |
| xScale.domain(rng_); | |
| yScale.domain(d3.range(0,data.length)); | |
| xAxisObj.transition().call(xAxis); | |
| yAxisObj.transition().attr('transform','translate('+xScale(0)+','+0+')').call(yAxis); | |
| update_axis(); | |
| var bind_ = graphLayer.selectAll('g') | |
| .data(data); | |
| bind_.exit().select('rect').transition().attr('x',0).attr('width',0); | |
| bind_.exit().select('text').remove(); | |
| bind_.exit().transition().remove(); | |
| var enter_ = bind_.enter().append('g') | |
| .attr('transform',function(d,i){return 'translate(' + xScale(0) + ',' + yScale(i) + ')';}); | |
| enter_.append('rect') | |
| .attr({width:0,height:yScale.rangeBand(),x:0,y:0}) | |
| .style('fill','steelblue'); | |
| enter_.append('text') | |
| .style({fill:'#000000','font':'"Lucida Grande", Helvetica, Arial','font-size': ''+Math.max(14,Math.min(yScale.rangeBand(),20))+'px', 'dominant-baseline':'middle', 'text-anchor':(xScale(0)<(dim.graphWidth*0.5))?'start':'end'}) | |
| .attr({x:0,y:yScale.rangeBand()*0.5,dx:0}) | |
| .text(''); | |
| bind_.transition() | |
| .attr('transform',function(d,i){return 'translate(' + xScale(0) + ',' + yScale(i) + ')';}); | |
| bind_.select('rect').transition() | |
| .attr('x', function(d){return (d.value===void 0)?0:((d.value < 0)?(xScale(d.value)-xScale(0)):0);}) | |
| .attr('width',function(d){return (d.value===void 0)?0:(Math.abs(xScale(0) - xScale(d.value)));}) | |
| .attr('height',yScale.rangeBand()) | |
| .attr('y',0); | |
| bind_.select('text').transition() | |
| .style('font-size',''+Math.max(14,Math.min(yScale.rangeBand(),20))+'px') | |
| .style('text-anchor',(xScale(0)<(dim.graphWidth*0.5))?'start':'end') | |
| .attr('y',yScale.rangeBand()*0.5) | |
| .attr('dx',(xScale(0)<(dim.graphWidth*0.5))?8:-8) | |
| .text(function(d){return (d.value===void 0)?d.text:'';}); | |
| } | |
| d3.select('input').property('value','-1 0 1 2'); | |
| update_graph([-1,0,1,2].map(function(d){return {value:d,text:''+d};})); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment