barScript.js

// Get the svg element along with its attributes where all the elements will be drawn
var barSvg = d3.select("#bar-svg").append("svg")
            .attr("width", 960)
            .attr("height", 500)

// Establish inner margins to allow for some padding
var margin = {top: 20, right: 20, bottom: 80, left: 150},
    width = +barSvg.attr("width") - margin.left - margin.right,
    height = +barSvg.attr("height") - margin.top - margin.bottom;

var tooltipBar
var g

// Function that deletes the bar chart before creating a new one
function removeBarChart() {
    if (tooltipBar !== undefined) {
        tooltipBar.remove()
    }
    if (g !== undefined) {
        g.remove()
    }
}

// Reset the bar chart (delete everything)
var resetButton = d3.select("#reset")
resetButton.on('click', () => {
    removeBarChart()
    selectedForBarChart = [];
});

// Reset the word cloud (delete everything)
var resetCloud = d3.select("#resetCloud")
resetCloud.on('click', () => {
    svg.selectAll("*").remove()
    selectedForWordCloud = []
});

// Redraw the bar chart based on the radio buttons on the html
d3.selectAll("input[name='sort']").on("change", function(){
    removeBarChart()
    createBarChart(selectedForBarChart)
});

// Creates a Bar Chart from scratch based on the bar chart data passed as parameter
function createBarChart(data) {
    tooltipBar = d3.select("body").append("div").attr("class", "toolTip");

    // Let the sliders filter data
    let greenSlider = d3.select('#green-slider');
    let redSlider = d3.select('#red-slider');
    let greenVal = greenSlider.attr('value')
    let redVal = redSlider.attr('value');
    data.sort(sortByFrequency)
    data.reverse()
    let len = data.length
    let lower = Math.round(redVal / 100 * len)
    let upper = Math.round(greenVal / 100 * len)
    data = data.slice(lower, upper)
    
    // Let the radio buttons define the sorting method
    let sortMethod = d3.select('input[name="sort"]:checked').node().value
    if (sortMethod == "alphatically") {
        data.sort(sortAlphabetically)
    } else if (sortMethod == "frequency") {
        data.sort(sortByFrequency)
    }
    
    // Assign scales and ranges in the bar chart
    var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
        y = d3.scaleLinear().rangeRound([height, 0]);

    g = barSvg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    // Assign doamains for x and y
    // let value = yInput.node().value;
    x.domain(data.map(d => d.key));
    y.domain([0, d3.max(data, d => d.value)]);

    // Draw the x-axis
    g.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate(0," + height + ")")

    // Draw the y-axis
    g.append("g")
        .attr("class", "axis axis--y")
        .call(d3.axisLeft(y).ticks(5).tickFormat(d => d)
        .tickSizeInner([-width]))
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", "0.71em")
        .attr("text-anchor", "end")
        .attr("fill", "#5D6971")
        .text("Frequency");

    // Draw the bars of the bar chart
    g.selectAll(".bar")
        .data(data)
        .enter().append("rect")
        // Assign functionality to make points in the force graph bigger
        .on("click", d => {
            console.log("not implemented")
            selectedForWordCloud.push(d)
            svg.selectAll("*").remove()
            drawWordCloud(selectedForWordCloud)
        })
        .attr("x", d => x(d.key))
        .attr("y", d => y(d.value))
        .attr("width", x.bandwidth())
        .attr("height", d => height - y(d.value))
        // Assign a different color to the selected university
        .attr("fill", d => "#6F257F")
        .on("mousemove", function(d){
            tooltipBar
                .style("left", d3.event.pageX - 50 + "px")
                .style("top", d3.event.pageY - 70 + "px")
                .style("display", "inline-block")
                .html((d.key) + "<br>Frequency: " + (d.value));
        })
        .on("mouseout", function(d){ tooltipBar.style("display", "none");});
}

