Skip to content

Commit 65c5228

Browse files
phamvanvungphamvanvung
committed
Changed interaction - term on click behavior
Show term stream layer when click on the term and get back to topic layer on clicking on the topic stream
1 parent 7c4d51f commit 65c5228

2 files changed

Lines changed: 75 additions & 34 deletions

File tree

‎index.html‎

Lines changed: 72 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@
2020
//Filter and take only dates in 2013
2121
rawData = rawData.filter(function(d){
2222
var time = inputFormat.parse(d.time);
23-
var starDate = inputFormat.parse('2013-01-01T00:00:00');
24-
var endDate = inputFormat.parse('2014-01-01T00:00:00');
23+
var starDate = inputFormat.parse('2014-01-01T00:00:00');
24+
var endDate = inputFormat.parse('2014-07-01T00:00:00');
2525
return time >= starDate && time < endDate;
2626
});
2727
var data = {};
@@ -56,7 +56,7 @@
5656
}).sort(function(a, b){//sort the terms by frequency
5757
return b.frequency-a.frequency;
5858
}).filter(function(d){return d.text; })//filter out empty words
59-
.slice(0, 20);
59+
.slice(0, 30);
6060
});
6161
return {
6262
date: date,
@@ -67,11 +67,9 @@
6767
});
6868
draw(data);
6969
});
70-
// var data = getDummyData();
71-
// draw(data);
7270
function draw(data){
7371
//Layout data
74-
var width = 1200, height = 500;
72+
var width = 720, height = 300;
7573
var interpolation = "cardinal";
7674
var axisPadding = 10;
7775
var margins = {left: 20, top: 20, right: 10, bottom: 30};
@@ -114,7 +112,8 @@
114112
//Main group
115113
var mainGroup = svg.append('g').attr('transform', 'translate(' + margins.left + ',' + margins.top + ')');
116114
var wordStreamG = mainGroup.append('g');
117-
115+
116+
var topics = boxes.topics;
118117
mainGroup.selectAll('path')
119118
.data(boxes.layers)
120119
.enter()
@@ -126,18 +125,15 @@
126125
.attr({
127126
'fill-opacity': 0.1,
128127
stroke: 'black',
129-
'stroke-width': 0.3
128+
'stroke-width': 0.3,
129+
topic: function(d, i){return topics[i];}
130130
});
131131
var allWords = [];
132132
d3.map(boxes.data, function(row){
133133
boxes.topics.forEach(topic=>{
134134
allWords = allWords.concat(row.words[topic]);
135135
});
136136
});
137-
allWords = allWords.filter(d=> d.placed==true);//Filter out not placable words
138-
139-
//Display text
140-
var topics = boxes.topics;
141137
var c20 = d3.scale.category20b();
142138
//Color based on the topic
143139
var topicColorMap = d3.scale.ordinal().domain(topics).range(c20.range());
@@ -164,7 +160,8 @@
164160
fill: function(d, i){return termColorMap(d.text);},
165161
'text-anchor': 'middle',
166162
'alignment-baseline': 'middle',
167-
topic: function(d){return d.topic;}
163+
topic: function(d){return d.topic;},
164+
visibility: function(d, i){ return d.placed ? "visible": "hidden";}
168165
});
169166
//Try
170167
var prevColor;
@@ -175,7 +172,7 @@
175172
var text = thisText.text();
176173
var topic = thisText.attr('topic');
177174
var allTexts = mainGroup.selectAll('text').filter(t =>{
178-
return t.text === text && t.topic === topic;
175+
return t && t.text === text && t.topic === topic;
179176
});
180177
allTexts.attr({
181178
stroke: 'red',
@@ -187,40 +184,57 @@
187184
var text = thisText.text();
188185
var topic = thisText.attr('topic');
189186
var allTexts = mainGroup.selectAll('text').filter(t =>{
190-
return t.text === text && t.topic === topic;
187+
return t && !t.cloned && t.text === text && t.topic === topic;
191188
});
192189
allTexts.attr({
193190
stroke: 'none',
194191
'stroke-width': '0'
195192
});
196-
wordStreamG.selectAll('path').remove();
197-
//Set the other text visibles
198-
//Hide all other texts
199-
var allOtherTexts = mainGroup.selectAll('text').filter(t =>{
200-
return t.text != text && t.topic === topic;
201-
});
202-
allOtherTexts.attr('visibility', 'visible');
203193
});
204194
//Click
205195
mainGroup.selectAll('text').on('click', function(){
206196
var thisText = d3.select(this);
207197
var text = thisText.text();
208198
var topic = thisText.attr('topic');
209199
var allTexts = mainGroup.selectAll('text').filter(t =>{
210-
return t.text === text && t.topic === topic;
200+
return t && t.text === text && t.topic === topic;
211201
});
202+
//Select the data for the stream layers
203+
var streamLayer = d3.select("path[topic='"+ topic+"']" )[0][0].__data__;
212204
//Push all points
213-
var points = [];
205+
var points = Array();
206+
//Initialize all points
207+
streamLayer.forEach(elm => {
208+
points.push({
209+
x: elm.x,
210+
y0: elm.y0+elm.y,
211+
y: 0//zero as default
212+
});
213+
});
214214
allTexts[0].forEach(t => {
215215
var data = t.__data__;
216-
var x = data.x;
217-
var y = data.y;
218216
var fontSize = data.fontSize;
219-
points.push({
220-
x: x,
221-
y0: y-(fontSize>>1),
222-
y: fontSize
223-
});
217+
//The point
218+
var thePoint = points[data.timeStep+1];;//+1 since we added 1 to the first point and 1 to the last point.
219+
thePoint.y = -data.streamHeight;
220+
//Set it to visible.
221+
//Clone the nodes.
222+
var clonedNode = t.cloneNode(true);
223+
d3.select(clonedNode).attr({
224+
visibility: "visible",
225+
stroke: 'none',
226+
'stroke-size': 0
227+
});
228+
var clonedParentNode = t.parentNode.cloneNode(false);
229+
clonedParentNode.appendChild(clonedNode);
230+
231+
t.parentNode.parentNode.appendChild(clonedParentNode);
232+
d3.select(clonedParentNode).attr({
233+
cloned: true,
234+
topic: topic
235+
}).transition().duration(300).attr({
236+
transform: function(d, i){return 'translate('+thePoint.x+','+(thePoint.y0+thePoint.y-fontSize/2)+')';},
237+
});
224238
});
225239
//Append stream
226240
wordStreamG.append('path')
@@ -230,13 +244,34 @@
230244
.attr({
231245
'fill-opacity': 1,
232246
stroke: 'black',
233-
'stroke-width': 0.3});
247+
'stroke-width': 0.3,
248+
topic: topic,
249+
wordStream: true
250+
});
234251
//Hide all other texts
235252
var allOtherTexts = mainGroup.selectAll('text').filter(t =>{
236-
return t.text != text && t.topic === topic;
253+
return t && !t.cloned && t.topic === topic;
237254
});
238255
allOtherTexts.attr('visibility', 'hidden');
239256
});
257+
topics.forEach(topic=>{
258+
d3.select("path[topic='"+ topic+"']" ).on('click', function(){
259+
mainGroup.selectAll('text').filter(t=>{
260+
return t && !t.cloned && t.placed && t.topic === topic;
261+
}).attr({
262+
visibility: 'visible'
263+
});
264+
//Remove the cloned element
265+
document.querySelectorAll("g[cloned='true'][topic='"+topic+"']").forEach(node=>{
266+
node.parentNode.removeChild(node);
267+
});
268+
//Remove the added path for it
269+
document.querySelectorAll("path[wordStream='true'][topic='"+topic+"']").forEach(node=>{
270+
node.parentNode.removeChild(node);
271+
});
272+
});
273+
274+
});
240275

241276
//Build the legends
242277
var legendGroup = svg.append('g').attr('transform', 'translate(' + margins.left + ',' + (height+margins.top) + ')');
@@ -262,6 +297,10 @@
262297
axisNodes.selectAll('.tick line').attr({
263298
fill: 'none',
264299
});
300+
axisNodes.selectAll('.tick text').attr({
301+
'font-family': 'serif',
302+
'font-size': 10
303+
});
265304
}
266305
function styleGridlineNodes(gridlineNodes){
267306
gridlineNodes.selectAll('.domain').attr({

‎lib/d3.layout.wordstream.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
d3.layout.wordStream = function(){
44
var data = [],
55
size = [1200, 500],
6-
maxFontSize = 36,
6+
maxFontSize = 32,
77
minFontSize = 4,
88
fontScale = d3.scale.linear(),
99
frequencyScale = d3.scale.linear(),
@@ -347,6 +347,8 @@ d3.layout.wordStream = function(){
347347
d.y1 = h>>1;
348348
d.x0 = -d.x1;
349349
d.y0 = -d.y1;
350+
d.timeStep = i;
351+
d.streamHeight = frequencyScale(d.frequency);
350352
x += w;
351353
}
352354
});

0 commit comments

Comments
 (0)