1

I'm making a choropleth map using D3 and want to use data from a csv to populate the map.

I've used the following code to define and join the data. When I console.log it, I just get empty polygons and see a blank map instead of one colored according to value (the function to do this is elsewhere in the code).

    var promises = [];
    promises.push(d3.csv("data/nyplData.csv"));
    promises.push(d3.json("data/nycNTA.topojson"));
    promises.push(d3.json("data/manhattan.topojson"));
    Promise.all(promises).then(callback);



    function callback(data){

        //console.log(data);
        csvData = data[0];
        nyc = data[1];
        manhattan = data[2];

        //place graticule on the map
        setGraticule(map, path);

        //translate New York/Manhattan into TopoJSONs
        var nycNeighborhoods = topojson.feature(nyc, nyc.objects["nyc-neighborhoods"]),
            manhattanNeighborhoods = topojson.feature(manhattan, manhattan.objects.manhattan).features;

        //add Europe countries to map
        var nyc = map.append("path")
            .datum(nycNeighborhoods)
            .attr("class", "nyc")
            .attr("d", path);

        //join csv data to GeoJSON enumeration units
        manhattan = joinData(manhattan, csvData);
        //console.log(manhattan);

        //create the color scale
        var colorScale = makeColorScale(csvData);

        //add enumeration units to the map
        setEnumerationUnits(manhattanNeighborhoods, map, path, colorScale);

        //add coordinated visualization to the map
        setChart(csvData, colorScale);

        //create dropdown for attribute selection
        createDropdown(csvData);
    };
}; //end of setMap()

. . .

function joinData(manhattan, csvData){
    //loop through csv to assign each set of csv attribute values to geojson region
    for (var i=0; i < csvData.length; i++){

        var csvRegion = csvData[i]; //the current region

        var csvKey = csvRegion.ntacode; //the CSV primary key

        //loop through geojson regions to find correct region
        for (var a=0; a < manhattan.length; a++){
            //console.log(manhattan.length);
            var geojsonProps = manhattan[a].properties; //the current region geojson properties
            var geojsonKey = geojsonProps.ntacode; //the geojson primary key

            //where primary keys match, transfer csv data to geojson properties object
            if (geojsonKey == csvKey){

                //assign all attributes and values
                attrArray.forEach(function(attr){
                    var val = parseFloat(csvRegion[attr]); //get csv attribute value
                    geojsonProps[attr] = val; //assign attribute and value to geojson properties
                });
            };
        };
    };

    return manhattan;
};

I'm expecting this function to join the data from the csv to the topoJSON file on the map based on the field common field is "ntacode", but again, I'm getting a map filled with null values. Can anyone see where I'm going wrong?

Megan
  • 45
  • 1
  • 8
  • 1
    As a general joining data to geographic features question, this [question](https://stackoverflow.com/q/42616525/7106086) might be of use. It uses json, but once parsed by d3, it's all json anyways. – Andrew Reid Apr 17 '19 at 18:01
  • Wow, that is really helpful! I realized that there was a problem with the shapefile I was using--it lost the "properties" values somewhere along the way--and it works now. – Megan Apr 17 '19 at 19:03

0 Answers0