// Generate the bar chart data based on the closest points in the force graph
function createBarChartData(uni, links) {
    let relatedUnis = []
    relatedUnis.push({"id":uni, "SAT_AVG":dict[uni].SAT_AVG, "SATMTMID":dict[uni].SATMTMID, "SATWRMID":dict[uni].SATWRMID, "SATVRMID":dict[uni].SATVRMID, "ADM_RATE":dict[uni].ADM_RATE, "UGDS":dict[uni].UGDS, "main":true})
    for (let i in links) {
        if (links[i].source.id == uni) {
            let target = links[i].target.id
            relatedUnis.push({"id":target, "SAT_AVG":dict[target].SAT_AVG, "SATMTMID":dict[target].SATMTMID, "SATWRMID":dict[target].SATWRMID, "SATVRMID":dict[target].SATVRMID, "ADM_RATE":dict[target].ADM_RATE, "UGDS":dict[target].UGDS, "main":false})
        }
        if (links[i].target.id == uni) {
            let source = links[i].source.id
            relatedUnis.push({"id":source, "SAT_AVG":dict[source].SAT_AVG, "SATMTMID":dict[source].SATMTMID, "SATWRMID":dict[source].SATWRMID, "SATVRMID":dict[source].SATVRMID, "ADM_RATE":dict[source].ADM_RATE, "UGDS":dict[source].UGDS,"main":false})
        }
    }
    return relatedUnis
}

// Sort the data alphatically based on the key of an object
function sortAlphabetically(a,b) {
    if (a.key < b.key)
        return -1;
    if (a.key > b.key)
        return 1;
    return 0;
}

// Sort the data by frequency based on the key of an object
function sortByFrequency(a,b) {
    if (a.value > b.value)
        return -1;
    if (a.value < b.value)
        return 1;
    return 0;
}

cloud.js

(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){
    // Word cloud layout by Jason Davies, https://www.jasondavies.com/wordcloud/
    // Algorithm due to Jonathan Feinberg, http://static.mrfeinberg.com/bv_ch03.pdf
    
    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];
      };
    }
    
    // TODO reuse arrays?
    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)
});

greenSlider.js

var greenSvgSlider = d3.select("#green-slider-svg"),
    greenMargin = {right: 50, left: 50},
    greenWidth = +greenSvgSlider.attr("width") - greenMargin.left - greenMargin.right,
    greenHeight = +greenSvgSlider.attr("height");

var greenX = d3.scaleLinear()
    .domain([0, 100])
    .range([0, greenWidth])
    .clamp(true);

var greenSlider = greenSvgSlider.append("g")
    .attr("class", "slider")
    .attr("transform", "translate(" + greenMargin.left + "," + greenHeight / 2 + ")");

greenSlider.append("line")
    .attr("class", "track")
    .attr("x1", greenX.range()[0])
    .attr("x2", greenX.range()[1])
  .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
    .attr("class", "track-inset")
  .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
    .attr("class", "track-overlay")
    .call(d3.drag()
        .on("start.interrupt", function() { greenSlider.interrupt(); })
        .on("start drag", function() {
            let value = Math.round(greenX.invert(d3.event.x));
            greenHue(value);
            let greenSlider = d3.select('#green-slider');
            let redSlider = d3.select('#red-slider');
            greenSlider.text('Show lower ' + value + '%');
            greenSlider.attr('value', value);
            
            let greenVal = greenSlider.attr('value')
            let redVal = redSlider.attr('value');

            removeBarChart()
            createBarChart(selectedForBarChart)
        }));

var greenHandle = greenSlider.insert("circle", ".track-overlay")
    .attr("class", "green-handle-slider")
    .attr("cx", greenWidth)
    .attr("r", 9);

