README.md

590V assignment 6

1. My dataset consists of health tweets by news agencies. It consists of approximately 463410 words. I am using it to understand the top topics tweeted by the news agency on the health domain. All the files were concatenated to a single one. You can get more information of the dataset here: https://archive.ics.uci.edu/ml/datasets/Health+News+in+Twitter
2. A word cloud was created based on the top words after removing some common prepositions.
3. A pie chart is created.
4. Hovering and selection are enabled. A dark red/brown color can be seen in the pie chart that highlights the data when you hover over data in the word cloud. You can click multiple words for selecting multiple sections on the pie chart. Similarly when you hover over pie chart sections of the word cloud are highlighted.
5. Done on both visualization
6. Drop down provided for both visualizations.

Some code for selector, tooltip were reused from my previous assignment submissions.

d3.layout.cloud.js

//Obtained from 590v lab
// Word cloud layout by Jason Davies, https://www.jasondavies.com/wordcloud/
// Algorithm due to Jonathan Feinberg, http://static.mrfeinberg.com/bv_ch03.pdf
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g=(g.d3||(g.d3 = {}));g=(g.layout||(g.layout = {}));g.cloud = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){

var dispatch = require("d3-dispatch").dispatch;

var cloudRadians = Math.PI / 180,
    cw = 1 << 11 >> 5,
    ch = 1 << 11;

module.exports = function() {
  var size = [256, 256],
      text = cloudText,
      font = cloudFont,
      fontSize = cloudFontSize,
      fontStyle = cloudFontNormal,
      fontWeight = cloudFontNormal,
      rotate = cloudRotate,
      padding = cloudPadding,
      spiral = archimedeanSpiral,
      words = [],
      timeInterval = Infinity,
      event = dispatch("word", "end"),
      timer = null,
      random = Math.random,
      cloud = {},
      canvas = cloudCanvas;

  cloud.canvas = function(_) {
    return arguments.length ? (canvas = functor(_), cloud) : canvas;
  };

  cloud.start = function() {
    var contextAndRatio = getContext(canvas()),
        board = zeroArray((size[0] >> 5) * size[1]),
        bounds = null,
        n = words.length,
        i = -1,
        tags = [],
        data = words.map(function(d, i) {
          d.text = text.call(this, d, i);
          d.font = font.call(this, d, i);
          d.style = fontStyle.call(this, d, i);
          d.weight = fontWeight.call(this, d, i);
          d.rotate = rotate.call(this, d, i);
          d.size = ~~fontSize.call(this, d, i);
          d.padding = padding.call(this, d, i);
          return d;
        }).sort(function(a, b) { return b.size - a.size; });

    if (timer) clearInterval(timer);
    timer = setInterval(step, 0);
    step();

    return cloud;

    function step() {
      var start = Date.now();
      while (Date.now() - start < timeInterval && ++i < n && timer) {
        var d = data[i];
        d.x = (size[0] * (random() + .5)) >> 1;
        d.y = (size[1] * (random() + .5)) >> 1;
        cloudSprite(contextAndRatio, d, data, i);
        if (d.hasText && place(board, d, bounds)) {
          tags.push(d);
          event.call("word", cloud, d);
          if (bounds) cloudBounds(bounds, d);
          else bounds = [{x: d.x + d.x0, y: d.y + d.y0}, {x: d.x + d.x1, y: d.y + d.y1}];
          // Temporary hack
          d.x -= size[0] >> 1;
          d.y -= size[1] >> 1;
        }
      }
      if (i >= n) {
        cloud.stop();
        event.call("end", cloud, tags, bounds);
      }
    }
  }

  cloud.stop = function() {
    if (timer) {
      clearInterval(timer);
      timer = null;
    }
    return cloud;
  };

  function getContext(canvas) {
    canvas.width = canvas.height = 1;
    var ratio = Math.sqrt(canvas.getContext("2d").getImageData(0, 0, 1, 1).data.length >> 2);
    canvas.width = (cw << 5) / ratio;
    canvas.height = ch / ratio;

    var context = canvas.getContext("2d");
    context.fillStyle = context.strokeStyle = "red";
    context.textAlign = "center";

    return {context: context, ratio: ratio};
  }

  function place(board, tag, bounds) {
    var perimeter = [{x: 0, y: 0}, {x: size[0], y: size[1]}],
        startX = tag.x,
        startY = tag.y,
        maxDelta = Math.sqrt(size[0] * size[0] + size[1] * size[1]),
        s = spiral(size),
        dt = random() < .5 ? 1 : -1,
        t = -dt,
        dxdy,
        dx,
        dy;

    while (dxdy = s(t += dt)) {
      dx = ~~dxdy[0];
      dy = ~~dxdy[1];

      if (Math.min(Math.abs(dx), Math.abs(dy)) >= maxDelta) break;

      tag.x = startX + dx;
      tag.y = startY + dy;

      if (tag.x + tag.x0 < 0 || tag.y + tag.y0 < 0 ||
          tag.x + tag.x1 > size[0] || tag.y + tag.y1 > size[1]) continue;
      // TODO only check for collisions within current bounds.
      if (!bounds || !cloudCollide(tag, board, size[0])) {
        if (!bounds || collideRects(tag, bounds)) {
          var sprite = tag.sprite,
              w = tag.width >> 5,
              sw = size[0] >> 5,
              lx = tag.x - (w << 4),
              sx = lx & 0x7f,
              msx = 32 - sx,
              h = tag.y1 - tag.y0,
              x = (tag.y + tag.y0) * sw + (lx >> 5),
              last;
          for (var j = 0; j < h; j++) {
            last = 0;
            for (var i = 0; i <= w; i++) {
              board[x + i] |= (last << msx) | (i < w ? (last = sprite[j * w + i]) >>> sx : 0);
            }
            x += sw;
          }
          delete tag.sprite;
          return true;
        }
      }
    }
    return false;
  }

  cloud.timeInterval = function(_) {
    return arguments.length ? (timeInterval = _ == null ? Infinity : _, cloud) : timeInterval;
  };

  cloud.words = function(_) {
    return arguments.length ? (words = _, cloud) : words;
  };

  cloud.size = function(_) {
    return arguments.length ? (size = [+_[0], +_[1]], cloud) : size;
  };

  cloud.font = function(_) {
    return arguments.length ? (font = functor(_), cloud) : font;
  };

  cloud.fontStyle = function(_) {
    return arguments.length ? (fontStyle = functor(_), cloud) : fontStyle;
  };

  cloud.fontWeight = function(_) {
    return arguments.length ? (fontWeight = functor(_), cloud) : fontWeight;
  };

  cloud.rotate = function(_) {
    return arguments.length ? (rotate = functor(_), cloud) : rotate;
  };

  cloud.text = function(_) {
    return arguments.length ? (text = functor(_), cloud) : text;
  };

  cloud.spiral = function(_) {
    return arguments.length ? (spiral = spirals[_] || _, cloud) : spiral;
  };

  cloud.fontSize = function(_) {
    return arguments.length ? (fontSize = functor(_), cloud) : fontSize;
  };

  cloud.padding = function(_) {
    return arguments.length ? (padding = functor(_), cloud) : padding;
  };

  cloud.random = function(_) {
    return arguments.length ? (random = _, cloud) : random;
  };

  cloud.on = function() {
    var value = event.on.apply(event, arguments);
    return value === event ? cloud : value;
  };

  return cloud;
};

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

function cloudFont() {
  return "serif";
}

function cloudFontNormal() {
  return "normal";
}

function cloudFontSize(d) {
  return Math.sqrt(d.value);
}

function cloudRotate() {
  return (~~(Math.random() * 6) - 3) * 30;
}

function cloudPadding() {
  return 1;
}

// Fetches a monochrome sprite bitmap for the specified text.
// Load in batches for speed.
function cloudSprite(contextAndRatio, d, data, di) {
  if (d.sprite) return;
  var c = contextAndRatio.context,
      ratio = contextAndRatio.ratio;

  c.clearRect(0, 0, (cw << 5) / ratio, ch / ratio);
  var x = 0,
      y = 0,
      maxh = 0,
      n = data.length;
  --di;
  while (++di < n) {
    d = data[di];
    c.save();
    c.font = d.style + " " + d.weight + " " + ~~((d.size + 1) / ratio) + "px " + d.font;
    var w = c.measureText(d.text + "m").width * ratio,
        h = d.size << 1;
    if (d.rotate) {
      var sr = Math.sin(d.rotate * cloudRadians),
          cr = Math.cos(d.rotate * cloudRadians),
          wcr = w * cr,
          wsr = w * sr,
          hcr = h * cr,
          hsr = h * sr;
      w = (Math.max(Math.abs(wcr + hsr), Math.abs(wcr - hsr)) + 0x1f) >> 5 << 5;
      h = ~~Math.max(Math.abs(wsr + hcr), Math.abs(wsr - hcr));
    } else {
      w = (w + 0x1f) >> 5 << 5;
    }
    if (h > maxh) maxh = h;
    if (x + w >= (cw << 5)) {
      x = 0;
      y += maxh;
      maxh = 0;
    }
    if (y + h >= ch) break;
    c.translate((x + (w >> 1)) / ratio, (y + (h >> 1)) / ratio);
    if (d.rotate) c.rotate(d.rotate * cloudRadians);
    c.fillText(d.text, 0, 0);
    if (d.padding) c.lineWidth = 2 * d.padding, c.strokeText(d.text, 0, 0);
    c.restore();
    d.width = w;
    d.height = h;
    d.xoff = x;
    d.yoff = y;
    d.x1 = w >> 1;
    d.y1 = h >> 1;
    d.x0 = -d.x1;
    d.y0 = -d.y1;
    d.hasText = true;
    x += w;
  }
  var pixels = c.getImageData(0, 0, (cw << 5) / ratio, ch / ratio).data,
      sprite = [];
  while (--di >= 0) {
    d = data[di];
    if (!d.hasText) continue;
    var w = d.width,
        w32 = w >> 5,
        h = d.y1 - d.y0;
    // Zero the buffer
    for (var i = 0; i < h * w32; i++) sprite[i] = 0;
    x = d.xoff;
    if (x == null) return;
    y = d.yoff;
    var seen = 0,
        seenRow = -1;
    for (var j = 0; j < h; j++) {
      for (var i = 0; i < w; i++) {
        var k = w32 * j + (i >> 5),
            m = pixels[((y + j) * (cw << 5) + (x + i)) << 2] ? 1 << (31 - (i % 32)) : 0;
        sprite[k] |= m;
        seen |= m;
      }
      if (seen) seenRow = j;
      else {
        d.y0++;
        h--;
        j--;
        y++;
      }
    }
    d.y1 = d.y0 + seenRow;
    d.sprite = sprite.slice(0, (d.y1 - d.y0) * w32);
  }
}

// Use mask-based collision detection.
function cloudCollide(tag, board, sw) {
  sw >>= 5;
  var sprite = tag.sprite,
      w = tag.width >> 5,
      lx = tag.x - (w << 4),
      sx = lx & 0x7f,
      msx = 32 - sx,
      h = tag.y1 - tag.y0,
      x = (tag.y + tag.y0) * sw + (lx >> 5),
      last;
  for (var j = 0; j < h; j++) {
    last = 0;
    for (var i = 0; i <= w; i++) {
      if (((last << msx) | (i < w ? (last = sprite[j * w + i]) >>> sx : 0))
          & board[x + i]) return true;
    }
    x += sw;
  }
  return false;
}

function cloudBounds(bounds, d) {
  var b0 = bounds[0],
      b1 = bounds[1];
  if (d.x + d.x0 < b0.x) b0.x = d.x + d.x0;
  if (d.y + d.y0 < b0.y) b0.y = d.y + d.y0;
  if (d.x + d.x1 > b1.x) b1.x = d.x + d.x1;
  if (d.y + d.y1 > b1.y) b1.y = d.y + d.y1;
}

function collideRects(a, b) {
  return a.x + a.x1 > b[0].x && a.x + a.x0 < b[1].x && a.y + a.y1 > b[0].y && a.y + a.y0 < b[1].y;
}

function archimedeanSpiral(size) {
  var e = size[0] / size[1];
  return function(t) {
    return [e * (t *= .1) * Math.cos(t), t * Math.sin(t)];
  };
}

function rectangularSpiral(size) {
  var dy = 4,
      dx = dy * size[0] / size[1],
      x = 0,
      y = 0;
  return function(t) {
    var sign = t < 0 ? -1 : 1;
    // See triangular numbers: T_n = n * (n + 1) / 2.
    switch ((Math.sqrt(1 + 4 * sign * t) - sign) & 3) {
      case 0:  x += dx; break;
      case 1:  y += dy; break;
      case 2:  x -= dx; break;
      default: y -= dy; break;
    }
    return [x, y];
  };
}

function zeroArray(n) {
  var a = [],
      i = -1;
  while (++i < n) a[i] = 0;
  return a;
}

function cloudCanvas() {
  return document.createElement("canvas");
}

function functor(d) {
  return typeof d === "function" ? d : function() { return d; };
}

var spirals = {
  archimedean: archimedeanSpiral,
  rectangular: rectangularSpiral
};

},{"d3-dispatch":2}],2:[function(require,module,exports){
// https://d3js.org/d3-dispatch/ Version 1.0.2. Copyright 2016 Mike Bostock.
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (factory((global.d3 = global.d3 || {})));
}(this, (function (exports) { 'use strict';

var noop = {value: function() {}};

function dispatch() {
  for (var i = 0, n = arguments.length, _ = {}, t; i < n; ++i) {
    if (!(t = arguments[i] + "") || (t in _)) throw new Error("illegal type: " + t);
    _[t] = [];
  }
  return new Dispatch(_);
}

function Dispatch(_) {
  this._ = _;
}

function parseTypenames(typenames, types) {
  return typenames.trim().split(/^|\s+/).map(function(t) {
    var name = "", i = t.indexOf(".");
    if (i >= 0) name = t.slice(i + 1), t = t.slice(0, i);
    if (t && !types.hasOwnProperty(t)) throw new Error("unknown type: " + t);
    return {type: t, name: name};
  });
}

Dispatch.prototype = dispatch.prototype = {
  constructor: Dispatch,
  on: function(typename, callback) {
    var _ = this._,
        T = parseTypenames(typename + "", _),
        t,
        i = -1,
        n = T.length;

    // If no callback was specified, return the callback of the given type and name.
    if (arguments.length < 2) {
      while (++i < n) if ((t = (typename = T[i]).type) && (t = get(_[t], typename.name))) return t;
      return;
    }

    // If a type was specified, set the callback for the given type and name.
    // Otherwise, if a null callback was specified, remove callbacks of the given name.
    if (callback != null && typeof callback !== "function") throw new Error("invalid callback: " + callback);
    while (++i < n) {
      if (t = (typename = T[i]).type) _[t] = set(_[t], typename.name, callback);
      else if (callback == null) for (t in _) _[t] = set(_[t], typename.name, null);
    }

    return this;
  },
  copy: function() {
    var copy = {}, _ = this._;
    for (var t in _) copy[t] = _[t].slice();
    return new Dispatch(copy);
  },
  call: function(type, that) {
    if ((n = arguments.length - 2) > 0) for (var args = new Array(n), i = 0, n, t; i < n; ++i) args[i] = arguments[i + 2];
    if (!this._.hasOwnProperty(type)) throw new Error("unknown type: " + type);
    for (t = this._[type], i = 0, n = t.length; i < n; ++i) t[i].value.apply(that, args);
  },
  apply: function(type, that, args) {
    if (!this._.hasOwnProperty(type)) throw new Error("unknown type: " + type);
    for (var t = this._[type], i = 0, n = t.length; i < n; ++i) t[i].value.apply(that, args);
  }
};

function get(type, name) {
  for (var i = 0, n = type.length, c; i < n; ++i) {
    if ((c = type[i]).name === name) {
      return c.value;
    }
  }
}

function set(type, name, callback) {
  for (var i = 0, n = type.length; i < n; ++i) {
    if (type[i].name === name) {
      type[i] = noop, type = type.slice(0, i).concat(type.slice(i + 1));
      break;
    }
  }
  if (callback != null) type.push({name: name, value: callback});
  return type;
}

exports.dispatch = dispatch;

Object.defineProperty(exports, '__esModule', { value: true });

})));

},{}]},{},[1])(1)
});

