Dot bar chart

点の集まりで棒グラフを表現

矢印キーの左右か、下部の細長い長方形をクリックすることで点が移り変わる。

<!DOCTYPE html>
<meta charset="utf-8">
<script src="//d3js.org/d3.v3.min.js"></script>
<body style='margin:0;padding:0;'>

var xScale = d3.scale.ordinal().rangeBands([0,dim.graphWidth],0.05);
var xLocalScale = d3.scale.ordinal();
var yScale = d3.scale.ordinal().rangePoints([dim.graphHeight, 0]);
var colorScale = d3.scale.category10();
var inputScale = d3.scale.ordinal().rangeBands([0,dim.width-margin.right]);

var xAxis = d3.svg.axis().orient('bottom').scale(xScale);
var yAxis = d3.svg.axis().orient('left').scale(yScale);

var xAxisObj = axisLayer.append('g')
  .attr('transform','translate('+0+','+dim.graphHeight+')')
  .attr('class','axis')
  .call(xAxis);
var yAxisObj = axisLayer.append('g')
  .attr('transform','translate('+0 +','+0+')')
  .attr('class','axis')
  .call(yAxis);

axisLayer.selectAll('.axis text').style('font','14px "Lucida Grande", Helvetica, Arial, sans-serif');
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'});

var time = 0;
var yearLabel = 'year';
var radius = 3;
var mar = 0.6;
var barWidth = 16;
var displaydata = [];
var years = [];

var auto = true;

var duration = 2000;
var delayMax = 1000;

trans = function(to)
{
  if ( to === time || to < 0 || to >= years.length)
  {
    return;
  }
  var current = time;
  time = to;
  yearTarget = years[time];
  var votes = graphLayer.selectAll('.vote')
    .filter(function(d){return d[current].label!=d[time].label || d[current].idx!=d[time].idx;})
    .transition()
    .duration(duration)
    .delay(function(d){return Math.random()*delayMax;})
    .attr('cx',function(d){return ((d[time].label!=null)?(xScale(d[time].label)+xLocalScale(d[time].idx%barWidth)+radius+mar):(dim.graphWidth/2));})
    .attr('cy',function(d){return ((d[time].label!=null)?(yScale(Math.floor((d[time].idx+0.1)/barWidth))-radius-mar):0);})
    .style('opacity',function(d){return (d[time].label!=null)?0.8:0.0;})
    .style('fill',function(d){return colorScale(d[time].label);});

inputLayer.select('.cursor').transition().duration(duration/2)
    .attr('x',function(d){return inputScale(years[time]);});
  inputLayer.selectAll('.button text').transition().duration(duration/2)
    .style('fill',function(d,i){return (i===time)?'#FFF':'#000';})
}

prev = function()
{
  trans(time-1);
}

next = function()
{
  trans(time+1);
}

d3.csv('data.csv', function(error,raw)
{
  if (error != null)
  {
    console.log(error);
    return;
  }
  years = d3.set(raw.map(function(d){return d[yearLabel];})).values();
  yearTarget = years[0];
  var parties = d3.keys(raw[0]).filter(function(d){return d !== yearLabel;});
  var partDict = {};
  parties.forEach(function(d,i)
  {
    partDict[d] = i;
  });
  var sums = {};
  var data = {};
  years.forEach(function(year)
  {
    data[year] = parties.map(function(party)
    {
      return +raw.filter(function(d){return d[yearLabel] === year;})[0][party]||0;
    });
    sums[year] = d3.sum(data[year]);
  });
  var max = d3.max(years.map(function(d){return d3.max(data[d]);}));
  var nrow = Math.ceil(dim.graphHeight/(2*(radius+mar)));
  barWidth = Math.ceil(max/nrow);
  yScale.domain(d3.range(nrow));
  yAxis.tickValues(d3.range(nrow).filter(function(d){return d%10===0;}));
  yAxis.tickFormat(function(d){return (d*barWidth);});
  xScale.domain(parties.map(function(d,i){return i;}));
  xAxis.tickFormat(function(d){return parties[d];});
  xAxisObj.call(xAxis);
  yAxisObj.call(yAxis);
  xLocalScale.rangeBands([0,xScale.rangeBand()]).domain(d3.range(barWidth));
  colorScale.domain(d3.range(parties.length));

inputScale.domain(years);
  var currentButton = inputLayer.append('rect')
    .attr('class','cursor')
    .attr({x:0,y:0,height:inputHeight,width:inputScale.rangeBand()})
    .style('stroke','#FFF')
    .style('stroke-width',2)
    .style('fill','#000');
  var buttons = inputLayer.selectAll('.button').data(years).enter().append('g').attr('class','button')
    .attr('transform',function(d){return 'translate(' + inputScale(d) + ',' + 0 +')';})
    .on('click',function()
    {
      var s = d3.select(this);
      trans(years.indexOf(s.datum()));
    });
  buttons.append('rect')
    .attr({x:0,y:0,height:inputHeight,width:inputScale.rangeBand()})
    .style('stroke','#FFF')
    .style('stroke-width',2)
    .style('fill','rgba(0,0,0,0.1)');
  buttons.append('text')
    .text(function(d){return d;})
    .attr('x',function(d){return inputScale.rangeBand()/2;})
    .attr('y',0)
    .style('fill',function(d,i){return (i===0)?'#FFF':'#000';})
    .style('text-anchor','middle')
    .style('font',inputHeight+'px "Lucida Grande", Helvetica, Arial, sans-serif').style('dominant-baseline','text-before-edge');

</script>

https://d3js.org/d3.v3.min.js