CODEWITHSUNDEEP
javascripthtmlcssd3.js
Ahmad Zaki
Ahmad Zaki

Reputation: 27

How to make 2 color represent positive and negative word cloud in d3.js from csv

I have a csv file

`[Name,Frequency,Sentiment hijacked,664,negative pay,267,negative gang,191,negative knives,120,negative planes,64,negative shut,60,negative police,60,negative russia,58,negative term,57,negative fulfil,55,negative agendas,55,negative malicious,55,negative unaccounted,55,negative misused,55,negative one,51,negative crashlands,48,negative two,43,positive befo,41,negative airpo,36,negative dam,36,negative shootout,36,positive following,35,positive ality,34,negative india,34,negative need,34,negative news,29,negative used,26,negative series,25,negative robbers,24,negative got,21,negative twitter,18,negative back,16,negative people,16,negative car,16,negative terrorists,16,negative purpose,16,negative think,15,negative]`

consist of 3 data Name, Frequency and Sentiment

I want to create a word cloud in rapid d3.js that have to color which is blue and red. This color depend on either the Sentiment is 'positive' or 'negative'.

The word cloud that I have now is in black color. How can I make it change to red and blue?

This is my coding: 

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Word Cloud~</title>

  <script src="d3.min.js" charset="utf-8"></script>
  <script src="d3.layout.cloud.js"></script>
  
</head>

<body>
  <script type="text/javascript">
  	var width = 1050,
  		height = 800;
  	
  	var leaderScale = d3.scale.linear().range([30,90]);
  	
    var fill = d3.scale.category20();
    d3.csv("file.csv", function(data) {
    	var leaders = data
        	.map(function(d) {return { text: d.Name, size: +d.Frequency,  sentiment: d.Sentiment }; })
        	.sort(function(a,b) { return d3.descending(a.size, b.size); })
        	.slice(0, 100);
    	
    	leaderScale.domain([
    		d3.min(leaders, function(d) { return d.size; }),
    		d3.max(leaders, function(d) { return d.size; })
    	]);
      
        d3.layout.cloud().size([width, height])
        .words(loadWords())
        .words(leaders)
          .padding(0)
          //.rotate(function() { return ~~(Math.random() * 2) * 90; })
          .font("Impact")
          .fontSize(function(d) {return leaderScale(d.size); })
          
          .on("end", drawCloud)
          .start();
        
        function loadWords(leaders){
            var word1 = {
                    text: 'Name',
                    size: 'Frequency',
                    sentiment : 'Sentiment',
                    //if(sentiment : 'positive')
                    color:'#FF00FF'
                    };
            var word2 = {
                    text: 'Name',
                    size: 'Frequency',
                    sentiment : 'Sentiment',
                    //if(sentiment : 'negative')
                    color:'#3498DB'
                    };
            return [word1,word2]
            }
        
        function fillColor(d,i){
            return d.color;
        }

        function drawCloud(words) {
          console.log(words);
          d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate("+(width/2)+","+(height/2)+")")
            .selectAll("text")
            .data(words)
            .enter().append("text")
            .style("font-size", function(d) {
              return d.size + "px";
            })
            .style("fill", function(d) { 
                 console.log(d); 
                 return (d.sentiment == "positive" ? "red" : "black"); })
            .style("font-family", "Impact")
            .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>

Upvotes: 1

Views: 864

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

The function fillcolor is setting the color to the text but i didnt see any place where you set the d.color the color.

function fillColor(d,i){
            return d.color;
        }

You can do something like this instead when you making the text:

 .style("fill", function(d) { 
                 console.log(d); 
                 return (d.sentiment == "positive" ? "red" : "black"); })

Working code in fiddle: http://jsfiddle.net/cyril123/y6fxbu9c/7/

Upvotes: 1

Related Questions