index.html

<html>
    <head>
        
            <link rel='stylesheet' href='style.css'>    
        <script src="https://d3js.org/d3.v4.min.js"></script>
            <script src="d3.layout.cloud.js"></script>
        
        
    </head>
    <body>
        Select word count less than: <span class='select-tag'></span>
        <svg class="word-cloud" width="100%" height="500"></svg>
        Select top topic count equal to: <span class='select-pie'></span>
        <svg class="pie-chart" width="960" height="500">  </svg> 
        <div id="tooltip-holder"></div>
    </body>
    <script src="data.js"></script>
        <script src="script.js"></script>
</html>

script.js

//code reference: 590 V lab,https://bl.ocks.org/mbostock/3887235


//Selector generic code
var color = d3.scaleLinear()
        .domain([0,1,2,3,4,5,6,10,15,20,100])
        .range(["#ddd", "#ccc", "#bbb", "#aaa", "#999", "#888", "#777", "#666", "#555", "#444", "#333", "#222"]);
var clicked_list=[]
totalCount= 99421;
var pie_list;
var colorScale=d3.scaleOrdinal().range(d3.schemeCategory10);
//Adding selector function
function addSelector(selector, change, data) {
    var yinput = d3.select(selector)
        .append('select')
        .attr('id', 'xselect').on('change', change)
        .selectAll('option')
        .data(data)
        .enter().append('option')
        .attr('value', function (d) { return d.text })
        .text(function (d) { return d.text; })
}

function defaultColorScale(d){
    if(d.data.text !== undefined && clicked_list.indexOf(d.data.text)>-1){
        return '#6b1c1c';
    }
    else{
        return colorScale(d.data.count);
    }
}


var tooltip = d3.select('#tooltip-holder')
.append('div').attr('class', 'tooltip')
.style('opacity', 0);
//Tooltip handler
var tipMouseover = function (d) {
    // console.log(d);
    var chtml = ` <b>Topic</b>: ${d.text}<br/><b>Frequency</b>: ${d.count}`;
    out=pie_list.filter(it=>it.text==d.text);
    if (out.length == 0){
        pieSelect='others';
    }
    else{
        pieSelect=out[0].text;
    }
    d3.selectAll('.pie-path').attr('fill',d=>{
        // console.log(d);
        if (d.data.text == pieSelect){
            return '#6b1c1c';
        } 
        else{
            return defaultColorScale(d);
            // return colorScale(d.data.count);
        }
        
    })
    tooltip.html(chtml)
        .style("left", (d3.event.pageX + 15) + "px")
        .style("top", (d3.event.pageY - 28) + "px")
        .transition()
        .duration(200)
        .style("opacity", .9)

};

// tooltip mouseout event handler
var tipMouseout = function (d) {
    // console.log('out');
    d3.selectAll('.pie-path').attr('fill',d=>defaultColorScale(d));
    tooltip.transition()
        .duration(300) // ms
        .style("opacity", 0);

        d3.selectAll('.text-cloud').style('fill',function(data, i) {
            return color(i)
        })
};

