Word Cloud d3 v4

forked from abrahamdu's block: Word Cloud d3 v4

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="d3.layout.cloud.js"></script>
  <style>
   body {
   background-color: lightgrey;
     }

svg {
    width: 100%;
    height: 100%;
    position: center;
     }
      </style>
</head>

<body>
  <svg width="960" height="500"></svg>
  <script>
var margin = {top: 30, right: 50, bottom: 30, left: 50};
var width = 960 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;

var g = d3.select("svg")
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("Team_Info.csv",function(data){
var color = d3.scaleOrdinal(d3.schemeCategory20);
var categories = d3.keys(d3.nest().key(function(d) { return d.State; }).map(data));
var fontSize = d3.scalePow().exponent(5).domain([0,1]).range([40,80]);
var fontStyle = d3.scaleLinear().domain([categories]).range(['楷体','仿宋']);
  
var layout = d3.layout.cloud()
      .size([width, height])
      .timeInterval(20)
      .words(data)
      .rotate(function(d) { return 0; })
      .fontSize(function(d,i) { return fontSize(Math.random()); })
      //.fontStyle(function(d,i) { return fontSyle(Math.random()); })
      .fontWeight(["bold"])
      .text(function(d) { return d.Team_CN; })
      .spiral("rectangular") // "archimedean" or "rectangular"
      .on("end", draw)
      .start();

var wordcloud = g.append("g")
      .attr('class','wordcloud')
      .attr("transform", "translate(" + width/2 + "," + height/2 + ")");
      
   g.append("g")
      .attr("class", "axis")
      .attr("transform", "translate(0," + height + ")")
      .selectAll('text')
      .style('font-size','20px')
      .style('fill',function(d) { return color(d); })
      .style('font','sans-serif');

https://d3js.org/d3.v4.min.js