D3 Examples - Bubble chart with buttons

xxxxxxxxxx
 
<!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="https://d3js.org/d3.v3.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.7/d3-tip.min.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 class="btn-group" data-toggle="buttons">
      <label class="btn btn-primary active">
        <input type="radio" name="options" id="clinton" checked> Hillary Clinton
      </label>
      <label class="btn btn-primary">
        <input type="radio" name="options" id="rubio"> Marco Rubio
      </label>
      <label class="btn btn-primary">
        <input type="radio" name="options" id="sanders"> Bernie Sanders
      </label>
      <label class="btn btn-primary">
        <input type="radio" name="options" id="cruz"> Ted Cruz
      </label>
      <label class="btn btn-primary">
        <input type="radio" name="options" id="trump"> Donald Trump
      </label>
      <label class="btn btn-primary">
        <input type="radio" name="options" id="bush"> Jeb Bush
      </label>
    </div-->
        
        <div id ="viz"></div>
        <script>
    var tooltip = d3.tip().attr('class', 'd3-tip').html(
    function(d) { 
        return d['Candidate'] + ': $' + 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");
​
​
/* modified d3-tip boilerplate */
/* Invoke the tip in the context of your visualization */
svg.call(tooltip);
​
function draw(candidate) {
​
    d3.csv("Candidates.csv", function(error, data) {
        data = data.filter(function(d) {
            return d["Candidate"] == candidate;
        });
​
    //console.log(data);
​
    svg.selectAll("g").remove();
​
​
    //console.log(data);
​
    // var nest = d3.keys(function(d){
    //                 return d['Candidate']; })
    //             .entries(data);
    //console.log(nest);
​
    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()
​
​
//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);
​
    //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"];
        });
​
    //Hack 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) {
    draw(candidate);
}
​
d3.select("#clinton").on("click", choose("clinton"));
d3.select("#rubio").on("click", choose("rubio"));
d3.select("#sanders").on("click", choose("sanders"));
d3.select("#trump").on("click", choose("trump"));
d3.select("#cruz").on("click", choose("cruz"));
d3.select("#bush").on("click", choose("bush"));
​
    
    </script>
        
            <!-- / $(document).ready(function () {
            //     $("#clinton").on("click", choose("clinton"))
            //     $("#rubio").on("click", choose("rubio"))
            //     $("#cruz").on("click", choose("cruz"))
            //     $("#bush").on("click", choose("bush"))
            //     $("#trump").on("click", choose("trump"))
            // }); -->
        
    </div>
</body>
</html>
    