function greenHue(h) {
  greenHandle.attr("cx", greenX(h));
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="cloud.js"></script>
    <title>Word Cloud</title>
    <link rel='stylesheet' href='style.css'>
  </head>
  <body>
    <center>
      <h1>Words</h1>
    
      <h2>Carlos Daniel Mondragón Chapa</h2>
    </center>

    <h4>Dataset Description</h4>
    <p class="info-text">
      The dataset can be any text. In this particular case a book was selected: "The Little Prince". The visualization could be used to determine what the book is about based on the most common words found in it. This book in particular contains about 16,000 words.
    </p>

    <center>
      <div>
        <table class="instructions-table">
          <tr>
            <td style="text-align: left;">
              <span><b>Instructions:</b>
                <ul>
                  <li>The Word Cloud is generates the most common words that begin with a particular letter that can be selected from the dropdown at the bottom of the first graph.</li>
                  <li>Individual words can be clicked on for single or multiple selection. Eveytime a word is selected, it is added to the bar chart at the bottom. Note that the words in the bar chart do not need to start with the same letter.</li>
                  <li>The button "Add all" can be used to add all the words in the word cloud to the bar chart.</li>
                  <li>The bar chart can be sorted alphatically or by frequency to find words more easily in bar chart.</li>
                  <li>The bars in the bar chart can also be clicked to create a custom word cloud. Note, however, that as soon as the dropdow is changed the words in the current word cloud will be removed.</li>
                  <li>The sliders help filter the words in the bar chart by frequency. The red slider hides the least frequent words, while the green slider hides the most frequent words.</li>
                  <li>You can reset any of the charts by clicking on the reset buttons. Note that resetting the charts do not reset the position of the sliders.</li>
                </ul>
              </span>
            </td>
          </tr>        
        </table>
      </div>
    </center>

    <center>
      <div id="chart"></div>
    </center>

    <center>
      <table class="settings-table">
        <tr>
          <td>
            <span>Words starting with: </span>
            <select id="xSelect"></select>
          </td>
          <td>
            <span>Change Bar Chart settings: </span><br>
            <input type="radio" name="sort" value="alphatically" checked> Sort Alphabetically<br>
            <input type="radio" name="sort" value="frequency"> Sort by Frequency<br><br>
            <span id="green-slider" value="100">Show lower 100%</span><br>
            <svg id="green-slider-svg" width="300" height="30"></svg><br>
            <span id="red-slider" value="0">Hide lower 0%</span>
            <svg id="red-slider-svg" width="300" height="30"></svg>
          </td>
          <td>
            <span>Add all words Bar Chart: </span>
            <input id="addAll" class="button button5" type="button" value="Add all"/>
          </td>
          <td>
            <span>Reset Word Cloud: </span><br>
            <input id="resetCloud" class="button button5" type="button" value="Reset Cloud"/><br><br>
            <span>Reset Bar Chart: </span><br>
            <input id="reset" class="button button5" type="button" value="Reset Bar Chart"/>
          </td>
        </tr>
      </table>
    </center>

    <center>
      <div id="bar-svg"></div>
      <!-- <svg id="bar-svg" width="960" height="500"></svg> -->
    </center>

    <div id="tooltip"></div>

    <script src="script.js"></script>
    <script src="barScript.js"></script>
    <script src="greenSlider.js"></script>
    <script src="redSlider.js"></script>
  </body>
</html>

prince.csv

redSlider.js

var redSvgSlider = d3.select("#red-slider-svg"),
    redMargin = {right: 50, left: 50},
    redWidth = +redSvgSlider.attr("width") - redMargin.left - redMargin.right,
    redHeight = +redSvgSlider.attr("height");

var redX = d3.scaleLinear()
    .domain([0, 100])
    .range([0, redWidth])
    .clamp(true);

var redSlider = redSvgSlider.append("g")
    .attr("class", "slider")
    .attr("transform", "translate(" + redMargin.left + "," + redHeight / 2 + ")");

redSlider.append("line")
    .attr("class", "track")
    .attr("x1", redX.range()[0])
    .attr("x2", redX.range()[1])
  .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
    .attr("class", "track-inset")
  .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
    .attr("class", "track-overlay")
    .call(d3.drag()
        .on("start.interrupt", function() { redSlider.interrupt(); })
        .on("start drag", function() {
            let value = Math.round(redX.invert(d3.event.x));
            redHue(value);
            let greenSlider = d3.select('#green-slider');
            let redSlider = d3.select('#red-slider');
            redSlider.text('Hide lower ' + value + '%');
            redSlider.attr('value', value);

            let greenVal = greenSlider.attr('value')
            let redVal = redSlider.attr('value');

            removeBarChart()
            createBarChart(selectedForBarChart)
        }));

var redHandle = redSlider.insert("circle", ".track-overlay")
    .attr("class", "red-handle-slider")
    .attr("r", 9);

function redHue(h) {
  redHandle.attr("cx", redX(h));
}

script.js

// Selecting the tooltip from the html
const tooltip = d3.select("#tooltip");
// Initialize lists that will hold the information of both charts
var selectedForBarChart = [];
var selectedForWordCloud = [];

// Change loaded values from string to number
const row = d => {
    d.value = +d.value
    return d
}

// Do not consider common words in the word cloud
const common = "the,and,poop,i,me,my,myself,we,us,our,ours,ourselves,you,your,yours,yourself,yourselves,he,him,his,himself,she,her,hers,herself,it,its,itself,they,them,their,theirs,themselves,what,which,who,whom,whose,this,that,these,those,am,is,are,was,were,be,been,being,have,has,had,having,do,does,did,doing,will,would,should,can,could,ought,i'm,you're,he's,she's,it's,we're,they're,i've,you've,we've,they've,i'd,you'd,he'd,she'd,we'd,they'd,i'll,you'll,he'll,she'll,we'll,they'll,isn't,aren't,wasn't,weren't,hasn't,haven't,hadn't,doesn't,don't,didn't,won't,wouldn't,shan't,shouldn't,can't,cannot,couldn't,mustn't,let's,that's,who's,what's,here's,there's,when's,where's,why's,how's,a,an,the,and,but,if,or,because,as,until,while,of,at,by,for,with,about,against,between,into,through,during,before,after,above,below,to,from,up,upon,down,in,out,on,off,over,under,again,further,then,once,here,there,when,where,why,how,all,any,both,each,few,more,most,other,some,such,no,nor,not,only,own,same,so,than,too,very,say,says,said,shall";

// Generate SVG where the word cloud will be placed
var svg_location = "#chart";
var width = $(document).width();
var height = $(document).height();
var svg = d3.select(svg_location).append("svg")
            .attr("width", 960)
            .attr("height", 500)

// Try to make word cloud centered
svg.attr("viewBox", "" + (-70) + " " + (-20) + " " + 960 + " " + 500)
// svg.attr("viewBox", "" + (-960 / 2) + " " + (-500 / 2))

// Load the little prince book
d3.csv("prince.csv",row, data => {
    data = data.filter(d => common.indexOf(d.key)==-1)
    // data.sort(compare)

    selectedForWordCloud = data.filter(d => d.key.charAt(0) == "a")

    drawWordCloud(selectedForWordCloud)

    // Filter words from data to the word cloud every time the value of the dropdown changes
    var xInput = d3.select("#xSelect")
    xInput
        .on('change',() => {
            svg.selectAll("*").remove()
            let letter = xInput.node().value;
            selectedForWordCloud = data.filter(d => d.key.charAt(0) == letter)
            drawWordCloud(selectedForWordCloud)
        })
        .selectAll('option')
            .data(genCharArray('a', 'z'))
            .enter()
        .append('option')
            .attr('value', d => d)
            .text(d => d.toUpperCase());

    // Passes all the words in the word cloud to the bar chart
    var addAll = d3.select("#addAll")
    addAll.on('click', () => {
        removeBarChart()
        selectedForBarChart = selectedForBarChart.concat(selectedForWordCloud)
        createBarChart(selectedForBarChart)
    });
});

// Function that draws words passed on data
function drawWordCloud(data){

    var word_count = {};

    data.forEach(d => {
        word_count[d.key] = d.value
    })

    var fill = d3.scaleOrdinal(d3.schemeCategory20);
    
    var word_entries = d3.entries(word_count);

    var xScale = d3.scaleLinear()
        .domain([0, d3.max(word_entries, function(d) {
                return d.value;
            })
        ])
        .range([10,100]);

    // Set the fond and size of the words in the word cloud
    d3.layout.cloud().size([width, height])
        .timeInterval(20)
        .words(word_entries)
        .fontSize(function(d) { return xScale(+d.value); })
        .text(function(d) { return d.key; })
        .rotate(function() { return ~~(Math.random() * 2) * 90; })
        .font("Impact")
        .on("end", draw)
        .start();

    // function that draws words on the word cloud
    function draw(words) {
        var g = svg.append("g")
            .attr("transform", "translate(" + [width >> 1, height >> 1] + ")")
            .selectAll("text")
            .data(words)
            .enter().append("text")
            .attr("class", "word")
            .style("font-size", function(d) { return xScale(d.value) + "px"; })
            .style("font-family", "Impact")
            .style("fill", function(d, i) { return fill(i); })
            .attr("text-anchor", "middle")
            .attr("transform", function(d) {
                    return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
                })
            .text(function(d) { return d.key; })
            .on("click", d => {
                selectedForBarChart.push({"key":d.key, "value":d.value})
                removeBarChart()
                createBarChart(selectedForBarChart)
            })
            .on("mouseover", d => tooltipMouseOver(d))
            .on("mouseout", tooltipMouseOut)
    }

    d3.layout.cloud().stop();
}

// Show tooltip when on top of a word
var tooltipMouseOver = d => {
    // var value = yInput.node().value;
    // Setting tooltip transition
    tooltip.transition()
        .duration(200)
        .style("opacity", .9);
    tooltip.html("Frequency: " + d.value)
        .style("left", (d3.event.pageX) + "px")
        .style("top", (d3.event.pageY - 28) + "px");
}
// Disappear tooltip
var tooltipMouseOut = () => {
    tooltip.transition()
        .duration(500)
        .style("opacity", 0);
}

// Generate data for the dropdown that generates the word cloud
function genCharArray(charA, charZ) {
    var a = [], i = charA.charCodeAt(0), j = charZ.charCodeAt(0);
    for (; i <= j; ++i) {
        a.push(String.fromCharCode(i));
    }
    return a;
}

style.css

#tooltip {
    position: absolute;
    text-align: center;
    width: 100px;
    height: 14px;
    padding: 2px;
    font: 12px sans-serif;
    background: lightsteelblue;
    border: 0px;
    border-radius: 8px;
    pointer-events: none;
    opacity: 0;
}

