Reputation: 55

d3.js chart rendering at bottom of wordpress page

Why is my js chart rendering at the bottom of the page and not in the body? I've used tons of these within my site with no problems but this one doesn't seem to want to go where desired. Thoughts?

Thank you in advance!

www.wcsddata.net/data-topics/jttest/

<center><!DOCTYPE html>
<meta charset="utf-8">
<style>
text{
    font-size:12px;
}
.mainBars rect{
  shape-rendering: auto;
  fill-opacity: 0;
  stroke-width: 0.5px;
  stroke: rgb(0, 0, 0);
  stroke-opacity: 0;
}
.subBars{
    shape-rendering:crispEdges;
}
.edges{
    stroke:none;
    fill-opacity:0.5;
}
.header{
    text-anchor:middle;
    font-size:16px;
}

</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="http://vizjs.org/viz.v1.1.0.min.js"></script>
<script>
var data=[['Lite','CA',16,0],
['Small','CA',1278,4],
['Medium','CA',27,0],
['Plus','CA',58,0],
['Grand','CA',1551,15],
['Elite','CA',141,0],
['Lite','AZ',5453,35],
['Small','AZ',683,1],
['Medium','AZ',862,0],
['Grand','AZ',6228,30],
['Lite','AL',15001,449],
['Small','AL',527,3],
['Medium','AL',836,0],
['Plus','AL',28648,1419],
['Grand','AL',3,0],
['Lite','CO',13,0],
['Small','CO',396,0],
['Medium','CO',362,0],
['Plus','CO',78,10],
['Grand','CO',2473,32],
['Elite','CO',2063,64],
['Medium','DE',203,0],
['Grand','DE',686,2],
['Elite','DE',826,0],
['Lite','KS',1738,110],
['Small','KS',12925,13],
['Medium','KS',15413,0],
['Small','GA',2166,2],
['Medium','GA',86,0],
['Plus','GA',348,3],
['Grand','GA',4244,18],
['Elite','GA',1536,1],
['Small','IA',351,0],
['Grand','IA',405,1],
['Small','IL',914,1],
['Medium','IL',127,0],
['Grand','IL',1470,7],
['Elite','IL',516,1],
['Lite','IN',43,0],
['Small','IN',667,1],
['Medium','IN',172,0],
['Plus','IN',149,1],
['Grand','IN',1380,5],
['Elite','IN',791,23],
['Small','FL',1,0],
['Grand','FL',1,0],
['Small','MD',1070,1],
['Grand','MD',1171,2],
['Elite','MD',33,0],
['Plus','TX',1,0],
['Small','MS',407,0],
['Medium','MS',3,0],
['Grand','MS',457,2],
['Elite','MS',20,0],
['Small','NC',557,0],
['Medium','NC',167,0],
['Plus','NC',95,1],
['Grand','NC',1090,5],
['Elite','NC',676,6],
['Lite','NM',1195,99],
['Small','NM',350,3],
['Medium','NM',212,0],
['Grand','NM',1509,8],
['Lite','NV',3899,389],
['Small','NV',147,0],
['Medium','NV',455,0],
['Plus','NV',1,1],
['Grand','NV',4100,16],
['Lite','OH',12,0],
['Small','OH',634,2],
['Medium','OH',749,0],
['Plus','OH',119,1],
['Grand','OH',3705,19],
['Elite','OH',3456,25],
['Small','PA',828,2],
['Medium','PA',288,0],
['Plus','PA',141,0],
['Grand','PA',2625,7],
['Elite','PA',1920,10],
['Small','SC',1146,2],
['Medium','SC',212,0],
['Plus','SC',223,4],
['Grand','SC',1803,6],
['Elite','SC',761,8],
['Small','TN',527,0],
['Medium','TN',90,0],
['Grand','TN',930,4],
['Elite','TN',395,1],
['Lite','ME',7232,58],
['Small','ME',1272,0],
['Medium','ME',1896,0],
['Plus','ME',1,0],
['Grand','ME',10782,33],
['Elite','ME',1911,3],
['Small','VA',495,0],
['Medium','VA',32,0],
['Plus','VA',7,0],
['Grand','VA',1557,12],
['Elite','VA',24,0],
['Small','WA',460,1],
['Plus','WA',88,3],
['Grand','WA',956,3],
['Small','WV',232,0],
['Medium','WV',71,0],
['Grand','WV',575,2],
['Elite','WV',368,3]
];
var color ={Elite:"#3366CC", Grand:"#DC3912",  Lite:"#FF9900", Medium:"#109618", Plus:"#990099", Small:"#0099C6"};
var svg = d3.select("body").append("svg").attr("width", 960).attr("height", 800);
svg.append("text").attr("x",250).attr("y",70)
    .attr("class","header").text("Sales Attempt");
