Skip to content

Instantly share code, notes, and snippets.

@EvanZ

EvanZ/index.html

Created June 18, 2012 04:10
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 EvanZ/2946791 to your computer and use it in GitHub Desktop.
Save EvanZ/2946791 to your computer and use it in GitHub Desktop.
Download ZIP
creating a bar chart in D3
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js"></script>
<style type="text/css">
</style>
</head>
<body>
<script>
var players = [
{"First": "Harrison", "Last": "Barnes", "Votes": 61},
{"First":"Andre", "Last":"Drummond", "Votes":27},
{"First":"Bradley", "Last":"Beal", "Votes":"58"},
{"First":"Meyers", "Last":"Leonard", "Votes":8},
{"First":"Jared", "Last":"Sullinger", "Votes":8},
{"First":"Damian", "Last":"Lillard", "Votes":5},
{"First":"Terrence", "Last":"Jones", "Votes":2},
{"First":"Austin", "Last":"Rivers", "Votes":2},
{"First":"Perry", "Last":"Jones", "Votes":2},
{"First":"Others","Last":"","Votes":6}
],
maxVotes = Math.max.apply(Math,players.map(function(o){return o.Votes;})),
minVotes = Math.min.apply(Math,players.map(function(o){return o.Votes;})),
numVotes = players.reduce(function(a,b) {return a+parseInt(b.Votes);},0),
xOffset = 50,
numPlayers = players.length,
svgHeight = numPlayers*55,
svgWidth = maxVotes + 200,
yOffset = svgHeight/(numPlayers+1);
function sorter(a,b) {
return b.Votes - a.Votes;
}
players.sort(sorter);
d3.select("body").append("svg")
.attr("width",svgWidth)
.attr("height",svgHeight);
d3.select("svg").append("rect")
.attr("x",0)
.attr("y",0)
.attr("width",svgWidth)
.attr("height",svgHeight)
.attr("style","fill-opacity:0; stroke:black;stroke-width:6px");
d3.select("svg")
.append("g").attr("class","bars")
.selectAll("rect")
.data(players)
.enter()
.append("rect")
.attr("x",xOffset)
.attr("style","fill:gold; stroke:black")
.attr("y", function(d,i) {
return yOffset*i+50;
})
.attr("width", function(d,i) {
return d.Votes*2;
})
.attr("height", 20);
d3.select("svg")
.append("g").attr("class","names")
.selectAll("text")
.data(players)
.enter()
.append("text")
.attr("x", xOffset)
.attr("y", function(d,i) {
return yOffset*i+45;
})
.attr("style","font-family: sans-serif; font-size: 12pt")
.text(function(d) {return d.First+" "+d.Last;});
d3.select("svg")
.append("g").attr("class","votes")
.selectAll("text")
.data(players)
.enter()
.append("text")
.attr("x", function(d,i) {
return xOffset+d.Votes*2+5;
})
.attr("y", function(d,i) {
return yOffset*i+45+20;
})
.attr("style","font-family: sans-serif; font-size: 10pt")
.text(function(d) {return parseInt(d.Votes) + " votes";});
d3.select("svg")
.append("g").attr("class","percent")
.selectAll("text")
.data(players)
.enter()
.append("text")
.attr("x", 10)
.attr("y", function(d,i) {
return yOffset*i+45+20;
})
.attr("style","font-family: sans-serif; font-size: 10pt")
.text(function(d) {
return d3.format(".2p")(d.Votes/numVotes);
});
d3.select("body").append("div")
.text(numVotes+" votes");
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment