D3.js cloud from external .csv or .txt file?
I am trying to create a word cloud using D3. To do this, I modify Jason Davis' code: https://github.com/jasondavies/d3-cloud/blob/master/examples/simple.html
I want to change the code so that instead of using an array of words, I can just link to a .txt or .csv file with a lot of text.
I have tried using d3.text () and d3.csv () methods, but I am doing something wrong. Since both methods call a url, I used the data url generator ( http://dataurl.net/#dataurlmaker ) to turn the text file into a url. Then I changed the code and inserted the dataurl like this:
var fill = d3.scale.category20();
var text = d3.text(data:text/plain;base64,RGVsbCwgdGhl....continued....more...URLdata)
d3.layout.cloud().size([300, 300])
.words(text.map(function(d) {
return {text: d, size: 10 + Math.random() * 90};
}))
.rotate(function() { return ~~(Math.random() * 2) * 90; })
.font("Impact")
.fontSize(function(d) { return d.size; })
.on("end", draw)
.start();
The second option I tried is to insert text into a script tag in html and then specify that in JS code like so:
<!DOCTYPE html>
<script src="../lib/d3/d3.js"></script>
<script id="text" type="text/plain">Dell, the company, has...more..text...</script>
<script src="../d3.layout.cloud.js"></script>
<body>
<script>
var fill = d3.scale.category20();
var text = d3.select("#text");
d3.layout.cloud().size([300, 300])
.words(text.map(function(d) {
return {text: d, size: 10 + Math.random() * 90};
}))
etc........
Can someone help me understand the way to read in a .txt or .csv file? Thank!
source to share
UPDATE:
can you view this?
http://bl.ocks.org/8bb2b55d2c5cf5667b01
One way to get familiar with the working d3 and .csv files is to view the code samples from Scott Murray 's d3-book on github. (Chapter 12 is one place you might want to look at.) Https://github.com/alignedleft/d3-book/tree/master/chapter_12
Anyway, I used us-cities.csv from there in a modified version of the Jason Davies github example.
Hope it helps.
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 CSV</title>
</head>
<body>
<script src="d3.v3.js"></script>
<script src="cloudlayout.js"></script>
<script type="text/javascript">
var fill = d3.scale.category20();
var cityData = [],
width = 500,
height = 500;
d3.csv("us-cities.csv", function(data) {
// build the list of city names
data.forEach( function (d) {
cityData.push(d.place);
});
d3.layout.cloud().size([500, 500])
.words(cityData.map(function(d) {
return {text: d, size: 10 + Math.random() * 90};
}))
.rotate(function() { return ~~(Math.random() * 2) * 90; })
.font("Impact")
.fontSize(function(d) { return d.size; })
.on("end", draw)
.start();
});
function draw(words) {
d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 500)
.append("g")
.attr("transform", "translate(150,150)")
.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>
</body>
</html>
source to share