Skip to content

Commit d1d4cc4

Browse files
phamvanvungphamvanvung
committed
Test some power scale
Test some power scale
1 parent 821a8e2 commit d1d4cc4

7 files changed

Lines changed: 210 additions & 31 deletions

‎.DS_Store‎

0 Bytes
Binary file not shown.

‎data/IEEE VIS papers 1990-2016 - Main dataset.csv‎

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

‎index.html‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,17 @@
1515
loadIEEEVisData(draw);
1616
function draw(data){
1717
//Layout data
18-
var width = 800, height = 300;
18+
var width = 800, height = 250;
1919
var interpolation = "cardinal";
2020
var axisPadding = 10;
2121
var margins = {left: 20, top: 20, right: 10, bottom: 30};
2222
var ws = d3.layout.wordStream()
2323
.size([width, height])
2424
.interpolate(interpolation)
25-
.fontScale(d3.scale.pow().exponent(4))
25+
.fontScale(d3.scale.pow().exponent(2))
26+
//.fontScale(d3.scale.linear())
27+
.minFontSize(4)
28+
.maxFontSize(36)
2629
.data(data);
2730
var boxes = ws.boxes();
2831

@@ -93,6 +96,7 @@
9396
var termColorMap = d3.scale.ordinal()
9497
.domain(uniqueTerms)
9598
.range(c20.range());
99+
var placed = true;
96100
mainGroup.selectAll('g').data(allWords).enter().append('g')
97101
.attr({
98102
transform: function(d){return 'translate('+d.x+', '+d.y+')rotate('+d.rotate+')';}
@@ -107,7 +111,7 @@
107111
'text-anchor': 'middle',
108112
'alignment-baseline': 'middle',
109113
topic: function(d){return d.topic;},
110-
visibility: function(d, i){ return d.placed ? "visible": "hidden";}
114+
visibility: function(d, i){ return d.placed ? (placed? "visible": "hidden"): (placed? "hidden": "visible");}
111115
});
112116
//Try
113117
var prevColor;
@@ -171,7 +175,7 @@
171175
d3.select(clonedNode).attr({
172176
visibility: "visible",
173177
stroke: 'none',
174-
'stroke-size': 0
178+
'stroke-size': 0,
175179
});
176180
var clonedParentNode = t.parentNode.cloneNode(false);
177181
clonedParentNode.appendChild(clonedNode);

‎lib/d3.layout.wordstream.js‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@
33
d3.layout.wordStream = function(){
44
var data = [],
55
size = [1200, 500],
6-
maxFontSize = 32,
6+
maxFontSize = 24,
77
minFontSize = 4,
8+
font = "Impact",
89
fontScale = d3.scale.linear(),
910
frequencyScale = d3.scale.linear(),
1011
spiral = achemedeanSpiral,
11-
font = "Impact",
1212
canvas = cloudCanvas,
1313
interpolation = "cardinal";
1414
var wordStream = {};
@@ -153,7 +153,7 @@ d3.layout.wordStream = function(){
153153
dx = ~~dxdy[0];
154154
dy = ~~dxdy[1];
155155

156-
if (Math.min(Math.abs(dx), Math.abs(dy)) >= maxDelta)
156+
if (Math.max(Math.abs(dx), Math.abs(dy)) >= (maxDelta))
157157
break;
158158

159159
word.x = startX + dx;
@@ -340,9 +340,7 @@ d3.layout.wordStream = function(){
340340
c.fillText(d.text, 0, 0);
341341
if (d.padding) c.lineWidth = 2 * d.padding, c.strokeText(d.text, 0, 0);
342342
c.restore();
343-
if(w<=0 || typeof w === "undefined"){
344-
debugger
345-
}
343+
346344
d.width = w;
347345
d.height = h;
348346
d.x = x;

‎lib/loaddata.js‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,8 @@ function loadEmptyWheelData(draw){
4545
}).sort(function(a, b){//sort the terms by frequency
4646
return b.frequency-a.frequency;
4747
}).filter(function(d){return d.text; })//filter out empty words
48-
.slice(0, 30);
48+
//.slice(0, 50)
49+
;
4950
});
5051
return {
5152
date: date,
@@ -54,7 +55,9 @@ function loadEmptyWheelData(draw){
5455
}).sort(function(a, b){//sort by date
5556
return outputFormat.parse(a.date) - outputFormat.parse(b.date);
5657
});
58+
debugger
5759
draw(data);
60+
5861
});
5962
}
6063
function loadIEEEVisData(draw){
@@ -69,10 +72,10 @@ function loadIEEEVisData(draw){
6972
var data = {};
7073
var splitters = {
7174
'Authors': ';',
72-
'Keywords': ';'
75+
'Keywords': ','
7376
};
7477
rawData = rawData.filter(d=>{
75-
return d.Year >= 2009 && d.Year <= 2016;
78+
return d.Year >= 2011 && d.Year <= 2016;
7679
});
7780
d3.map(rawData, function(d, i){
7881
var year = +d.Year;
@@ -114,7 +117,7 @@ function loadIEEEVisData(draw){
114117
}).sort(function(a, b){//sort the terms by frequency
115118
return b.frequency-a.frequency;
116119
}).filter(function(d){return d.text; })//filter out empty words
117-
.slice(0, 30);
120+
.slice(0, 45);
118121
});
119122
return {
120123
date: year,

‎test/achemedeanspiral.html‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
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+
13+
var url = "../data/emptywheel.csv";
14+
var topics = [];
15+
d3.csv(url, function(error, rawData) {
16+
if (error) throw error;
17+
var inputFormat = d3.time.format('%Y-%m-%dT%H:%M:%S');
18+
var outputFormat = d3.time.format('%b %Y');
19+
topics = d3.keys(rawData[0]).slice(2, 6);
20+
//Filter and take only dates in 2013
21+
rawData = rawData.filter(function(d){
22+
var time = inputFormat.parse(d.time);
23+
var starDate = inputFormat.parse('2013-01-01T00:00:00');
24+
var endDate = inputFormat.parse('2013-09-01T00:00:00');
25+
return time >= starDate && time < endDate;
26+
});
27+
var data = {};
28+
d3.map(rawData, function(d, i){
29+
var date = inputFormat.parse(d.time);
30+
var date = outputFormat(date);
31+
topics.forEach(topic => {
32+
if(!data[date]) data[date] = {};
33+
data[date][topic] += data[date][topic] ? ('|' +d[topic]): (d[topic]);
34+
});
35+
});
36+
var data = d3.keys(data).map(function(date, i){
37+
var words = {};
38+
topics.forEach(topic => {
39+
var raw = {};
40+
raw[topic] = data[date][topic].split('|');
41+
//Count word frequencies
42+
var counts = raw[topic].reduce(function(obj, word){
43+
if(!obj[word]){
44+
obj[word] = 0;
45+
}
46+
obj[word]++;
47+
return obj;
48+
}, {});
49+
//Convert to array of objects
50+
words[topic] = d3.keys(counts).map(function(d){
51+
return{
52+
text: d,
53+
frequency: counts[d],
54+
topic: topic
55+
}
56+
}).sort(function(a, b){//sort the terms by frequency
57+
return b.frequency-a.frequency;
58+
}).filter(function(d){return d.text; })//filter out empty words
59+
.slice(0, 15);
60+
});
61+
return {
62+
date: date,
63+
words: words
64+
}
65+
}).sort(function(a, b){//sort by date
66+
return outputFormat.parse(a.date) - outputFormat.parse(b.date);
67+
});
68+
draw(data);
69+
});
70+
71+
function draw(data){
72+
var width = 800, height = 800;
73+
var ws = d3.layout.wordStream()
74+
.size([width, height])
75+
.data(data);
76+
var boxWidth = width/data.length;
77+
var boxes = ws.buildBoxes(data);
78+
79+
var frequencyScale = ws.frequencyScale();
80+
81+
var area = d3.svg.area()
82+
.interpolate('cardinal')
83+
.x(function(d){return (d.x);})
84+
.y0(function(d){return frequencyScale(d.y0);})
85+
.y1(function(d){return frequencyScale(d.y0 + d.y); });
86+
87+
var color = d3.scale.category10();
88+
var svg = d3.select("body").append('svg').attr({
89+
width: width,
90+
height: height
91+
});
92+
var paths = svg.append('g').attr('transform', 'translate(' + 0 + ',' + 0 + ')');
93+
boxes.layers = boxes.layers.slice(0, 2);
94+
paths.selectAll('path')
95+
.data(boxes.layers)
96+
.enter()
97+
.append('path')
98+
.attr({
99+
'd': area,
100+
'fill-opacity': 0.3,
101+
'stroke-size': 0.3,
102+
'stroke': 'black'
103+
})
104+
.style('fill', function () {
105+
return color(Math.random());
106+
});
107+
var topics = boxes.topics.slice(0, 2);
108+
topics.forEach(topic=>{
109+
var topicGroup = svg.append('g');
110+
topicGroup.selectAll('g').data(boxes.innerBoxes[topic]).enter()
111+
.append('g').attr({
112+
transform: function(d){return 'translate('+d.x+', '+frequencyScale(d.y)+')';}
113+
}).append('rect').attr({
114+
x: 0,
115+
y: 0,
116+
width: boxWidth,
117+
height: function(d){return frequencyScale(d.height);},
118+
fill: 'none',
119+
stroke: 'black',
120+
'stroke-size': 1,
121+
'opacity': 0.5,
122+
'stroke-dasharray': "3, 3"
123+
});
124+
});
125+
//Draw a spiral
126+
var box = boxes.innerBoxes["location"][1];
127+
var path = place(box, ws.spiral());
128+
var boxSpiral = svg.append('g')
129+
.attr('transform', 'translate(' + 0 + ',' + 0 + ')')
130+
.append("path").attr({
131+
"d": path,
132+
"fill": "none",
133+
"stroke-width": 0.3,
134+
"stroke": "black",
135+
"stroke-opacity": 0.5
136+
});
137+
};
138+
function place(box, spiral){
139+
var bw = box.width,
140+
bh = box.height,
141+
maxDelta = ~~Math.sqrt((bw*bw) + (bh*bh)),
142+
startX = ~~(box.x + (bw >> 1)),
143+
startY = ~~(box.y + (bh >> 1)),
144+
s = spiral([bw, bh]),
145+
dt = Math.random() < .5 ? 1 : -1,
146+
t = -dt,
147+
dxdy, dx, dy;
148+
var pathData = "M"+startX+" "+startY;
149+
while (dxdy = s(t += dt)) {
150+
dx = ~~dxdy[0];
151+
dy = ~~dxdy[1];
152+
153+
if (Math.max(Math.abs(dx), Math.abs(dy)) >= (maxDelta>>1))
154+
break;
155+
pathData += " " + (startX + dx) + " " + (startY + dy);
156+
157+
}
158+
return pathData;
159+
}
160+
</script>
161+
</body>
162+
</html>

‎test/testbuildboxes.html‎

Lines changed: 28 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
rawData = rawData.filter(function(d){
2222
var time = inputFormat.parse(d.time);
2323
var starDate = inputFormat.parse('2013-01-01T00:00:00');
24-
var endDate = inputFormat.parse('2014-01-01T00:00:00');
24+
var endDate = inputFormat.parse('2013-09-01T00:00:00');
2525
return time >= starDate && time < endDate;
2626
});
2727
var data = {};
@@ -69,7 +69,7 @@
6969
});
7070

