| license: mit |
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
| [{"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}] |
| player | result | converted_x | converted_y | |
|---|---|---|---|---|
| JOHN | MISS | 34 | 44 | |
| JOHN | SCORE | 23 | 53 | |
| JOHN | MISS | 33 | 34 | |
| JOHN | MISS | 15 | 46 | |
| JOHN | MISS | 23 | 46 | |
| JOHN | SCORE | 33 | 33 | |
| JOHN | SCORE | 23 | 25 | |
| JOHN | MISS | 61 | 65 | |
| STEPHEN | MISS | 31 | 35 | |
| STEPHEN | MISS | 32 | 32 | |
| STEPHEN | SCORE | 11 | 56 | |
| STEPHEN | SCORE | 23 | 83 | |
| STEPHEN | MISS | 23 | 52 | |
| BOB | MISS | 51 | 72 | |
| BOB | MISS | 23 | 52 | |
| BOB | MISS | 15 | 42 | |
| BOB | SCORE | 15 | 26 | |
| BOB | SCORE | 12 | 7 | |
| BOB | SCORE | 32 | 27 | |
| BOB | SCORE | 22 | 25 | |
| BOB | MISS | 27 | 72 | |
| BOB | MISS | 75 | 52 | |
| BOB | MISS | 13 | 46 | |
| ALICE | MISS | 27 | 27 | |
| ALICE | SCORE | 26 | 27 | |
| ALICE | MISS | 18 | 25 | |
| ALICE | MISS | 27 | 42 | |
| ALICE | MISS | 27 | 62 | |
| ALICE | SCORE | 27 | 14 | |
| ALICE | MISS | 42 | 4 |
| <!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> |