Thanks for the great plug-in. Which revision of the D3 library is loaded by blazingcharts? Is there an option to select a different library revision?
I loaded D3.v4 with <script src=”//d3js.org/d3.v4.min.js”> in the header, but receive “d3.scaleLinear is not a a function” error on the console. In changing from v3 to v4, the d3.scale.linear function was replaced by d3.scaleLinear. Is an older library being used?
Outside of the WP and blazingcharts environment, my html, css and js is working as expected.
Thank you in advance!
]]>I have been working on a chart, everything was working fine. And suddently D3 seems to have stopped working. I went back to basics and just did a simple canvas with a rectangle in a svg. Even that does not work. It seems that the instructions placed in the chart manager are never reached. Even console.log(“test”) does not do anything. I am very confused. It seems like a D3 bug. I have uninstalled it and reinstalled but still the same.
In the page i have just this line [d3-source canvas="wpd3-94-0”]
In the chart manager I have this:
var svg = d3.select(".wpd3-94-0").append("svg")
.attr("width", 1000)
.attr("height", 1000);
svg.append("rect")
.attr("x", 50)
.attr("y", 50)
.attr("width", 1000)
.attr("height", 1000)
.attr("fill","red");
svg.append("text")
.attr("x", 50)
.attr("y", 50)
.attr("text","hello");
console.log("test");
The javascrip debugger does not print anything neither.
Really needs some help here I cannot understand what is going on. I think of a bug and last recourse to reinstall the entire wordpress but this is a pain :s
Thanks in advance
]]>I have something that I wrote in D3 with Dimple, which I am trying to integrate into my WordPress-based website. I have installed the D3 plugin, and got this tutorial to work. But my own code includes includes a jQuery function, queue();
queue()
.defer(d3.tsv,"https://url.com/wp-content/uploads/2016/04/ClassScoreData.txt")
.await(analyze);
The function queue() triggers a console error, “Uncaught ReferenceError: queue is not defined”.
I have included the dimple js file. I have also tried including the jquery js file, although I get the impression that that is the wrong approach, and that I need to reference the standard WordPress copy instead. Based on what I read, I added the following to my theme’s header.php file:
<?ph <?php wp_enqueue_script('jquery'); ?>
I added it in the <head> section, immediately before:
<?php wp_head(); ?>
It seems like this is supposed to load jQuery, making it available for use. But I’m having difficulty following the articles I’ve found on this topic, and in any event I must be doing something wrong as I can’t get it to work.
Thanks for any advice.
https://www.ads-software.com/plugins/wp-d3/
]]><div id=”wpd3-192-1″></div>
[d3-source canvas=”wpd3-192-1″]
Is there something wrong here?
p.s. this chart was one I created in a Drupal page.
]]>I.e. have a chart where you can click an update button and have a transition to a new set of data.
In the example this is written as:
<button>Update</button>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="bullet.js"></script>
Where/how would I add this in wp-d3 to get the button to appear?
https://www.ads-software.com/plugins/wp-d3/
]]>https://www.ads-software.com/plugins/wp-d3/
]]>// 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://www.ads-software.com/plugins/wp-d3/
]]>After using the plugin for a while I came up to the following situation and I would like some feedback from the support forum. Here is the case:
Assume that two different users (user A and user B) of a wordpress site would like to access the same page. Assume also that this page contains a d3 object (say a barchart), and each user is able to provide its own data (and in a way upload the .csv – or .tsv file to the site -another issue here but say this is solved in an automated way for now-).
So the problem is the following: Since the d3 barchart is a data driven document, it can 99.99% be the case that user A’s data is different than user B’s data. So how the two different users will be able to access the same page that would contain these two different (in data) barcharts?
Thank you very much.
PS. A “theoretical” workaround can be the following: For each user build a dedicated page and there include the d3 object. However and since through the plugin, including a d3 object is a totally semi-automatic way (click the link in the View editor, paste your d3 code, upload the .csv, .css, .js files, save chart etc.) it would be a nightmare to create for every single user a new such page. Things also propagate even further if you plan on having more than one or two of such pages and you would like this customization for your users.
https://www.ads-software.com/plugins/wp-d3/
]]>