unusual black shapes in d3 choropleth

Question

https://www.dropbox.com/s/znno4krx64zs3hm/Screenshot%202014-12-04%2015.11.10.png?dl=0

I started adapting the choropleth d3 code here. Here's the code puts the choropleth into the page

//initialize the map's dimensions
var width = 960;
var height = 500;

//define the display threshold
var color = d3.scale.threshold()
    .domain([.02, .04, .06, .08, .10])
    .range(["#f2f0f7", "#dadaeb", "#bcbddc", "#9e9ac8", "#756bb1", "#54278f"]);

var path = d3.geo.path();

//add the map image to the div
var svg = d3.select("#" + rowID + " .choropleth").append("svg")
    .attr("width", width)
    .attr("height", height);

//import data from REST interface
$.ajax({
    url: "<?php echo REST_URL; ?>",
    data: {"method": "getChoroplethData", "reportID": reportID, "mode": mode, "contents": JSON.stringify(window.reportData[reportID]['contents'])},
    success: function(response){
        response = parseJSON(response);
        var us = response['us'];
        var data = response['data'];
        var reportID = response['reportID'];

        var rateById = {};
        for(var i in data){
            rateById[data[i]['id']] = +data[i]['rate'];
        }

        svg.append("g")
            .attr("class", "counties")
            .selectAll("path")
            .data(topojson.feature(us, us.objects.counties).features)
            .enter().append("path")
            .attr("d", path)
            .style("fill", function(d) { return color(rateById[d.id]); });

        svg.append("path")
            .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a.id !== b.id; }))
            .attr("class", "states")
            .attr("d", path);

        //show the report
        $("#" + rowID + " .panel-body").slideDown();
    }
});

For the most part this works. The response from the AJAX call has 3 parts. us is the us.json data that the choropleth example above uses and data contains the data from unemployment.tsv translated into JSON data in the format [{'id':'some id','rate':'some rate},...{'id':'some id','rate':'some rate'}]. It's being placed in the right part of the page and all the pieces are moving correctly except that when the choropleth is drawn it looks like this. I can't think of any reason for these massive black splotches to be all over the map although I don't particularly understand how some of the code works, mostly the part at the end where the data is used to color the map. Does anyone know what could cause this kind of effect on the choropleth map?

Answer 1

What's happening is that the path elements that represent the states are filled black by default. These are the weird shapes that you're seeing -- most of it is obscured by the county paths, but some of them are still visible.

To prevent this from happening, copy the CSS from the example you've linked to, in particular

.states {
  fill: none;
}