hhow-datavis-prototype/hello-world.html at master · NCH-BPC-Informatics/hhow-datavis-prototype · GitHub

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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<!-- HTML5 Hello world by kirupa - http://www.kirupa.com/html5/getting_your_feet_wet_html5_pg1.htm -->
<html lang="en-us">

<head>
<meta charset="utf-8">
<title>Hello...</title>
<style type="text/css">
#mainContent {
	font-family: Arial, Helvetica, sans-serif;
	font-size: xx-large;
	font-weight: bold;
	background-color: #E3F0FB;
	border-radius: 4px;
	padding: 10px;
	text-align: center;
}
.buttonStyle {
	border-radius: 4px;
	border: thin solid #F0E020;
	padding: 5px;
	background-color: #F8F094;
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-weight: bold;
	color: #663300;
	width: 75px;
}

.buttonStyle:hover {
	border: thin solid #FFCC00;
	background-color: #FCF9D6;
	color: #996633;
	cursor: pointer;
}
.buttonStyle:active {
	border: thin solid #99CC00;
	background-color: #F5FFD2;
	color: #669900;
	cursor: pointer;
}

</style>

<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.3/dc.min.css">
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.3/dc.min.js"></script>


<style type='text/css'>
	pre {display:none;}
</style>

</head>

<body>


<div id="mainContent">
<script>
	function tabulate(data, columns) {
    var table = d3.select("#container").append("table"),
        thead = table.append("thead"),
        tbody = table.append("tbody");

    // append the header row
    thead.append("tr")
        .selectAll("th")
        .data(columns)
        .enter()
        .append("th")
            .text(function(column) { return column; });

    // create a row for each object in the data
    var rows = tbody.selectAll("tr")
        .data(data)
        .enter()
        .append("tr");

    // create a cell in each row for each column
    var cells = rows.selectAll("td")
        .data(function(row) {
            return columns.map(function(column) {
                return {column: column, value: row[column]};
            });
        })
        .enter()
        .append("td")
            .text(function(d) { return d.value; });

    return table;
}

// create some people
var people = [
    {name: "Jill", age: 30},
    {name: "Bob", age: 32},
    {name: "George", age: 29},
    {name: "Sally", age: 31}
];

// render the table
var peopleTable = tabulate(people, ["name", "age"]);

// uppercase the column headers
peopleTable.selectAll("thead th")
    .text(function(column) {
        return column.charAt(0).toUpperCase() + column.substr(1);
    });

// sort by age
peopleTable.selectAll("tbody tr")
    .sort(function(a, b) {
        return d3.descending(a.age, b.age);
    });

</script>


<p id="helloText">?</p>
<button id="clickButton" class="buttonStyle">click me</button>

<div id="container"></div>

</div>
<script>
var myButton = document.getElementById("clickButton");
var myText = document.getElementById("helloText");

myButton.addEventListener('click', doSomething, false)

function doSomething() {
	myText.textContent = "....hello, world!";
}
</script>

<pre id="SpecimenStatsData">

</pre>
[<span id="counter"></span>]!!!

</body>
</html>