Skip to content

Instantly share code, notes, and snippets.

@aduo122
Last active October 19, 2017 16:24
Show Gist options
  • Save aduo122/e0bb6d785cf67ad9b135396890f73602 to your computer and use it in GitHub Desktop.
Save aduo122/e0bb6d785cf67ad9b135396890f73602 to your computer and use it in GitHub Desktop.
06_workshop_horizontal bar chart
license: mit
Team GP W D L GF GA GD PTS
Chelsea 26 18 6 2 56 22 34 60
Man_City 26 16 7 3 56 25 31 55
Arsenal 26 14 6 6 49 29 20 48
Man_United 26 13 8 5 44 26 18 47
Southampton 25 14 4 7 38 17 21 46
Tottenham 25 13 4 8 39 34 5 43
Liverpool 25 12 6 7 36 29 7 42
West_Ham 25 10 8 7 36 28 8 38
Swansea_City 26 10 7 9 30 34 -4 37
Stoke_City 26 10 6 10 30 34 -4 36
<!DOCTYPE html>
<head>
<title>d3js workshop - bar chart</title>
<script src="http://d3js.org/d3.v3.js"></script> <!-- import D3 library -->
</head>
<body>
<script type="text/javascript">
// this is a modified version of Mike's example here: http://bost.ocks.org/mike/bar/2/
// for this example we will draw rectangles for each bar
// the length of the bar chart will be number of points for each team and we will add a button to change it to wins
// we will learn about axes and scales and will review what we have learned so far
// initial variables
var dataPath = "2015.02.21.PremierLeagueTable.csv",
width = 420,
barHeight = 20,
padding = 1;
// this is a linear scale for x
var x = d3.scale.linear()
.range([0, width]); // set the range between 0 and width of the graph
// read data using d3.csv
d3.csv(dataPath, function(data){
// let's see the data first
// console.log(data);
// coerce values to numbers
// this is javascript - has nothing to do with d3
data.map(function(d){d.PTS = +d.PTS;});
// before we want to draw the rectangles we need to set the domain for the scale
// so we can use the scale to generate the width of each bar
// we want the length to be based on the points of each team so I return d.PTS
// to set the maximum value
x.domain([0, d3.max(data, function(d){ return d.PTS;})]);
// now that the scale is ready let's add an svg first and set it's height and width
// Note: chart in this case is an svg! naming in d3 examples can be really confusing
// so make sure to name your object carefully
var chart = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', data.length * barHeight); // set height based on length of data
// start drawing the bar chart
// here bar will be list of groups which will include the rectangle and the text!
// and I didn't name it bars - this is the common practice in d3js world so you better get used to it
var bar = chart.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; }); // move each bar to it's position
// append a rectangle to each group
// note that since the group is already positioned you don't need to move the rectangles
bar.append("rect")
.attr("width", function(d) { return x(d.PTS); }) // here we are using the scale that we created up there
.attr("height", barHeight - padding); // 1 is the padding value so the bars don't touch each other
// let's add the text and celeberate the almost end of this example
bar.append("text")
.attr("x", function(d) { return x(d.PTS) - 20; }) // move the text to the end of the chart
.attr("y", barHeight / 2) // and move the insertion point to the center of the bar
.attr("dy", ".35em")
.text(function(d) { return d.PTS; });
// well! can you see the text? try d3.selectAll('text') to see if they are created
// try to color the rectangles based on number of number of wins (d.W)
// you need to create a color scale and then use it to color the rectangles - similar to current approach for width
// finally try to add a tooltip to show the name of the team once you hover the mouse on top of each bar
bar.append("title").text(function(d){return d.Team} )
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment