Map bar to y ordinal axis in d3 - json

Question

I'm attempting to map the beginning of bars to certain points on a y ordinal axis in d3, and it does not seem to recognize the names provided in the domain. Ultimately I'd like the chart to look like this:
This is what I've got so far (I've only provided a bit of the json because it would be huge otherwise):
var margin = {top: 50, right: 150, bottom: 50, left: 150},
w = 3000 - margin.left - margin.right,
h = 500 - margin.top - margin.bottom;
d3.json("test_chart.json", function(json) {
var data = json.items;
var x = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.starting_line + d.duration; })])
.range([0, w]);
var y = d3.scale.ordinal()
.domain(["Rome","Magdalene Castle","Herod's Palace","Pilate's Palace","King of the World's Stage","King of Flesh's stage","Stage Above Hell","Tavern","Arbor","Simon the Leper's House","Lazarus' tomb","Palace of the King of Marseilles","Sepulchre","Heathen Temple","Heaven","The Ship","The mountain","Wilderness","The priest's cell","Jherusalem","Marseilles","Hellmouth","The Place","The Lodge","The Stations","The Cloud"])
.rangeBands([0, h]);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var svg = d3.select("body").append("svg")
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var bars = svg.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr("class", function(d, i) {return "bar " + d.label;})
.attr("x", function(d, i) {return d.starting_line;})
.attr("y", function(d, i) {return d.location;})
.attr("width", function(d, i) {return d.duration})
.attr("height", 10)
.style("fill", function(d,i) {return d3.rgb(d.color)});
svg.append("g")
.attr("class", "y axis")
.attr("class", "x axis")
.call(xAxis)
.call(yAxis)
.call(bars);
// bars
var bars = svg.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr("class", function(d, i) {return "bar " + d.label;})
.attr("x", function(d, i) {return d.starting_line;})
.attr("y", function(d, i) {return d.location;})
.attr("width", function(d, i) {return d.duration})
.attr("height", 10)
.style("fill", function(d,i) {return d3.rgb(d.Color)});
});
And my sample json is here:
{"items":[{"character":"Inperator","color":"CC6600","location":"Rome","starting_line":"1","duration":"19"},{"character":"Serybyl","color":"660066","location":"Rome","starting_line":"20","duration":"1"},{"character":"Inperator","color":"3300FF","location":"Rome","starting_line":"21","duration":"9"},{"character":"Provost","color":"660066","location":"Rome","starting_line":"30","duration":"1"},{"character":"Inperator","color":"CC6600","location":"Rome","starting_line":"31","duration":"11"}]}
The problem I've run into is that my .attr("y", function(d, i) {return d.location;}) statement generates the following error: Error: Invalid value for <rect> attribute y="Rome".
I'm not sure how I need to format the statement to have it map properly to my ordinal scale. Also, my bars don't appear to actually be mapping to the hex codes I provide, but I'm more concerned about the ordinal axis at the moment. I tried to handle my x axis starting point based on the advice here but I had a hard time with it and figured if I embed the starting location in the actual json I could follow the more standard model. Any advice you might be able to give me would be greatly appreciated.

Answer 1

You need to call your scale and pass it the location so it can do the conversion:
.attr("y", function(d, i) {
return y(d.location); //<-- your y-scale is a function, that takes the ordinal "name" and returns a pixel value
}