fresh block

README.md

Built with blockbuilder.org

Candidates.csv

d3-tip.js

// d3.tip
// Copyright (c) 2013 Justin Palmer
//
// Tooltips for d3.js SVG visualizations

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module with d3 as a dependency.
    define(['d3'], factory)
  } else if (typeof module === 'object' && module.exports) {
    // CommonJS
    module.exports = function(d3) {
      d3.tip = factory(d3)
      return d3.tip
    }
  } else {
    // Browser global.
    root.d3.tip = factory(root.d3)
  }
}(this, function (d3) {

  // Public - contructs a new tooltip
  //
  // Returns a tip
  return function() {
    var direction = d3_tip_direction,
        offset    = d3_tip_offset,
        html      = d3_tip_html,
        node      = initNode(),
        svg       = null,
        point     = null,
        target    = null

    function tip(vis) {
      svg = getSVGNode(vis)
      point = svg.createSVGPoint()
      document.body.appendChild(node)
    }

    // Public - show the tooltip on the screen
    //
    // Returns a tip
    tip.show = function() {
      var args = Array.prototype.slice.call(arguments)
      if(args[args.length - 1] instanceof SVGElement) target = args.pop()

      var content = html.apply(this, args),
          poffset = offset.apply(this, args),
          dir     = direction.apply(this, args),
          nodel   = getNodeEl(),
          i       = directions.length,
          coords,
          scrollTop  = document.documentElement.scrollTop || document.body.scrollTop,
          scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft

      nodel.html(content)
        .style({ opacity: 1, 'pointer-events': 'all' })

      while(i--) nodel.classed(directions[i], false)
      coords = direction_callbacks.get(dir).apply(this)
      nodel.classed(dir, true).style({
        top: (coords.top +  poffset[0]) + scrollTop + 'px',
        left: (coords.left + poffset[1]) + scrollLeft + 'px'
      })

      return tip
    }

    // Public - hide the tooltip
    //
    // Returns a tip
    tip.hide = function() {
      var nodel = getNodeEl()
      nodel.style({ opacity: 0, 'pointer-events': 'none' })
      return tip
    }

    // Public: Proxy attr calls to the d3 tip container.  Sets or gets attribute value.
    //
    // n - name of the attribute
    // v - value of the attribute
    //
    // Returns tip or attribute value
    tip.attr = function(n, v) {
      if (arguments.length < 2 && typeof n === 'string') {
        return getNodeEl().attr(n)
      } else {
        var args =  Array.prototype.slice.call(arguments)
        d3.selection.prototype.attr.apply(getNodeEl(), args)
      }

      return tip
    }

    // Public: Proxy style calls to the d3 tip container.  Sets or gets a style value.
    //
    // n - name of the property
    // v - value of the property
    //
    // Returns tip or style property value
    tip.style = function(n, v) {
      if (arguments.length < 2 && typeof n === 'string') {
        return getNodeEl().style(n)
      } else {
        var args =  Array.prototype.slice.call(arguments)
        d3.selection.prototype.style.apply(getNodeEl(), args)
      }

      return tip
    }

    // Public: Set or get the direction of the tooltip
    //
    // v - One of n(north), s(south), e(east), or w(west), nw(northwest),
    //     sw(southwest), ne(northeast) or se(southeast)
    //
    // Returns tip or direction
    tip.direction = function(v) {
      if (!arguments.length) return direction
      direction = v == null ? v : d3.functor(v)

      return tip
    }

    // Public: Sets or gets the offset of the tip
    //
    // v - Array of [x, y] offset
    //
    // Returns offset or
    tip.offset = function(v) {
      if (!arguments.length) return offset
      offset = v == null ? v : d3.functor(v)

      return tip
    }

    // Public: sets or gets the html value of the tooltip
    //
    // v - String value of the tip
    //
    // Returns html value or tip
    tip.html = function(v) {
      if (!arguments.length) return html
      html = v == null ? v : d3.functor(v)

      return tip
    }

    // Public: destroys the tooltip and removes it from the DOM
    //
    // Returns a tip
    tip.destroy = function() {
      if(node) {
        getNodeEl().remove();
        node = null;
      }
      return tip;
    }

    function d3_tip_direction() { return 'n' }
    function d3_tip_offset() { return [0, 0] }
    function d3_tip_html() { return ' ' }

    var direction_callbacks = d3.map({
      n:  direction_n,
      s:  direction_s,
      e:  direction_e,
      w:  direction_w,
      nw: direction_nw,
      ne: direction_ne,
      sw: direction_sw,
      se: direction_se
    }),

    directions = direction_callbacks.keys()

    function direction_n() {
      var bbox = getScreenBBox()
      return {
        top:  bbox.n.y - node.offsetHeight,
        left: bbox.n.x - node.offsetWidth / 2
      }
    }

    function direction_s() {
      var bbox = getScreenBBox()
      return {
        top:  bbox.s.y,
        left: bbox.s.x - node.offsetWidth / 2
      }
    }

    function direction_e() {
      var bbox = getScreenBBox()
      return {
        top:  bbox.e.y - node.offsetHeight / 2,
        left: bbox.e.x
      }
    }

    function direction_w() {
      var bbox = getScreenBBox()
      return {
        top:  bbox.w.y - node.offsetHeight / 2,
        left: bbox.w.x - node.offsetWidth
      }
    }

    function direction_nw() {
      var bbox = getScreenBBox()
      return {
        top:  bbox.nw.y - node.offsetHeight,
        left: bbox.nw.x - node.offsetWidth
      }
    }

    function direction_ne() {
      var bbox = getScreenBBox()
      return {
        top:  bbox.ne.y - node.offsetHeight,
        left: bbox.ne.x
      }
    }

    function direction_sw() {
      var bbox = getScreenBBox()
      return {
        top:  bbox.sw.y,
        left: bbox.sw.x - node.offsetWidth
      }
    }

    function direction_se() {
      var bbox = getScreenBBox()
      return {
        top:  bbox.se.y,
        left: bbox.e.x
      }
    }

    function initNode() {
      var node = d3.select(document.createElement('div'))
      node.style({
        position: 'absolute',
        top: 0,
        opacity: 0,
        'pointer-events': 'none',
        'box-sizing': 'border-box'
      })

      return node.node()
    }

    function getSVGNode(el) {
      el = el.node()
      if(el.tagName.toLowerCase() === 'svg')
        return el

      return el.ownerSVGElement
    }

    function getNodeEl() {
      if(node === null) {
        node = initNode();
        // re-add node to DOM
        document.body.appendChild(node);
      };
      return d3.select(node);
    }

    // Private - gets the screen coordinates of a shape
    //
    // Given a shape on the screen, will return an SVGPoint for the directions
    // n(north), s(south), e(east), w(west), ne(northeast), se(southeast), nw(northwest),
    // sw(southwest).
    //
    //    +-+-+
    //    |   |
    //    +   +
    //    |   |
    //    +-+-+
    //
    // Returns an Object {n, s, e, w, nw, sw, ne, se}
    function getScreenBBox() {
      var targetel   = target || d3.event.target;

      while ('undefined' === typeof targetel.getScreenCTM && 'undefined' === targetel.parentNode) {
          targetel = targetel.parentNode;
      }

      var bbox       = {},
          matrix     = targetel.getScreenCTM(),
          tbbox      = targetel.getBBox(),
          width      = tbbox.width,
          height     = tbbox.height,
          x          = tbbox.x,
          y          = tbbox.y

      point.x = x
      point.y = y
      bbox.nw = point.matrixTransform(matrix)
      point.x += width
      bbox.ne = point.matrixTransform(matrix)
      point.y += height
      bbox.se = point.matrixTransform(matrix)
      point.x -= width
      bbox.sw = point.matrixTransform(matrix)
      point.y -= height / 2
      bbox.w  = point.matrixTransform(matrix)
      point.x += width
      bbox.e = point.matrixTransform(matrix)
      point.x -= width / 2
      point.y -= height / 2
      bbox.n = point.matrixTransform(matrix)
      point.y += height
      bbox.s = point.matrixTransform(matrix)

      return bbox
    }

    return tip
  };

}));

