Built with blockbuilder.org
xxxxxxxxxx<head> <meta charset="utf-8"> <title>CSS Example</title> <link href="https://fonts.googleapis.com/css?family=Passion+One" rel="stylesheet"> <style> .my-text { font-size: 1.95em; font-family: 'Passion One', cursive; fill: #000000; } .bar:hover { fill: white; } .axis--x path { display: none; } body { background-color: orange; } .axisx text { fill: black; } .axisy text { fill: black; } .axisx line { stroke: black; } .axisy line { stroke: black; } .axisx path { stroke: black; } .axisy path { stroke: black; } </style></head><body> <div id="buttons"> <button id="Actual">Actual</button> <button id="Predicted">Predicted</button> </div> <svg width="1200" height="500"> <text class="my-text" x="330" y="20">EPL PREDICTIONS VERSUS REALITY</text> </svg> <script src="https://d3js.org/d3.v4.min.js"></script> <script> //define svg canvas var svg = d3.select("svg"), margin = { top: 20, right: 10, bottom: 65, left: 110 } //position of axes frame width = +svg.attr("width") - margin.left - margin.right, height = +svg.attr("height") - margin.top - margin.bottom; //next our graph var g = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); d3.csv("EPL 2017-18.csv", function(d) { d.Actual_Finish = +d.Actual_Finish; d.Predicted_Finish = +d.Predicted_Finish; return d; }, function(error, data) { if (error) throw error; data = data; //define our x and y axis scales and variables, remembering we have 2 x variables x = d3.scaleLinear().rangeRound([800, 0]) //experiment with the max numbers to bring the x scale within the margin .domain([0,d3.max(data, function(d) { return d.Actual_Finish; })]); y = d3.scaleBand().rangeRound([0, height]) .padding(0.5).domain(data.map(function(d) { return d.Team; })); //append x axis to svg g.append("g") .style("font", "14px arial") //font and size of x axis labels .attr("class", "axisx") .call(d3.axisBottom(x).ticks(21)) .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)) .append("text") .attr("x", 450) //position of x axis label: x co-ordinate .attr("y", 35) //position of y axis label: y co-ordinate .attr("dx", "1.0em") //also position of X axis label .attr("text-anchor", "middle") .text("League Position"); //append y axis to svg g.append("g") //append y axis to svg .style("font", "14px arial") //font and size of y axis labels .attr("class", "axisy") .call(d3.axisLeft(y).ticks(20)) //no. of ticks on y axis .append("text") .attr("transform", "rotate(-360)") //rotate the axis label text by -90 .attr("y", -20) //position of y axis label .attr("dy", "1.0em") //sets the unit amount the y axis label moves above .attr("text-anchor", "end") .text("Team"); var bars = g.selectAll('.bar') .data(data) .enter().append("rect") .attr("class", "bar") .attr("x", 0) .attr("height", y.bandwidth()) .style("fill", function(d) { // adding colour coding for league position if (d.Actual_Finish == 1) {return "green"} else if (d.Actual_Finish == 6) {return "green"} else if (d.Actual_Finish == 2) {return "pink"} else if (d.Actual_Finish == 3) {return "pink"} else if (d.Actual_Finish == 4) {return "pink"} else if (d.Actual_Finish == 7) {return "pink"} else if (d.Actual_Finish == 10) {return "pink"} else if (d.Actual_Finish == 11) {return "pink"} else if (d.Actual_Finish == 13) {return "pink"} else if (d.Actual_Finish == 14) {return "pink"} else if (d.Actual_Finish == 15) {return "pink"} else if (d.Actual_Finish == 16) {return "pink"} else { return "red" } ;}); //attach Premier league logo var img = g.append("svg:image") .attr("xlink:href", "https://vignette.wikia.nocookie.net/logopedia/images/6/65/Premier_League_%28outline%29.svg/revision/latest?cb=20160813163637") .attr("width", 200) .attr("height", 200) .attr("x", 600) .attr("y",163); //add labels to our bar chart g.selectAll(".text") .data(data) .enter() .append("text") .attr("class","label") .attr("x", (function(d) { return x(d.Actual_Finish); } )) .attr("y", function(d) { return y(d.Team) - 5; }) .attr("dy", "1.25em") .text(function(d) { return d.Actual_Finish; }) .style('fill', 'White'); render('Actual_Finish') function render(which) { bars .transition() .attr("y", function(d) { return y(d.Team); }) .attr("width", function(d) { return x(d[which]) }) } d3.select("#Actual") .on("click", function(d, i) { render('Actual_Finish') }); d3.select("#Predicted") .on("click", function(d, i) { render('Predicted_Finish') }); }); </script></body></html> https://d3js.org/d3.v4.min.js