• Resolved shaneregel34

    (@shaneregel34)


    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);
    });
    };

    https://wordpress.org/plugins/wp-d3/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Ruben

    (@figurebelow)

    Hi,

    You are getting the chart at the end of the page because you are appending it after the body in the following line:

    var svgContainer = d3.select(“body”).append(“svg”) …

    Instead of that you should use the <div> ID that the plugin creates automatically for you inside the body. It can be accessed using the WPD3_CHART_ID constant:

    var svg = d3.select(“WPD3_CHART_ID”).append(“svg”) …

    (or the old method, using the tab id you get at the tab of your editor, but this is discouraged, e.g.):

    var svg = d3.select(“.wpd3946-0”).append(“svg”)

    Thread Starter shaneregel34

    (@shaneregel34)

    That solution worked great thanks for the help and this is a great plugin!

    Plugin Author Ruben

    (@figurebelow)

    Great, thanks!.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘D3 chart displaying below wordpress page’ is closed to new replies.