# Choropleth Map questions

**URL:** <https://forum.freecodecamp.org/t/choropleth-map-questions/206032>\
**Category:** General\
**Created:** [July 4, 2018, 10:56am UTC](https://forum.freecodecamp.org/t/choropleth-map-questions/206032 "2018-07-04T10:56:10Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![lubodrinka](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lubodrinka/32/158618_2.png) [@lubodrinka](https://forum.freecodecamp.org/u/lubodrinka)\
**Post date:** [July 4, 2018, 10:56am UTC](https://forum.freecodecamp.org/t/choropleth-map-questions/206032/1 "2018-07-04T10:56:10Z")

</div>

> **[Choropleth Map](https://codepen.io/vanderdrilu/pen/NzmoeX)**
>
> ...

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

> <https://github.com/markmarkoh/datamaps/blob/master/README.md#getting-started>

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

```auto
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 

```

```auto
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 ?

```auto
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)));

```

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 17, 2021, 8:18pm UTC](https://forum.freecodecamp.org/t/choropleth-map-questions/206032/2 "2021-01-17T20:18:46Z")

</div>

Closed on January 17, 2021, 8:18pm UTC