Skip to content

Instantly share code, notes, and snippets.

@mwburke

mwburke/data.json

Last active July 29, 2017 01:09
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 mwburke/e0aed240dca56aac3182f34a7e5cfce0 to your computer and use it in GitHub Desktop.
Save mwburke/e0aed240dca56aac3182f34a7e5cfce0 to your computer and use it in GitHub Desktop.
Download ZIP
Small Multiples Mockup
Raw
data.json
{
"Players": [
{"Name": "Kasparov",
"Data":
[
{"Piece": "Pawn",
"Weirdness": 20},
{"Piece": "Bishop",
"Weirdness": -40},
{"Piece": "Knight",
"Weirdness": 50},
{"Piece": "Rook",
"Weirdness": 70},
{"Piece": "Queen",
"Weirdness": -75},
{"Piece": "King",
"Weirdness": -15}
]},
{"Name": "Other Dude",
"Data":
[
{"Piece": "Pawn",
"Weirdness": 50},
{"Piece": "Bishop",
"Weirdness": 25},
{"Piece": "Knight",
"Weirdness": -30},
{"Piece": "Rook",
"Weirdness": -10},
{"Piece": "Queen",
"Weirdness": 85},
{"Piece": "King",
"Weirdness": 25}
]}
]
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Chess viz small multiples for W209 final project">
<meta name="author" content="@mwburke">
<title>Chess Viz Small Multiples</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
/* No style rules here yet */
</style>
</head>
<body>
<!--
<div class="select-style">
</select>​
<p> Select player here:</p>
<select id="player_choice" name="player_choice">
<option value ="Kasparov" selected>Kasparov</option>
<option value ="Other Dude">Other Dude</option>
</select>​
</div>
-->
<script type="text/javascript">
//Width and height
var full_h = 300
var w = 200;
var h = 250;
var topPadding = 10;
var barPadding = 5;
var source = 'data.json';
//var player_choice = d3.select("#player_choice")
var draw = function() {
d3.json(source, function(err, data) {
//console.log(data);
drawPlayer = function(data) {
//data = data[player_choice.node().options[player_choice.node().selectedIndex].value];
console.log(data);
// Remove SVG element if exists
//d3.select("svg").remove();
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", full_h);
//Add grandmaster's name
// Linear scale, used on absolute value
var barScale = d3.scale.linear()
.domain([0, 100])
.range([0, w / 2]);
var colorScale = d3.scale.linear()
.domain([-100, 0, 100])
.range(["red", "white", "blue"]);
var getXValue = function(d) {
if (d >= 0) {
return w / 2;
} else {
return w / 2 - barScale(Math.abs(d));
}
}
svg.append("text")
.text(data.Name
)
.attr("x", w / 2)
.attr("y", (full_h - h) / 2)
.style("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", "20px")
.attr("fill", "grey");
svg.selectAll("rect")
.data(data.Data)
.enter()
.append("rect")
.attr("x", function(d) {
return getXValue(d.Weirdness);
})
.attr("y", function(d, i) {
return (full_h - h) + i * (h / data.Data.length);
})
.attr("width", function(d) {
return barScale(Math.abs(d.Weirdness));
})
.attr("height", function(d, i) {
return (h / data.Data.length) - barPadding;
})
.attr("fill", function(d) {
if (d.Weirdness < 0) {
return "#cc0000";
} else {
return "#4db8ff";
}
//return colorScale(d.Weirdness);
});
svg.append("line")
.attr("x1", w/2)
.attr("x2", w/2)
.attr("y1", full_h - barPadding)
.attr("y2", full_h - h)
.attr("stroke", "black")
.attr("stroke-width", 1);
}
for (i = 0; i < data.Players.length; i++) {
drawPlayer(data.Players[i]);
}
})
}
draw();
//player_choice.on("change", change)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment