Choropleth Map questions

1

I am on pregress, but the rendering of map is not functional. instead of that I have random lines

Bellow is old, don’t read

In this project is so many questions.the code is taken from

in world the variable scope is clear usa, but in these case? scope custom, counties? the Json load as json or json.objects ?

var dataUrl = "https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/counties.json";
var xhttp = new XMLHttpRequest();
var data = [];
var padding = 100;

xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        var json = JSON.parse(this.responseText);


       map = new Datamap({
            element: document.getElementById('container'),
            geographyConfig: {
                dataUrl:json
            },
            scope: 'us',
            setProjection: function(element, options) {
                var projection, path;
                projection = d3.geo.mercator()//.albersUsa()
                    //.center([long, lat])
                    .scale(element.offsetWidth)
                    .translate([element.offsetWidth / 2, element.offsetHeight / 2]);
  
              path = d3.geo.path()
                    .projection( projection );
    
                return {path: path, projection: projection};
            }  });

   In VS code I get this 

Error: [object XMLHttpRequest]
datamaps.usa.js:762
    at Object.<anonymous> (https://cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.9/datamaps.usa.js:762:28)
    at Object.t (https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js:1:1368)
    at XMLHttpRequest.u (https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js:1:9873)

I have found with datamap is not possible.
what is Fips?
in counties is 1. 1000 2. 5000
and in education 1001,1002
how can be possible to match them.
Should I make average of education and pass to counties 1000 ?

function makeMyMap(error, states, data) {
find =()=>{

};

    var legend_labels = ["< 500", "500+", "1000+", "1500+", "2000+", "2500+", "3000+", "3500+", "4000+", "4500+", "5000+", "5500+", "6000+"];
    var color = d3.scale.threshold()

        .domain([d3.min(data.bachelorsOrHigher), d3.max(data.bachelorsOrHigher)])
        .range(["#dcdcdc", "#d0d6cd", "#bdc9be", "#aabdaf", "#97b0a0", "#84a491", "#719782", "#5e8b73", "#4b7e64", "#387255", "#256546", "#125937", "#004d28"]);
    svg.append("g")
        .selectAll(".county")
        .data(topojson.feature(states, states.objects.counties).features)
        .enter()
        .append('path')
        .attr('d', path)
        .attr('class', 'county').style("fill", (d) =>
        color(find(d)));