Skip to content

Instantly share code, notes, and snippets.

@osoken

osoken/event_time.tsv

Last active July 9, 2017 10:20
Show Gist options
  • Save osoken/e8db7ed417108b68d06a to your computer and use it in GitHub Desktop.
Save osoken/e8db7ed417108b68d06a to your computer and use it in GitHub Desktop.
Download ZIP
Zoomable area chart
Raw
readme.md

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

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

Raw
event_time.tsv
We can make this file beautiful and searchable if this error is corrected: No tabs found in this TSV file in line 0.
time
Mon, 4 Aug 2014 00:53:14 -0700
Mon, 4 Aug 2014 05:03:29 -0700
Mon, 4 Aug 2014 05:47:47 -0700
Thu, 7 Aug 2014 03:27:17 -0700
Mon, 4 Aug 2014 05:33:01 -0700
Tue, 5 Aug 2014 01:27:39 -0700
Tue, 5 Aug 2014 00:44:15 -0700
Sun, 3 Aug 2014 22:42:41 -0700
Mon, 4 Aug 2014 16:35:18 -0700
Mon, 4 Aug 2014 02:45:58 -0700
Mon, 11 Aug 2014 01:21:12 -0700
Sun, 3 Aug 2014 23:16:42 -0700
Tue, 12 Aug 2014 08:27:20 -0700
Tue, 5 Aug 2014 19:46:30 -0700
Tue, 5 Aug 2014 00:38:50 -0700
Fri, 8 Aug 2014 10:34:32 -0700
Wed, 13 Aug 2014 21:31:31 -0700
Mon, 4 Aug 2014 12:07:13 -0700
Fri, 8 Aug 2014 16:54:51 -0700
Mon, 4 Aug 2014 03:44:06 -0700
Mon, 4 Aug 2014 05:34:43 -0700
Mon, 4 Aug 2014 03:40:47 -0700
Mon, 4 Aug 2014 22:29:00 -0700
Tue, 5 Aug 2014 04:35:32 -0700
Sat, 9 Aug 2014 06:47:09 -0700
Wed, 6 Aug 2014 03:02:53 -0700
Thu, 14 Aug 2014 21:06:41 -0700
Mon, 4 Aug 2014 15:17:07 -0700
Mon, 4 Aug 2014 15:45:40 -0700
Mon, 4 Aug 2014 17:55:14 -0700
Mon, 4 Aug 2014 00:16:57 -0700
Mon, 11 Aug 2014 01:46:15 -0700
Mon, 4 Aug 2014 00:39:07 -0700
Mon, 4 Aug 2014 02:50:53 -0700
Tue, 5 Aug 2014 23:18:33 -0700
Mon, 4 Aug 2014 04:09:22 -0700
Wed, 6 Aug 2014 20:07:18 -0700
Tue, 5 Aug 2014 06:14:20 -0700
Sun, 3 Aug 2014 23:41:39 -0700
Tue, 5 Aug 2014 03:55:15 -0700
Tue, 5 Aug 2014 00:40:43 -0700
Tue, 5 Aug 2014 00:52:56 -0700
Fri, 15 Aug 2014 07:16:17 -0700
Tue, 5 Aug 2014 01:12:20 -0700
Tue, 5 Aug 2014 03:30:14 -0700
Mon, 4 Aug 2014 00:49:12 -0700
Mon, 11 Aug 2014 14:38:13 -0700
Sun, 3 Aug 2014 18:53:50 -0700
Mon, 4 Aug 2014 03:17:12 -0700
Sat, 16 Aug 2014 00:17:52 -0700
Fri, 15 Aug 2014 20:52:27 -0700
Sun, 3 Aug 2014 21:47:16 -0700
Mon, 4 Aug 2014 02:45:24 -0700
Mon, 4 Aug 2014 15:40:33 -0700
Sun, 3 Aug 2014 22:02:52 -0700
Sun, 3 Aug 2014 23:51:21 -0700
Mon, 4 Aug 2014 23:38:04 -0700
Mon, 4 Aug 2014 22:08:52 -0700
Tue, 5 Aug 2014 02:42:21 -0700
Mon, 11 Aug 2014 02:12:37 -0700
Mon, 4 Aug 2014 03:50:38 -0700
Mon, 4 Aug 2014 19:05:01 -0700
Sat, 9 Aug 2014 21:44:07 -0700
Mon, 4 Aug 2014 18:59:46 -0700
Sun, 3 Aug 2014 23:33:28 -0700
Mon, 4 Aug 2014 06:35:34 -0700
Mon, 4 Aug 2014 07:39:35 -0700
Sun, 3 Aug 2014 22:53:14 -0700
Mon, 4 Aug 2014 03:58:42 -0700
Tue, 5 Aug 2014 03:35:49 -0700
Wed, 6 Aug 2014 01:12:03 -0700
Mon, 4 Aug 2014 06:29:42 -0700
Tue, 5 Aug 2014 08:57:37 -0700
Sat, 9 Aug 2014 16:02:01 -0700
Mon, 4 Aug 2014 10:14:21 -0700
Sun, 3 Aug 2014 23:09:42 -0700
Sun, 3 Aug 2014 23:32:47 -0700
Sun, 3 Aug 2014 23:09:46 -0700
Mon, 4 Aug 2014 07:47:02 -0700
Thu, 7 Aug 2014 04:32:23 -0700
Wed, 13 Aug 2014 19:42:44 -0700
Mon, 4 Aug 2014 01:08:48 -0700
Mon, 11 Aug 2014 20:18:55 -0700
Mon, 4 Aug 2014 04:21:14 -0700
Wed, 6 Aug 2014 16:11:49 -0700
Tue, 5 Aug 2014 10:01:25 -0700
Tue, 5 Aug 2014 01:56:15 -0700
Mon, 4 Aug 2014 18:29:29 -0700
Tue, 5 Aug 2014 07:24:43 -0700
Mon, 4 Aug 2014 04:04:35 -0700
Mon, 4 Aug 2014 01:18:48 -0700
Sun, 3 Aug 2014 23:59:44 -0700
Mon, 4 Aug 2014 01:23:44 -0700
Mon, 4 Aug 2014 05:58:43 -0700
Tue, 5 Aug 2014 07:25:19 -0700
Mon, 4 Aug 2014 20:24:36 -0700
Tue, 5 Aug 2014 03:47:48 -0700
Mon, 4 Aug 2014 07:12:19 -0700
Mon, 4 Aug 2014 00:24:11 -0700
Wed, 6 Aug 2014 20:01:33 -0700
Sun, 3 Aug 2014 22:50:26 -0700
Sun, 3 Aug 2014 22:48:12 -0700
Tue, 5 Aug 2014 00:36:19 -0700
Sun, 3 Aug 2014 23:38:49 -0700
Mon, 4 Aug 2014 04:04:19 -0700
Tue, 5 Aug 2014 00:31:13 -0700
Mon, 4 Aug 2014 21:38:37 -0700
Mon, 4 Aug 2014 20:05:38 -0700
Mon, 4 Aug 2014 03:07:20 -0700
Wed, 6 Aug 2014 13:21:38 -0700
Mon, 4 Aug 2014 00:54:11 -0700
Mon, 4 Aug 2014 10:01:59 -0700
Sun, 3 Aug 2014 22:48:44 -0700
Tue, 5 Aug 2014 01:09:36 -0700
Tue, 5 Aug 2014 02:36:45 -0700
Sun, 3 Aug 2014 23:35:51 -0700
Mon, 4 Aug 2014 00:53:25 -0700
Sun, 3 Aug 2014 22:01:11 -0700
Mon, 4 Aug 2014 14:08:32 -0700
Tue, 5 Aug 2014 01:09:38 -0700
Fri, 8 Aug 2014 02:32:31 -0700
Sun, 3 Aug 2014 22:50:53 -0700
Sun, 3 Aug 2014 23:02:44 -0700
Mon, 4 Aug 2014 19:39:37 -0700
Thu, 7 Aug 2014 15:11:43 -0700
Tue, 5 Aug 2014 00:42:44 -0700
Wed, 6 Aug 2014 04:56:22 -0700
Tue, 5 Aug 2014 00:55:46 -0700
Mon, 4 Aug 2014 23:35:46 -0700
Tue, 5 Aug 2014 19:12:48 -0700
Sat, 9 Aug 2014 07:00:09 -0700
Tue, 5 Aug 2014 04:10:21 -0700
Tue, 5 Aug 2014 14:09:06 -0700
Sun, 3 Aug 2014 21:46:13 -0700
Mon, 4 Aug 2014 15:56:04 -0700
Tue, 5 Aug 2014 00:38:46 -0700
Mon, 4 Aug 2014 07:25:19 -0700
Sun, 3 Aug 2014 22:53:49 -0700
Mon, 4 Aug 2014 08:59:35 -0700
Mon, 4 Aug 2014 04:24:54 -0700
Mon, 4 Aug 2014 02:06:30 -0700
Wed, 13 Aug 2014 18:11:30 -0700
Mon, 4 Aug 2014 06:04:58 -0700
Mon, 4 Aug 2014 00:59:34 -0700
Mon, 4 Aug 2014 03:52:19 -0700
Tue, 5 Aug 2014 00:37:06 -0700
Mon, 4 Aug 2014 06:14:49 -0700
Sun, 3 Aug 2014 22:40:32 -0700
Sun, 3 Aug 2014 22:44:44 -0700
Mon, 4 Aug 2014 04:09:32 -0700
Mon, 4 Aug 2014 00:30:03 -0700
Thu, 7 Aug 2014 07:47:53 -0700
Sun, 3 Aug 2014 23:10:56 -0700
Fri, 8 Aug 2014 19:42:07 -0700
Mon, 4 Aug 2014 17:41:31 -0700
Tue, 5 Aug 2014 01:13:16 -0700
Tue, 12 Aug 2014 23:50:00 -0700
Sun, 3 Aug 2014 21:45:53 -0700
Tue, 5 Aug 2014 16:39:30 -0700
Mon, 4 Aug 2014 09:35:43 -0700
Wed, 13 Aug 2014 05:53:09 -0700
Sun, 3 Aug 2014 22:44:57 -0700
Wed, 6 Aug 2014 02:29:36 -0700
Mon, 4 Aug 2014 05:56:50 -0700
Sun, 3 Aug 2014 22:52:10 -0700
Mon, 4 Aug 2014 17:59:38 -0700
Mon, 4 Aug 2014 03:18:14 -0700
Wed, 6 Aug 2014 06:08:10 -0700
Raw
index.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment