Skip to content

Commit 68c19f3

Browse files
phamvanvungphamvanvung
committed
Separated terms to layer
Separated terms to layer
1 parent c62ecdd commit 68c19f3

1 file changed

Lines changed: 51 additions & 56 deletions

File tree

‎index.html‎

Lines changed: 51 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@
44
<meta charset="UTF-8">
55
<meta http-equiv="X-UA-Compatible" content="ie=edge">
66
<title>WordStream</title>
7-
<script src="lib/d3.min.js"></script>
8-
<script src="lib/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>
12-
var url = "data/emptywheel.csv";
12+
var url = "./data/emptywheel.csv";
1313
var topics = [];
1414
d3.csv(url, function(error, rawData) {
1515
if (error) throw error;
@@ -45,7 +45,6 @@
4545
obj[word]++;
4646
return obj;
4747
}, {});
48-
debugger;
4948
//Convert to array of objects
5049
words[topic] = d3.keys(counts).map(function(d){
5150
return{
@@ -56,7 +55,7 @@
5655
}).sort(function(a, b){//sort the terms by frequency
5756
return b.frequency-a.frequency;
5857
}).filter(function(d){return d.text; })//filter out empty words
59-
.slice(0, 15);
58+
.slice(0, 20);
6059
});
6160
return {
6261
date: date,
@@ -74,75 +73,71 @@
7473
.size([width, height])
7574
.data(data);
7675
var boxes = ws.boxes();
77-
//Make the color scheme
78-
var terms = [];
79-
for(i=0; i< boxes.length; i++){
80-
terms.concat(boxes[i].words);
81-
}
82-
var c20 = d3.scale.category20();
83-
var uniqueTerms = d3.set(terms).values();
84-
var termColorMap = d3.scale.ordinal()
85-
.domain(uniqueTerms)
86-
.range(c20.range());
8776

88-
var svg = d3.select('body').append('svg').attr({
77+
//Displaying the streams
78+
var area = d3.svg.area()
79+
.interpolate('cardinal')
80+
.x(function(d){return (d.x);})
81+
.y0(function(d){return d.y0;})
82+
.y1(function(d){return (d.y0 + d.y); });
83+
84+
var color = d3.scale.category10();
85+
var svg = d3.select("body").append('svg').attr({
8986
width: width,
9087
height: height
9188
});
92-
//Try time stamp for the 12 boxes
93-
var colors = ['black', 'red', 'green', 'aqua', 'aquamarine', 'yellow', 'steelblue', 'bisque', 'gray', 'blue', 'blueviolet', 'brown'];
94-
var timeColorMap = d3.scale.ordinal().domain(d3.range(0, 12)).range(colors);
9589

96-
var topicColorMap = d3.scale.ordinal().domain(topics).range(c20.range());
97-
98-
99-
var streamGroups = svg.selectAll('g').data(boxes).enter().append('g').style({
100-
fill: function(d, i){return timeColorMap(i);}
90+
svg.selectAll('path')
91+
.data(boxes.layers)
92+
.enter()
93+
.append('path')
94+
.attr('d', area)
95+
.style('fill', function () {
96+
return color(Math.random());
97+
})
98+
.attr({
99+
'opacity': 0.2,
100+
stroke: 'steelblue'
101+
});
102+
//For each box
103+
var allWords = [];
104+
d3.map(boxes.data, function(row){
105+
boxes.topics.forEach(topic=>{
106+
allWords = allWords.concat(row.words[topic]);
107+
});
101108
});
109+
allWords = allWords.filter(d=> d.placed==true);
110+
102111
//Display text
103-
streamGroups.selectAll('g').data(function(d){return d.words.filter(a=>a.placed);}).enter().append('g')
112+
var topics = boxes.topics;
113+
var c20 = d3.scale.category20b();
114+
//Color based on the topic
115+
var topicColorMap = d3.scale.ordinal().domain(topics).range(c20.range());
116+
//Color based on term
117+
var terms = [];
118+
for(i=0; i< allWords.length; i++){
119+
terms.concat(allWords[i].text);
120+
}
121+
var uniqueTerms = d3.set(terms).values();
122+
var termColorMap = d3.scale.ordinal()
123+
.domain(uniqueTerms)
124+
.range(c20.range());
125+
126+
svg.selectAll('g').data(allWords).enter().append('g')
104127
.attr({
105128
transform: function(d){return 'translate('+d.x+', '+d.y+')rotate('+d.rotate+')';}
106129
}).append('text')
107130
.text(function(d){return d.text;})
108131
.attr({
109132
'font-family': 'Impact',
110133
'font-size': function(d){return d.fontSize;},
111-
fill: function(d){return topicColorMap(d.topic);},
134+
//fill: function(d){return topicColorMap(d.topic);},
135+
//fill: function(d, i){return color(i);},
136+
fill: function(d, i){return termColorMap(d.text);},
112137
'text-anchor': 'middle',
113138
'alignment-baseline': 'middle'
114139
});
115-
//#region Display stream
116-
var graphGroup = svg.append('g');
117-
var streamPath1 = ws.streamPath1();
118-
var streamPath2 = ws.streamPath2();
119-
var area1 = d3.svg.area()
120-
.interpolate('cardinal')
121-
.x(function(d){return d[0]; })
122-
.y0(0)
123-
.y1(function(d){return d[1]; });
124-
var area2 = d3.svg.area()
125-
.interpolate('cardinal')
126-
.x(function(d){return d[0]; })
127-
.y0(function(d){return d[1]; })
128-
.y1(height);
129-
graphGroup.append('path').datum(streamPath1)
130-
.attr({
131-
d: area1,
132-
stroke: 'red',
133-
'stroke-width': 2,
134-
fill :'red'
135-
});
136-
graphGroup.append('path').datum(streamPath2)
137-
.attr({
138-
d: area2,
139-
stroke: 'red',
140-
'stroke-width': 2,
141-
fill :'red'
142-
});
143-
//#endregion display stream
144140
};
145-
146141
</script>
147142
</body>
148143
</html>

0 commit comments

Comments
 (0)