D3 chart displaying below wordpress page
-
I created a interactive line graph with D3 base on the code below. However when I use the plugin and insert the graph it ends up being displayed below the wordpress page. The chart is properly displayed just below the page. Has anyone encountered this issue before?
// Coordinates for each teams SVG path ———————————————————————
//Florida State
var lineData = [ { “x”: 10, “y”: 10}, { “x”: 20, “y”: 10},
{ “x”: 30, “y”: 10}, { “x”: 40, “y”: 10},
{ “x”: 50, “y”: 10}, { “x”: 60, “y”: 10},
{ “x”: 70, “y”: 10}, { “x”: 80, “y”: 20},
{ “x”: 90, “y”: 20}, { “x”: 100, “y”: 20},
{ “x”: 110, “y”: 20}, { “x”: 120, “y”: 30},
{ “x”: 130, “y”: 30}, { “x”: 140, “y”: 30},
{ “x”: 150, “y”: 40}, { “x”: 160, “y”: 30},
{ “x”: 170, “y”: 60}];
//Alabama
var lineData2 = [{ “x”: 10, “y”: 20}, { “x”: 20, “y”: 20},
{ “x”: 30, “y”: 30}, { “x”: 40, “y”: 30},
{ “x”: 50, “y”: 30}, { “x”: 60, “y”: 30},
{ “x”: 70, “y”: 70}, { “x”: 80, “y”: 70},
{ “x”: 90, “y”: 40}, { “x”: 100, “y”: 60},
{ “x”: 110, “y”: 50}, { “x”: 120, “y”: 50},
{ “x”: 130, “y”: 10}, { “x”: 140, “y”: 10},
{ “x”: 150, “y”: 10}, { “x”: 160, “y”: 10},
{ “x”: 170, “y”: 40}];;
//Oregon
var lineData3 = [{ “x”: 10, “y”: 30}, { “x”: 20, “y”: 30},
{ “x”: 30, “y”: 20}, { “x”: 40, “y”: 20},
{ “x”: 50, “y”: 20}, { “x”: 60, “y”: 20},
{ “x”: 70, “y”: 110}, { “x”: 80, “y”: 90},
{ “x”: 90, “y”: 60}, { “x”: 100, “y”: 50},
{ “x”: 110, “y”: 40}, { “x”: 120, “y”: 20},
{ “x”: 130, “y”: 20}, { “x”: 140, “y”: 20},
{ “x”: 150, “y”: 20}, { “x”: 160, “y”: 20},
{ “x”: 170, “y”: 20}];//Oklahoma
var lineData4 = [{ “x”: 10, “y”: 40}, { “x”: 20, “y”: 40},
{ “x”: 30, “y”: 40}, { “x”: 40, “y”: 40},
{ “x”: 50, “y”: 40}, { “x”: 60, “y”: 40},
{ “x”: 70, “y”: 110}, { “x”: 80, “y”: 110},
{ “x”: 90, “y”: 110}, { “x”: 100, “y”: 110},
{ “x”: 110, “y”: 110}, { “x”: 120, “y”: 110},
{ “x”: 130, “y”: 110}, { “x”: 140, “y”: 110},
{ “x”: 150, “y”: 110}, { “x”: 160, “y”: 110},
{ “x”: 170, “y”: 110}];//Ohio State
var lineData5 = [{ “x”: 10, “y”: 50}, { “x”: 20, “y”: 80},
{ “x”: 30, “y”: 110}, { “x”: 40, “y”: 110},
{ “x”: 50, “y”: 110}, { “x”: 60, “y”: 110},
{ “x”: 70, “y”: 110}, { “x”: 80, “y”: 110},
{ “x”: 90, “y”: 110}, { “x”: 100, “y”: 110},
{ “x”: 110, “y”: 110}, { “x”: 120, “y”: 80},
{ “x”: 130, “y”: 60}, { “x”: 140, “y”: 60},
{ “x”: 150, “y”: 50}, { “x”: 160, “y”: 40},
{ “x”: 170, “y”: 10}];//Auburn
var lineData6 = [{ “x”: 10, “y”: 60}, { “x”: 20, “y”: 50},
{ “x”: 30, “y”: 50}, { “x”: 40, “y”: 50},
{ “x”: 50, “y”: 50}, { “x”: 60, “y”: 50},
{ “x”: 70, “y”: 20}, { “x”: 80, “y”: 60},
{ “x”: 90, “y”: 50}, { “x”: 100, “y”: 30},
{ “x”: 110, “y”: 30}, { “x”: 120, “y”: 90},
{ “x”: 130, “y”: 110}, { “x”: 140, “y”: 110},
{ “x”: 150, “y”: 110}, { “x”: 160, “y”: 110},
{ “x”: 170, “y”: 110}];//UCLA
var lineData7 = [{ “x”: 10, “y”: 70}, { “x”: 20, “y”: 110},
{ “x”: 30, “y”: 110}, { “x”: 40, “y”: 110},
{ “x”: 50, “y”: 110}, { “x”: 60, “y”: 80},
{ “x”: 70, “y”: 110}, { “x”: 80, “y”: 110},
{ “x”: 90, “y”: 110}, { “x”: 100, “y”: 110},
{ “x”: 110, “y”: 110}, { “x”: 120, “y”: 110},
{ “x”: 130, “y”: 90}, { “x”: 140, “y”: 80},
{ “x”: 150, “y”: 110}, { “x”: 160, “y”: 110},
{ “x”: 170, “y”: 100}];//Michigan State
var lineData8 = [{ “x”: 10, “y”: 80}, { “x”: 20, “y”: 70},
{ “x”: 30, “y”: 110}, { “x”: 40, “y”: 110},
{ “x”: 50, “y”: 90}, { “x”: 60, “y”: 100},
{ “x”: 70, “y”: 80}, { “x”: 80, “y”: 80},
{ “x”: 90, “y”: 80}, { “x”: 100, “y”: 80},
{ “x”: 110, “y”: 80}, { “x”: 120, “y”: 110},
{ “x”: 130, “y”: 110}, { “x”: 140, “y”: 100},
{ “x”: 150, “y”: 80}, { “x”: 160, “y”: 80},
{ “x”: 170, “y”: 50}];//South Carolina
var lineData9 = [{ “x”: 10, “y”: 90}, { “x”: 20, “y”: 110},
{ “x”: 30, “y”: 110}, { “x”: 40, “y”: 110},
{ “x”: 50, “y”: 110}, { “x”: 60, “y”: 110},
{ “x”: 70, “y”: 110}, { “x”: 80, “y”: 110},
{ “x”: 90, “y”: 110}, { “x”: 100, “y”: 110},
{ “x”: 110, “y”: 110}, { “x”: 120, “y”: 110},
{ “x”: 130, “y”: 110}, { “x”: 140, “y”: 110},
{ “x”: 150, “y”: 110}, { “x”: 160, “y”: 110},
{ “x”: 170, “y”: 110}];//Baylor
var lineData10 = [{ “x”: 10, “y”: 100}, { “x”: 20, “y”: 100},
{ “x”: 30, “y”: 80}, { “x”: 40, “y”: 70},
{ “x”: 50, “y”: 70}, { “x”: 60, “y”: 70},
{ “x”: 70, “y”: 50}, { “x”: 80, “y”: 40},
{ “x”: 90, “y”: 110}, { “x”: 100, “y”: 110},
{ “x”: 110, “y”: 110}, { “x”: 120, “y”: 70},
{ “x”: 130, “y”: 70}, { “x”: 140, “y”: 70},
{ “x”: 150, “y”: 60}, { “x”: 160, “y”: 50},
{ “x”: 170, “y”: 70}];//Georgia
var lineData11 = [{ “x”: 10, “y”: 110}, { “x”: 20, “y”: 60},
{ “x”: 30, “y”: 60}, { “x”: 40, “y”: 110},
{ “x”: 50, “y”: 110}, { “x”: 60, “y”: 110},
{ “x”: 70, “y”: 110}, { “x”: 80, “y”: 100},
{ “x”: 90, “y”: 90}, { “x”: 100, “y”: 110},
{ “x”: 110, “y”: 110}, { “x”: 120, “y”: 110},
{ “x”: 130, “y”: 100}, { “x”: 140, “y”: 90},
{ “x”: 150, “y”: 110}, { “x”: 160, “y”: 110},
{ “x”: 170, “y”: 90}];//Texas A&M
var lineData12 = [{ “x”: 10, “y”: 110}, { “x”: 20, “y”: 90},
{ “x”: 30, “y”: 70}, { “x”: 40, “y”: 60},
{ “x”: 50, “y”: 60}, { “x”: 60, “y”: 60},
{ “x”: 70, “y”: 110}, { “x”: 80, “y”: 100},
{ “x”: 90, “y”: 110}, { “x”: 100, “y”: 110},
{ “x”: 110, “y”: 110}, { “x”: 120, “y”: 110},
{ “x”: 130, “y”: 100}, { “x”: 140, “y”: 110},
{ “x”: 150, “y”: 110}, { “x”: 160, “y”: 110},
{ “x”: 170, “y”: 110}];//USC
var lineData13 = [{ “x”: 10, “y”: 110}, { “x”: 20, “y”: 110},
{ “x”: 30, “y”: 90}, { “x”: 40, “y”: 110},
{ “x”: 50, “y”: 110}, { “x”: 60, “y”: 110},
{ “x”: 70, “y”: 110}, { “x”: 80, “y”: 110},
{ “x”: 90, “y”: 110}, { “x”: 100, “y”: 110},
{ “x”: 110, “y”: 110}, { “x”: 120, “y”: 110},
{ “x”: 130, “y”: 110}, { “x”: 140, “y”: 110},
{ “x”: 150, “y”: 110}, { “x”: 160, “y”: 110},
{ “x”: 170, “y”: 110}];//LSU
var lineData14 = [{ “x”: 10, “y”: 110}, { “x”: 20, “y”: 110},
{ “x”: 30, “y”: 100}, { “x”: 40, “y”: 80},
{ “x”: 50, “y”: 110}, { “x”: 60, “y”: 110},
{ “x”: 70, “y”: 110}, { “x”: 80, “y”: 110},
{ “x”: 90, “y”: 110}, { “x”: 100, “y”: 110},
{ “x”: 110, “y”: 110}, { “x”: 120, “y”: 110},
{ “x”: 130, “y”: 110}, { “x”: 140, “y”: 110},
{ “x”: 150, “y”: 110}, { “x”: 160, “y”: 110},
{ “x”: 170, “y”: 110}];//Notre Dame
var lineData15 = [{ “x”: 10, “y”: 110}, { “x”: 20, “y”: 110},
{ “x”: 30, “y”: 110}, { “x”: 40, “y”: 90},
{ “x”: 50, “y”: 80}, { “x”: 60, “y”: 90},
{ “x”: 70, “y”: 60}, { “x”: 80, “y”: 50},
{ “x”: 90, “y”: 70}, { “x”: 100, “y”: 100},
{ “x”: 110, “y”: 100}, { “x”: 120, “y”: 110},
{ “x”: 130, “y”: 110}, { “x”: 140, “y”: 110},
{ “x”: 150, “y”: 110}, { “x”: 160, “y”: 110},
{ “x”: 170, “y”: 110}];//Ole Miss
var lineData16 = [{ “x”: 10, “y”: 110}, { “x”: 20, “y”: 110},
{ “x”: 30, “y”: 110}, { “x”: 40, “y”: 100},
{ “x”: 50, “y”: 100}, { “x”: 60, “y”: 110},
{ “x”: 70, “y”: 40}, { “x”: 80, “y”: 30},
{ “x”: 90, “y”: 30}, { “x”: 100, “y”: 40},
{ “x”: 110, “y”: 110}, { “x”: 120, “y”: 100},
{ “x”: 130, “y”: 80}, { “x”: 140, “y”: 110},
{ “x”: 150, “y”: 110}, { “x”: 160, “y”: 90},
{ “x”: 170, “y”: 110}];//Mississippi State
var lineData17 = [{ “x”: 10, “y”: 110}, { “x”: 20, “y”: 110},
{ “x”: 30, “y”: 110}, { “x”: 40, “y”: 110},
{ “x”: 50, “y”: 110}, { “x”: 60, “y”: 110},
{ “x”: 70, “y”: 30}, { “x”: 80, “y”: 10},
{ “x”: 90, “y”: 10}, { “x”: 100, “y”: 10},
{ “x”: 110, “y”: 10}, { “x”: 120, “y”: 10},
{ “x”: 130, “y”: 40}, { “x”: 140, “y”: 40},
{ “x”: 150, “y”: 100}, { “x”: 160, “y”: 70},
{ “x”: 170, “y”: 110}];//TCU
var lineData18 = [{ “x”: 10, “y”: 110}, { “x”: 20, “y”: 110},
{ “x”: 30, “y”: 110}, { “x”: 40, “y”: 110},
{ “x”: 50, “y”: 110}, { “x”: 60, “y”: 110},
{ “x”: 70, “y”: 90}, { “x”: 80, “y”: 110},
{ “x”: 90, “y”: 100}, { “x”: 100, “y”: 70},
{ “x”: 110, “y”: 60}, { “x”: 120, “y”: 40},
{ “x”: 130, “y”: 50}, { “x”: 140, “y”: 50},
{ “x”: 150, “y”: 30}, { “x”: 160, “y”: 60},
{ “x”: 170, “y”: 30}];//Arizona
var lineData19 = [{ “x”: 10, “y”: 110}, { “x”: 20, “y”: 110},
{ “x”: 30, “y”: 110}, { “x”: 40, “y”: 110},
{ “x”: 50, “y”: 110}, { “x”: 60, “y”: 110},
{ “x”: 70, “y”: 100}, { “x”: 80, “y”: 110},
{ “x”: 90, “y”: 110}, { “x”: 100, “y”: 110},
{ “x”: 110, “y”: 110}, { “x”: 120, “y”: 110},
{ “x”: 130, “y”: 110}, { “x”: 140, “y”: 110},
{ “x”: 150, “y”: 70}, { “x”: 160, “y”: 100},
{ “x”: 170, “y”: 110}];//Kansas State
var lineData20 = [{ “x”: 10, “y”: 110}, { “x”: 20, “y”: 110},
{ “x”: 30, “y”: 110}, { “x”: 40, “y”: 110},
{ “x”: 50, “y”: 110}, { “x”: 60, “y”: 110},
{ “x”: 70, “y”: 110}, { “x”: 80, “y”: 110},
{ “x”: 90, “y”: 110}, { “x”: 100, “y”: 90},
{ “x”: 110, “y”: 70}, { “x”: 120, “y”: 110},
{ “x”: 130, “y”: 110}, { “x”: 140, “y”: 110},
{ “x”: 150, “y”: 90}, { “x”: 160, “y”: 110},
{ “x”: 170, “y”: 110}];//Arizona State
var lineData21 = [{ “x”: 10, “y”: 110}, { “x”: 20, “y”: 110},
{ “x”: 30, “y”: 110}, { “x”: 40, “y”: 110},
{ “x”: 50, “y”: 110}, { “x”: 60, “y”: 110},
{ “x”: 70, “y”: 110}, { “x”: 80, “y”: 110},
{ “x”: 90, “y”: 110}, { “x”: 100, “y”: 110},
{ “x”: 110, “y”: 90}, { “x”: 120, “y”: 60},
{ “x”: 130, “y”: 110}, { “x”: 140, “y”: 110},
{ “x”: 150, “y”: 110}, { “x”: 160, “y”: 110},
{ “x”: 170, “y”: 110}];//Georgia Tech
var lineData22 = [{ “x”: 10, “y”: 110}, { “x”: 20, “y”: 110},
{ “x”: 30, “y”: 110}, { “x”: 40, “y”: 110},
{ “x”: 50, “y”: 110}, { “x”: 60, “y”: 110},
{ “x”: 70, “y”: 110}, { “x”: 80, “y”: 110},
{ “x”: 90, “y”: 110}, { “x”: 100, “y”: 110},
{ “x”: 110, “y”:110}, { “x”: 120, “y”: 110},
{ “x”: 130, “y”: 110}, { “x”: 140, “y”: 110},
{ “x”: 150, “y”: 110}, { “x”: 160, “y”: 110},
{ “x”: 170, “y”: 80}];//Create SVG Container ———————————————————————————
var svgContainer = d3.select(“body”).append(“svg”)
.attr(“width”, 1100)
.attr(“height”, 1100)
.attr(“padding”, 200);// Create Axis —————————————————————————————–
//Create the Scale we will use for the Axis
var xaxisScale = d3.scale.linear()
.domain([0, 17])
.range([0, 750]);
var yaxisScale = d3.scale.linear()
.domain([0, 11])
.range([0, 375]);//Create the Axis
var xAxis = d3.svg.axis()
.scale(xaxisScale)
.orient(“bottom”)
.ticks(17)
.tickValues([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]);
var yAxis = d3.svg.axis()
.scale(yaxisScale)
.orient(“left”)
.ticks(11)
.tickValues([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);//Create an SVG group Element for the Axis elements and call the xAxis function
var xAxisGroup = svgContainer.append(“g”)
.attr(“transform”, “translate(0,” + 375 + “)”)
.call(xAxis);
var yAxisGroup = svgContainer.append(“g”)
.attr(“transform”, “translate(0” + 40 + “,0)”)
.call(yAxis);//Scale x-Axis
var xscale = d3.scale.linear()
.domain([0, 170])
.range([0, 750])//Scale y-Axis
var yscale = d3.scale.linear()
.domain([0, 110])
.range([0, 375])//Accessor function
var lineFunction = d3.svg.line()
.x(function(d) { return xscale(d.x); })
.y(function(d) { return yscale(d.y); })
.interpolate(“linear”);// Draw paths ——————————————————————————————
//Florida State
var lineGraph = svgContainer.append(“path”)
.attr(“d”, lineFunction(lineData))
.attr(“stroke”, “maroon”)
.attr(“stroke-width”, 2)
.attr(“fill”, “none”)
.on(“mouseover”, function(){d3.select(this)
.style(“stroke”, “khaki”)
.style(“stroke-width”,5)
.moveToFront()
.append(“svg:title”)
.text(function(d) { return “FLORIDA STATE \nWeek 1 – W 37-31 Oklahoma State \nWeek 2 – W 37-12 The Citadel \nWeek 3 – Bye \nWeek 4 – W 23-17(OT) Clemson \nWeek 5 – W 56-41 North Carolina State \nWeek 6 – W 43-3 Wake Forest \nWeek 7 – W 38-20 Syracuse \nWeek 8 – W 31-27 Notre Dame \nWeek 9 – Bye \nWeek 10 – W 42-31 Louisville \nWeek 11 – W 34-20 Virginia \nWeek 12 – W 30-26 Miami \nWeek 13 – W 20-17 Boston College \nWeek 14 – W 24-19 Florida \nWeek 15 – W 37-35 Georgia Tech \nWeek 16 – L 20-59 Oregon \nWeek 17 – NA”}); ;})
.on(“mouseout”, function(){d3.select(this)
.style(“stroke”, “maroon”)
.style(“stroke-width”,2);});//Alabama
var lineGraph = svgContainer.append(“path”)
.attr(“d”, lineFunction(lineData2))
.attr(“stroke”, “darkred”)
.attr(“stroke-width”, 2)
.attr(“fill”, “none”)
.on(“mouseover”, function(){d3.select(this)
.style(“stroke”, “gray”)
.style(“stroke-width”,5)
.moveToFront()
.append(“svg:title”)
.text(function(d) { return “ALABAMA \nWeek 1 – W 33-23 West Virginia \nWeek 2 – W 41-0 Florida Atlantic \nWeek 3 – W 52-12 Southern Mississippi \nWeek 4 – W 42-21 Florida \nWeek 5 – Bye \nWeek 6 – L 17-23 Ole Miss \nWeek 7 – W 14-13 Arkansas \nWeek 8 – W 59-0 Texas A&M \nWeek 9 – W 34-20 Tennessee \nWeek 10 – Bye \nWeek 11 – W 20-13 LSU \nWeek 12 – W 25-20 Mississippi State \nWeek 13 – W 48-14 Western Carolina \nWeek 14 – W 55-44 Auburn \nWeek 15 – W 42-13 Missouri \nWeek 16 – L 35-42 Ohio State \nWeek 17 – NA”}); ;})
.on(“mouseout”, function(){d3.select(this)
.style(“stroke”, “maroon”)
.style(“stroke-width”,2);});// Oregon
var lineGraph = svgContainer.append(“path”)
.attr(“d”, lineFunction(lineData3))
.attr(“stroke”, “green”)
.attr(“stroke-width”, 2)
.attr(“fill”, “none”)
.on(“mouseover”, function(){d3.select(this)
.style(“stroke”, “yellow”)
.style(“stroke-width”,5)
.moveToFront()
.append(“svg:title”)
.text(function(d) { return “OREGON \nWeek 1 – W 62-13 South Dakota \nWeek 2 – W 46-27 Michigan State \nWeek 3 – W 48-14 Wyoming \nWeek 4 – W 38-31 Washington State \nWeek 5 – Bye \nWeek 6 – L 24-31 Arizona \nWeek 7 – W 42-30 UCLA \nWeek 8 – W 45-20 Washington \nWeek 9 – W 59-41 California \nWeek 10 – W 45-16 Stanford \nWeek 11 – W 51-27 Utah \nWeek 12 – Bye \nWeek 13 – W 44-10 Colorado \nWeek 14 – W 47-19 Oregon State \nWeek 15 – W 51-13 Arizona \nWeek 16 – W 59-20 Florida State \nWeek 17 – L 20-42 Ohio State”}); ;})
.on(“mouseout”, function(){d3.select(this)
.style(“stroke”, “green”)
.style(“stroke-width”,2);});// Oklahoma
var lineGraph = svgContainer.append(“path”)
.attr(“d”, lineFunction(lineData4))
.attr(“stroke”, “maroon”)
.attr(“stroke-width”, 2)
.attr(“fill”, “none”)
.on(“mouseover”, function(){d3.select(this)
.style(“stroke”, “gray”)
.style(“stroke-width”,5)
.moveToFront()
.append(“svg:title”)
.text(function(d) { return “OKLAHOMA \nWeek 1 – W 48-16 Louisiana Tech \nWeek 2 – W 52-7 Tulsa \nWeek 3 – W 34-10 Tennessee \nWeek 4 – W 45-33 West Virginia \nWeek 5 – Bye \nWeek 6 – L 33-37 TCU \nWeek 7 – W 31-26 Texas \nWeek 8 – L 30-31 Kansas State \nWeek 9 – Bye \nWeek 10 – W 59-14 Iowa State \nWeek 11 – L 14-48 Baylor \nWeek 12 – W 42-30 Texas Tech \nWeek 13 – W 44-7 Kansas \nWeek 14 – L 35-38(OT) Oklahoma State \nWeek 15 – Bye \nWeek 16 – L 6-40 Clemson \nWeek 17 – NA”}); ;})
.on(“mouseout”, function(){d3.select(this)
.style(“stroke”, “maroon”)
.style(“stroke-width”,2);});
// Ohio State
var lineGraph = svgContainer.append(“path”)
.attr(“d”, lineFunction(lineData5))
.attr(“stroke”, “red”)
.attr(“stroke-width”, 2)
.attr(“fill”, “none”)
.on(“mouseover”, function(){d3.select(this)
.style(“stroke”, “silver”)
.style(“stroke-width”,5)
.moveToFront()
.append(“svg:title”)
.text(function(d) { return “OHIO STATE \nWeek 1 – W 34-17 Navy \nWeek 2 – L 21-35 Virginia Tech \nWeek 3 – W 66-0 Kent State\nWeek 4 – Bye \nWeek 5 – W 50-28 Cincinnati \nWeek 6 – W 52-24 Maryland \nWeek 7 – Bye \nWeek 8 – W 56-17 Rutgers\nWeek 9 – W 31-24(2OT) Penn State \nWeek 10 – W 55-14 Illinois \nWeek 11 – W 49-37 Michigan State \nWeek 12 – W 31-24 Minnesota \nWeek 13 – W 42-27 Indiana \nWeek 14 – W 42-28 Michigan \nWeek 15 – W 59-0 Wisconsin\nWeek 16 – W 42-35 Alabama \nWeek 17 – W 42-20 Oregon”}); ;})
.on(“mouseout”, function(){d3.select(this)
.style(“stroke”, “red”)
.style(“stroke-width”,2);});
// Auburn
var lineGraph = svgContainer.append(“path”)
.attr(“d”, lineFunction(lineData6))
.attr(“stroke”, “navy”)
.attr(“stroke-width”, 2)
.attr(“fill”, “none”)
.on(“mouseover”, function(){d3.select(this)
.style(“stroke”, “darkorange”)
.style(“stroke-width”,5)
.moveToFront()
.append(“svg:title”)
.text(function(d) { return “AUBURN \nWeek 1 – W 45-21 Arkansas \nWeek 2 – W 59-13 San Jose State \nWeek 3 – Bye \nWeek 4 – W 20-14 Kansas State \nWeek 5 – W 45-17 Louisiana Tech \nWeek 6 – W 41-7 LSU \nWeek 7 – L 23-38 Mississippi State \nWeek 8 – Bye \nWeek 9 – W 42-35 South Carolina \nWeek 10 – W 35-31 Ole Miss \nWeek 11 – L 38-41 Texas A&M \nWeek 12 – L 7-34 Georgia \nWeek 13 – W 31-7 Samford \nWeek 14 – L 44-55 Alabama \nWeek 15 – Bye \nWeek 16 – L 31-34(OT) Wisconsin \nWeek 17 – NA”}); ;})
.on(“mouseout”, function(){d3.select(this)
.style(“stroke”, “navy”)
.style(“stroke-width”,2);});
// UCLA
var lineGraph = svgContainer.append(“path”)
.attr(“d”, lineFunction(lineData7))
.attr(“stroke”, “dodgerblue”)
.attr(“stroke-width”, 2)
.attr(“fill”, “none”)
.on(“mouseover”, function(){d3.select(this)
.style(“stroke”, “khaki”)
.style(“stroke-width”,5)
.moveToFront()
.append(“svg:title”)
.text(function(d) { return “UCLA \nWeek 1 – W 28-20 Virginia \nWeek 2 – W 42-35 Memphis \nWeek 3 – W 20-17 Texas \nWeek 4 – Bye \nWeek 5 – W 62-27 Arizona State \nWeek 6 – L 28-30 Utah \nWeek 7 – L 30-42 Oregon \nWeek 8 – W 36-34 California \nWeek 9 – W 40-37(2OT) Colorado \nWeek 10 – W 17-7 Arizona \nWeek 11 – W 44-30 Washington \nWeek 12 – Bye \nWeek 13 – W 38-20 USC \nWeek 14 – L 10-31 Stanford \nWeek 15 – Bye \nWeek 16 – W 40-35 Kansas State \nWeek 17 – NA”}); ;})
.on(“mouseout”, function(){d3.select(this)
.style(“stroke”, “dodgerblue”)
.style(“stroke-width”,2);});
// Michigan State
var lineGraph = svgContainer.append(“path”)
.attr(“d”, lineFunction(lineData8))
.attr(“stroke”, “darkgreen”)
.attr(“stroke-width”, 2)
.attr(“fill”, “none”)
.on(“mouseover”, function(){d3.select(this)
.style(“stroke”, “gray”)
.style(“stroke-width”,5)
.moveToFront()
.append(“svg:title”)
.text(function(d) { return “Michigan State \nWeek 1 – W 45-7 Jacksonville State \nWeek 2 – L 27-46 Oregon \nWeek 3 – Bye \nWeek 4 – W 73-14 Eastern Michigan \nWeek 5 – W 56-14 Wyoming \nWeek 6 – W 27-22 Nebraska \nWeek 7 – W 45-31 Purdue \nWeek 8 – W 56-17 Indiana \nWeek 9 – W 35-11 Michigan \nWeek 10 – Bye \nWeek 11 – L 37-49 Ohio State \nWeek 12 – W 15-37 Maryland \nWeek 13 – W 45-3 Rutgers \nWeek 14 – W 34-10 Penn State \nWeek 15 – Bye \nWeek 16 – W 42-41 Baylor \nWeek 17 – NA”}); ;})
.on(“mouseout”, function(){d3.select(this)
.style(“stroke”, “darkgreen”)
.style(“stroke-width”,2);});
// South Carolina
var lineGraph = svgContainer.append(“path”)
.attr(“d”, lineFunction(lineData9))
.attr(“stroke”, “black”)
.attr(“stroke-width”, 2)
.attr(“fill”, “none”)
.on(“mouseover”, function(){d3.select(this)
.style(“stroke”, “firebrick”)
.style(“stroke-width”,5)
.moveToFront()
.append(“svg:title”)
.text(function(d) { return “South Carolina \nWeek 1 – L 28-52 Texas A&M \nWeek 2 – W 33-23 East Carolina \nWeek 3 – W 35-38 Georgia \nWeek 4 – W 48-34 Vanderbilt \nWeek 5 – L 20-21 Missouri \nWeek 6 – L 38-45 Kentucky \nWeek 7 – Bye \nWeek 8 – W 41-10 Furman \nWeek 9 – W 35-42 Aubun \nWeek 10 – L 42-45(OT) Tennessee \nWeek 11 – Bye \nWeek 12 – W 23-20(OT) Florida \nWeek 13 – W 37-12 South Alabama \nWeek 14 – L 17-35 Clemson \nWeek 15 – Bye \nWeek 16 – W 24-21 Miami \nWeek 17 – NA”}); ;})
.on(“mouseout”, function(){d3.select(this)
.style(“stroke”, “black”)
.style(“stroke-width”,2);});// Baylor
var lineGraph = svgContainer.append(“path”)
.attr(“d”, lineFunction(lineData10))
.attr(“stroke”, “darkgreen”)
.attr(“stroke-width”, 2)
.attr(“fill”, “none”)
.on(“mouseover”, function(){d3.select(this)
.style(“stroke”, “khaki”)
.style(“stroke-width”,5)
.moveToFront()
.append(“svg:title”)
.text(function(d) { return “BAYLOR \nWeek 1 – W 45-0 SMU \nWeek 2 – W 70-6 Northwestern State \nWeek 3 – W 63-21 Buffalo \nWeek 4 – Bye \nWeek 5 W 49-28 Iowa State \nWeek 6 – W 28-7 Texas \nWeek 7 – W 61-58 TCU \nWeek 8 – L 27-41 West Virginia \nWeek 9 – Bye \nWeek 10 – W 60-14 Kansas \nWeek 11 – W 48-14 Oklahoma \nWeek 12 – W 49-28 Oklahoma State \nWeek 13 – W 48-46 Texas Tech \nWeek 14 – W 38-27 Kansas State \nWeek 15 – Bye \nWeek 16 – L 41-42 Michigan State \nWeek 17 – NA”}); ;})
.on(“mouseout”, function(){d3.select(this)
.style(“stroke”, “darkgreen”)
.style(“stroke-width”,2);});// Georgia
var lineGraph = svgContainer.append(“path”)
.attr(“d”, lineFunction(lineData11))
.attr(“stroke”, “red”)
.attr(“stroke-width”, 2)
.attr(“fill”, “none”)
.on(“mouseover”, function(){d3.select(this)
.style(“stroke”, “black”)
.style(“stroke-width”,5)
.moveToFront()
.append(“svg:title”)
.text(function(d) { return “Georgia \nWeek 1 – W 45-21 Clemson \nWeek 2 – Bye \nWeek 3 – L 35-38 South Carolina \nWeek 4 – W 66-0 Troy \nWeek 5 – W 35-32 Tennessee \nWeek 6 – W 44-17 Vanderbilt \nWeek 7 – W 34-0 Missouri \nWeek 8 – W 45-32 Arkansas \nWeek 9 – Bye \nWeek 10 – L 20-38 Florida \nWeek 11 – W 63-31 Kentucky \nWeek 12 – W 34-7 Auburn \nWeek 13 – W 55-9 Charlston Southern \nWeek 14 – L 24-30(OT) Georgia Tech \nWeek 15 – Bye \nWeek 16 – W 37-14 Louisville \nWeek 17 – NA”}); ;})
.on(“mouseout”, function(){d3.select(this)
.style(“stroke”, “red”)
.style(“stroke-width”,2);});// Texas A&M
var lineGraph = svgContainer.append(“path”)
.attr(“d”, lineFunction(lineData12))
.attr(“stroke”, “maroon”)
.attr(“stroke-width”, 2)
.attr(“fill”, “none”)
.on(“mouseover”, function(){d3.select(this)
.style(“stroke”, “gray”)
.style(“stroke-width”,5)
.moveToFront()
.append(“svg:title”)
.text(function(d) { return “Texas A&M \nWeek 1 – W 52-28 South Carolina \nWeek 2 – W 73-3 Lamar \nWeek 3 – W 38-10 Rice \nWeek 4 – W 58-6 SMU \nWeek 5 – W 35-28(OT) Arkansas \nWeek 6 – L 31-48 Mississippi State \nWeek 7 – L 20-35 Ole Miss \nWeek 8 – L 0-59 Alabama \nWeek 9 – Bye \nWeek 10 – W 21-16 Louisiana Monroe \nWeek 11 – W 41-38 Auburn \nWeek 12 – L 27-34 Missouri \nWeek 13 – Bye \nWeek 14 – L 23-17 LSU \nWeek 15 – Bye \nWeek 16 – W 45-37 West Virginia \nWeek 17 – NA”}); ;})
.on(“mouseout”, function(){d3.select(this)
.style(“stroke”, “maroon”)
.style(“stroke-width”,2);});// USC
var lineGraph = svgContainer.append(“path”)
.attr(“d”, lineFunction(lineData13))
.attr(“stroke”, “firebrick”)
.attr(“stroke-width”, 2)
.attr(“fill”, “none”)
.on(“mouseover”, function(){d3.select(this)
.style(“stroke”, “gold”)
.style(“stroke-width”,5)
.moveToFront()
.append(“svg:title”)
.text(function(d) { return “USC \nWeek 1 – W 52-13 Fresno State \nWeek 2 – W 13-10 Stanford \nWeek 3 – L 31-37 Boston College \nWeek 4 – Bye \nWeek 5 – W 35-10 Oregon State \nWeek 6 – L 34-38 Arizona State \nWeek 7 – W 28-26 Arizona \nWeek 8 – W 56-2 Colorado \nWeek 9 – L 21-24 Utah \nWeek 10 – W 44-17 Washington State \nWeek 11 – Bye \nWeek 12 – W 38-30 California \nWeek 13 – L 20-38 UCLA \nWeek 14 – W 14-49 Notre Dame \nWeek 15 – Bye \nWeek 16 – W 45-42 Nebraska \nWeek 17 – NA”}); ;})
.on(“mouseout”, function(){d3.select(this)
.style(“stroke”, “firebrick”)
.style(“stroke-width”,2);});// LSU
var lineGraph = svgContainer.append(“path”)
.attr(“d”, lineFunction(lineData14))
.attr(“stroke”, “indigo”)
.attr(“stroke-width”, 2)
.attr(“fill”, “none”)
.on(“mouseover”, function(){d3.select(this)
.style(“stroke”, “yellow”)
.style(“stroke-width”,5)
.moveToFront()
.append(“svg:title”)
.text(function(d) { return “LSU \nWeek 1 – W 24-28 Wisconsin \nWeek 2 – W 56-0 Sam Houston State \nWeek 3 – L 31-0 Louisiana Monroe \nWeek 4 – L 29-34 Mississippi State \nWeek 5 – W 63-7 New Mexico State \nWeek 6 – L 7-41 Auburn \nWeek 7 – W 30-27 Florida \nWeek 8 – W 3-41 Kentucky \nWeek 9 – W 10-7 Ole Miss \nWeek 10 – Bye \nWeek 11 – L 13-20(OT) Alabama \nWeek 12 – L 0-17 Arkansas \nWeek 13 – Bye \nWeek 14 – W 23-17 Texas A&M \nWeek 15 – Bye \nWeek 16 – L 28-31 Notre Dame \nWeek 17 – NA”}); ;})
.on(“mouseout”, function(){d3.select(this)
.style(“stroke”, “indigo”)
.style(“stroke-width”,2);});// Notre Dame
var lineGraph = svgContainer.append(“path”)
.attr(“d”, lineFunction(lineData15))
.attr(“stroke”, “navy”)
.attr(“stroke-width”, 2)
.attr(“fill”, “none”)
.on(“mouseover”, function(){d3.select(this)
.style(“stroke”, “khaki”)
.style(“stroke-width”,5)
.moveToFront()
.append(“svg:title”)
.text(function(d) { return “Notre Dame \nWeek 1 – W 48-17 Rice \nWeek 2 – W 31-0 Michigan \nWeek 3 – W 30-14 Purdue \nWeek 4 – Bye \nWeek 5 – W 15-31 Syracuse \nWeek 6 – W 17-14 Stanford \nWeek 7 – W 50-43 North Carolina \nWeek 8 – L 27-31 Florida State \nWeek 9 – Bye \nWeek 10 – W 49-39 Navy \nWeek 11 – L 31-55 Arizona State \nWeek 12 – L 40-43(OT) Northwestern \nWeek 13 – L 28-31 Louisville \nWeek 14 – L 14-49 USC \nWeek 15 – Bye \nWeek 16 – W 31-28 LSU \nWeek 17 – NA”}); ;})
.on(“mouseout”, function(){d3.select(this)
.style(“stroke”, “navy”)
.style(“stroke-width”,2);});// Ole Miss
var lineGraph = svgContainer.append(“path”)
.attr(“d”, lineFunction(lineData16))
.attr(“stroke”, “navy”)
.attr(“stroke-width”, 2)
.attr(“fill”, “none”)
.on(“mouseover”, function(){d3.select(this)
.style(“stroke”, “red”)
.style(“stroke-width”,5)
.moveToFront()
.append(“svg:title”)
.text(function(d) { return “OLE MISS \nWeek 1 – W 35-13 Boise State \nWeek 2 – W 41-3 Vanderbilt \nWeek 3 – W 56-15 Louisiana Lafayette \nWeek 4 – Bye \nWeek 5 – W 24-3 Memphis \nWeek 6 – W 23-17 Alabama \nWeek 7 – W 35-20 Texas A&M \nWeek 8 – W 34-3 Tennessee \nWeek 9 – L 7-10 LSU \nWeek 10 – L 31-35 Auburn \nWeek 11 – W 48-0 Presbyterian \nWeek 12 – Bye \nWeek 13 – L 0-30 Arkansas \nWeek 14 – W 31-17 Mississippi State \nWeek 15 – Bye \nWeek 16 – L 3-42 TCU \nWeek 17 – NA”}); ;})
.on(“mouseout”, function(){d3.select(this)
.style(“stroke”, “navy”)
.style(“stroke-width”,2);});// Mississippi State
var lineGraph = svgContainer.append(“path”)
.attr(“d”, lineFunction(lineData17))
.attr(“stroke”, “maroon”)
.attr(“stroke-width”, 2)
.attr(“fill”, “none”)
.on(“mouseover”, function(){d3.select(this)
.style(“stroke”, “gray”)
.style(“stroke-width”,5)
.moveToFront()
.append(“svg:title”)
.text(function(d) { return “MISSISSIPPI STATE \nWeek 1 – W 49-0 Southern Mississippi \nWeek 2 – W 47-34 Alabama Birmingham \nWeek 3 – W 35-3 Southern Alabama \nWeek 4 – W 34-29 LSU \nWeek 5 – Bye \nWeek 6 – W 48-31 Texas A&M \nWeek 7 – W 38-23 Auburn \n Week 8 – Bye \nWeek 9 – W 45-31 Kentucky \nWeek 10 – W 17-10 Arkansas \nWeek 11 – W 45-16 Tennessee Martin \nWeek 12 – L 20-25 Alabama \nWeek 13 – W 51-0 Vanderbilt \nWeek 14 – L 17-31 Ole Miss \nWeek 15 – Bye \nWeek 16 – L 34-49 Georgia Tech \nWeek 17 – NA”}); ;})
.on(“mouseout”, function(){d3.select(this)
.style(“stroke”, “maroon”)
.style(“stroke-width”,2);});// TCU
var lineGraph = svgContainer.append(“path”)
.attr(“d”, lineFunction(lineData18))
.attr(“stroke”, “indigo”)
.attr(“stroke-width”, 2)
.attr(“fill”, “none”)
.on(“mouseover”, function(){d3.select(this)
.style(“stroke”, “black”)
.style(“stroke-width”,5)
.moveToFront()
.append(“svg:title”)
.text(function(d) { return “TCU \nWeek 1 – W 48-14 Samford \nWeek 2 – Bye \nWeek 3 – W 30-7 Minnesota \nWeek 4 – Bye \nWeek 5 – W 56-0 SMU \nWeek 6 – W 37-33 Oklahoma \nWeek 7 – L 58-61 Baylor \nWeek 8 – W 42-9 Oklahoma State \nWeek 9 – W 82-27 Texas Tech \nWeek 10 – W 31-30 West Virginia \nWeek 11 – W 41-20 Kansas State \nWeek 12 – W 34-30 Kansas \nWeek 13 – W 48-10 Texas \nWeek 14 – W 55-3 Iowa State \nWeek 15 – Bye \nWeek 16 – W 42-3 Ole Miss \nWeek 17 – NA”}); ;})
.on(“mouseout”, function(){d3.select(this)
.style(“stroke”, “indigo”)
.style(“stroke-width”,2);});// Arizona
var lineGraph = svgContainer.append(“path”)
.attr(“d”, lineFunction(lineData19))
.attr(“stroke”, “red”)
.attr(“stroke-width”, 2)
.attr(“fill”, “none”)
.on(“mouseover”, function(){d3.select(this)
.style(“stroke”, “blue”)
.style(“stroke-width”,5)
.moveToFront()
.append(“svg:title”)
.text(function(d) { return “ARIZONA \nWeek 1 – W 58-13 UNLV \nWeek 2 – W 26-23 Texas San Antonio \nWeek 3 – W 35-28 Nevada \nWeek 4 – W 49-45 California \nWeek 5 – Bye \nWeek 6 – W 31-24 Oregon \nWeek 7 – L 26-28 USC \nWeek 8 – Bye \nWeek 9 – W 59-37 Washington State \nWeek 10 – L 7-17 UCLA \nWeek 11 – W 38-20 Colorado \nWeek 12 – W 27-26 Washington \nWeek 13 – W 42-10 Utah \nWeek 14 – W 42-35 Arizona State \nWeek 15 – L 13-51 Oregon \nWeek 16 – L 30-38 Boise State \nWeek 17 – NA”});;})
.on(“mouseout”, function(){d3.select(this)
.style(“stroke”, “red”)
.style(“stroke-width”,2);});// Kansas State
var lineGraph = svgContainer.append(“path”)
.attr(“d”, lineFunction(lineData20))
.attr(“stroke”, “indigo”)
.attr(“stroke-width”, 2)
.attr(“fill”, “none”)
.on(“mouseover”, function(){d3.select(this)
.style(“stroke”, “silver”)
.style(“stroke-width”,5)
.moveToFront()
.append(“svg:title”)
.text(function(d) { return “KANSAS STATE \nWeek 1 – W 55-16 Steven F. Austin \nWeek 2 – W 32-28 Iowa State \nWeek 3 – Bye \nWeek 4 – L 14-20 Auburn \nWeek 5 – W 58-28 Texas El Paso \nWeek 6 – L 45-13 Texas Tech \nWeek 7 – W 31-30 Oklahoma \nWeek 8 – W 23-0 Texas \nWeek 9 – W 48-14 Oklahoma State \nWeek 10 – L 20-41 TCU \nWeek 11 – Bye \nWeek 12 – W 26-20 West Virginia \nWeek 13 – W 51-13 Kansas \nWeek 14 – W 27-38 Baylor \nWeek 15 – Bye \nWeek 16 – L 35-40 UCLA \nWeek 17 – NA”});;})
.on(“mouseout”, function(){d3.select(this)
.style(“stroke”, “indigo”)
.style(“stroke-width”,2);});// Arizona State
var lineGraph = svgContainer.append(“path”)
.attr(“d”, lineFunction(lineData21))
.attr(“stroke”, “maroon”)
.attr(“stroke-width”, 2)
.attr(“fill”, “none”)
.on(“mouseover”, function(){d3.select(this)
.style(“stroke”, “gold”)
.style(“stroke-width”,5)
.moveToFront()
.append(“svg:title”)
.text(function(d) { return “ARIZONA STATE \nWeek 1 – W 45-14 Weber State \nWeek 2 – W 58-23 New Mexico \nWeek 3 – W 38-24 Colorado \nWeek 4 – Bye \nWeek 5 – L 27-62 UCLA \nWeek 6 – W 38-34 USC \nWeek 7 – Bye \nWeek 8 – W 26-10 Stanford \nWeek 9 – W 24-10 Washington \nWeek 10 – W 19-16(OT) Utah \nWeek 11 – W 55-31 Notre Dame \nWeek 12 – L 27-35 Oregon State \nWeek 13 – W 52-31 Washington State \nWeek 14 – W 35-42 Arizona \nWeek 15 – Bye \nWeek 16 – W 36-31 Duke \nWeek 17 – NA”});;})
.on(“mouseout”, function(){d3.select(this)
.style(“stroke”, “maroon”)
.style(“stroke-width”,2);});// Draw Georgia Tech path
var lineGraph = svgContainer.append(“path”)
.attr(“d”, lineFunction(lineData22))
.attr(“stroke”, “navy”)
.attr(“stroke-width”, 2)
.attr(“fill”, “none”)
.on(“mouseover”, function(){d3.select(this)
.style(“stroke”, “khaki”)
.style(“stroke-width”,5)
.moveToFront()
.append(“svg:title”)
.text(function(d) { return “GEORGIA TECH \nWeek 1 – W 38-19 Wofford \nWeek 2 – W 38-21 Tulane \nWeek 3 – W 42-38 Georgia Southern \nWeek 4 – W 27-24 Virginia Tech \nWeek 5 – Bye \nWeek 6 – W 28-17 Miami \nWeek 7 – L 25-31 Duke \nWeek 8 – L 43-48 North Carolina \nWeek 9 – W 56-28 Pittsburgh \nWeek 10 – W 35-10 Virginia \nWeek 11 – W 56-23 North Carolina State \nWeek 12 – W 28-6 Clemson \nWeek 13 – Bye \nWeek 14 – W 30-24(OT) Georgia \nWeek 15 – L 35-37 Florida State \nWeek 16 – W 49-34 Mississippi State \nWeek 17 – NA”});;})
.on(“mouseout”, function(){d3.select(this)
.style(“stroke”, “navy”)
.style(“stroke-width”,2);});// Draw axis labels ————————————————————————————
// Label for xAxis
var xAxisLabel = svgContainer.append(“text”)
.attr(“class”, “x label”)
.attr(“text-anchor”, “middle”)
.attr(“x”, 372)
.attr(“y”, 420)
.text(“Week”);
// Label for yAxis
var xAxisLabel = svgContainer.append(“text”)
.attr(“transform”, “rotate(-90)”)
.attr(“class”, “y label”)
.attr(“text-anchor”, “middle”)
.attr(“x”, -185)
.attr(“y”, 11)
.text(“Rank”);// Function used to move path to front —————————————————————–
d3.selection.prototype.moveToFront = function() {return this.each(function(){
this.parentNode.appendChild(this);
});
};
The topic ‘D3 chart displaying below wordpress page’ is closed to new replies.