[beta] Choropleth Map problems

I’m having trouble rendering a map in D3. I’m using the D3 course on PluralSight by Ben Simmons. This is what I have below:

 const width = 960;
 const height = 960;

/*const projection = d3.geo.alberUsa()
              .translate([w/2, h/2])
              .scale([500]);
*/

//Projection comes from topojson
const path = d3.geo.path();
        //.projection(null);

//add SVG to body
const svg = d3.select("body")
      .append("svg")
      .attr("width", width)
      .attr("height", height);

d3.json( "https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects- fcc/master/src/data/choropleth_map/counties.json",
(error, us) => {
  if (error) return console.error(error);
        svg .append("path")
           .datum(topojson.feature(us, us.objects.counties))
           .attr("id", "land")
           .attr("d", path);
      }
  );

You’ve only made the data avaiable using datum, now you need to render on the page using that information, for that you use .enter().append(), append will take as a parameter whatever selector your new element will have (a class, a rect, a circle, etc…)

Is this what you meant?

const width = 960;
const height = 960;

const projection = d3.geo.albersUsa()
      .translate([w / 2, h / 2])
      .scale([500]);

//Projection comes from topojson
const path = d3.geo.path()
        .projection(projection);

//add SVG to body
const svg = d3
  .select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

d3.json(
  "https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/counties.json",
  (error, us) => {

 svg.append("path")     
  .enter() 
  .data(topojson.feature(us, us.objects.counties).features)
  .attr("id", "counties")
  .attr("d", path);
}
);

Not really, you’re using the “topojson” library (which i’ve never used) so i can’t really tell you if the data is being properly passed to the function subsequent functions.
But the way it works is basically like this (this is a snippet from other project i’ve made, hopefully it can be of help to you):

/*Append a "g" SVG grouping */
container.append('g')
       /*for every 'rect' object that is created in the future, data.monthlyVariance will be passed into it " */
        .selectAll('rect').data(data.monthlyVariance).enter().append('rect')
/*the rest of this code is just positioning and styling */
            .attr('y', (item, index) => item.month * node.height)
            .attr('x', (item, index) => (item.year - api_data.year[0] + 1) * node.width)
            .attr('width', node.width)
            .attr('height', node.height)
            .style('fill', (d, i) => color(d.variance))

Hopefully that gives you a rough idea of d3 works. If you’re trying to learn i’d recommend you to do the first projects, it’s far easier to understand and learn from. The choropleth project involves data scaling and more complex API consumption, if you’re in the process of learning D3 that might get in your way.

1 Like

Your code looks like it was the Heat Map project. I’ve completed the first 2 projects. I’m doing the next one on the beta site. My data isn’t getting properly passed. I was doing it on codepen and it seemed to have a problem with getting data from link given. I copied the json into it’s own file. Switched over to Atom and Cloud9 and it works. Thanks for your replies.

Hey, i’m doing the chrolopeth project right now, the problem with your code was that you didn’t use d3.geoPath().

This should work:

    container.append('g')
                .selectAll('path')
                .data(topojson.feature(county, county.objects.counties).features)
                .enter().append('path')
                .attr('d', d3.geoPath())

Here is the documentation for geopath: https://github.com/d3/d3-geo/blob/master/README.md#geoPath
and for the ‘d’ SVG element: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d

1 Like

d3.geoPath is stored in the ‘const path’. I got it working by putting the JSON in a local file. I’ll investigate why the links FCC gave didn’t work when I’m finished. I’ve had trouble with CodePen and FCC links before. Since you’re on the same project, Ben Sulins on PluralSight has 2 pretty good courses on D3. You can get 3 months free at PluralSight by signing up for a Visual Studio Dev account.

1 Like