var margin={top:30,right:30,bottom:30,left:30}
var tagSelectData=[{ "text": "0" },{ "text": "1000" }, { "text": "2000" },{ "text": "3000" },{ "text": "4000" }];


var g = d3.select('.word-cloud').append('g').attr('transform','translate('+margin.left+','+margin.top+')')
var freq_list=[{"text":"health","count":4477},{"text":"new","count":3558},{"text":"ebola","count":3504},{"text":"more","count":2908},{"text":"study","count":2284},{"text":"it","count":2160},{"text":"about","count":2094},{"text":"what","count":2094},{"text":"that","count":2094},{"text":"says","count":2040},{"text":"by","count":1904},{"text":"not","count":1899},{"text":"get","count":1847},{"text":"cancer","count":1702},{"text":"these","count":1619},{"text":"u.s.","count":1549},{"text":"do","count":1538},{"text":"help","count":1537},{"text":"up","count":1533},{"text":"drug","count":1400},{"text":"after","count":1327},{"text":"care","count":1324},{"text":"will","count":1313},{"text":"an","count":1303},{"text":"&amp;","count":1302},{"text":"some","count":1272},{"text":"well:","count":1258},{"text":"risk","count":1234},{"text":"via","count":1213},{"text":"than","count":1205},{"text":"we","count":1180},{"text":"could","count":1161},{"text":"make","count":1124},{"text":"one","count":1074},{"text":"patients","count":1061},{"text":"people","count":1059},{"text":"heart","count":1052},{"text":"if","count":1009},{"text":"should","count":989},{"text":"over","count":980},{"text":"has","count":974},{"text":"hospital","count":937},{"text":"us","count":936},{"text":"when","count":924},{"text":"nhs","count":881},{"text":"good","count":881},{"text":"video:","count":869},{"text":"fda","count":864},{"text":"don't","count":864},{"text":"i","count":863},{"text":"#healthtalk","count":862},{"text":"food","count":857},{"text":"like","count":843},{"text":"finds","count":843},{"text":"kids","count":841},{"text":"healthy","count":831},{"text":"@goodhealth","count":830},{"text":"need","count":826},{"text":"try","count":819},{"text":"doctors","count":816},{"text":"all","count":809},{"text":"ways","count":790},{"text":"just","count":785},{"text":"say","count":782},{"text":"medical","count":776},{"text":"their","count":775},{"text":"insurance","count":763},{"text":"it's","count":759},{"text":"10","count":741},{"text":"know","count":739},{"text":"so","count":739},{"text":"women","count":738},{"text":"my","count":736},{"text":"#nhs","count":733},{"text":"5","count":730},{"text":"@stefaniei:","count":725},{"text":"no","count":718},{"text":"use","count":701},{"text":"weight","count":679},{"text":"brain","count":661}]

var xScale = d3.scaleLinear()
.domain([0, d3.max(freq_list, function(d) {
    return +d.count;
    })
])
.range([10,100]);
//The main cloud generation functions
d3.layout.cloud().size([800, 300])
    .words(freq_list)
    .rotate(0)
    .fontSize(d => xScale(d.count))
    .on("end", draw)
    .start();
//Call back for click event
function clicked(d){
    console.log('dummy');
    out=pie_list.filter(it=>it.text==d.text);
    if (out.length == 0){
        pieSelect='others';
    }
    else{
        pieSelect=out[0].text;
    }
    d3.selectAll('.pie-path').attr('fill',d=>{
        // console.log(d);
        if (d.data.text == pieSelect){
            return '#6b1c1c';
        } 
        else{
            return defaultColorScale(d);
        }
        
    })
    clicked_list=clicked_list.concat(pieSelect)
}

//callback for daw function
function draw(words) {
  g.append("g")
    .attr("width", 850)
    .attr("height", 350)
    .attr("class", "wordcloud")
    .append("g")
    .attr("transform", "translate(320,200)")
    .selectAll("text")
    .data(words)
    .enter().append("text")
    .attr('class','text-cloud')
    .style("font-size", d => d.size + "px")
    .style("fill", function(d, i) { return color(i); })
    .attr("transform", d => 
         "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"
    )
    .text(d=>d.text)
    .on('mouseover',tipMouseover)
    .on('mouseout',tipMouseout)
    .on('click',clicked);
}
//function for selecting entries in drop down
function tagSelectorChange(){
    // console.log(this.value);
    selectValue=this.value;
    d3.selectAll('.text-cloud').style('fill',function(d, i) { 
        if (d.count<selectValue)
        {
            return "#ff0000";
        } 
        else{
            return color(i)
        }
    })
}