7171
function draw(data){
72-
var width = 1200, height = 600;
72+
var width = 800, height = 800;
7373
var ws = d3.layout.wordStream()
7474
.size([width, height])
7575
.data(data);
@@ -89,26 +89,38 @@
8989
width: width,
9090
height: height
9191
});
92-
93-
svg.selectAll('path')
92+
var paths = svg.append('g').attr('transform', 'translate(' + 0 + ',' + 0 + ')');
93+
boxes.layers = boxes.layers.slice(0, 2);
94+
paths.selectAll('path')
9495
.data(boxes.layers)
9596
.enter()
9697
.append('path')
97-
.attr('d', area)
98+
.attr({
99+
'd': area,
100+
'fill-opacity': 0.3,
101+
'stroke-size': 0.3,
102+
'stroke': 'black'
103+
})
98104
.style('fill', function () {
99105
return color(Math.random());
100106
});
101-
var topic = 'person';
102-
var topicGroup = svg.selectAll('g').data(boxes.innerBoxes[topic]).enter()
103-
.append('g').attr({
104-
transform: function(d){return 'translate('+d.x+', '+frequencyScale(d.y)+')';}
105-
}).append('rect').attr({
106-
x: 0,
107-
y: 0,
108-
width: boxWidth,
109-
height: function(d){return frequencyScale(d.height);},
110-
fill: 'none',
111-
stroke: 'black'
107+
var topics = boxes.topics.slice(0, 2);
108+
topics.forEach(topic=>{
109+
var topicGroup = svg.append('g');
110+
topicGroup.selectAll('g').data(boxes.innerBoxes[topic]).enter()
111+
.append('g').attr({
112+
transform: function(d){return 'translate('+d.x+', '+frequencyScale(d.y)+')';}
113+
}).append('rect').attr({
114+
x: 0,
115+
y: 0,
116+
width: boxWidth,
117+
height: function(d){return frequencyScale(d.height);},
118+
fill: 'none',
119+
stroke: 'black',
120+
'stroke-size': 1,
121+
'opacity': 0.5,
122+
'stroke-dasharray': "3, 3"
123+
});
112124
});
113125
};
114126
</script>

0 commit comments

Comments
 (0)