index.html

<!DOCTYPE html>
<html>
 <head>
  <title> Who's Giving Them Money? </title>
  <meta charset = "utf-8">
  <link rel = "stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel = "stylesheet" href = "style.css">
  <script src="http://d3js.org/d3.v3.js"></script>
  <script src="d3-tip.js"></script>
</head>

<body>
  <div class="container">
    <h1> Who's Giving Them Money? </h1>

    <div class="row">
        <div class="col-sm-6">
      <p> A look at the individual contributions to prominent candidates in the 2016 presidential campaign. The visualization below looks at the amount per 1,000 persons in each state of the US. Data has been sourced from the <strong> Federal Election Commission </strong> website, and is from April 1, 2015 to September 30, 2015. </p>
      </div>
    </div>

<!--
  <button type="button" class="btn btn-primary" id="clinton">Hillary Clinton</button>
  <button type="button" class="btn btn-primary" id="rubio">Marco Rubio</button>
  <button type="button" class="btn btn-primary" id="sanders">Bernie Sanders</button>
  <button type="button" class="btn btn-primary" id="cruz">Ted Cruz</button>
  <button type="button" class="btn btn-primary" id="trump">Donald J. Trump</button>
  <button type="button" class="btn btn-primary" id="bush">Jeb Bush</button>