svg.append("text").attr("x",750).attr("y",70)
    .attr("class","header").text("Sales");
var g =[svg.append("g").attr("transform","translate(150,100)")
        ,svg.append("g").attr("transform","translate(650,100)")];
var bp=[ viz.bP()
        .data(data)
        .min(12)
        .pad(1)
        .height(600)
        .width(200)
        .barSize(35)
        .fill(d=>color[d.primary])      
    ,viz.bP()
        .data(data)
        .value(d=>d[3])
        .min(12)
        .pad(1)
        .height(600)
        .width(200)
        .barSize(35)
        .fill(d=>color[d.primary])
];  
[0,1].forEach(function(i){
    g[i].call(bp[i])
    g[i].append("text").attr("x",-50).attr("y",-8).style("text-anchor","middle").text("Channel");
    g[i].append("text").attr("x", 250).attr("y",-8).style("text-anchor","middle").text("State");
    g[i].append("line").attr("x1",-100).attr("x2",0);
    g[i].append("line").attr("x1",200).attr("x2",300);
    g[i].append("line").attr("y1",610).attr("y2",610).attr("x1",-100).attr("x2",0);
    g[i].append("line").attr("y1",610).attr("y2",610).attr("x1",200).attr("x2",300);
    g[i].selectAll(".mainBars")
        .on("mouseover",mouseover)
        .on("mouseout",mouseout);
    g[i].selectAll(".mainBars").append("text").attr("class","label")
        .attr("x",d=>(d.part=="primary"? -30: 30))
        .attr("y",d=>+6)
        .text(d=>d.key)
        .attr("text-anchor",d=>(d.part=="primary"? "end": "start"));
    g[i].selectAll(".mainBars").append("text").attr("class","perc")
        .attr("x",d=>(d.part=="primary"? -100: 80))
        .attr("y",d=>+6)
        .text(function(d){ return d3.format("0.0%")(d.percent)})
        .attr("text-anchor",d=>(d.part=="primary"? "end": "start"));
});
function mouseover(d){
    [0,1].forEach(function(i){
        bp[i].mouseover(d);
        g[i].selectAll(".mainBars").select(".perc")
        .text(function(d){ return d3.format("0.0%")(d.percent)});
    });
}
function mouseout(d){
    [0,1].forEach(function(i){
        bp[i].mouseout(d);
        g[i].selectAll(".mainBars").select(".perc")
        .text(function(d){ return d3.format("0.0%")(d.percent)});
    });
}
d3.select(self.frameElement).style("height", "800px");
</script>

Upvotes: 1

Answers (1)

sorrow poetry

Reputation: 413

problem is your JS selector, you need to select #content.
change
var svg = d3.select("body").append("svg").attr("width", 960).attr("height", 800);
to:
var svg = d3.select("#content").append("svg").attr("width", 960).attr("height", 800);
this will show your charts in desired area.

in order to center the charts you need to change the width and height:
var svg = d3.select("#content").append("svg").attr("width", 600).attr("height", auto);
then create a
<div id="mycenterdiv" style="text-align:center; width: 100%;"> </div>
in your wordpress page and then target that div (change the select)
var svg = d3.select("#mycenterdiv").append("svg").attr("width", 600).attr("height", auto);

Upvotes: 3

d3.js chart rendering at bottom of wordpress page

Answers (1)

Related Questions