xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>Crazy Rhythms History</title> <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> <style type="text/css"> body { font: 10px sans-serif; } .axis { font: 10px sans-serif; fill: #a0a0a0; } .axis path, .axis line { fill: none; stroke: #a0a0a0; shape-rendering: crispEdges; } .x.axis path { display: none; } .line { fill: none; stroke-width: 2px; } #tooltip { font: 14px sans-serif; } </style> </head> <body> <div id="container"> <script type="text/javascript"> //Javascript here //Conventional Margins start var margin = {top: 30, right: 160, bottom: 30, left: 40}; width = 1000 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var svg = d3.select("#container").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); //Conventional Margins end var parseDate = d3.time.format("%Y").parse; //Scales var x = d3.time.scale() .range([0, width]); var y = d3.scale.linear() .range([height, 0]); //Color var color = d3.scale.category10(); //Axes var xAxis = d3.svg.axis() .scale(x) .orient('bottom') .ticks(5); var yAxis = d3.svg.axis() .scale(y) .orient('left'); //Lines var line = d3.svg.line() .x(function(d) { return x(d.Year); }) .y(function(d) { return y(d.Record); }); //Converts to 3-digit decimal var converted = d3.format(".3r"); //Data load and two console logs, before and after the data.map d3.csv('../winPercentage.csv', function(error, data) { //Check it. console.log(data) //Splits into 10 colors by owner color.domain(d3.keys(data[0]).filter(function(key) { return key !== 'Year'; })); data.forEach(function(d) { d.Year = parseDate(d.Year); }); var owners = color.domain().map(function(name) { return { name: name, values: data.map(function(d) { return {Year: d.Year, Record: +d[name]}; }) }; }); //Check it. console.log(owners); //x-Domain corresponds to Years x.domain(d3.extent(data, function(d) {return d.Year; })); //y-Domain to min/max of winPct's y.domain([ d3.min(owners, function(c) { return d3.min(c.values, function(v) { return v.Record; }); }), d3.max(owners, function(c) { return d3.max(c.values, function(v) { return v.Record; }); }) ]) svg.append('g') .attr('class', 'x axis') .attr('transform', 'translate(0,' + height + ')') .call(xAxis) svg.append('g') .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("Win Percentage"); //Selects .owner class (none exist at first) and creates them as needed var owner = svg.selectAll('.owner') .data(owners) .enter().append('g') .attr('class', 'owner'); //Assigns each owner a line and a unique color for it owner.append('path') .attr('class', 'line') .attr('d', function(d) { return line(d.values); }) .style('stroke', function(d) { return color(d.name); }); //Adds a circle to each data node owner.append('g').selectAll('circle') .data(function(d) {return d.values; }) .enter().append('circle') .attr('r', 6) .attr('cx', function(c) { return x(c.Year); }) .attr('cy', function(c) { return y(c.Record); }) .attr('fill', function(d) { return color(this.parentNode.__data__.name); }) .on('mouseover', function(d) { var xTip = parseFloat(d3.select(this).attr('cx')); var yTip = parseFloat(d3.select(this).attr('cy')); svg.append('text') .attr('id', 'tooltip') .attr('x', xTip + 5) .attr('y', yTip - 10) .attr('fill', 'black') .text(converted(d.Record)); }) .on('mouseout', function() { d3.select('#tooltip').remove() }); //Adds the names at the end owner.append("text") .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; }) .attr("transform", function(d) { return "translate(" + x(d.value.Year) + "," + y(d.value.Record) + ")"; }) .attr('class', 'labels') .attr("x", 5) .attr("dy", 15) .attr('fill', function(d) { return color(this.parentNode.__data__.name); }) .text(function(d) { return d.name; }); }); </script> </div> </body></html> Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js