WP-D3 (Text Mode) and Persistent Paragraph Tags

  • Unknown's avatar
    amnakamura · Member ·

    Hello,

    WP-D3 is probably my favorite plugin, but I’m having a really hard time using it to insert an interactive Sankey chart into my WordPress site. Any help is greatly and wholeheartedly appreciated!

    Here is the webpage: http://www.d8aism.com/?page_id=702

    Here’s what I’ve checked:

  • JavaScript libraries: Stored in the Media Library with calls to elements tucked between [d3-link] tags? Check
  • Other pages created using Text Mode and the WP-D3 plugin for interactive graphics using d3.js working? Check
  • Tested JavaScript code? Check. The JavaScript comes directly from the RCharts template. Before inserting the JavaScript between the [d3-source] tags, I tested it on my PC through the RStudio viewer and it renders the chart I want.
  • WordPress prevented from inserting paragraph tags where I don’t want them? No check :( Automatic paragraph tags are turned off in the theme’s functions.PHP file through remove_filter( ‘the_content’, ‘wpautop’ ); remove_filter( ‘the_excerpt’, ‘wpautop’ ); I’ve also got the Raw HTML plugin activated and ‘disable automatic paragraphs’ box is checked. I’m also seeing a lot of unwanted </br> tags attached seemingly randomly (but probably not randomly) to my JavaScript code.

    • Here’s the page content, if it helps: 

    [d3-link]
<script src="http://www.d8aism.com/wp-content/uploads/2016/04/d3.js"></script>
<script src="http://www.d8aism.com/wp-content/uploads/2016/04/sankey.js></script>
[/d3-link]  

[d3-source canvas="sankey1"]
//Attribution:
//Mike Bostock https://github.com/d3/d3-plugins/tree/master/sankey
//Mike Bostock http://bost.ocks.org/mike/sankey/
(function(){
var params = {
 "dom": "sankey1",
"width":    960,
"height":    500,
"data": {
 "source": [ "United States", "United States", "United States", "State", "State", "State", "person accused indicted or suspected of crime", "person accused indicted or suspected of crime", "alien person subject to a denaturalization proceeding or one whose citizenship is revoked", "attorney or person acting as such ", "water transportation stevedore", "person convicted of crime", "person convicted of crime", "person allegedly criminally insane or mentally incompetent to stand trial", "defendant", "defendant", "person subject to selective service including conscientious objector", "employee or job applicant including beneficiaries of", "employee or job applicant including beneficiaries of", "employer If employers relations with employees are governed by the nature of the employers", "employer If employers relations with employees are governed by the nature of the employers", "female employee or job applicant", "government contractor", "racial or ethnic minority employee or job applicant", "military personnel or dependent of including reservist", "owner landlord or claimant to ownership fee interest or possession of land as well as chattels", "indigent defendant", "prisoner inmate of penal institution", "prisoner inmate of penal institution", "prisoner inmate of penal institution", "person or organization protesting racial or ethnic segregation or discrimination", "person or organization protesting racial or ethnic segregation or discrimination", "railroad", "taxpayer or executor of taxpayers estate federal only", "union labor organization or official of", "union labor organization or official of", "witness or person under subpoena", "Department or Secretary of Labor", "National Labor Relations Board or regional office or officer", "National Labor Relations Board or regional office or officer" ],
"target": [ "  State", "  person accused indicted or suspected of crime", "  person convicted of crime", "  United States", "  person accused indicted or suspected of crime", "  person convicted of crime", "  United States", "  State", "  United States", "  United States", "  employee or job applicant including beneficiaries of", "  United States", "  State", "  State", "  United States", "  State", "  United States", "  employer If employers relations with employees are governed by the nature of the employers", "  railroad", "  employee or job applicant including beneficiaries of", "  union labor organization or official of", "  employer If employers relations with employees are governed by the nature of the employers", "  United States", "  employer If employers relations with employees are governed by the nature of the employers", "  United States", "  United States", "  State", "  governmental official or an official of an agency est under an interstate compact", "  United States", "  State", "  city town township village or borough government or governmental unit", "  State", "  employee or job applicant including beneficiaries of", "  United States", "  employer If employers relations with employees are governed by the nature of the employers", "  railroad", "  United States", "  employer If employers relations with employees are governed by the nature of the employers", "  employer If employers relations with employees are governed by the nature of the employers", "  union labor organization or official of" ],
"value": [ 12, 130, 31, 11, 151, 104, 232, 244, 20, 13, 22, 105, 218, 14, 33, 14, 22, 47, 51, 44, 30, 15, 12, 11, 20, 20, 17, 13, 12, 34, 15, 14, 17, 44, 39, 11, 34, 17, 68, 23 ]
},
"nodeWidth":     15,
"nodePadding":     10,
"layout":     32,
"id": "sankey1"
};

params.units ? units = " " + params.units : units = "";

//hard code these now but eventually make available
var formatNumber = d3.format("0,.0f"),    // zero decimal places
    format = function(d) { return formatNumber(d) + units; },
    color = d3.scale.category20();

if(params.labelFormat){
  formatNumber = d3.format(".2%");
}

var svg = d3.select('.sankey1').append("svg")
    .attr("width", params.width)
    .attr("height", params.height);

var sankey = d3.sankey()
    .nodeWidth(params.nodeWidth)
    .nodePadding(params.nodePadding)
    .layout(params.layout)
    .size([params.width,params.height]);

var path = sankey.link();

var data = params.data,
    links = [],
    nodes = [];

//get all source and target into nodes
//will reduce to unique in the next step
//also get links in object form
data.source.forEach(function (d, i) {
    nodes.push({ "name": data.source[i] });
    nodes.push({ "name": data.target[i] });
    links.push({ "source": data.source[i], "target": data.target[i], "value": +data.value[i] });
}); 

//now get nodes based on links data
//thanks Mike Bostock https://groups.google.com/d/msg/d3-js/pl297cFtIQk/Eso4q_eBu1IJ
//this handy little function returns only the distinct / unique nodes
nodes = d3.keys(d3.nest()
                .key(function (d) { return d.name; })
                .map(nodes));

//it appears d3 with force layout wants a numeric source and target
//so loop through each link replacing the text with its index from node
links.forEach(function (d, i) {
    links[i].source = nodes.indexOf(links[i].source);
    links[i].target = nodes.indexOf(links[i].target);
});

//now loop through each nodes to make nodes an array of objects rather than an array of strings
nodes.forEach(function (d, i) {
    nodes[i] = { "name": d };
});

sankey
  .nodes(nodes)
  .links(links)
  .layout(params.layout);

var link = svg.append("g").selectAll(".link")
  .data(links)
.enter().append("path")
  .attr("class", "link")
  .attr("d", path)
  .style("stroke-width", function (d) { return Math.max(1, d.dy); })
  .sort(function (a, b) { return b.dy - a.dy; });

link.append("title")
  .text(function (d) { return d.source.name + " → " + d.target.name + "n" + format(d.value); });

var node = svg.append("g").selectAll(".node")
  .data(nodes)
.enter().append("g")
  .attr("class", "node")
  .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; })
.call(d3.behavior.drag()
  .origin(function (d) { return d; })
  .on("dragstart", function () { this.parentNode.appendChild(this); })
  .on("drag", dragmove));

node.append("rect")
  .attr("height", function (d) { return d.dy; })
  .attr("width", sankey.nodeWidth())
  .style("fill", function (d) { return d.color = color(d.name.replace(/ .*/, "")); })
  .style("stroke", function (d) { return d3.rgb(d.color).darker(2); })
.append("title")
  .text(function (d) { return d.name + "n" + format(d.value); });

node.append("text")
  .attr("x", -6)
  .attr("y", function (d) { return d.dy / 2; })
  .attr("dy", ".35em")
  .attr("text-anchor", "end")
  .attr("transform", null)
  .text(function (d) { return d.name; })
.filter(function (d) { return d.x < params.width / 2; })
  .attr("x", 6 + sankey.nodeWidth())
  .attr("text-anchor", "start");

// the function for moving the nodes
  function dragmove(d) {
    d3.select(this).attr("transform",
        "translate(" + (
                   d.x = Math.max(0, Math.min(params.width - d.dx, d3.event.x))
                ) + "," + (
                   d.y = Math.max(0, Math.min(params.height - d.dy, d3.event.y))
                ) + ")");
        sankey.relayout();
        link.attr("d", path);
  }

})();
[/d3-source]