Built with blockbuilder.org
forked from mostaphaRoudsari's block: 07_workshop_horizontal bar chart solved
Created
October 19, 2017 14:15
-
-
Save Vyrwn/7d3069f5328501e11cbd14856957f3a5 to your computer and use it in GitHub Desktop.
07_workshop_horizontal bar chart solved
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <title>d3js workshop - bar chart</title> | |
| <script src="http://d3js.org/d3.v3.js"></script> <!-- import D3 library --> | |
| </head> | |
| <style type="text/css"> | |
| text { | |
| fill: white; | |
| font: 10px sans-serif; | |
| text-anchor: end; | |
| } | |
| </style> | |
| <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; | |
| // 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 | |
| var color = d3.scale.linear() | |
| .range(["blue", "red"]); // set the color range | |
| // 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; | |
| d.W = +d.W; | |
| }); | |
| // 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;})]); | |
| color.domain([d3.min(data, function(d){ return d.W;}), d3.max(data, function(d){ return d.W;})]); // set the domain based on number of wins | |
| // 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 - 1) // 1 is the padding value so the bars don't touch each other | |
| .style("fill", function(d){return color(d.W);}); | |
| // let's add the text and celeberate the almost end of this example | |
| bar.append("text") | |
| .attr("x", function(d) { return x(d.PTS) - 3; }) // 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;}); | |
| // add title to bars - browser will take care of tooltip | |
| 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