Skip to content

Instantly share code, notes, and snippets.

@jalapic

jalapic/.block

Last active December 28, 2016 23:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jalapic/5c8e0b6961b4d31a9733fc59300de3da to your computer and use it in GitHub Desktop.
Save jalapic/5c8e0b6961b4d31a9733fc59300de3da to your computer and use it in GitHub Desktop.
Download ZIP
simple selector
Raw
.block
license: mit
Raw
README.md

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

Raw
data.json
[{"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}]
Raw
example.csv
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
Raw
index.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment