Choropleth: using projections breaks it, commenting it out makes it work, need help

Hello everyone, I am working on Choropleth projects and I am having trouble understanding geoJSON fully.

Here is my project in its current state: https://codepen.io/VerminatorX1/pen/VwEaXee

When I was creating geoPath() as intended in tutorials and guides, I was getting messy artifacts. I accidentally made it work by commenting out projection, as you can see.

Please see for yourself what will happen if you uncomment it. What am I doing wrong?

On the link above, you can find information on the commented code you mentioned. Listed on the page are explanation for various methods of d3-geo.

My link refers to the method used on your code on

ln 28: .fitSize([1100, 800], counties)
ln29: .fitExtent([[10, 10], [990, 890]], counties)

You only needed to only one of the two method for your purpose.
Using both methods is kind of redundant.
fitSize stretches the map to specified width and height and places the map at (0,0) of the svg.
fitExtent stretches the map to a rectangle you specified [[x₀, y₀], [x₁, y₁]].

The error is on line 28 of fitSize.
You stretched the map to a width of 1100, this exceeds your svg width of 1000, thus the extra 100px is cropped off on the right side of the svg.

You need to increase svg width to more than 1100 or reduce the width used in fitSize to less than 1000.

Thank you very much, what a silly oversight of me, need some rest I guess :sweat_smile:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.