Old school D3 from simpler times

All examples By author By category About

osoken

Full window Github gist

Zoomable area chart

Facebook group [Data Visualization Japan] のメンバー数の時系列変化

マウスのズームに対応している

<!DOCTYPE html>
<meta charset="utf-8">
<script src="//d3js.org/d3.v3.min.js"></script>
<body>
<style>
.axis path,
.axis line {
  fill: none;
  stroke: #888;
  shape-rendering: crispEdges;
}
</style>
<script>
var width = 960;
var height = 500;
var margin = 50;
var graphWidth = width - 2*margin;
var graphHeight = height - 2*margin;

var svg = d3.select('body').append('svg').attr({width:width,height:height});

var timeFormat = d3.time.format('%a, %-d %b %Y %X %Z');

var timeScale = d3.time.scale().range([0,graphWidth]);
var heightScale = d3.scale.linear().range([graphHeight,0]);
var timeAxis = d3.svg.axis().scale(timeScale).orient('bottom').tickSize(-graphHeight);
var heightAxis = d3.svg.axis().scale(heightScale).orient('left').tickSize(-graphWidth);
var area = d3.svg.area().x(function(d){return timeScale(d.time);}).y0(graphHeight).y1(function(d){return heightScale(d.value);});
var zoomBehavior = d3.behavior.zoom();
d3.tsv('event_time.tsv', function(err, dat)
{
  var data = dat.map(function(d){return timeFormat.parse(d.time);}).sort(function(a,b){return (a<b)?-1:1;}).map(function(d,i){return {time:d,value:i+1};});
  timeScale.domain(d3.extent(data.map(function(d){return d.time;})));
  zoomBehavior.x(timeScale);
  heightScale.domain(d3.extent(data.map(function(d){return d.value;})));
  svg.append('g').attr('transform','translate('+margin+','+(margin+graphHeight)+')').attr('class','x axis').call(timeAxis);
  svg.append('g').attr('transform','translate('+margin+','+margin+')').attr('class','y axis').call(heightAxis);
  var graphLayer = svg.append('g')
    .attr('class', 'graph_layer')
    .attr('transform','translate(' + margin + ',' + margin + ')');
  graphLayer.append("clipPath").attr("id", "clip")
    .append("rect").attr({x:0,y:0,width:graphWidth,height:graphHeight});
  graphLayer.append('path').datum(data).attr('class','area').attr('d', area)
    .attr('fill','rgba(192,192,192,0.5)').attr('stroke','#888').attr('clip-path','url(#clip)');
  svg.append('rect').attr({x:0,y:0,height:height,width:width}).attr('fill','rgba(0,0,0,0)').attr('stroke','none').call(zoomBehavior.on('zoom',zoom));
});

function zoom()
{
  svg.select("g.x.axis").call(timeAxis);
  svg.select("g.y.axis").call(heightAxis);
  svg.select("path.area").attr("d", area);
}

</script>

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