wnghdcjfe · May 6, 2017 06:29
diff --git a/index.html b/index.html
 <html>

 <head>
    <meta charset="utf-8" />
 </head>
 <style>
    @font-face {
        font-family: 'overwatch';
        src: url('fonts/koverwatch.woff2');
    }
 </style>

 <body>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://rawgit.com/jasondavies/d3-cloud/master/build/d3.layout.cloud.js" type="text/JavaScript"></script>
    <script>
        var width = 960,
            height = 500

        var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height);
        d3.csv("worddata.csv", function (data) {
            showCloud(data)
            setInterval(function(){
                 showCloud(data)
            },2000) 
        });
        //scale.linear: 선형적인 스케일로 표준화를 시킨다. 
        //domain: 데이터의 범위, 입력 크기
        //range: 표시할 범위, 출력 크기 
        //clamp: domain의 범위를 넘어간 값에 대하여 domain의 최대값으로 고정시킨다.
        wordScale = d3.scale.linear().domain([0, 100]).range([0, 150]).clamp(true);
        var keywords = ["자리야", "트레이서", "한조"]
        var svg = d3.select("svg")
                    .append("g")
                    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")

        function showCloud(data) {
            d3.layout.cloud().size([width, height])
                //클라우드 레이아웃에 데이터 전달
                .words(data)
                .rotate(function (d) {
                    return d.text.length > 3 ? 0 : 90;
                })
                //스케일로 각 단어의 크기를 설정
                .fontSize(function (d) {
                    return wordScale(d.frequency);
                })
                //클라우드 레이아웃을 초기화 > end이벤트 발생 > 연결된 함수 작동  
                .on("end", draw)
                .start();

            function draw(words) { 
                var cloud = svg.selectAll("text").data(words)
                //Entering words
                cloud.enter()
                    .append("text")
                    .style("font-family", "overwatch")
                    .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); 
            }
        }
    </script>
 </body>

 </html>
diff --git a/worddata.csv b/worddata.csv
	<html>

	<head>
	<meta charset="utf-8" />
	</head>
	<style>
	@font-face {
	font-family: 'overwatch';
	src: url('fonts/koverwatch.woff2');
	}
	</style>

	<body>
	<script src="https://d3js.org/d3.v3.min.js"></script>
	<script src="https://rawgit.com/jasondavies/d3-cloud/master/build/d3.layout.cloud.js" type="text/JavaScript"></script>
	<script>
	var width = 960,
	height = 500

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);
	d3.csv("worddata.csv", function (data) {
	showCloud(data)
	setInterval(function(){
	showCloud(data)
	},2000)
	});
	//scale.linear: 선형적인 스케일로 표준화를 시킨다.
	//domain: 데이터의 범위, 입력 크기
	//range: 표시할 범위, 출력 크기
	//clamp: domain의 범위를 넘어간 값에 대하여 domain의 최대값으로 고정시킨다.
	wordScale = d3.scale.linear().domain([0, 100]).range([0, 150]).clamp(true);
	var keywords = ["자리야", "트레이서", "한조"]
	var svg = d3.select("svg")
	.append("g")
	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")

	function showCloud(data) {
	d3.layout.cloud().size([width, height])
	//클라우드 레이아웃에 데이터 전달
	.words(data)
	.rotate(function (d) {
	return d.text.length > 3 ? 0 : 90;
	})
	//스케일로 각 단어의 크기를 설정
	.fontSize(function (d) {
	return wordScale(d.frequency);
	})
	//클라우드 레이아웃을 초기화 > end이벤트 발생 > 연결된 함수 작동
	.on("end", draw)
	.start();

	function draw(words) {
	var cloud = svg.selectAll("text").data(words)
	//Entering words
	cloud.enter()
	.append("text")
	.style("font-family", "overwatch")
	.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);
	}
	}
	</script>
	</body>

	</html>
	text	frequency
	자리야	80
	트레이서	100
	한조	20
	솔져	60
	시메트라	50
	윈스턴	30
	라인하르트	30
	아나	20
	맥크리	20
	메르시	20
	박종선	20
	연제호	20
	최주원	20
	윤성용	20
	양영주	20
	준바	20
	로드호그	20
	정크랫	20