-->
    <div id="myButtons"></div>
    <div id ="viz"></div>
    <script src= "bubble.js"></script>
  </div>
</body>
</html>

script.js

var tooltip = d3.tip().attr('class', 'd3-tip').html(
    function(d) { 
        return d['Name'] + ': $' + d['Amount'];
    });

var diameter = 600;
var color = d3.scale.ordinal()
            .domain(['R','D'])
            .range(['#B2182B','#2166AC']);

var bubble = d3.layout.pack()
            .sort(null)
            .size([diameter, diameter])
            .padding(3.5);

var svg = d3.select("#viz")
    .append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
    .attr("class", "bubble");

var candidate_map = {
      "rubio": "Marco Rubio"
    , "clinton": "Hillary Clinton"
    , "trump":  "Donald Trump"
    , "bush" : "Jeb Bush"
    , "sanders" : "Bernie Sanders"
    , "cruz" : "Ted Cruz"
  };

var buttons = d3.select("#myButtons").selectAll("button");

/* modified d3-tip boilerplate */
/* Invoke the tip in the context of your visualization */
svg.call(tooltip);

var myData; //hat tip Wendy and Seemant from d3js Slack

d3.csv("Candidates.csv", function(error, data) {
    myData = data;
    buttonize(myData);
});

// function init() {
//   choose("clinton");
// }

function update(candidate, data) {

    //Get the data for candidate chosen
    data = data.filter(function(d) {
            return d["Candidate"] == candidate;
        });
//console.log(data);

    svg.selectAll("g").remove();

    //Coerce string numbers to integers
    data = data.map(function(d) {
        d.value = +d["Amount"];
        return d;
    });

    //console.log(data);

    var nodes = bubble.nodes({children: data })
                      .filter(function(d) {
                            return !d.children; 
                        });

    //console.log(nodes);

    // var chart = svg.selectAll('circle')
    //     .data(nodes, function(d) {
    //         return d;
    //     });

    // chart.transition()
    //     .duration(1000)
    //     .attr("transform", "translate(0,0)")
    //     .attr('r', function(d) {return d.r; })
    

    // chart.enter()
    // .append('circle')
    // .attr("r", function(d) { return d.r; })
    //         .attr("cx", function(d) {return d.x; })
    //         .attr("cy", function(d) { return d.y; })
    //         .style("fill", function(d) {
    //         return color(d["Past"]);
    //     });


    var chart = svg.append("g")
        .attr("transform", "translate(0,0)")
        .selectAll(".bubble")
        .data(nodes)
        .enter()
        .transition()
        .duration(1000)


//Make the bubbles and color the bubbles
        chart.append("circle")
            .attr("r", function(d) { return d.r; })
            .attr("cx", function(d) {return d.x; })
            .attr("cy", function(d) { return d.y; })
            .style("fill", function(d) {
                return color(d["Past"]);
            })
            .transition(1000)
            .delay(500);

    //format the text for each bubble
    chart.append("text")
        .attr("x", function(d) {
            return d.x;
        })
        .attr("y", function(d) {
            return d.y + 5;
        })
        .attr("text-anchor", "middle")
        .text(function(d) {
            return d["State"];
        });

    //Hacky way to ensure tooltip works everywhere on the circle body
    chart.append("circle")
        .attr("r", function(d) { return d.r; })
        .attr("cx", function(d) {return d.x; })
        .attr("cy", function(d) { return d.y; })
        .style("fill", function(d) {
            return "rgba(0,0,0,0)";
        })
        .on('mouseover', tooltip.show)
        .on('mouseout', tooltip.hide)
    // })
}

function choose(candidate) {
    update(candidate, myData);
}

function buttonize() {
    var candidates = d3.nest()
              .key(function(d) { return d.Candidate; })
              .map(myData);
              
     d3.select("#myButtons").selectAll("button")
        .data(d3.keys(candidates))
      .enter().append("button")
        .attr("type", "button")
        .attr("id", function(d) { return d; })
        .attr("class", "btn btn-primary")
        .on("click", function(d) { choose(d); })
      .append("text")
        .text(function(d) { return candidate_map[d] || d; })
    ;
} // buttonize()

window.onload = choose("clinton");

style.css

circle {
	fill: none;
	stroke: none;
}

circle.leaf {
  fill: rgba(31, 119, 180, 0.7);
  stroke: rgb(31, 119, 180);
  stroke-width: 2px;
  fill-opacity: 1;
}

.bubble{
  cursor: pointer;
  
}

.bubble text{
  fill: #fff;
  font-size: 12px;
  font-weight: bold;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}