xxxxxxxxxx<html><head> <title>Omid Kashan — Module 6</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.x.axis {transform:translateY(300px);} svg g.x.axis text {transform:translate(-12px,25px) rotate(270deg);} svg .axis path, svg .x.axis path {display: none;} svg .line {fill: none;stroke-width: 2;} svg .line.line1 {stroke:#27ae60;} svg .line.line2 {stroke:#f21212;} .swatch {margin-right:10px;} .swatch:before {display: inline-block;width:16px;height:16px;content:"";margin-right:5px;position:relative;top:2px;} .swatch_for:before {background:#27ae60;} .swatch_against:before {background:#f21212;} </style></head><body> <div id="main"> <h1>Manchester United</h1> <p>Wins per season since the start of the Premier League. <br /><br /> <span class="swatch swatch_for">Goals for</span> <span class="swatch swatch_against">Goals against</span> </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={},year,x,y,line,years=[]; window.onload = function() { year = d3.time.format('%Y').parse; x = d3.time.scale().range([0,dim.w]); y = d3.scale.linear().range([dim.h,0]); axis.x = d3.svg.axis().scale(x).orient('bottom'); axis.y = d3.svg.axis().scale(y).orient('left'); d3.csv('data.csv',function(data) { //console.log(data); data.forEach(function(d) { d.seasonStart = year(d.season.substring(0,4)); years.push(d.seasonStart); //console.log(d.seasonStart); }); 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;} ); x.domain(d3.extent(data, function(d) { return d.seasonStart; })); y.domain([0,Math.ceil(max.gf/100)*100]); axis.x.tickValues(years); line1 = d3.svg.line().x(function(d) { return x(d.seasonStart); }).y(function(d) { return y(d.gf); }); line2 = d3.svg.line().x(function(d) { return x(d.seasonStart); }).y(function(d) { return y(d.ga); }); viz.append("path").datum(data).attr("class", "line line1").attr("d", line1); viz.append("path").datum(data).attr("class", "line line2").attr("d", line2); viz.append("g").attr("class", "x axis").attr("transform", "translate(0," + dim.h + ")").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 + 60).text("Season start year"); 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("Goals scored per season"); }); }; </script> </body></html> Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js