-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
51 lines (48 loc) · 1.73 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<meta charset="utf-8">
<style>
@font-face {
font-family:'Comfortaa';
font-style: normal;
font-weight: 400;
src: url(fonts/Comfortaa-Regular.ttf) format('truetype')
}
#maptime {
margin:20px;
}
</style>
<body>
<a href="https://github.com/abenrob/maptimify"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
<input onkeyup="itsMapTime(this.value);"/>
<div id="maptime"></div>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
//Create the SVG Viewport
function itsMapTime(maptime){
location.hash = maptime;
width = maptime.length*100;
var height = 140;
var colors = ['#ee1c24','#fcb03f','#fdf000','#38b54a','#00aeee','#662d91'];
var maptimify = '#'+maptime+'!';
d3.select('svg').remove()
var svg = d3.select("#maptime").append("svg")
.attr("width",width)
.attr("height",height);
var words = svg.selectAll('text').append('text')
.data(colors).enter()
.append('text');
var wordsAttributes = words
.attr('x',function(d,i){return i*2})
.attr('y',function(d,i){return i*2+height*.65})
.text(maptimify)
.attr('font-size',height*.8+'px')
.attr('font-family','Comfortaa')
.attr('fill',function(d){return d})
}
if (location.hash){
itsMapTime(location.hash.slice(1))
} else {
itsMapTime('maptime')
}
</script>
</body>