body {
    margin: 0px;
}
.tick {
    font-size: 2em;
}
.axis-label {
    fill: black;
    font-size: 3em;
    font-family: sans-serif;
}
.legendCells {
    font-size: 1.5em;
}
.legend-label {
    fill: black;
    font-size: 1em;
    font-family: sans-serif;
}
.info-text {
    padding-left: 100px;
    padding-right: 100px;
}

h4 {
    padding-left: 100px;
}

ul, ol {
    padding-left: 120px;
}

#table {
    width: 100%;
    visibility: hidden;
    position: absolute;
    /* top: 30px; */
    /* left: 500px; */
    font-family: sans-serif;
    font-size: 1.2em;
    
}

.brush-table > tr:nth-child(even) {
    background-color: #d9d9d9;
}

.brush-table {
    margin-left:auto; 
    margin-right:auto;
}

.settings-table td {
    padding: 20px;
    width: 400px;
}

.settings-table {
    border: 1px solid black;
}

.instructions-table td {
    padding: 20px;
    width: 1000px;
}

.instructions-table {
    border: 1px solid black;
}

.brushed {
    fill: #ff3399;
    stroke: #8e1b54;
    opacity: 1.0;
}

.non_brushed {
    /* fill: #404040; */
    fill: 'blue';
    opacity: 0.5;
}

