Skip to content

Instantly share code, notes, and snippets.

View osoken's full-sized avatar

Takeshi OSOEKAWA osoken

32 followers · 1 following
View GitHub Profile
@osoken
osoken / README.md
Last active February 6, 2016 10:10
Simple clock

日本標準時のアナログ時計。

@osoken
osoken / index.html
Last active February 6, 2016 10:11
japan.topojson
<!DOCTYPE html>
<meta charset="utf-8">
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<body>
<div id='map_canvas' style='position:absolute'></div>
<script>
var map={};
@osoken
osoken / index.html
Last active February 6, 2016 10:07
japan.topojson with labels
<!DOCTYPE html>
<meta charset='utf-8'>
<script src='https://d3js.org/d3.v3.min.js'></script>
<script src='https://d3js.org/topojson.v1.min.js'></script>
<body>
<div id='map_canvas' style='position:absolute'></div>
<script>
var map={};
@osoken
osoken / index.html
Last active February 6, 2016 10:08
japan.topojson (canvas)
<!DOCTYPE html>
<meta charset='utf-8'>
<script src='//d3js.org/d3.v3.min.js'></script>
<script src='https://d3js.org/topojson.v1.min.js'></script>
<body>
<div id='map_canvas' style='position:absolute'></div>
<script>
var map={};
@osoken
osoken / index.html
Last active February 6, 2016 10:10
Yamanote direction signs
<!DOCTYPE html>
<meta charset="utf-8">
<script src="//d3js.org/d3.v3.min.js"></script>
<body>
<script>
var width = 960;
var height = 500;
var radius = 170;
var data={};
@osoken
osoken / event_time.tsv
Last active July 9, 2017 10:20
Zoomable area chart
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
@osoken
osoken / index.html
Last active February 6, 2016 10:12
Input driven bar chart
<!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>
@osoken
osoken / data.csv
Last active May 10, 2017 16:55
Dot bar chart
year A B C D E F G
0 401 150 0 144 48 410 803
1 419 299 90 141 80 180 802
2 468 440 97 95 48 42 860
3 585 459 100 99 48 71 702
4 462 634 89 80 44 104 670
5 423 233 81 84 19 361 882
@osoken
osoken / downloadbtn.png
Last active March 20, 2016 07:15
Download as PNG
downloadbtn.png
@osoken
osoken / index.html
Last active February 6, 2016 10:06
leaflet.js and d3.js example
<!DOCTYPE html>
<meta charset='utf-8'>
<script src='//d3js.org/d3.v3.min.js'></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js'></script>
<body>
<div style='width:960px;height:500px'></div>
<script>
var map = new L.Map(d3.select('div').node()).setView([35.678707, 139.739143], 12);
var tile = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {