Not seeing d3 svg on server, but works with local file

Question

If I load a local D3/js file in my browser like this: file://users/mmaxson/dumps/test.html the D3 bar plots render in SVG elements.

But if I move that to my server, here: http://storylearning.org/s/mchanga/analysis.html The D3 elements don't appear. The SVG elements are there, but they aren't rendering graphics.

It seems to be putting all the charts on top of each other. I'm pasting the code below: (I copied this recipe from http://bl.ocks.org/Jverma/887877fc5c2c2d99be10)

<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body> 

<style>
.bar{
fill: steelblue;
}
.bar:hover{
fill: brown;
}
.axis {
  font: 10px sans-serif;
}
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
</style>

<script>
// set the dimensions of the canvas
var margin = {top: 20, right: 20, bottom: 70, left: 40},
width = 600 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
// set the ranges
var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);
var y = d3.scale.linear().range([height, 0]);
// define the axis
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10);
// add the SVG element
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", 
      "translate(" + margin.left + "," + margin.top + ")");
d3.json('', function() {
// mydata 
//var myjson = '[{"Letter":"A","Freq":20},{"Letter":"B","Freq":12},{"Letter":"C","Freq":47},{"Letter":"D","Freq":34},{"Letter":"E","Freq":54},{"Letter":"F","Freq":21},{"Letter":"G","Freq":57},{"Letter":"H","Freq":31},{"Letter":"I","Freq":17},{"Letter":"J","Freq":5},{"Letter":"K","Freq":23},{"Letter":"L","Freq":39},{"Letter":"M","Freq":29},{"Letter":"N","Freq":33},{"Letter":"O","Freq":18},{"Letter":"P","Freq":35},{"Letter":"Q","Freq":11},{"Letter":"R","Freq":45},{"Letter":"S","Freq":43},{"Letter":"T","Freq":28},{"Letter":"U","Freq":26},{"Letter":"V","Freq":30},{"Letter":"X","Freq":5},{"Letter":"Y","Freq":4},{"Letter":"Z","Freq":2}]'
var myjson = '[{"Freq": 3072, "Letter": "6000"}, {"Freq": 540, "Letter": "12192"}, {"Freq": 315, "Letter": "14227"}, {"Freq": 308, "Letter": "10164"}, {"Freq": 257, "Letter": "4620"}, {"Freq": 240, "Letter": "3353"}, {"Freq": 87, "Letter": "754"}, {"Freq": 33, "Letter": "5861"}, {"Freq": 10, "Letter": "11600"}, {"Freq": 5, "Letter": "5204"}, {"Freq": 1, "Letter": "11781"}, {"Freq": 1, "Letter": "904"}, {"Freq": 0, "Letter": "5781"}, {"Freq": 0, "Letter": "16943"}, {"Freq": 0, "Letter": "8065"}, {"Freq": 0, "Letter": "18309"}, {"Freq": 0, "Letter": "2351"}, {"Freq": 0, "Letter": "16583"}, {"Freq": 0, "Letter": "7493"}, {"Freq": 0, "Letter": "8018"}]' // be sure to replace any single quotes here. send in real JSON with double quotes.
// load the data
data = JSON.parse( myjson );
data.forEach(function(d) {
    d.Letter = d.Letter;
    d.Freq = +d.Freq;
});

// scale the range of the data
x.domain(data.map(function(d) { return d.Letter; }));
y.domain([0, d3.max(data, function(d) { return d.Freq; })]);
// add axis
svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
.selectAll("text")
  .style("text-anchor", "end")
  .attr("dx", "-.8em")
  .attr("dy", "-.55em")
  .attr("transform", "rotate(-90)" );
svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
.append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 5)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("Frequency");
// Add bar chart
svg.selectAll("bar")
  .data(data)
.enter().append("rect")
  .attr("class", "bar")
  .attr("x", function(d) { return x(d.Letter); })
  .attr("width", x.rangeBand())
  .attr("y", function(d) { return y(d.Freq); })
  .attr("height", function(d) { return height - y(d.Freq); });
});

</script>
mchanga local giving challenge 2016

 <hr><br> 

<style>
.bar{
fill: steelblue;
}
.bar:hover{
fill: brown;
}
.axis {
  font: 10px sans-serif;
}
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
</style>

<script>
// set the dimensions of the canvas
var margin = {top: 20, right: 20, bottom: 70, left: 40},
width = 600 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
// set the ranges
var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);
var y = d3.scale.linear().range([height, 0]);
// define the axis
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10);
// add the SVG element
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", 
      "translate(" + margin.left + "," + margin.top + ")");
d3.json('', function() {
// mydata 
//var myjson = '[{"Letter":"A","Freq":20},{"Letter":"B","Freq":12},{"Letter":"C","Freq":47},{"Letter":"D","Freq":34},{"Letter":"E","Freq":54},{"Letter":"F","Freq":21},{"Letter":"G","Freq":57},{"Letter":"H","Freq":31},{"Letter":"I","Freq":17},{"Letter":"J","Freq":5},{"Letter":"K","Freq":23},{"Letter":"L","Freq":39},{"Letter":"M","Freq":29},{"Letter":"N","Freq":33},{"Letter":"O","Freq":18},{"Letter":"P","Freq":35},{"Letter":"Q","Freq":11},{"Letter":"R","Freq":45},{"Letter":"S","Freq":43},{"Letter":"T","Freq":28},{"Letter":"U","Freq":26},{"Letter":"V","Freq":30},{"Letter":"X","Freq":5},{"Letter":"Y","Freq":4},{"Letter":"Z","Freq":2}]'
var myjson = '[{"Freq": "37380", "Letter": "24891"}, {"Freq": "26145.18", "Letter": "24863"}, {"Freq": "20171", "Letter": "25257"}, {"Freq": "12971", "Letter": "25557"}, {"Freq": "9190", "Letter": "24795"}, {"Freq": "8918", "Letter": "24613"}, {"Freq": "7430", "Letter": "24759"}, {"Freq": "7310", "Letter": "25244"}, {"Freq": "7085", "Letter": "24487"}, {"Freq": "7057", "Letter": "24582"}, {"Freq": "6810", "Letter": "17371"}, {"Freq": "6595", "Letter": "25198"}, {"Freq": "6560", "Letter": "24933"}, {"Freq": "6535", "Letter": "18503"}, {"Freq": "6413", "Letter": "22358"}, {"Freq": "6252.98", "Letter": "24926"}, {"Freq": "6120", "Letter": "25104"}, {"Freq": "6080", "Letter": "25241"}, {"Freq": "6078", "Letter": "24385"}, {"Freq": "5990", "Letter": "24668"}]' // be sure to replace any single quotes here. send in real JSON with double quotes.
// load the data
data = JSON.parse( myjson );
data.forEach(function(d) {
    d.Letter = d.Letter;
    d.Freq = +d.Freq;
});

// scale the range of the data
x.domain(data.map(function(d) { return d.Letter; }));
y.domain([0, d3.max(data, function(d) { return d.Freq; })]);
// add axis
svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
.selectAll("text")
  .style("text-anchor", "end")
  .attr("dx", "-.8em")
  .attr("dy", "-.55em")
  .attr("transform", "rotate(-90)" );
svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
.append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 5)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("Frequency");
// Add bar chart
svg.selectAll("bar")
  .data(data)
.enter().append("rect")
  .attr("class", "bar")
  .attr("x", function(d) { return x(d.Letter); })
  .attr("width", x.rangeBand())
  .attr("y", function(d) { return y(d.Freq); })
  .attr("height", function(d) { return height - y(d.Freq); });
});

</script>
September 2014 Global Open Challenge

<br><br>

<style>
.bar{
fill: steelblue;
}
.bar:hover{
fill: brown;
}
.axis {
  font: 10px sans-serif;
}
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
</style>

<script>
// set the dimensions of the canvas
var margin = {top: 20, right: 20, bottom: 70, left: 40},
width = 600 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
// set the ranges
var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);
var y = d3.scale.linear().range([height, 0]);
// define the axis
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10);
// add the SVG element
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", 
      "translate(" + margin.left + "," + margin.top + ")");
d3.json('', function() {
// mydata 
//var myjson = '[{"Letter":"A","Freq":20},{"Letter":"B","Freq":12},{"Letter":"C","Freq":47},{"Letter":"D","Freq":34},{"Letter":"E","Freq":54},{"Letter":"F","Freq":21},{"Letter":"G","Freq":57},{"Letter":"H","Freq":31},{"Letter":"I","Freq":17},{"Letter":"J","Freq":5},{"Letter":"K","Freq":23},{"Letter":"L","Freq":39},{"Letter":"M","Freq":29},{"Letter":"N","Freq":33},{"Letter":"O","Freq":18},{"Letter":"P","Freq":35},{"Letter":"Q","Freq":11},{"Letter":"R","Freq":45},{"Letter":"S","Freq":43},{"Letter":"T","Freq":28},{"Letter":"U","Freq":26},{"Letter":"V","Freq":30},{"Letter":"X","Freq":5},{"Letter":"Y","Freq":4},{"Letter":"Z","Freq":2}]'
var myjson = '[{"Freq": "28455", "Letter": "26970"}, {"Freq": "16289", "Letter": "26192"}, {"Freq": "15510", "Letter": "7323"}, {"Freq": "15375", "Letter": "26569"}, {"Freq": "12979", "Letter": "26693"}, {"Freq": "10185", "Letter": "26160"}, {"Freq": "9809", "Letter": "25313"}, {"Freq": "9108", "Letter": "26466"}, {"Freq": "9091", "Letter": "25253"}, {"Freq": "8758", "Letter": "3479"}, {"Freq": "7022", "Letter": "26735"}, {"Freq": "6765", "Letter": "26684"}, {"Freq": "6700", "Letter": "26717"}, {"Freq": "6482", "Letter": "26761"}, {"Freq": "6465", "Letter": "12399"}, {"Freq": "6407", "Letter": "15012"}, {"Freq": "6151", "Letter": "25850"}, {"Freq": "6147", "Letter": "25633"}, {"Freq": "6143", "Letter": "24388"}, {"Freq": "6078", "Letter": "25082"}]' // be sure to replace any single quotes here. send in real JSON with double quotes.
// load the data
data = JSON.parse( myjson );
data.forEach(function(d) {
    d.Letter = d.Letter;
    d.Freq = +d.Freq;
});

// scale the range of the data
x.domain(data.map(function(d) { return d.Letter; }));
y.domain([0, d3.max(data, function(d) { return d.Freq; })]);
// add axis
svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
.selectAll("text")
  .style("text-anchor", "end")
  .attr("dx", "-.8em")
  .attr("dy", "-.55em")
  .attr("transform", "rotate(-90)" );
svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
.append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 5)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("Frequency");
// Add bar chart
svg.selectAll("bar")
  .data(data)
.enter().append("rect")
  .attr("class", "bar")
  .attr("x", function(d) { return x(d.Letter); })
  .attr("width", x.rangeBand())
  .attr("y", function(d) { return y(d.Freq); })
  .attr("height", function(d) { return height - y(d.Freq); });
});

</script>
December 2014 Global Open Challenge

Maybe this line matters: `d3.json('', function() {`? This may behave differently on local vs hosted page. See also http://stackoverflow.com/questions/17214293/importing-local-json-file-using-d3-json-does-not-work — Nixie, Oct 04 '16 at 20:57
Yeah, I was specifically trying to convert code that loads a local CSV file into D3 into one that would parse a JSON. What's the write syntax there? — Marc Maxmeister, Oct 05 '16 at 16:21

Not seeing d3 svg on server, but works with local file

0 Answers0