My d3.js barplot is based on JSON data with 12 elements. The 'fpkm' value determines the bar height, but only half of the elements are showing up correctly.
When I use the data callback function in d3, it only returns values for the first half of the elements, resulting in only 6 rows being displayed on the plot.
A fiddle showcasing this issue can be found here: http://jsfiddle.net/z9Mvt/
I'm struggling to understand why only half of the JSON elements are being utilized in my visualization.
Here's the HTML and JavaScript code snippets:
<div align='center' id="GECGplot" style='width:98%;text-align:center;'></plot>
// JavaScript code snippet
// Define dataset
var plotData = [{}, {}, ...]; // Your JSON data here
// Set up SVG dimensions
var w = 700;
var h = 300;
var barPadding = 1;
var margin = {top: 40, right: 10, bottom: 20, left: 10};
var xScale = d3.scale.linear().
domain([0, 20]).
range([0, h]);
// Create SVG element
var svg = d3.select("#GECGplot")
.append("svg")
.attr("width", w)
.attr("height", h);
// Generate bars
svg.selectAll("rect")
.data(function(d, i) {
return plotData[i].nodeData.fpkm;
})
.enter()
.append("rect")
.attr("x", function(d, i) {
return i * (w / plotData.length);
})
.attr("y", function(d, i) {
return h - (plotData[i].nodeData.fpkm * 50);
})
.attr("width", w / plotData.length - barPadding)
.attr("height", function(d, i) {
return plotData[i].nodeData.fpkm * 50;
})
.attr("fill", function(d, i) {
return "rgb(0, 0, " + (plotData[i].nodeData.fpkm * 50) + ")";
});
// Add labels
svg.selectAll("text")
.data(function(d, i) {
return plotData[i].nodeData.fpkm;
})
.enter()
.append("text")
.text(function(d, i) {
return plotData[i].nodeData.fpkm;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white")
.attr("text-anchor", "middle")
.attr("x", function(d, i) {
return i * (w / plotData.length) + (w / plotData.length - barPadding) / 2;
})
.attr("y", function(d, i) {
return h - (plotData[i].nodeData.fpkm * 50) + 14;
});