Skip to content

Instantly share code, notes, and snippets.

@nepomunich
Created April 14, 2015 21:20
Show Gist options
  • Save nepomunich/5821ebc76614e35c1223 to your computer and use it in GitHub Desktop.
Save nepomunich/5821ebc76614e35c1223 to your computer and use it in GitHub Desktop.
no bars show up
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>1860_homeground_stats</title>
<script type="text/javascript" src="../d3.v3.js"></script>
<style type="text/css">
body {
background-color: #ddddff;
}
svg {
background-color: white;
}
</style>
</head>
<body>
<script type="text/javascript">
var svg = d3.select("body")
.append("svg")
.attr("width", 300)
.attr("height", 400);
d3.csv("stadium_scores_clear.csv", function(data) {
data.sort(function(a, b) {
return d3.descending(a.percentage_of_wins, b.percentage_of_wins);
//If your numeric values aren't sorting properly,
//try commenting out the line above, and instead using:
//
//return d3.descending(+a.lifeSatisfaction, +b.lifeSatisfaction);
//
//Data coming in from the CSV is saved as strings (text),
//so the + signs here force JavaScript to treat those
//strings instead as numeric values, thereby fixing the
//sort order (hopefully!).
});
var rects = svg.selectAll("rect")
.data(data)
.enter()
.append("rect");
rects.attr("x", 0)
.attr("y", function(d, i) {
return i * 10;
})
.attr("width", function(d) {
return d.percentage_of_wins * 30;
})
.attr("height", 8);
});
</script>
</body>
</html>
We can make this file beautiful and searchable if this error is corrected: No commas found in this CSV file in line 0.
;sum_of_wins;sum_of_ties;sum_of_defeats;totalmatches;percentage_of_wins;percentage_of_ties;percentage_of_defeats
Allianz Arena;70;48;48;166;42.17;28.92;28.92
Gruenwalder;262;104;62;428;61.21;24.30;14.49
Olympiastadion;150;65;74;289;51.9;22.49;25.61
Gesamt;482;217;184;883;54.59;24.58;20.84
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment