161 lines
6.0 KiB
HTML
161 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Tilde.town Chat Cloud</title>
|
|
<style>
|
|
body {
|
|
background-color: wheat;
|
|
}
|
|
</style>
|
|
</head>
|
|
<meta charset="utf-8">
|
|
<body>
|
|
<div>
|
|
<select id="series">
|
|
<option value="">Today</option>
|
|
<option value="_2019_01">Jan 2019</option>
|
|
<option value="_2018_12">Dec 2018</option>
|
|
<option value="_2018_11">Nov 2018</option>
|
|
<option value="_2018_10">Oct 2018</option>
|
|
<option value="_2018_09">Sep 2018</option>
|
|
<option value="_2018_08">Aug 2018</option>
|
|
<option value="_2018_07">Jul 2018</option>
|
|
<option value="_2018_06">Jun 2018</option>
|
|
<option value="_2018_05">May 2018</option>
|
|
<option value="_2018_04">Apr 2018</option>
|
|
<option value="_2018_03">Mar 2018</option>
|
|
<option value="_2018_02">Feb 2018</option>
|
|
<option value="_2018_01">Jan 2018</option>
|
|
<option value="_2017_12">Dec 2017</option>
|
|
<option value="_2017_11">Nov 2017</option>
|
|
<option value="_2017_10">Oct 2017</option>
|
|
<option value="_2017_09">Sep 2017</option>
|
|
<option value="_2017_08">Aug 2017</option>
|
|
<option value="_2017_07">Jul 2017</option>
|
|
<option value="_2017_06">Jun 2017</option>
|
|
<option value="_2017_06">Jun 2017</option>
|
|
<option value="_2017_05">May 2017</option>
|
|
<option value="_2017_04">Apr 2017</option>
|
|
<option value="_2017_03">Mar 2017</option>
|
|
<option value="_2017_02">Feb 2017</option>
|
|
<option value="_2017_01">Jan 2017</option>
|
|
<option value="_2016_12">Dec 2016</option>
|
|
<option value="_2016_11">Nov 2016</option>
|
|
<option value="_2016_10">Oct 2016</option>
|
|
<option value="_2016_09">Sep 2016</option>
|
|
<option value="_2016_08">Aug 2016</option>
|
|
<option value="_2016_07">Jul 2016</option>
|
|
<option value="_2016_06">Jun 2016</option>
|
|
<option value="_2016_05">May 2016</option>
|
|
<option value="_2016_04">Apr 2016</option>
|
|
<option value="_2016_03">Mar 2016</option>
|
|
<option value="_2016_02">Feb 2016</option>
|
|
<option value="_2016_01">Jan 2016</option>
|
|
<option value="_2015_12">Dec 2015</option>
|
|
<option value="_2015_11">Nov 2015</option>
|
|
<option value="_2015_10">Oct 2015</option>
|
|
<option value="_2015_09">Sep 2015</option>
|
|
<option value="_2015_08">Aug 2015</option>
|
|
<option value="_2015_07">Jul 2015</option>
|
|
<option value="_2015_06">Jun 2015</option>
|
|
<option value="_2015_05">May 2015</option>
|
|
<option value="_2015_04">Apr 2015</option>
|
|
<option value="_2015_03">Mar 2015</option>
|
|
<option value="_2015_02">Feb 2015</option>
|
|
<option value="_2015_01">Jan 2015</option>
|
|
<option value="_2014_12">Dec 2014</option>
|
|
<option value="_2014_11">Nov 2014</option>
|
|
<option value="_2014_10">Oct 2014</option>
|
|
<option value="_all_time">All Time</option>
|
|
</select>
|
|
<select id="howMuch">
|
|
<option value=0>All words</option>
|
|
<option value=1>Less words</option>
|
|
<option value=2>Lesser words</option>
|
|
<option value=3>Lessest words</option>
|
|
<select>
|
|
<button type="button"
|
|
onclick="getWords('/~krowbar/data/chatcloud' + document.getElementById('series').value + '.json',
|
|
document.getElementById('howMuch').value)"
|
|
>Generate Cloud</button>
|
|
<input type="checkbox" id="flat">Flat</input>
|
|
</div>
|
|
<div id="cloud"></div>
|
|
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
|
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
|
|
<script type="text/javascript" src="d3.layout.cloud.js"></script>
|
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
|
|
<script>(function() {
|
|
|
|
var fill = d3.scale.category20();
|
|
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
|
|
|
|
layout = d3.layout.cloud();
|
|
maxSize = 10; //default
|
|
|
|
getWords = function(source, fraction) {
|
|
jQuery.getJSON(source, function(json) {
|
|
delete json.length; //if one of our words is the word "length", it messes up the count
|
|
jsonWords = [];
|
|
|
|
maxCount = _.max(json);
|
|
minCount = _.min(json);
|
|
if(source.indexOf('_') == -1) {
|
|
var d = new Date();
|
|
jsonWords.push({text: months[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear(), size: maxCount+1});
|
|
}
|
|
//eliminate the bottom 10% * fraction items
|
|
threshold = minCount + Math.floor(( maxCount - minCount) * fraction / 10);
|
|
console.log("Out of",_.size(json), "words from", source, "with count", minCount, "to", maxCount,": adding words at least",threshold);
|
|
//console.log(json);
|
|
data = json;
|
|
|
|
_.forEach(json, function(count, word) {
|
|
if(isNaN(count)) { console.log("DANGER!:", word, "is", count); };
|
|
if(count >= threshold) {
|
|
//console.log("Added", word, count);
|
|
jsonWords.push({text: word, size: count});
|
|
}
|
|
});
|
|
maxSize = Math.sqrt(maxCount);
|
|
|
|
layout
|
|
.size([1200, 800])
|
|
.words(jsonWords)
|
|
.padding(3)
|
|
// Never rotate the largest item. It is most likely the date
|
|
.rotate(function(d) { return ~~(Math.random() * 2) * 90 * (!document.getElementById('flat').checked && d.size != maxCount); })
|
|
.font("Impact")
|
|
.fontSize(function(d) { return Math.sqrt(d.size) * 50 / maxSize + 6; })
|
|
.on("end", draw);
|
|
|
|
layout.start();
|
|
})};
|
|
|
|
getWords("/~krowbar/data/chatcloud.json", 1);
|
|
draw = function(words) {
|
|
console.log("Started draw with", words.length, "words");
|
|
d3.select("svg").remove();
|
|
d3.select("#cloud").append("svg")
|
|
.attr("width", layout.size()[0])
|
|
.attr("height", layout.size()[1])
|
|
.append("g")
|
|
.attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")")
|
|
.selectAll("text")
|
|
.data(words)
|
|
.enter().append("text")
|
|
.style("font-size", function(d) { return d.size + "px"; })
|
|
.style("font-family", "Impact")
|
|
.style("fill", function(d, i) { return fill(i); })
|
|
.attr("text-anchor", "middle")
|
|
.attr("transform", function(d) {
|
|
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
|
|
})
|
|
.text(function(d) { return d.text; });
|
|
}
|
|
|
|
})();</script>
|
|
<a href="https://github.com/RussellChamp/tilde-projects/tree/master/Code/python">(see source)</a>
|
|
</body>
|
|
</html>
|