-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
124 lines (117 loc) · 4.63 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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<html>
<head>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- Wide card with share menu button -->
<style>
#container {
width: 80%;
margin-left: auto;
margin-right: auto;
}
#text-container {
width: 75%;
margin: 30px;
margin-left: auto;
margin-right: auto;
}
.demo-card-wide.mdl-card {
width: 100%;
margin: 20px;
}
.demo-card-wide > .mdl-card1__title {
color: #fff;
height: 176px;
background: url('./img/demo1.png') center / cover;
}
.demo-card-wide > .mdl-card2__title {
color: #fff;
height: 176px;
background: url('./img/demo2.png') center / cover;
}
.demo-card-wide > .mdl-card3__title {
color: #fff;
height: 176px;
background: url('./img/demo3.png') center / cover;
}
.mdl-card__title-text {
color: #fff;
background-color: #000;
width: 100px;
text-align: center;
padding: 20px;
}
.demo-card-wide > .mdl-card__menu {
color: #fff;
}
</style>
</head>
<body>
<div id="container">
<h1>ADD (Adaptive Data-driven Design)</h1>
<hr>
<div id="text-container">
Introduce a novel data visualization package, called the ADD framework, to support responsive and adaptive data-driven visualization. Currently, interactive data visualization, which is generally achieved by Javascript-based libraries such as D3.js, cannot be easily manipulated as the responsive way like the RWD principle in the CSS design. Visualization of abundant information becomes challenging while switching between the desktop view or the mobile view. To ease of code maintenance and to get rid of coding complication for diversified screen resolution, we incorporate advantages from React and D3.js. The main contribution of the ADD framework, released as an open-source library, is to facilitate the development of data manipulation and visualization in the responsive way, pursuing better user mobile experience.
</div>
<h3>Project Links</h3>
<div id="text-container">
This project is build on top of "react-d3" library, a javascript library for building composable and declarative charts.
<ul>
<li>
<a href="http://reactd3.org/">http://reactd3.org/</a>
</li>
<li>
<a href="http://map.reactd3.org/">http://map.reactd3.org/</a>
</li>
</ul>
<div>
And the whole project is open sourced at <a href="http://github.com/react-d3/">http://github.com/react-d3</a>
</div>
<div>
This demo is also open source at <a href="https://github.com/react-d3/adaptive-data-design">https://github.com/react-d3/adaptive-data-design</a>
</div>
</div>
<h2>Here are some demos:</h2>
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card1__title">
<h2 class="mdl-card__title-text">DEMO 1</h2>
</div>
<div class="mdl-card__supporting-text">
Visualization of the air index in diversified devices
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="/demo/demo1.html">
DEMO Link
</a>
</div>
</div>
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card2__title">
<h2 class="mdl-card__title-text">DEMO 2</h2>
</div>
<div class="mdl-card__supporting-text">
Visualization of the reservoir data in diversified devices
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="/demo/demo2.html">
DEMO Link
</a>
</div>
</div>
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card3__title">
<h2 class="mdl-card__title-text">DEMO 3</h2>
</div>
<div class="mdl-card__supporting-text">
Map visualization in the desktop and in the mobile phone.
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="/demo/demo3.html">
DEMO Link
</a>
</div>
</div>
</div>
</body>
</html>