D3 Examples - simple selector

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  
  <div><select id="selector"></select></div>
​
  <div><svg id="canvas" height="900px" width="1200px"></svg></div>
  
  <script>
  
  var data = [{"player":"JOHN","result":"MISS","converted_x":34,"converted_y":44},{"player":"JOHN","result":"SCORE","converted_x":23,"converted_y":53},{"player":"JOHN","result":"MISS","converted_x":33,"converted_y":34},{"player":"JOHN","result":"MISS","converted_x":15,"converted_y":46},{"player":"JOHN","result":"MISS","converted_x":23,"converted_y":46},{"player":"JOHN","result":"SCORE","converted_x":33,"converted_y":33},{"player":"JOHN","result":"SCORE","converted_x":23,"converted_y":25},{"player":"JOHN","result":"MISS","converted_x":61,"converted_y":65},{"player":"STEPHEN","result":"MISS","converted_x":31,"converted_y":35},{"player":"STEPHEN","result":"MISS","converted_x":32,"converted_y":32},{"player":"STEPHEN","result":"SCORE","converted_x":11,"converted_y":56},{"player":"STEPHEN","result":"SCORE","converted_x":23,"converted_y":83},{"player":"STEPHEN","result":"MISS","converted_x":23,"converted_y":52},{"player":"BOB","result":"MISS","converted_x":51,"converted_y":72},{"player":"BOB","result":"MISS","converted_x":23,"converted_y":52},{"player":"BOB","result":"MISS","converted_x":15,"converted_y":42},{"player":"BOB","result":"SCORE","converted_x":15,"converted_y":26},{"player":"BOB","result":"SCORE","converted_x":12,"converted_y":7},{"player":"BOB","result":"SCORE","converted_x":32,"converted_y":27},{"player":"BOB","result":"SCORE","converted_x":22,"converted_y":25},{"player":"BOB","result":"MISS","converted_x":27,"converted_y":72},{"player":"BOB","result":"MISS","converted_x":75,"converted_y":52},{"player":"BOB","result":"MISS","converted_x":13,"converted_y":46},{"player":"ALICE","result":"MISS","converted_x":27,"converted_y":27},{"player":"ALICE","result":"SCORE","converted_x":26,"converted_y":27},{"player":"ALICE","result":"MISS","converted_x":18,"converted_y":25},{"player":"ALICE","result":"MISS","converted_x":27,"converted_y":42},{"player":"ALICE","result":"MISS","converted_x":27,"converted_y":62},{"player":"ALICE","result":"SCORE","converted_x":27,"converted_y":14},{"player":"ALICE","result":"MISS","converted_x":42,"converted_y":4}];   
​
    
// two alternative ways of bringing in data... json or csv format.    
    
//d3.json("data.json", function(data){
//d3.csv("example.csv", function(data){
  
var shots = d3.select("svg#canvas")
 .selectAll("g")
 .data(data)
 .enter()
 .append("g")
 .attr("class", "shot")
 .attr("transform", function(d){
   return "translate(" + 5 * d.converted_y + "," +  5*d.converted_x +")";
 })
 .on("mouseover", function(d){
  d3.select(this).raise()
  .append("text")
  .attr("class", "playername")
  .text(d.player);
})
.on("mouseout", function(d){
  d3.selectAll("text.playername").remove();
})
 
​
shots
.append("circle")
.attr("r", 5)
.attr("fill", function(d) {
  if(d.result=="SCORE"){
    return "blue";
  } else {
    return "red";
  }
  
})
​
​
var players = d3.nest()
.key(function(d){ return d.player;})     // group by player
.rollup(function(a) { return a.length})  // aggregation on array
.entries(data);
​
 //add all
  players.unshift({"key": "ALL",
                 "value": d3.sum(players,function(d) {return d.value;})}) 
​
  
 var selector= d3.select("#selector");
 
 selector
   .selectAll("option")
   .data(players)
   .enter()
   .append("option")
   .text(function(d) { return d.key + ": " + d.value;})
   .attr("value", function(d){ return d.key;})
  
  
  selector
  .on("change", function(){
    d3.selectAll(".shot")
    .attr("opacity", 1);
    var value = selector.property("value");
    if(value!="ALL") {
      d3.selectAll(".shot")
      .filter(function(d) { return d.player != value; })
      .attr("opacity",0.1);
    }   
  })
  
 
//   }) // end csv function or json function
 
  </script>
​
​
</body>
​
    