addSelector('.select-tag',tagSelectorChange,tagSelectData)


//Pie chart code starts here

var pieSvg=d3.select('.pie-chart');
var width = +pieSvg.attr('width');
var height = + pieSvg.attr('height');
var radius = Math.min(width,height)/2;
g=pieSvg.append('g').attr('transform',`translate(${width/2},${height/2})`);


//Main pie chart generation function
var pieChart=d3.pie().sort(null).value(d=>d.count);

var path = d3.arc().outerRadius(radius-10).innerRadius(0);

var label=d3.arc().outerRadius(radius-40).innerRadius(radius-40);
//Tool tip for pie chart
var tipMouseoverPie = function (d) {
    // console.log(d);
    var chtml = ` <b>Topic</b>: ${d.data.text}<br/><b>Frequency</b>: ${d.data.count}`;

    tooltip.html(chtml)
        .style("left", (d3.event.pageX + 15) + "px")
        .style("top", (d3.event.pageY - 28) + "px")
        .transition()
        .duration(200)
        .style("opacity", .9)
    


        d3.selectAll('.text-cloud').style('fill',function(data, i) { 
            if (data.text==d.data.text)
            {
                return "#ff0000";
            } 
            else{
                return color(i)
            }
        })

};


//Pie chart rendering function
function drawPieChart(count){ 
    d3.selectAll('.arc').remove()
    pie_list=freq_list.slice(0,count);
    running_count=0;
    pie_list.map(d=>{running_count+=d.count});
    pie_list=pie_list.concat({'text':'others','count':totalCount-running_count})
    var arc=g.selectAll('.arc').data(pieChart(pie_list)).enter().append('g').attr('class','arc');

arc.append('path').attr('class','pie-path').attr('d',path)
.attr('fill',d=>colorScale(d.data.count)).on('mouseover',tipMouseoverPie)
.on('mouseout',tipMouseout);

arc.append("text")
      .attr('class','text-pie')
      .attr("transform", function(d) { return "translate(" + label.centroid(d) + ")"; })
      .attr("dy", "0.35em")
      .text(function(d) { return d.data.text; });
}
var pieData=[{ "text": "11" },{ "text": "16" }, { "text": "22" }];

function pieChange(){
    // console.log(this.value);
    clicked_list=[]
    drawPieChart(this.value)
}
//Adding drop down for pie chart
addSelector('.select-pie',pieChange,pieData)

drawPieChart(11)

style.css

.tooltip {
    position: absolute;
    font-size: 16px;
    width:  auto;
    height: auto;
    pointer-events: none;
    background-color: white;
  }
  .text-pie{
      font-size: smaller
  }