Skip to content

Instantly share code, notes, and snippets.

@osoken

osoken/index.html

Last active February 6, 2016 10:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save osoken/f8eb76f7d2dd810a847c to your computer and use it in GitHub Desktop.
Save osoken/f8eb76f7d2dd810a847c to your computer and use it in GitHub Desktop.
Download ZIP
Input driven bar chart
Raw
readme.md

テキストフィールドに数列をタイプすると棒グラフに変換して表示する。

区切り文字としては空白、タブ、カンマが使用できる。

数字以外の値は0として扱われる。

Raw
index.html
<!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