13장 풀이 13.3.1

<예제 13.3.1 풀이>

SVG 캔버스는 다음과 같이 지정한다.

var width = 400, height = 300;

var svg = d3.select(“body”).append(“svg”)

.attr(“width”, width).attr(“height”, height);

csv 파일은 다음과 같이 읽는다.

d3.csv(“EX130301.csv”, function (data) {

showCloud(data)

setInterval(function(){showCloud(data)},2000)

});

워드 크기 스케일 지정은 scaleLinear()를 이용한다. 여기서 .clamp(true)는 domain의 범위를 넘어간 값을 domain의 최댓값으로 고정한다.

wordScale = d3.scaleLinear()

.domain([0, 100]).range([0, 50]).clamp(true);

var keywords = [“데이터”,”마이닝”] 는 단어 중에서 강조하고 싶은 키워드를 지정한다.

워드 클라우드 레이아웃은 다음과 같이 .size()로 크기를 지정하고, .words()로 워드와 빈도 데이터를 연결하며, .rotate()로 회전할 단어를 선택한다. .on(“end”, draw)는 end 이벤트가 발생하면 레이아웃을 초기화하고 연결된 메소드 draw를 작동시킨다.

d3.layout.cloud().size([width, height])

.words(data) //클라우드 레이아웃에 데이터 전달

.rotate(function (d) {return d.text.length > 2 ? 0 : 90;}) // 단어 회전

.fontSize(function (d) {return wordScale(d.frequency);}) // 단어 크기를 설정

.on(“end”, draw)  // 레이아웃을 초기화 > end 이벤트 발생 > 연결된 메소드 작동

.start();

여기서 사용된 draw() 메소드는 다음과 같다.

function function draw(words) {

var cloud = svg.selectAll(“text”).data(words)

//Entering words

cloud.enter()

.append(“text”)

.style(“font-family”, “sans-serif”)

.style(“fill”, function (d) {

return (keywords.indexOf(d.text) > -1 ? “#fbc280” : “#405275”);

})

.style(“fill-opacity”, .5)

.attr(“text-anchor”, “middle”)

.attr(‘font-size’, 1)

.text(function (d) {return d.text;});

cloud.transition()

.duration(600)

.style(“font-size”, function (d) {return d.size + “px”; })

.attr(“transform”, function (d) {

return “translate(” + [d.x, d.y] + “)rotate(” + d.rotate + “)”;

})

.style(“fill-opacity”, 1);

}

EX130301.htm 파일을 만든 후 크롬으로 실행하면 <그림 13.3.1>과 같다.

<그림 13.3.1> 워드클라우드의 예

Leave a Reply

Your email address will not be published. Required fields are marked *