td {
    text-align: center;
}

/* for force graph */
.links line {
    stroke: #999;
    stroke-opacity: 0.6;
}

.nodes circle {
    stroke: #fff;
    stroke-width: 1.5px;
}

/* for bar chart */
.toolTip {
    position: absolute;
    display: none;
    min-width: 80px;
    height: auto;
    background: none repeat scroll 0 0 #ffffff;
    border: 1px solid #6F257F;
    padding: 14px;
    text-align: center;
}

.axis {
    font: 15px sans-serif;
}
.axis path, .axis line {
    fill: none;
    stroke: #D4D8DA;
    stroke-width: 1px;
    shape-rendering: crispEdges;
}

/* Slider from here */
.ticks {
    font: 10px sans-serif;
  }
  
  .track,
  .track-inset,
  .track-overlay {
    stroke-linecap: round;
  }
  
  .track {
    stroke: #000;
    stroke-opacity: 0.3;
    stroke-width: 10px;
  }
  
  .track-inset {
    stroke: #ddd;
    stroke-width: 8px;
  }
  
  .track-overlay {
    pointer-events: stroke;
    stroke-width: 50px;
    stroke: transparent;
    cursor: crosshair;
  }
  
  .green-handle-slider {
    fill: green;
    stroke: #000;
    stroke-opacity: 0.5;
    stroke-width: 1.25px;
  }

  .red-handle-slider {
    fill: red;
    stroke: #000;
    stroke-opacity: 0.5;
    stroke-width: 1.25px;
  }

/* Test for a nice button */
.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}

.button5 {
    background-color: white;
    color: black;
    border: 2px solid #555555;
}

.button5:hover {
    background-color: #555555;
    color: white;
}