Built with blockbuilder.org
forked from mostaphaRoudsari's block: 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 |
Built with blockbuilder.org
forked from mostaphaRoudsari's block: 06_workshop_horizontal bar chart
<!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 | |
}); | |
</script> | |
</body> |