Skip to content

Commit 2d18d0d

Browse files
huyen-nguyenhuyen-nguyen
committed
Update video
1 parent 025963d commit 2d18d0d

6 files changed

Lines changed: 66 additions & 59 deletions

File tree

‎.DS_Store‎

0 Bytes
Binary file not shown.

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
<a href="demo.html" class="w3-bar-item w3-button w3-mobile w3-right nav" >Demo</a>
4343
<a href="index.html" class="w3-bar-item w3-button w3-mobile w3-right nav " style="background-color: #cdcdcd">Video</a>
4444
</div>
45-
<center><iframe width="95%" height="800" src="media/SOAViz1.mp4" frameborder="0"
45+
<center><iframe width="95%" height="800" src="media/WSvideo.mp4" frameborder="0"
4646
allowfullscreen></iframe></center>
4747
</body>
4848
</html>

‎javascripts/main.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
// pre-defined size
2-
var initWidth = 2000,
3-
initHeight = 900,
4-
initMinFont = 15,
5-
initMaxFont = 35,
2+
var initWidth = 2350,
3+
initHeight = 1000,
4+
initMinFont = 17,
5+
initMaxFont = 32,
66
initFlag = "none",// none / fa/ f / a
77
topRank, topRankUpdate;
88

@@ -200,7 +200,7 @@ function draw(data){
200200
styleGridlineNodes(gridlineNodes);
201201

202202
//Main group
203-
mainGroup = svg.append('g').attr('transform', 'translate(' + margins.left + ',' + margins.top + ')');
203+
mainGroup = svg.append('g').attr('transform', 'translate(' + margins.left + ',' + margins.top + ')').attr("id", "mainGroup");
204204
var wordStreamG = mainGroup.append('g');
205205

206206
// =============== Get BOUNDARY and LAYERPATH ===============
@@ -269,7 +269,7 @@ function draw(data){
269269

270270
if (fileName.indexOf("Huffington") >= 0) {
271271
d3.json("data/linksHuff2012.json", function (error, rawLinks) {
272-
const threshold = 10;
272+
const threshold = 5;
273273
const links = rawLinks.filter(d => d.weight > threshold);
274274

275275
links.forEach(d => {
@@ -737,7 +737,7 @@ function topRank1000(){
737737
}
738738
function topRank45(){
739739
if (topRank==undefined){
740-
topRank = 50;
740+
topRank = 30;
741741
}
742742
return topRank;
743743
}

‎javascripts/update.js‎

Lines changed: 11 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ d3.select('#widthSlider').call(d3.slider()
1414
.axis(axis)
1515
.value([0, initWidth])
1616
.min(0)
17-
.max(2000)
17+
.max(2500)
1818
.step(20)
1919
.on("slide", function (evt, value) {
2020
d3.select('#widthText').text(value[1]);
@@ -24,7 +24,7 @@ d3.select('#heightSlider').call(d3.slider()
2424
.axis(axis)
2525
.value([0, initHeight])
2626
.min(0)
27-
.max(2000)
27+
.max(2500)
2828
.step(20)
2929
.on("slide", function (evt, value) {
3030
d3.select('#heightText').text(value[1]);
@@ -113,7 +113,7 @@ function progressing() {
113113
bar.animate(1.0); // Number from 0.0 to 1.0
114114
}
115115

116-
function submitInput() {
116+
function submitInput(updateData) {
117117
globalWidth = parseInt(document.getElementById("widthText").innerText);
118118
globalHeight = parseInt(document.getElementById("heightText").innerText);
119119
globalMinFont = parseInt(document.getElementById("fontMin").innerText);
@@ -141,34 +141,18 @@ function submitInput() {
141141
}
142142

143143
// top rank
144-
if (topRankUpdate <= topRank) {
145-
for (var i = 0; i < gdata.length; i++) {
146-
for (var j in categories) {
147-
gdata[i]["words"][categories[j]] = gdata[i]["words"][categories[j]].slice(0, topRankUpdate);
148-
}
149-
}
150-
}
151-
else {
152-
for (var i = 1; i < totalData.length; i++) { // start 1 for sudden
153-
for (var j in categories) {
154-
gdata[i - 1]["words"][categories[j]] = totalData[i]["words"][categories[j]].slice(0, topRankUpdate);
155-
}
156-
}
157-
gdata = tfidf(gdata);
158-
}
144+
var temp = getTop(totalData, topRankUpdate).slice(1);
145+
var data = tfidf(temp);
146+
159147
console.log("input submitted");
160-
console.log(gdata);
148+
console.log(data);
161149

162-
// var q = d3.queue();
163-
// q.defer(progressing)
164-
// .await(updateData);
165-
updateData();
150+
updateData(data);
166151
}
167152

168153
var up = [];
169154

170-
function updateData(error) {
171-
if (error) throw error;
155+
function updateData(data) {
172156
var offsetLegend = -10;
173157
var axisPadding = 10;
174158
var margins = {left: 20, top: 20, right: 10, bottom: 30};
@@ -179,7 +163,7 @@ function updateData(error) {
179163
.fontScale(d3.scale.log())
180164
.minFontSize(globalMinFont)
181165
.maxFontSize(globalMaxFont)
182-
.data(gdata)
166+
.data(data)
183167
.flag(globalFlag);
184168

185169
var newboxes = ws.boxes(),
@@ -199,6 +183,7 @@ function updateData(error) {
199183
height: globalHeight + +margins.top + margins.bottom + axisPadding + offsetLegend + legendHeight
200184
});
201185

186+
// d3.select("#mainsvg").selectAll("*").remove();
202187
var dates = [];
203188
newboxes.data.forEach(row => {
204189
dates.push(row.date);

‎media/WSvideo.mp4‎

28 MB
Binary file not shown.

‎test/wordcloud.html‎

Lines changed: 47 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -16,67 +16,77 @@
1616
<script src='https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.0.1/spin.min.js'></script>
1717
</head>
1818
<body>
19-
<section class="timeline" id = "WordcloudImg"></section >
19+
<section class="timeline" id="WordcloudImg"></section>
2020
<script>
21-
var categories = ["person","location","organization","miscellaneous"];
21+
var categories = ["person", "location", "organization", "miscellaneous"];
22+
var color = d3.scaleOrdinal(d3.schemeCategory10);
2223

23-
d3.json("../data/wcloudHuff.json", function(error, data){
24+
d3.json("../data/wcloudHuff.json", function (error, data) {
2425
drawWordCloud(data);
2526
});
2627

28+
function getColor(topic) {
29+
if (topic === "person") return color(0);
30+
else if (topic === "location") return color(1);
31+
else if (topic === "organization") return color(2);
32+
else if (topic === "miscellaneous") return color(3);
33+
}
34+
35+
function drawWordCloud(words) {
2736

28-
function drawWordCloud(words){
29-
var color = d3.scale.category10();
30-
var font ="Arial";
37+
var font = "arial";
3138
var word_count = {};
32-
words.forEach(date=> {
33-
categories.forEach((c,i) =>{
34-
date.words[c].slice(0,2).forEach(w=> word_count[w.text] = {sudden: w.sudden, category: [c,i]})})
39+
words.forEach(date => {
40+
categories.forEach((c, i) => {
41+
date.words[c].slice(0, 2).forEach(w => word_count[w.text] = {sudden: w.sudden, category: [c, i]})
42+
})
3543
});
3644
var margin = {top: 0, right: 0, bottom: 0, left: 0};
3745
var width = 1400;
38-
var height = 800;
46+
var height = 900;
3947
d3.select("#WordcloudImg").select('svg').remove();
4048
d3.select("#WordcloudImg")
4149
.append('svg')
4250
.attr("width", width)
4351
.attr("height", height)
4452
.append("g")
45-
.attr("id","wordchart")
53+
.attr("id", "wordchart")
4654
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
4755
var svg_location = "#wordchart";
4856

49-
50-
// var fill = color;
51-
5257
var word_entries = d3.entries(word_count);
5358

5459
var xScale = d3.scaleLinear()
55-
.domain([0, d3.max(word_entries, function(d) {
60+
.domain([0, d3.max(word_entries, function (d) {
5661
return d.value.sudden;
5762
})
5863
])
59-
.range([26,50]);
64+
.range([26, 60]);
6065

6166
var opacity = d3.scaleSqrt()
62-
.domain([0, d3.max(word_entries, function(d) {
67+
.domain([0, d3.max(word_entries, function (d) {
6368
return d.value.sudden;
6469
})
6570
])
66-
.range([0.4,1]);
71+
.range([0.4, 1]);
6772

6873
d3.layout.cloud().size([width, height])
6974
.timeInterval(20)
7075
.words(word_entries)
71-
.fontSize(function(d) { return xScale(d.value.sudden); })
72-
.text(function(d) { return d.key; })
76+
.fontSize(function (d) {
77+
return xScale(d.value.sudden);
78+
})
79+
.text(function (d) {
80+
return d.key;
81+
})
7382
//.rotate(function() { return (~~(Math.random() * 6) - 3) * 8 })
7483
.rotate(0)
7584
.font(font)
7685
.on("end", draw)
7786
.start();
7887

7988
console.log(words);
89+
8090
function draw(words) {
8191
d3.select(svg_location).append("svg")
8292
.attr("width", width)
@@ -86,16 +96,28 @@
8696
.selectAll("text")
8797
.data(words)
8898
.enter().append("text")
89-
.style("font-size", function(d) { return xScale(+d.value.sudden) + "px"; })
99+
.style("font-size", function (d) {
100+
return xScale(+d.value.sudden) + "px";
101+
})
90102
.style("font-family", font)
91-
.style("fill", function(d, i) { return fill(d.value.category[1]); })
103+
// .style("fill", function (d) {
104+
// let topic = d.value.category[0]
105+
// if (topic === "person") return color(0);
106+
// else if (topic === "location") return color(1);
107+
// else if (topic === "organization") return color(2);
108+
// else if (topic === "miscellaneous") return color(3);
109+
// })
92110
.style("fill", function(d, i) { return "#000" })
93-
.style("fill-opacity", function(d) { return opacity(+d.value.sudden) })
111+
.style("fill-opacity", function (d) {
112+
return opacity(+d.value.sudden)
113+
})
94114
.attr("text-anchor", "middle")
95-
.attr("transform", function(d) {
115+
.attr("transform", function (d) {
96116
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
97117
})
98-
.text(function(d) { return d.key; });
118+
.text(function (d) {
119+
return d.key;
120+
});
99121
}
100122

101123
d3.layout.cloud().stop();

0 commit comments

Comments
 (0)