-
Notifications
You must be signed in to change notification settings - Fork 2
/
lettercloud.html
112 lines (92 loc) · 3.5 KB
/
lettercloud.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
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="wordVis.js"></script>
<div id=panel>
<div><a href="index.html">Homepage</a><br><br></div>
<span id="word"> </span>
</div>
<script>
var loadedData, MAX_FONT = 35;
d3.csv("abbStudy_data.csv", function(data) {
d3.csv("phonem.csv", function(pho) {
console.log(pho);
var phonem = {}, position = [];
for(var p in pho){
phonem[pho[p].original] = pho[p].Stressed;
}
loadedData = process(data);
displayData(loadedData, phonem);
});
});
function displayData(data, pho){
var set = {}, position = [];
for (var i=0;i<15;i++){
position[i] = {p:0, total:0};
}
for(var key in data){
var vec = data[key].vec;
var word = [];
var indexP = key.lastIndexOf(pho[key]);
for (var i in key){
if(i>=indexP && i<(indexP+pho[key].length))
word[i] = {char:key[i], n:0, p:true};
else
word[i] = {char:key[i], n:0, p:false};
}
for(var i in vec){
var abbr = vec[i].abbr;
var before = 0;
for(var j in abbr){
var w = before, find=-1;
while(find==-1 && w<key.length){
if (key.length<13)
position[w].total += parseInt(vec[i].count);
if (abbr[j]==key[w]){
word[w].n += parseInt(vec[i].count);
find=w;
before = w+1;
}
w++;
}
if ((find!=-1) && (key.length<13)){
position[find].p += parseInt(vec[i].count);
}
}
}
set[key] = word;
}
//var color = color2 = "PaleVioletRed";
var color = "black", color2 = "grey";
var max = 0 ;
for(p in position){
if (position[p].total>max)
max = position[p].total;
}
// var spn = "<span>      ";
// for(p in position){
// spn += "<span id='"+p+"'style='font-size:"+parseInt(100*(parseInt(position[p].p)/parseInt(position[p].total)))+"px;' >M</span>";
// console.log(p+","+parseFloat(100*(parseInt(position[p].p)/parseInt(position[p].total))*(position[p].total/max)));
// }
// spn += "</span>";
// $("#panel").html($("#panel").html()+"<BR>"+spn+"<BR>");
for(var key in set){
var word = set[key];
var span = "<span id="+key+">      ", original = "";
for(var j in word){
if(word[j].p){
original += '<span style="font-size:35px;color:'+color2+';">'+word[j].char+"</span>";
span += '<span style="color:'+color+';font-size:'+ parseInt(MAX_FONT*(parseInt(word[j].n)/parseInt(data[key].total))) + 'px;">' + word[j].char + '</span>';
}else{
original += '<span style="font-size:35px;color:grey;">'+word[j].char+"</span>";
span += '<span style="font-size:'+ parseInt(MAX_FONT*(parseInt(word[j].n)/parseInt(data[key].total))) + 'px;">' + word[j].char + '</span>';
}
}
span+="    "+original+"</span>";
$("#panel").html($("#panel").html()+"<BR>"+span);
}
}
</script>
<span id="testArea"></span>