Yoeri Yoeri - 6 months ago 17
JSON Question

d3.json is not executed

I'm making what's supposed to be a very simple pie chart, but somehow the d3.json function is not being executed at all. My code is as below:

function omst1() {
"use strict";
var chartWidth = $("#chart").width()*0.5;
var chartHeight = $("#chart").height()*0.5;

var margin = {
top: chartWidth*0.01,
right: chartWidth*0.01,
bottom: chartWidth*0.01,
left: chartWidth*0.01
},
width = chartWidth - margin.left - margin.right,
height = chartHeight - margin.top - margin.bottom,
radius = Math.min(width, height) / 2;

var color = d3.scale.ordinal()
.range(["#F1BD98", "#DA6A26", "#82A0D3", "#094D86"])

var arc = d3.svg.arc()
.outerRadius(radius - margin.bottom)
.innerRadius(radius - margin.bottom);

var pie = d3.layout.pie()
.sort(null)
.value(function(d) {
return d.Aantal
}
);

var svg = d3.select("#omst1").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

d3.json("omstandigheden.json", type, function(error, data) {
if (error) throw error;
console.log(data);
var g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");

g.append("path")
.attr("d", arc)
.style("fill", function(d) { return color(d.data.Omstandigheid); });

g.append("text")
.attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; })
.attr("dy", ".35em")
.text(function(d) { return d.data.Omstandigheid; });
});

function type(d) {
d.Aantal = +d.Aantal;
return d;
}
}


With this setup the console.log(data) should return an object with values of omstandigheid and aantal, the JSON file is an array of objects, looking like this:

{
"Omstandigheid": "A",
"Aantal": 2
},


At first I figured my indentation was off, or perhaps I was simply closing brackets in the wrong place. Sadly I haven't found the error in my code yet, what am I doing wrong?

EDIT: After Gerardo's answer I've removed the 'type' parameter and altered the code trying to use forEach instead of 'type'. The changed code is now as follows:

d3.json("omstandigheden.json", function(error, data) {
if (error) throw error;
console.log(data);
var g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");

g.append("path")
.attr("d", arc)
.style("fill", function(d) { return color(d.data.Omstandigheid); });

g.append("text")
.attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; })
.attr("dy", ".35em")
.text(function(d) { return d.data.Omstandigheid; });

data.forEach(function(d) {
d.Aantal = +d.Aantal;
return d;
})
});
}

Answer

Remove the type in the JSON function. JSON functions don't allow "accessors", only CSV and TSV functions.

Thus, remove the type and do everything the type function does using forEach inside your JSON function.

The first line of your JSON function has to be:

d3.json("omstandigheden.json", function(error, data) {

PS: If you are the one writing the JSON, you don't need the type function: just write the values as numbers, not strings.

Comments