simple selector

Built with blockbuilder.org

This is a simple illustration of how to load a csv/json data and then filter with HTML <select> tag.

Based on example by Michael Menz

forked from jalapic's block: simple selector

forked from anonymous's block: simple selector

<!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>

<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;})})

</body>

https://d3js.org/d3.v4.min.js