D3 Part of Dashboard not Displayed

Question

I have been using D3 for about a year, and I have made dashboards in the past without issue. However, this time I have hit a rather strange bump in the road. I have a geographic dashboard with topo JSON and a horizontal bar chart under it that can be found at my gist/block here:

http://bl.ocks.org/diggetybo/77469aa2acec38f1870197724ea671d6

Note you may have to click to view the full view window, the blocks website seems to cap iframe height at 500. (you may disregard all files aside from index.html, the others are just source codes, and my tsv data file)

In the past, my typical dashboard technique is assigning a separate div for each graph of my dashboard. Whereas, the issue at hand here is that there SHOULD be horizontal bars visible under the map of the USA. However, despite much tinkering, the horizontal bars are not displayed. I have still appended them in the same way -- it has always worked for me in the past. So basically, I'm not sure why the horizontal bar chart is not being displayed.

Developer tools report that there are no errors at all -- which is strange. I can clearly tell that there is something wrong, because half of my dashboard is missing.

I have added comments in index.html to indicate where the bar chart portion of the code is. Specifically, lines:159-228.

It might also be helpful to articulate conceptually what the horizontal bar chart is 'doing', just in case. It is supposed to append rects from a variable that has sorted my parsed data from largest to smallest in value (d.fxb in my tsv), and given a fill as per a linear color scale.

UPDATE

I have closed off the style call, and now I'm trouble shooting the other errors. Sadly, I'm getting stuck at the first line of the bar chart portion of the code. Line 160. I have updated the gist, and I will include the relevant lines here for easy reference:

var values = data.fxb.sort(function(a, b) {
    return -(a - b);
});

var name_value_array = json.features.name;


var name_values = name_value_array.sort(function(a, b) {

    return -(a.value - b.value);

});

I'm getting an error that says: "cannot read property "sort" of undefined. To my knowledge, the array should be defined. This time around I was very careful about making sure everything was enclosed within the proper )} tokens. I triple checked to make sure these lines were still enclosed by the data parsing function. So I'm not sure why that's happening. I do have faith in the bottom portion of the bar chart code, so if someone can spot what is holding me up I would be very grateful.

Thank you

Answer 1

This won't solve all of your problems, but you have failed to close this style call .

.style("fill", function(d) {
  // Get data value
  var value = d.properties.fxb;
  if (value=='None') {
    return "#999999"
  }
  if (value) {
  //If value exists…
    return color(value);
  } else {
    //If value is undefined…
    return "#999999";
  }

You also then end up with an extra }); at the bottom of your script (where the style call finally gets closed)

There are more errors, but that is swallowing them and the reason that they are not showing up.