xxxxxxxxxx<html><head> <title>Omid Kashan — Module 5</title> <style type="text/css"> * { box-sizing: border-box; font-family:sans-serif;} body, html, h1, h2, h3, h4, h5, h6, figure, blockquote, ul, ol, li, p {margin:0;padding:0} p {margin-bottom:50px;} #main {padding:20px;} h1 {font-weight: normal;} #viz {max-width:800px;height:200px;overflow:visible;margin-left:40px} svg g .bar+text {text-align: center;fill:black;transform: rotate(-90deg) translate(-120px,-75px);-webkit-transform:rotate(-90deg) translate(-120px,-75px);transform-origin: center center;-webkit-transform-origin:center center;fill:white;letter-spacing: 2px;} svg g rect, svg g circle, svg circle {fill:#F21212 ;transition:transform 0.2s ease-in-out;} svg g circle:hover {fill:black;stroke:#f21212;transition: all 0.2s linear;stroke-width:3;cursor: pointer;} svg g .bar+text {} svg .domain {display: none} svg text {font-size:11px;} svg .tick line {stroke:#aaa;transform:translateX(0)} svg g.y.axis {transform:translateY(300px);} </style></head><body> <div id="main"> <h1>Manchester United</h1> <p>Wins per season since the start of the Premier League.</p> <svg id="viz"></svg> </div> <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script> var i=1,max={},min={},dim={w:600,h:300},viz = d3.select('#viz'),main=d3.select('#main'),bar={width:30},group,scale={},axis={}; window.onload = function() { d3.csv('data.csv',function(data) { //console.log(data); max.w = d3.max(data, function(d) { return +d.w;} ); max.gf = d3.max(data, function(d) { return +d.gf;} ); min.w = d3.min(data, function(d) { return +d.w;} ); min.gf = d3.min(data, function(d) { return +d.gf;} ); //console.log(min.gf,min.w); //scale.h = d3.scale.linear().domain([0,max/3]).range([dim.h,0]); scale.x = d3.scale.linear().domain([min.w,max.w]).range([dim.h,0]); scale.y = d3.scale.linear().domain([Math.ceil(max.gf/100)*100,min.gf]).range([dim.w,0]); viz.attr('width',data.length*30); axis.x = d3.svg.axis().scale(scale.x).orient('left'); axis.y = d3.svg.axis().scale(scale.y).orient('bottom'); //group = viz.selectAll('g').data(data).enter().append('g').attr("transform", function(d, i) { return "translate(" + i*(bar.width + 1)+", 0)"; }); group = viz.selectAll('g').data(data).enter().append('g'); group.append('circle').attr('class','bar').attr('width', bar.width).attr('r',function(d) { return d.streak/2; }).attr("cy", function(d) {return scale.x(d.w); }).attr("cx", function(d) { return scale.y(d.gf); }).append('title').text(function(d) { return d.season + '\nWon '+d.w+'\nStreak '+d.streak+'\nScored '+d.gf+''; }); //group.append('text').text(function(d) { return d.season; }).style("text-anchor", "middle").attr("y", function(d) { return max+10; }).attr('x',function(d) { return scale.h(0)-(dim.h+35); }); viz.append('g').attr('class','x axis').call(axis.x); viz.append('g').attr('class','y axis').call(axis.y); viz.append("text").attr("class", "x label").attr("text-anchor", "middle").attr("x", dim.w/2).attr("y", dim.h + 40).text("Goals scored per season"); viz.append("text").attr("class", "y label").attr("text-anchor", "middle").attr('x',0-(dim.h/2)).attr("y", 10).attr("dy", "-50").attr("transform", "rotate(-90)").text("Matches won per season"); }); }; </script> </body></html> Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js