forked from keisuke-osone/e2d3-v0.3-0208
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
95 lines (90 loc) · 3.28 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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title></title>
<script src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js" type="text/javascript"></script>
<link href="css/bootstrap.v3.2.e2d3.min.css" rel="stylesheet" type="text/css"/>
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<style>
</style>
</head>
<body>
<div id="e2d3-navi-header-area">
<div id="e2d3-chart-header"><strong>E2D3 visualize data on excel</strong></div>
</div>
<div id="e2d3-chart-area" class="container-fluid"></div>
<div id="e2d3-footer">
<hr/>
Powered by E2D3.
</div>
<script src="js/e2d3.js?0.3.2" type="text/javascript"></script>
<script src="js/jquery.v2.min.js" type="text/javascript"></script>
<script src="js/jquery.e2d3.js" type="text/javascript"></script>
<script src="js/bootstrap.v3.2.min.js" type="text/javascript"></script>
<script src="js/d3.min.js"></script>
<script src="js/modernizr.custom.js" type="text/javascript"></script>
<script type="text/javascript">
/**
* Global
*/
var e2d3BindId = 'e2d3BindId';
var e2d3BindData;
var windowSize = $(window).width();
$(window).on("resize",function(){
windowSize = $(this).width();
});
var e2d3FlagDateStr = Date.now();
/**
* on load
*/
$(document).ready(function () {
e2d3.initialize(function () {
init();
});
});
function init() {
var json = [
{
"name": "sample", //名称を変更してください
"title": "グラフタイトル",
"description": "グラフ説明"
},
{
"name": "japan-color",
"title": "Japan Color",
"description": "Paint any data to japanese states."
},
{
"name": "d3-show-reel",
"title": "D3 Show Reel",
"description": "Visualize a data to multiple chart by animation."
}
]
var ul = $("<ul>").addClass("row grid cs-style-1");
$("#e2d3-chart-area").append(ul);
$(json).each(function (i) {
var name = this.name;
var href = 'chart.html#contrib/' + name + '/demo';
var li = $("<li>").addClass("col-sm-6 col-md-4");
if ((windowSize > 750 && (i + 1) % 3 === 0) || (windowSize <= 750 && (i + 1) % 2 === 0)) {
$(li).addClass("figcaption-last");
}
var fig = $("<figure>");
var thumb = $("<div>").addClass("figure-image").append($("<img>").attr({ src: "contrib/" + name + "/icon.png" }));
var figrn = $("<figcaption>");
var h3 = $("<h3>").html(this.title);
var desc = $("<div>").addClass("description").html(this.description);
var h4 = $("<h4>").addClass("target");
var btn = $("<a>").addClass("btn btn-default").attr("href", href).html("Use");
$(figrn).append(h3).append(desc).append(h4).append(btn);
$(fig).append(thumb).append(figrn);
$(li).append(fig);
$(ul).append(li);
});
}
</script>
</body>
</html>