D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
Sokrates86
Full window
Github gist
scatterplot-lines-SAINTS
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } svg { width:100%; height: 100% } .axis path, .axis line { fill: none; stroke: #d3d3d3; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 12px; } </style> </head> <body> <script> //DATA var cardinals =[{"year": 2008, "offense": 4, "defense": 19}, {"year": 2009, "offense": 14, "defense": 20}, {"year": 2010, "offense": 31, "defense": 29}, {"year": 2011, "offense": 19, "defense": 18}, {"year": 2012, "offense": 32, "defense": 12}, {"year": 2013, "offense": 12, "defense": 6}, {"year": 2014, "offense": 24, "defense": 24}, {"year": 2015, "offense": 1, "defense": 5}, ]; var panthers =[{"year": 2008, "offense": 10, "defense": 18}, {"year": 2009, "offense": 19, "defense": 8}, {"year": 2010, "offense": 32, "defense": 18}, {"year": 2011, "offense": 7, "defense": 28}, {"year": 2012, "offense": 26, "defense": 10}, {"year": 2013, "offense": 26, "defense": 2}, {"year": 2014, "offense": 16, "defense": 10}, {"year": 2015, "offense": 11, "defense": 6}, ]; var packers =[{"year": 2008, "offense": 8, "defense": 20}, {"year": 2009, "offense": 6, "defense": 2}, {"year": 2010, "offense": 9, "defense": 5}, {"year": 2011, "offense": 3, "defense": 32}, {"year": 2012, "offense": 13, "defense": 11}, {"year": 2013, "offense": 3, "defense": 25}, {"year": 2014, "offense": 6, "defense": 15}, {"year": 2015, "offense": 23, "defense": 15}, ]; //Tausta-asetukset var margin = {top: 30, right: 20, bottom: 30, left: 30}, w = 900 - margin.left - margin.right h = 500 - margin.top - margin.bottom; var svg = d3.select("body") .append("svg") .attr("width", w + margin.left + margin.right) .attr("height", h + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); //akselisto var xScale = d3.scale.linear() .domain([1,32]) .range([w, 0]) var yScale = d3.scale.linear() .domain([1, 32]) .range([0, h]) var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom") .ticks(32); var yAxis = d3.svg.axis() .scale(yScale) .orient("left") .ticks(32); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + h + ")") .call(xAxis); svg.append("g") .attr("class", "y axis") .attr("transform", "translate(0, 0)") .call(yAxis); //ViivaCardinals var lineFunction = d3.svg.line() .x(function(d) { return xScale(d.offense); }) .y(function(d) { return yScale(d.defense); }) .interpolate("cardinal"); svg.selectAll("#line") .data(cardinals) .enter() .append("path") .attr("d", lineFunction(cardinals)) .attr("stroke", "#A1003E") .attr("stroke-width", 1) .attr("fill", "none") .attr("opacity", 0.1);; //ViivaPanthers var lineFunction = d3.svg.line() .x(function(d) { return xScale(d.offense); }) .y(function(d) { return yScale(d.defense); }) .interpolate("cardinal"); svg.selectAll("#line") .data(panthers) .enter() .append("path") .attr("d", lineFunction(panthers)) .attr("stroke", "#009FD7") .attr("stroke-width", 1) .attr("fill", "none") .attr("opacity", 0.1); //ViivaPackers var lineFunction = d3.svg.line() .x(function(d) { return xScale(d.offense); }) .y(function(d) { return yScale(d.defense); }) .interpolate("cardinal"); svg.selectAll("#line") .data(packers) .enter() .append("path") .attr("d", lineFunction(packers)) .attr("stroke", "#003B2A") .attr("stroke-width", 1) .attr("fill", "none") .attr("opacity", 0.1); //PallotCardinals svg.selectAll("circle") .data(cardinals) .enter() .append("circle") .attr("cx", function(d) { return xScale(d.offense)}) .attr("cy", function(d) { return yScale(d.defense)}) .attr("r", 8) .attr("fill", "white") .attr("stroke-width", 2) .attr("stroke", "#A1003E") .on("mouseover", function(d) { return d3.select(this).attr("fill", "yellow");}) .on("mouseout", function(d) { return d3.select(this).attr("fill", "white");}); svg.selectAll("#labels") .data(cardinals) .enter() .append("text") .text(function(d) { return d.year; }) .attr("x", function(d) { return xScale(d.offense) + 10; }) .attr("y", function(d) { return yScale(d.defense) + 5; }) .attr("font-family", "sans-serif"); //PallotPanthers svg.selectAll("#circle2") .data(panthers) .enter() .append("circle") .attr("cx", function(d) { return xScale(d.offense)}) .attr("cy", function(d) { return yScale(d.defense)}) .attr("r", 8) .attr("fill", "white") .attr("stroke-width", 2) .attr("stroke", "#009FD7") .on("mouseover", function(d) { return d3.select(this).attr("fill", "yellow");}) .on("mouseout", function(d) { return d3.select(this).attr("fill", "white");}); svg.selectAll("#labels") .data(panthers) .enter() .append("text") .text(function(d) { return d.year; }) .attr("x", function(d) { return xScale(d.offense) + 10; }) .attr("y", function(d) { return yScale(d.defense) + 5; }) .attr("font-family", "sans-serif"); //PallotPackers svg.selectAll("#circle2") .data(packers) .enter() .append("circle") .attr("cx", function(d) { return xScale(d.offense)}) .attr("cy", function(d) { return yScale(d.defense)}) .attr("r", 8) .attr("fill", "white") .attr("stroke-width", 2) .attr("stroke", "#003B2A") .on("mouseover", function(d) { return d3.select(this).attr("fill", "yellow");}) .on("mouseout", function(d) { return d3.select(this).attr("fill", "white");}); svg.selectAll("#labels") .data(packers) .enter() .append("text") .text(function(d) { return d.year; }) .attr("x", function(d) { return xScale(d.offense) + 10; }) .attr("y", function(d) { return yScale(d.defense) + 5; }) .attr("font-family", "sans-serif"); </script> </body>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js