Skip to content

Commit 2aa3223

Browse files
Tommy-DangTommy-Dang
committed
restructure source codes
1 parent 1a2394a commit 2aa3223

7 files changed

Lines changed: 150 additions & 2 deletions

File tree

‎.DS_Store‎

6 KB
Binary file not shown.

‎data/emptywheel.csv‎

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

d3.layout.wordstream.js renamed to lib/d3.layout.wordstream.js

File renamed without changes.

d3.min.js renamed to lib/d3.min.js

File renamed without changes.

‎test/.DS_Store‎

6 KB
Binary file not shown.

‎test/wordstream.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
<meta charset="UTF-8">
55
<meta http-equiv="X-UA-Compatible" content="ie=edge">
66
<title>WordStream</title>
7-
<script src="../d3.min.js"></script>
8-
<script src="../d3.layout.wordstream.js"></script>
7+
<script src="lib/d3.min.js"></script>
8+
<script src="lib/d3.layout.wordstream.js"></script>
99
</head>
1010
<body>
1111
<script>

‎wordstream.html‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
6+
<title>WordStream</title>
7+
<script src="lib/d3.min.js"></script>
8+
<script src="lib/d3.layout.wordstream.js"></script>
9+
</head>
10+
<body>
11+
<script>
12+
var url = "data/emptywheel.csv";
13+
var topics = [];
14+
d3.csv(url, function(error, rawData) {
15+
if (error) throw error;
16+
var inputFormat = d3.time.format('%Y-%m-%dT%H:%M:%S');
17+
var outputFormat = d3.time.format('%b %Y');
18+
topics = d3.keys(rawData[0]).slice(2, 6);
19+
//Filter and take only dates in 2013
20+
rawData = rawData.filter(function(d){
21+
var time = inputFormat.parse(d.time);
22+
var starDate = inputFormat.parse('2013-01-01T00:00:00');
23+
var endDate = inputFormat.parse('2014-01-01T00:00:00');
24+
return time >= starDate && time < endDate;
25+
});
26+
var data = {};
27+
d3.map(rawData, function(d, i){
28+
var date = inputFormat.parse(d.time);
29+
var date = outputFormat(date);
30+
topics.forEach(topic => {
31+
if(!data[date]) data[date] = {};
32+
data[date][topic] += data[date][topic] ? ('|' +d[topic]): (d[topic]);
33+
});
34+
});
35+
var data = d3.keys(data).map(function(date, i){
36+
var words = {};
37+
topics.forEach(topic => {
38+
var raw = {};
39+
raw[topic] = data[date][topic].split('|');
40+
//Count word frequencies
41+
var counts = raw[topic].reduce(function(obj, word){
42+
if(!obj[word]){
43+
obj[word] = 0;
44+
}
45+
obj[word]++;
46+
return obj;
47+
}, {});
48+
//Convert to array of objects
49+
words[topic] = d3.keys(counts).map(function(d){
50+
return{
51+
text: d,
52+
frequency: counts[d],
53+
topic: topic
54+
}
55+
}).sort(function(a, b){//sort the terms by frequency
56+
return b.frequency-a.frequency;
57+
}).filter(function(d){return d.text; })//filter out empty words
58+
.slice(0, 15);
59+
});
60+
return {
61+
date: date,
62+
words: words
63+
}
64+
}).sort(function(a, b){//sort by date
65+
return outputFormat.parse(a.date) - outputFormat.parse(b.date);
66+
});
67+
draw(data);
68+
});
69+
70+
function draw(data){
71+
var width = 1200, height = 500;
72+
var ws = d3.layout.wordStream()
73+
.size([width, height])
74+
.data(data);
75+
var boxes = ws.boxes();
76+
//Make the color scheme
77+
var terms = [];
78+
for(i=0; i< boxes.length; i++){
79+
terms.concat(boxes[i].words);
80+
}
81+
var c20 = d3.scale.category20();
82+
var uniqueTerms = d3.set(terms).values();
83+
var termColorMap = d3.scale.ordinal()
84+
.domain(uniqueTerms)
85+
.range(c20.range());
86+
87+
var svg = d3.select('body').append('svg').attr({
88+
width: width,
89+
height: height
90+
});
91+
//Try time stamp for the 12 boxes
92+
var colors = ['black', 'red', 'green', 'aqua', 'aquamarine', 'yellow', 'steelblue', 'bisque', 'gray', 'blue', 'blueviolet', 'brown'];
93+
var timeColorMap = d3.scale.ordinal().domain(d3.range(0, 12)).range(colors);
94+
95+
var topicColorMap = d3.scale.ordinal().domain(topics).range(c20.range());
96+
97+
98+
var streamGroups = svg.selectAll('g').data(boxes).enter().append('g').style({
99+
fill: function(d, i){return timeColorMap(i);}
100+
});
101+
//Display text
102+
streamGroups.selectAll('g').data(function(d){return d.words.filter(a=>a.placed);}).enter().append('g')
103+
.attr({
104+
transform: function(d){return 'translate('+d.x+', '+d.y+')rotate('+d.rotate+')';}
105+
}).append('text')
106+
.text(function(d){return d.text;})
107+
.attr({
108+
'font-family': 'Impact',
109+
'font-size': function(d){return d.fontSize;},
110+
fill: function(d){return topicColorMap(d.topic);},
111+
'text-anchor': 'middle',
112+
'alignment-baseline': 'middle'
113+
});
114+
//#region Display stream
115+
var graphGroup = svg.append('g');
116+
var streamPath1 = ws.streamPath1();
117+
var streamPath2 = ws.streamPath2();
118+
var area1 = d3.svg.area()
119+
.interpolate('cardinal')
120+
.x(function(d){return d[0]; })
121+
.y0(0)
122+
.y1(function(d){return d[1]; });
123+
var area2 = d3.svg.area()
124+
.interpolate('cardinal')
125+
.x(function(d){return d[0]; })
126+
.y0(function(d){return d[1]; })
127+
.y1(height);
128+
graphGroup.append('path').datum(streamPath1)
129+
.attr({
130+
d: area1,
131+
stroke: 'red',
132+
'stroke-width': 2,
133+
fill :'red'
134+
});
135+
graphGroup.append('path').datum(streamPath2)
136+
.attr({
137+
d: area2,
138+
stroke: 'red',
139+
'stroke-width': 2,
140+
fill :'red'
141+
});
142+
//#endregion display stream
143+
};
144+
145+
</script>
146+
</body>
147+
</html>

0 commit comments

Comments
 (0)