Skip to content

Commit 150f6fe

Browse files
phamvanvungphamvanvung
committed
Fix height issues + change legend position
Fix height issues + change legend position
1 parent 7e01fcf commit 150f6fe

2 files changed

Lines changed: 41 additions & 33 deletions

File tree

‎index.html‎

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<title>WordStream</title>
77
<script src="./lib/d3.min.js"></script>
88
<script src="./lib/d3.layout.wordstream.js"></script>
9+
<script src="./test/testutil.js"></script>
910
</head>
1011
<body>
1112
<script>
@@ -55,7 +56,7 @@
5556
}).sort(function(a, b){//sort the terms by frequency
5657
return b.frequency-a.frequency;
5758
}).filter(function(d){return d.text; })//filter out empty words
58-
.slice(0, 30);
59+
.slice(0, 20);
5960
});
6061
return {
6162
date: date,
@@ -66,18 +67,23 @@
6667
});
6768
draw(data);
6869
});
69-
70+
// var data = getDummyData();
71+
// draw(data);
7072
function draw(data){
71-
var width = 1200, height = 600;
73+
//Layout data
74+
var width = 1200, height = 400;
7275
var interpolation = "cardinal";
73-
var margins = {left: 10, top: 20, right: 10, bottom: 30};
76+
var axisPadding = 10;
77+
var margins = {left: 20, top: 20, right: 10, bottom: 30};
7478
var ws = d3.layout.wordStream()
7579
.size([width, height])
7680
.interpolate(interpolation)
7781
.data(data);
7882
var boxes = ws.boxes();
7983

80-
//Displaying the streams
84+
//Display data
85+
var legendFontSize = 12;
86+
var legendHeight = boxes.topics.length*legendFontSize;
8187
var area = d3.svg.area()
8288
.interpolate(interpolation)
8389
.x(function(d){return (d.x);})
@@ -86,23 +92,24 @@
8692
var color = d3.scale.category10();
8793
var svg = d3.select("body").append('svg').attr({
8894
width: width + margins.left + margins.top,
89-
height: height + margins.top + margins.bottom,
95+
height: height + margins.top + margins.bottom + axisPadding + legendHeight,
9096
});
9197
//Display time axes
9298
var dates = [];
9399
boxes.data.forEach(row =>{
94100
dates.push(row.date);
95101
});
96-
var yAxisScale = d3.scale.ordinal().domain(dates).rangeBands([0, width]);
97-
var yAxis = d3.svg.axis().orient('bottom').scale(yAxisScale);
98-
var axisGroup = svg.append('g').attr('transform', 'translate(' + (margins.left) + ',' + (height+margins.top) + ')');
99-
var axisNodes = axisGroup.call(yAxis);
102+
103+
var xAxisScale = d3.scale.ordinal().domain(dates).rangeBands([0, width]);
104+
var xAxis = d3.svg.axis().orient('bottom').scale(xAxisScale);
105+
var axisGroup = svg.append('g').attr('transform', 'translate(' + (margins.left) + ',' + (height+margins.top+axisPadding+legendHeight) + ')');
106+
var axisNodes = axisGroup.call(xAxis);
100107
styleAxis(axisNodes);
101108
//Display the vertical gridline
102109
var xGridlineScale = d3.scale.ordinal().domain(d3.range(0, dates.length+1)).rangeBands([0, width+width/boxes.data.length]);
103110
var xGridlinesAxis = d3.svg.axis().orient('bottom').scale(xGridlineScale);
104-
var xGridlinesGroup = svg.append('g').attr('transform', 'translate(' + (margins.left-width/boxes.data.length/2) + ',' + (height+margins.top) + ')');
105-
var gridlineNodes = xGridlinesGroup.call(xGridlinesAxis.tickSize(-height, 0, 0).tickFormat(''));
111+
var xGridlinesGroup = svg.append('g').attr('transform', 'translate(' + (margins.left-width/boxes.data.length/2) + ',' + (height+margins.top + axisPadding+legendHeight) + ')');
112+
var gridlineNodes = xGridlinesGroup.call(xGridlinesAxis.tickSize(-height-axisPadding-legendHeight, 0, 0).tickFormat(''));
106113
styleGridlineNodes(gridlineNodes);
107114
//Main group
108115
var mainGroup = svg.append('g').attr('transform', 'translate(' + margins.left + ',' + margins.top + ')');
@@ -156,26 +163,22 @@
156163
'text-anchor': 'middle',
157164
'alignment-baseline': 'middle'
158165
});
159-
//Display legends
160-
var legendFontSize = 12;
161-
var legendGroup = svg.append('g').attr('transform', 'translate(' + margins.left + ',' + 5 + ')');
166+
//Build the legends
167+
var legendGroup = svg.append('g').attr('transform', 'translate(' + margins.left + ',' + (height+margins.top) + ')');
162168
var legendNodes = legendGroup.selectAll('g').data(boxes.topics).enter().append('g')
163169
.attr('transform', function(d, i){return 'translate(' + 10 + ',' + (i*legendFontSize) + ')';});
164170
legendNodes.append('circle').attr({
165-
x: 0,
166-
y: 0,
167171
r: 5,
168172
fill: function(d, i){return color(i);},
169173
'fill-opacity': 0.1,
170174
stroke: 'black',
171-
'stroke-width': 0.3,
175+
'stroke-width': .5,
172176
});
173177
legendNodes.append('text').text(function(d){return d;}).attr({
174178
'font-size': legendFontSize,
175179
'alignment-baseline': 'middle',
176180
dx: 8
177181
});
178-
179182
};
180183
function styleAxis(axisNodes){
181184
axisNodes.selectAll('.domain').attr({

‎lib/d3.layout.wordstream.js‎

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
// Also referenced to the implementation: by Jason Davies, https://www.jasondavies.com/wordcloud/
33
d3.layout.wordStream = function(){
44
var data = [],
5-
size = [1200, 400],
6-
maxFontSize = 40,
5+
size = [1200, 500],
6+
maxFontSize = 32,
77
minFontSize = 4,
88
fontScale = d3.scale.linear(),
99
frequencyScale = d3.scale.linear(),
@@ -16,11 +16,12 @@ d3.layout.wordStream = function(){
1616
var cloudRadians = Math.PI / 180,
1717
cw = 1 << 11,
1818
ch = 1 << 11;
19+
1920
wordStream.boxes = function(){
2021
var boxWidth = size[0]/data.length;
2122
buildFontScale(data);
23+
buildFrequencyScale(data);
2224
var boxes = buildBoxes(data);
23-
buildFrequencyScale(boxes);
2425
//Get the sprite for each word
2526
getImageData(boxes);
2627
//Set for each stream
@@ -69,26 +70,30 @@ d3.layout.wordStream = function(){
6970
});
7071
fontScale.domain([minFrequency, maxFrequency]).range([minFontSize, maxFontSize]);
7172
}
72-
function buildFrequencyScale(boxes){
73+
function buildFrequencyScale(data){
74+
var totalFrequencies = calculateTotalFrequenciesABox(data);
75+
var max = 0;
76+
d3.map(totalFrequencies, function(d){
77+
var keys = d3.keys(totalFrequencies[0]);
78+
var total = 0;
79+
keys.forEach(key=>{
80+
total += d[key];
81+
});
82+
if(total > max) max = total;
83+
});
7384
frequencyScale = d3.scale.linear()
74-
.domain([
75-
0, d3.max(boxes.layers, function (layer) {
76-
return d3.max(layer, function (d) {
77-
return d.y0 + d.y;
78-
});
79-
})
80-
])
81-
.range([0, size[1]]);
85+
.domain([0, max])
86+
.range([0, size[1]]);
8287
}
8388
//Convert from data to box
8489
function buildBoxes(data){
90+
//Build settings based on frequencies
91+
var totalFrequencies = calculateTotalFrequenciesABox(data);
8592
var topics = d3.keys(data[0].words);
8693
//#region creating boxes
8794
var numberOfBoxes = data.length;
8895
var boxes = {};
8996
var boxWidth = ~~(size[0]/numberOfBoxes);
90-
//Calculating the total frequencies and put into the scale
91-
var totalFrequencies = calculateTotalFrequenciesABox(data);
9297
//Create the stacked data
9398
var allPoints = [];
9499
topics.forEach(topic=>{

0 commit comments

Comments
 (0)