2b:null 2c:["$","title",null,{"children":"Basic map projections | Dynamic Data Visualization 373 | Observable"}] 31:T5c2,# Basic map projections ## and when to use them There are literally hundreds of map projections and D3 (together with it's extended projections package) implements about 100 of them. D3's [GitHub repository for projections](https://github.com/d3/d3-geo-projection/tree/main/src) lists 90 top-level projections plus another 14 specialty projections living in sub-directories. Most of these are really *families* of projections with parameters that allow you to rotate or shift or clip or interrupt the projection in a number of ways. Two maps might be in the same projection family but, if they are characterized by different parameters and present different regions of the earth, they might look entirely different. Thus, the kinds of maps we can generate with D3 are virtually endless. If you want to communicate ideas via maps, though, you should probably follow some common practices dictated by the properties that maps should have to get those ideas across. One complication arises continually: > In the process of flattening the earth's essentially spherical surface onto a flat map, we invariably introduce distortion. Thus, map making becomes a process of compromise - preserving (if possible) those features that are essential and minimizing other effects. So let's take a look at map projection in general with a focus on - The properties that a map can and should have in a particular context and - The types of projections that might have those properties.32:T197b,viewof projection = { let projections = [ { name: "Equirectangular", projection: d3.geoEquirectangularRaw, comment: `The equirectangular projection is probably the simplest of all map projections. A point on the globe with latitude ${ tex`\varphi`.outerHTML } and longitude ${tex`\theta`.outerHTML} simply maps to the point ${ tex`(\theta,\varphi)`.outerHTML }. The resulting latitude lines (also called parallels) are all horizontal and all have the same length. We call a map with this property *cylindrical*. In spite of its simplicity, the equirectangular projection does not have many nice properties. Angles, areas, distances, and shapes are all greatly distorted.` }, { name: "Mercator", projection: d3.geoMercatorRaw, comment: `Gerardus Mercator created his projection in 1569. It represented a major breakthrough in navigation because paths of constant compass bearing are represented as straight lines. Ultimately, this property follows from the fact that Mercator’s projection is a *conformal, cylindrical projection*.` }, { name: "Lambert's cylindrical equal area", projection: d3.geoCylindricalEqualAreaRaw(0), comment: `The mathematician Johann Lambert created this projection in 1772. Its somewhat long winded name arises from the fact that Lambert was a pioneer in map projection and created quite a few them. Like the previous projections, this projection is cylindrical. Unlike those, this projection is *equal area* - that is, it represents equal areas on the globe with equal areas on the map. It has minimal distortion near the equator but unbounded disortion near the poles.` }, { name: "Gall-Peters projection", projection: d3.geoCylindricalEqualAreaRaw(Math.PI / 4), comment: `The Gall-Peters map is another cylindrical, equal area map. Unlike Lambert's projection, it has minimal distortion at two parallels, namely ${ tex`\pm45^{\circ}`.outerHTML }, and less overall distortion. The Gall-Peters map was first constructed in 1855 by James Gall and rediscovered in 1967 by Arno Peters. Peters virgorously promoted the map as superior to Mercator's, which he described as advantageous to Northern countries since their area is inflated.` }, { name: "Sinusoidal", projection: d3.geoSinusoidalRaw, comment: `The sinusoidal map is another equal area map but, rather than cylindrical, it is *pseudo-cylindrical*. This simply means that, while all the parallels are horizontal, they need not have the same length. As a result, the lines of constant longitude (also called meridians) are curved - they are sinusoidal curves, in fact!` }, { name: "Equal Earth", projection: d3.geoEqualEarthRaw, comment: `The Equal Earth map projection is another pseudo-cylindrical, equal area map projection. It was devised in 2018 as a map that has much less overall distortion than the Gall-Peters projection, as well as nicer aesthetic features.` }, { name: "Polar stereographic", projection: d3.geoStereographicRaw, polar: true, comment: `Conceptually, a *stereographic projection* is not projected onto a cylinder surrounding the sphere but, rather, to a plane that is tangent to the sphere. Projections onto a plane are also often called *azimuthal projections*. The plane can be tangent at any point but the point of tangency is often the North or South pole to map polar regions. As a result, the parallels map to concentric circles and the meridians to rays emanating from the pole. In the stereographic projection, the meridians are spaced to make the map conformal.` }, { name: "Azimuthal equidistant", projection: d3.geoAzimuthalEquidistantRaw, polar: true, comment: `As the name suggests, this is another example of an azimuthal projection. For an azimuthal equidistant projection, the distance from any point on the map to point of tangency with the projection plane is proportional to the distance to the corresponding point on the globe. As a result, the map is equidistant in the sense that distances are represented correctly relative to this central point.` }, { name: "Conic conformal", projection: d3.geoConicConformalRaw(Math.PI / 6, Math.PI / 3), comment: `A conic projection is created by projecting onto a cone producing a shape like the one seen here. The meridians map to radial lines that converge to a center which is often a pole. Parallels map to portions of circles concentric about the pole. In this case, those parallels are spaced to make the map conformal. Conic projections projections are not particularly appropriate for a world map but they often display a relatively small distortion at mid and high latitudes. As a result, they are a common choice to map large portions of one hemisphere - like North America` }, { name: "Conic equal area", projection: d3.geoConicEqualAreaRaw(Math.PI / 6, Math.PI / 3), comment: `If we space the parallels of a conic projection appropriately, then we can make it an equal area map.` }, { name: "Robinson", projection: d3.geoRobinsonRaw, comment: `Arthur Robinson created his map projection in 1963. While this is again a psuedo-cylindrical projection, it is neither equal area or conformal; rather, it was specifically produced in an attempt to minimize both area and angle distortion. The National Geographic Society used the Robinson projection for its world maps from 1988 to 1998.` }, { name: "Aitoff", projection: d3.geoAitoffRaw, comment: `Aitoff's map is a horizontal stretched, equidistant azimuthal map with central point on the equator. David Aitoff created in 1889 in an attempt to find a projection that is neither equal area nor conformal but rather a compromize between the two.` }, { name: "Winkel Tripel", projection: d3.geoWinkel3Raw, comment: `The Winkel-tripel was created by Oswald Winkel in 1921. His objective was to minimize the combined distortion of three different quantities - area, direction, and distance; hence, the name 'tripel'. He did this by taking an average of two other map projections - the equirectangular and the Aitoff. The result is neither cylindrical or azimuthal; rather, it's a composite map.` } ]; return Inputs.select(projections, { value: projections[0], format: (o) => o.name }); }33:T4b6,## Properties and types When dealing with a map there are two big questions that we should ask about the map. First, what *properties* does the map have? Does it represent equal areas in equal proportions? Does it properly represent distance to some central point? Does it represent direction is some canonical way? Second, what *type* of map projection is it? Was it constructed by projecting onto a cylinder, cone, or in some other way? A proper understanding of map type will help us analyze the first question. ### Properties When considering what map to use for a particular purpose, you need to know what kind of properties the map has. There are many properties that might be relevant to all sorts of questions but there are two major properties that we will consider here. #### Equal area Is the map equal area (also called area preserving)? This means quite simply that areas are represented in their correct proportions. Mercator's projection, shown below, is not equal area. Greenland (with an area of about 2.2 million square kilometers) looks larger than South America (with an area of about (17.8 million square kilometers). The Equal Earth projection, by contrast, is area preserving.34:T102d,#### Balancing objectives Since I am a mathematician, let's state a couple of theorems: > **Thm 1**: A map projection cannot represent all distances between pairs of points proportionally. This seems reasonably easy to believe. To be distance preserving in this fashion, the projection would have to preserve shapes exactly and, in particular, it would preserve any curvature inherent in the shape. Thus, we can't flatten a curved surface without distorting some distances. Nonetheless, we can often do a reasonable job of minimizing that distortion, particularly on maps of small regions. That's obviously a desirable for maps designed for navigation. Our second theorem is a little more challenging: > **Thm 2**: A map projection cannot be both conformal and area preserving. This is a well-known and long established theorem that's been proven mathematically; it is not a topic of discussion. Both properties are desirable in certain situations, though, so it's essential to know when to design your map with the appropriate property. Here are some criteria to consider when choosing between these properties: **Area preserving**: *When designing a choropleth map, it's often desirable for the map to be equal area, particularly when the shading is intended to indicate density*. The reason is pretty clear, I suppose. If you shade a Mercator map by temperature, for example, then your impression of average temperature is likely to be skewed towards the cooler side due to the tremendous inflation near the poles. **Conformality**: *When designing a map for navigation, it's often desirable for the map to be conformal.* The classic example in this context is Mercator's projection. Not only is Mercator's projection conformal but the parallels (lines of constant latitude) are all represented as horizontal lines on the map. As a result, *paths of constant compass bearing appear as straight lines on the map*. This was of tremendous importance for ships navigating at sea during Mercator's time and became more important throughout the centuries after his life.

Aside

Mercator's map has often been criticized for its disproportionate representation of areas and, as we've already said, it should *not* be used for choropleth maps. That was simply not his objective in designing the map, though. In reality, there is no way to describe Mercator's accomplishments as anything less than a technical masterpiece and watershed event in our understanding of the world. In fact, Mercator's formula for the placement of the parallel for the line at latitude ${tex`\varphi`} boils down to ${tex.block`h(\varphi) = \int_0^{\varphi} \sec(\phi)\,d\phi = \ln(|\sec(\varphi) + \tan(\varphi)|).`} Now consider that he did this 100 years prior to the invention of calculus and 35 years prior the discover of the logarithm. His technique for actually computing the placement of the parallels was essentially what we would today call numerical integration. Truly a marvel.

If you're curious about these mathematical aspects, I've written a classroom module for multivariable calculus students.

### Types of map projections When we refer to the *type* of a map projection we essentially classifying the projections roughly by the way they are constructed. These generally fall into one of three types: - Cylindrical, - Conic, or - Azimuthal. There are variations on these themes, such as composite maps formed by combining other maps and interrupted maps with discontinuities. We'll focus on the three main types here, though. #### Cylindrical projections Conceptually, a cylindrical projection can be visualized by wrapping a cylinder around a globe and projecting points on the globe out to the cylinder. Lambert's equal area projection is obtained quite literally from a geometric projection where each point on the globe is projected out radially from a line that goes through the North and South poles. This can be illustrated like so: 35:T911,When we refer to a "cylindrical projection", we don't mean that it arises as a literal geometric projection in the sense that Lambert's does. Rather, we mean that the parallels all appear on the map as horizontal lines of constant width and that the meridians are evenly spaced and are perpendicular to the parallels. This geometric characterization leads to an algebraic form that a cylindrical projection must have, namely: ${tex.block`T(\varphi,\theta) = (\theta,h(\varphi)).`} We have several examples of this by now: - The equirectangular projection: ${tex`T(\varphi,\theta) = (\theta,\varphi)`}, - Lambert's equal area projection: ${tex`T(\varphi,\theta) = (\theta,\sin(\varphi))`}, and - Mercator's projection: ${tex`T(\varphi,\theta) = (\theta, \ln(|\sec(\varphi) + \tan(\varphi)|))`}. Of these, only Lambert's is a literal projection. Nonetheless, all cylindrical projections share similarities and can be analyzed in similar ways. ##### Modifications As noted, cylindrical projections tend to distort towards the poles. Conversely, they distort very little near the equator. We say the equator is a "standard parallel" for a cylindrical map. More generally, a line along which the distortion is zero is called a standard line for the projection. There's a standard trick to increase this "zone of minimal distortion" - simply decrease the radius of the cylinder onto which the projection takes place. That way, the cylinder intersects the sphere at two parallels on either side of the equator. If those parallels aren't too far apart, then the zone between them will have small distortion. This is exactly the technique used to modify Lambert's equal-area projection to obtain the Gall-Peters projection, which has standard parallels at ${tex`\pm45^{\circ}`}. Also, the cylinder need not be centered on the line through the North and South poles; if not, then the projection is called *oblique*. If the cylinder is centered on an axis that goes through two opposite points on the equator, then the projection is called *transverse*. A commonly used example is the transverse Mercator projection. The figure below shows a transverse Mercator projection whose standard line meridian is controlled by the slider; the default value of the slider has the standard meridian going right down the middle of the US.36:Tbd5,{ // Set up of SVG is virtually identical let w = 550; let h = 900; let pad = 20; let svg = d3 .create("svg") .attr("viewBox", [0, 0, w, h]) .attr("width", "100%") .style("max-width", `${w}px`) .style("border", "solid 1px black"); let proj = d3 .geoTransverseMercator() .rotate([71 + 4 / 6, -42.5]) .fitExtent( [ [pad, pad], [w - pad, h - pad] ], nh.boundary ); // Rather than d3.path, we use d3.geoPath, which is specifically desgined // to work with GeoJSON let path = d3.geoPath().projection(proj); let graticule = d3 .geoGraticule() .extent([ [-75, 40], [-70, 46] ]) .step([0.5, 0.5])(); // Draw the graticule let graticule_path = svg .append("g") .selectAll("path.graticule") .data([graticule]) .join("path") .attr("d", path) .attr("fill", "none") .attr("stroke", "#333") .attr("stroke-width", 0.4); // Now, generating the map within the SVG is quite similar to our last // image. let map = svg.append("g"); let state_group = map.append("g"); state_group .selectAll("path.state") .data(nh.boundary.features) .join("path") .attr("d", path) .attr("fill", "lightgray") .attr("stroke-width", "1") .attr("stroke", "#222"); let road_group = map.append("g"); road_group .append("g") .selectAll("path.road") .data(nh.roads.features) .join("path") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 3.5) .attr("stroke-linejoin", "round") .attr("d", path) .style("pointer-events", "none"); road_group .append("g") .selectAll("path.road") .data(nh.roads.features) .join("path") .attr("fill", "none") .attr("stroke", "#fff") .attr("stroke-width", 2.5) .attr("stroke-linejoin", "round") .attr("d", path) .style("pointer-events", "none"); let city_data = d3.csvParse( `city,lat,lon Manchester,42.9846891,-71.4438932 Nashua,42.7490744,-71.4905435 Concord,43.2324926,-71.5612523 Dover,43.1864894,-70.8836114 Rochester,43.2984927,-70.9770055 Salem,42.78827,-71.22172 Merrimack,42.8537565,-71.5209558 Keene,42.9534961,-72.3068771 Portsmouth,43.0605947,-70.7803481 Littleton,44.3062,-71.7701 Lebanon,43.6423,-72.2518`, d3.autoType ); city_data.forEach(function (o) { let [x, y] = proj([o.lon, o.lat]); o.x = x; o.y = y; }); let city_group = svg.append("g"); let city_names = city_group .selectAll("text.city") .data(city_data) .join("text") .attr("class", "city") .attr("x", (o) => o.x) .attr("y", (o) => o.y) .text((d) => d.city) .style("font-family", "sans-serif") .style("font-size", "14px") .attr("pointer-events", "none"); city_group .selectAll("circle.city") .data(city_data) .join("circle") .attr("cx", (o) => o.x) .attr("cy", (o) => o.y) .attr("r", 3) .attr("fill", "yellow") .attr("stroke", "black"); return svg.node(); }37:T707,{ let im1 = await FileAttachment("stereo.png").image({ width: 400 }); let im2 = await FileAttachment("ortho.png").image({ width: 400 }); let container = d3 .create("div") .style("width", "900px") .style("height", "700px") .style("overflow", "hidden"); let labels = container.append("div").style("width", "900px"); labels .append("div") .style("display", "inline-block") .style("text-align", "center") .style("width", "444px") .append("text") .text("Stereographic"); labels .append("div") .style("display", "inline-block") .style("text-align", "center") .style("width", "444px") .append("text") .text("Orthographic"); let top = container.append("div").style("width", "900px"); top .append("div") .style("transform", "translate(0,30px)") .style("display", "inline-block") .style("width", "444px") .append(() => im1); top .append("div") .style("display", "inline-block") // .style("transform", "translate(0,10px)") .style("width", "444px") .append(() => im2); let bot = container.append("div").style("width", "900px"); bot .append("div") // .style("transform", "translate(0,40px)") .style("display", "inline-block") .style("width", "444px") .append(() => plain_pic(d3.geoStereographic().rotate([0, -90]), { w: 400, h: 400, scale: 300, translate: [200, 200] }) ); bot .append("div") .style("display", "inline-block") // .style("transform", "translate(0,10px)") .style("width", "444px") .append(() => plain_pic(d3.geoOrthographic().rotate([0, -90]), { w: 400, h: 400, scale: 200, translate: [200, 200] }) ); return container.node(); }38:T4b4,The stereographic projection is conformal while the orthographic is neither conformal nor equal area. Both distort distance quite a lot as we move away from the pole. All polar azimuthal projections map parallels to concentric circles centered at the point of tangency with the meridians appearing as equally spaced rays emanating from the center. This implies that the general form of a polar azimuthal projection should be ${tex.block`T(\varphi,\theta) = (r(\varphi)\cos(\theta), r(\varphi)\sin(\theta)).`} Put another way, we simply need to know how to space out the circles representing the parallels as we move away from the center and the function ${tex`r(\varphi)`} tells us exactly how to do so. More generally, any function ${tex`T(\varphi,\theta)`} of this form is considered to be a polar azimuthal projection; it needn't arise from an actual physical process. An important example is the *azimuthal equidistant* projection where ${tex`r(\varphi)`} is defined to be proportional to the actual distance along the globe from the pole to any point at latitude ${tex`\varphi`}. This map has the property that distances from any point to the pole are represented proportionally. It looks like so:39:T92a,asheville_map = { let w = 600; let h = w; let svg = d3 .create("svg") .attr("viewBox", [0, 0, w, h]) .style("max-width", `${w}px`); let proj = asheville_projection.proj; let path = d3.geoPath().projection(proj); let state_group = svg.append("g"); state_group .selectAll("path.state") .data(contiguous_us.states.features) .join("path") .attr("d", path) .attr("fill", "#eee") .attr("stroke", "black") .attr("stroke-width", 1) .attr("opacity", 1); let cities = contiguous_us.cities.features.filter( (o) => o.properties.POPULATION > 250000 || o.properties.NAME == "Asheville" ); cities.forEach(function (o) { let [x, y] = proj(o.geometry.coordinates); o.properties.x = x; o.properties.y = y; }); let asheville = cities.filter((o) => o.properties.NAME == "Asheville")[0]; let radii_group = svg.append("g"); radii_group .selectAll("path.circ") .data( [600, 200].map((r) => d3 .geoCircle() .center(asheville.geometry.coordinates) .radius((r / (6371 * Math.PI * 2)) * 360)() ) ) .join("path") .attr("d", path) .attr("class", "circ") .attr("data-tippy_show", "true") .attr("fill", "lightblue") .attr("fill-opacity", 0.4) .attr("stroke", "black") .attr("stroke-width", 1) .on("pointerenter", function () { // radii_group.selectAll("circle").attr("stroke-width", 1); d3.select(this).attr("stroke-width", 3); }) .on("pointerleave", function (a, b, c) { d3.select(this).attr("stroke-width", 1); }) .each(function (o, i) { tippy(this, { content: `One day range of an unladen ${ i == 0 ? "European" : "African" } swallow`, theme: "light-border", show: true }); }); let city_group = svg.append("g"); city_group .selectAll("circle.city") .data(cities) .join("circle") .attr("cx", (o) => o.properties.x) .attr("cy", (o) => o.properties.y) .attr("r", (o) => (o.properties.NAME == "Asheville" ? 4 : 2)) .attr("fill", (o) => (o.properties.NAME == "Asheville" ? "blue" : "black")) // .attr("stroke", "black") // .attr("stroke-width", 1) // .attr("opacity", 1) .append("title") .text((o) => o.properties.NAME); return svg.node(); }3a:T45a,If the cone is tangent to the sphere, there will be one standard parallel along which there is no distortion of length. More often, the cone intersects the sphere along two parallels, which become standard parallels on the map. As a result, conic projections can achieve very small distortion along a large area in a temperate zone. Like azimuthal projections, the parallels of a conic projection map to circular arcs and the meridians map to rays emanating from the common center of those circles. Unlike an azimuthal projection, the common center of the circles typically lies off the map. ##### Examples Conic projections are not generally appropriate for whole earth maps. They do a great job representing large regions restricted to the temperate zones, though. Here are a couple of examples. You might recall the [US Centric Albers Projection](https://observablehq.com/d/0d0eeabbd8040493#albers_us_map) from our intro Map lesson. The portion that shows the 48 contiguous US States is generated by an equal area conic projection with central meridian 96°'W and standard parallels 29° 30'N and 44° 30'N.3b:T855,us_conic = { // Set up of SVG is virtually identical let w = 900; let h = 530; let svg = d3 .create("svg") .attr("viewBox", [0, 0, w, h]) .attr("width", "100%") .style("max-width", `${w}px`) .style("border", "solid 1px black"); // Rather than defining a scale, we'll use a geographic *projection* // to map points to our SVG image space. The points live in a GeoJSON // object called stateShapes. let proj = d3 .geoConicEqualArea() .parallels([29.5, 45.5]) .rotate([96, 0]) .fitSize([w, h], contiguous_us.states); // Rather than d3.path, we use d3.geoPath, which is specifically desgined // to work with GeoJSON let path = d3.geoPath().projection(proj); let graticule = d3 .geoGraticule() .extent([ [-130, 20], [-50, 80] ]) .step([5, 5])(); // Draw the graticule let graticule_path = svg .append("g") .selectAll("path.graticule") .data([graticule]) .join("path") .attr("d", path) .attr("fill", "none") .attr("stroke", "#333") .attr("stroke-width", 0.4); // Now, generating the map within the SVG is quite similar to our last // image. let map = svg.append("g"); let state_group = map.append("g"); state_group .selectAll("path.state") .data(contiguous_us.states.features) .join("path") .attr("d", path) .attr("fill", "lightgray") .attr("stroke-width", "1") .attr("stroke", "#fff"); // let cities = contiguous_us.cities.features.filter( // (o) => o.properties.POPULATION > 250000 || o.properties.NAME == "Asheville" // ); // cities.forEach(function (o) { // let [x, y] = proj(o.geometry.coordinates); // o.properties.x = x; // o.properties.y = y; // }); // let city_group = svg.append("g"); // city_group // .selectAll("circle.city") // .data(cities) // .join("circle") // .attr("cx", (o) => o.properties.x) // .attr("cy", (o) => o.properties.y) // .attr("r", 1.5) // .attr("fill", "black") // .attr("stroke", "black") // .append("title") // .text((o) => o.properties.NAME); return svg.node(); }3c:Tc8c,nc_conic = { let w = 900; let h = 420; let pad = 20; let svg = d3 .create("svg") .attr("viewBox", [0, 0, w, h]) .attr("width", "100%") .style("max-width", `${w}px`) .style("border", "solid 1px black"); // Rather than defining a scale, we'll use a geographic *projection* // to map points to our SVG image space. The points live in a GeoJSON // object called stateShapes. let proj = d3 .geoConicConformal() .parallels([35 + 2 / 6, 36 + 1 / 6]) .rotate([80, 0]) .fitExtent( [ [pad, pad], [w - pad, h - pad] ], nc.boundary ); // Rather than d3.path, we use d3.geoPath, which is specifically desgined // to work with GeoJSON let path = d3.geoPath().projection(proj); let graticule = d3 .geoGraticule() .extent([ [-85, 30], [-70, 40] ]) .step([1, 1])(); // -84.32186899999999,33.842316,-75.460621,36.588117 // Draw the graticule let graticule_path = svg .append("g") .selectAll("path.graticule") .data([graticule]) .join("path") .attr("d", path) .attr("fill", "none") .attr("stroke", "#333") .attr("stroke-width", 0.4); // Now, generating the map within the SVG is quite similar to our last // image. let map = svg.append("g"); let state_group = map.append("g"); state_group .selectAll("path.state") .data(nc.boundary.features) .join("path") .attr("d", path) .attr("fill", "lightgray") .attr("stroke-width", "1") .attr("stroke", "#222"); let roads = nc.roads.features.filter((r) => r.properties.RTTYP == "I"); let road_group = map.append("g"); road_group .append("g") .selectAll("path.road") .data(roads) .join("path") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 3) .attr("stroke-linejoin", "round") .attr("d", path) .style("pointer-events", "none"); road_group .append("g") .selectAll("path.road") .data(roads) .join("path") .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("d", path) .style("pointer-events", "none"); let city_data = d3.csvParse( `city,lat,lon Asheville,35.6,-82.55 Charlotte,35.2271,-80.8431 Durham,35.994,-78.8986 Fayetteville,35.0527,-78.8784 Raleigh,35.7796,-78.6382 Wilmington,34.2104,-77.886 Winston-Salem,36.0999,-80.2442 Greenville,35.6127,-77.3664, Rocky Mount,35.9382,-77.7905`, d3.autoType ); city_data.forEach(function (o) { let [x, y] = proj([o.lon, o.lat]); o.x = x; o.y = y; }); let city_group = svg.append("g"); let city_names = city_group .selectAll("text.city") .data(city_data) .join("text") .attr("class", "city") .attr("x", (o) => o.x) .attr("y", (o) => o.y) .text((d) => d.city) .style("font-family", "sans-serif") .style("font-size", "14px") .attr("pointer-events", "none"); city_group .selectAll("circle.city") .data(city_data) .join("circle") .attr("cx", (o) => o.x) .attr("cy", (o) => o.y) .attr("r", 3) .attr("fill", "yellow") .attr("stroke", "black"); return svg.node(); }3d:T54c,## Summary We've seen three main types of map projections, all of which can be modified from their most basic forms: - *Cylindrical or pseudo-cylindrical projections*: Conceptually, these project the globe onto a cylinder and represent parallels as horizontal lines. They are generally appropriate for whole earth maps. By rotating and slightly contracting the cylinder and then zooming in, these projections can also be useful to map specific regions, as with the transverse Mercator projection. - *Azimuthal projections*: These project the globe onto a plane tangent to the globe at some point. These are most often used to map polar regions, in which case, the parallels appear as concentric circles with the meridians represented as rays emanating from the center of the map. In some rather special cases, we might use an azimuthal projection at some other point of interest. - *Conic projections*: The project the globe onto a cone so they are generally only appropriate to map part of one hemisphere. Like azimuthal maps, the parallels again appear as concentric circles but the center of those circles generally lie off the map. All three projection types can be arranged to be conformal, equal-area, or neither by choosing the spacings of the graticule appropriately. There are, of course, other types of projections, such as the Winkel Tripel:3e:T43f,function plain_pic(proj, opts = {}) { let { w = 600, h = 400 } = opts; let svg = d3 .create("svg") .attr("viewBox", [0, 0, w, h]) .style("max-width", `${w}px`); // .style("border", "solid 1px black"); proj.fitSize([w, h], land); if (opts.scale) { proj.scale(opts.scale); } if (opts.translate) { proj.translate(opts.translate); } let path = d3.geoPath().projection(proj); let graticule = d3.geoGraticule().extent([ [-180, -90], [180, 90] ])(); // Draw the graticule let graticule_path = svg .append("g") .selectAll("path.graticule") .data([graticule]) .join("path") .attr("d", path) .attr("fill", "none") .attr("stroke", "currentcolor") .attr("stroke-width", 0.4); // Draw the countries let land_group = svg.append("g"); land_group .selectAll("path.land") .data(land.features) .join("path") .attr("class", "land") .attr("d", path) .attr("fill", "#eee") .attr("stroke", "currentcolor") .attr("stroke-width", 1) .attr("opacity", 1); return svg.node(); }3f:T80a,function projection_transition_pic(p0, p1, t) { let w = 800; let h = 0.625 * w; let proj = interpolateProjection(p0, p1)(t); let svg = d3 .create("svg") .attr("viewBox", [0, 0, w, h]) .style("max-width", `${w}px`); // .style("border", "solid 1px black"); let path = d3.geoPath().projection(proj); let graticule = d3.geoGraticule().extent([ [-180, -89], [180, 89] ])(); // Draw the graticule let graticule_path = svg .append("g") .selectAll("path.graticule") .data([graticule]) .join("path") .attr("d", path) .attr("fill", "none") .attr("stroke", "#333") .attr("stroke-width", 0.4); // Draw the countries let land_group = svg.append("g"); land_group .selectAll("path.land") .data(land.features) .join("path") .attr("class", "land") .attr("d", path) .attr("fill", "#eee") .attr("stroke", "black") .attr("stroke-width", 1) .attr("opacity", 1); return svg.node(); function interpolateProjection(p0, p1) { const { scale: scale0, translate: translate0, rotate: rotate0 } = fit(p0.projection, p0.polar); const { scale: scale1, translate: translate1, rotate: rotate1 } = fit(p1.projection, p1.polar); return (t) => d3 .geoProjection((x, y) => lerp2(p0.projection(x, y), p1.projection(x, y), t) ) .scale(lerp1(scale0, scale1, t)) .translate(lerp2(translate0, translate1, t)) .rotate(lerp2(rotate0, rotate1, t)); function lerp1(x0, x1, t) { return (1 - t) * x0 + t * x1; } function lerp2([x0, y0], [x1, y1], t) { return [(1 - t) * x0 + t * x1, (1 - t) * y0 + t * y1]; } function fit(raw, polar) { let p = d3.geoProjection(raw); p.fitExtent( [ [0, 0], [w - 0, h - 0] ], land ); if (polar) { p.rotate([0, -90]).scale(200); } return { scale: p.scale(), translate: p.translate(), rotate: p.rotate() }; } } }40:[{"id":"bb209905cbf0d79f69101288bbeda04bccd52958072650d40a27f67c63f3705edeb1560e0f0e244160bbd7483b00c0199a6d072cae5335004507aac165b0018b","href":"https://static.observableusercontent.com/files/bb209905cbf0d79f69101288bbeda04bccd52958072650d40a27f67c63f3705edeb1560e0f0e244160bbd7483b00c0199a6d072cae5335004507aac165b0018b","name":"nc@2.json","type":"application/json","lastModified":1680010946075.305,"size":185470},{"id":"fdddd16659f3fa387846aa94cd5dd53edd7054f0bab9c0d1479a09c8b58a33140a01f76c7be326b6db181c75c69d46637e86997c33e0de2a214b8d7d0f9c5ce1","href":"https://static.observableusercontent.com/files/fdddd16659f3fa387846aa94cd5dd53edd7054f0bab9c0d1479a09c8b58a33140a01f76c7be326b6db181c75c69d46637e86997c33e0de2a214b8d7d0f9c5ce1","name":"nh@1.json","type":"application/json","lastModified":1680010946075.305,"size":48721},{"id":"062ab443133e3e58540b6757dd8547f5bdf23d9536db025a2966026966a8d6cf8b455d2fdad4fc4f3aad3673b4e247dae90581a6ab794431b5b7da5a9e549af6","href":"https://static.observableusercontent.com/files/062ab443133e3e58540b6757dd8547f5bdf23d9536db025a2966026966a8d6cf8b455d2fdad4fc4f3aad3673b4e247dae90581a6ab794431b5b7da5a9e549af6","name":"contiguous_us.json","type":"application/json","lastModified":1680010946075.305,"size":177612},{"id":"eeed69922b9bd7f7db3e40dfbf719be361024e94000df99d3e6fe959ce6a573b166c56735522a3f9df871a5279af9e2579295b849c7a3f532292a83c12958b13","href":"https://static.observableusercontent.com/files/eeed69922b9bd7f7db3e40dfbf719be361024e94000df99d3e6fe959ce6a573b166c56735522a3f9df871a5279af9e2579295b849c7a3f532292a83c12958b13","name":"ne_110m_land.json","type":"application/json","lastModified":1680010946075.305,"size":52554},{"id":"004ba00c5fea904c0af5ff42fdb0eb7f3db3cb886369f9ca1af91637da82dd2becdcd78cabd54744ac28c625900b2010a0ab64e793f1ba853012af08cb82e6c8","href":"https://static.observableusercontent.com/files/004ba00c5fea904c0af5ff42fdb0eb7f3db3cb886369f9ca1af91637da82dd2becdcd78cabd54744ac28c625900b2010a0ab64e793f1ba853012af08cb82e6c8","name":"stereo.png","type":"image/png","lastModified":1680010946075.305,"size":405464},{"id":"90d22c9f199b216504258fe16e0e00427b57061cd68b8858a2ba3fde4ca53a1bbfa3360798ee2eaae206b1773255fe17b1a69dfc184f76aa8c8f5dfac6add288","href":"https://static.observableusercontent.com/files/90d22c9f199b216504258fe16e0e00427b57061cd68b8858a2ba3fde4ca53a1bbfa3360798ee2eaae206b1773255fe17b1a69dfc184f76aa8c8f5dfac6add288","name":"ortho.png","type":"image/png","lastModified":1680010946075.305,"size":402388},{"id":"7441194cfbb22ad868239b9168e623865b470138a286ebbd7e7bf33230a63417140b57d814a5e4596e30a3d48309a88a809dbda4e903f0c300daa5b073add763","href":"https://static.observableusercontent.com/files/7441194cfbb22ad868239b9168e623865b470138a286ebbd7e7bf33230a63417140b57d814a5e4596e30a3d48309a88a809dbda4e903f0c300daa5b073add763","name":"cone.png","type":"image/png","lastModified":1680010946075.305,"size":192215},{"id":"b5ae3ad324b83f81648c225f45b1567372d21591239d838420af8651e905994a2fc74351cf4ab73dbc73c357e0569e806dfe211c6914450600b230312ca080ba","href":"https://static.observableusercontent.com/files/b5ae3ad324b83f81648c225f45b1567372d21591239d838420af8651e905994a2fc74351cf4ab73dbc73c357e0569e806dfe211c6914450600b230312ca080ba","name":"cylindricalProjection.png","type":"image/png","lastModified":1680010946075.305,"size":215095},{"id":"af7c78889e69745a019095fd235ae2b3dcca547dda07834cf73fa023c2f68f77ac86169c4f766c887f98f4c8116fe53c7b8fc354c083f369d675907aab718e5e","href":"https://static.observableusercontent.com/files/af7c78889e69745a019095fd235ae2b3dcca547dda07834cf73fa023c2f68f77ac86169c4f766c887f98f4c8116fe53c7b8fc354c083f369d675907aab718e5e","name":"conformal.png","type":"image/png","lastModified":1680010946075.305,"size":176613}] 2f:{"id":"1989aac6562a5d62","slug":null,"title":"Basic map projections","thumbnail":"0b8d20d7f5f40d15fdc2429195dacae890cbe92dbca5aa3505e74ee7277e5435","access_level":"public","create_time":"$D2023-03-28T13:42:26.075Z","update_time":"$D2026-04-21T17:26:39.306Z","view_time":null,"first_public_time":"$D2023-09-07T00:28:20.357Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"a07c87acf1b22f86","login":"ddv373","name":"Dynamic Data Visualization 373","avatar_url":"https://avatars-next.observableusercontent.com/aa07fb823a47852e43ceca20a9030290c7b3befd6ad2b87a17c17f4b47176d35","tier":"education_2026","bio":""},"version":1826,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c3301e515dd08a41","login":"mcmcclur","name":"Mark McClure","avatar_url":"https://avatars-next.observableusercontent.com/e615e819ce83d43faef607e48c53c5ff63943aa0ba9f5848499bd02fef7396f4","tier":null,"bio":"I'm a professor of mathematics at the University of North Carolina Asheville. I've also done a fair amount of consulting work over the years focusing on scientific and data visualization.\n\nI'm happy to be part of the first Observable Ambassador's cohort."}],"members":[{"type":"individual","id":"c3301e515dd08a41","login":"mcmcclur","name":"Mark McClure","avatar_url":"https://avatars-next.observableusercontent.com/e615e819ce83d43faef607e48c53c5ff63943aa0ba9f5848499bd02fef7396f4","tier":null,"role":"editor"},{"type":"team","id":"a07c87acf1b22f86","login":"ddv373","name":"Dynamic Data Visualization 373","avatar_url":"https://avatars-next.observableusercontent.com/aa07fb823a47852e43ceca20a9030290c7b3befd6ad2b87a17c17f4b47176d35","tier":"education_2026","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Basic map projections","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":915,"value":"## Examples\n\nLet's begin with a tour of a few map projections with some general commentary. We'll learn a lot more detail on the comments as we got through the notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":625,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":614,"value":"map = {\n process;\n for (let t = 0; t <= 1; t = t + 0.02) {\n yield projection_transition_pic(\n global.projections.slice(-2)[0],\n global.projections.slice(-1)[0],\n d3.easeCubicInOut(t)\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":779,"value":"comment = md`${projection.comment}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":920,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":946,"value":"{\n let div = d3.create(\"div\");\n let left = div\n .append(\"div\")\n .style(\"display\", \"inline-block\")\n .style(\"width\", \"400px\");\n left\n .append(\"div\")\n .style(\"width\", \"400px\")\n .style(\"text-align\", \"center\")\n .text(\"Mercator's projection\");\n left.append(() => plain_pic(d3.geoMercator()));\n let right = div\n .append(\"div\")\n .style(\"margin-left\", \"10px\")\n .style(\"display\", \"inline-block\")\n .style(\"width\", \"400px\");\n right\n .append(\"div\")\n .style(\"width\", \"400px\")\n .style(\"text-align\", \"center\")\n .text(\"Equal Earth projection\");\n right.append(() => plain_pic(d3.geoEqualEarth()));\n\n return div.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":944,"value":"#### Conformal\n\nIs the map conformal? This means that the map preserves angles. To understand this, suppose we have two paths on a globe that intersect at some angle. If we take the image of these paths under a conformal transformation, the angle will be the same. This is illustrated below, where we see the image of two paths on the globe under Mercator's projection and the equi-rectangular projection. The angle is preserved under Mercator's projection but not under the equi-rectangular.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1025,"value":"FileAttachment(\"conformal.png\").image({ width: 800 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1030,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1100,"value":"cylindricalprojection = FileAttachment(\"cylindricalProjection.png\").image({\n width: 800\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1097,"value":"Using a little trigonometry, we can see that the formula for Lambert's equal area projection is\n${tex.block`T(\\varphi,\\theta) = (\\theta,\\sin(\\varphi)),`}\nassuming that the sphere has radius one.\n\nHere's a look at Lambert's projection:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1108,"value":"{\n let div = d3.create(\"div\").style(\"width\", \"600px\");\n div.append(() => plain_pic(d3.geoCylindricalEqualArea()));\n div\n .append(\"div\")\n .style(\"width\", \"600px\")\n .style(\"text-align\", \"center\")\n .text(\"Lambert's projection\");\n\n return div.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1120,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1162,"value":"viewof r = Inputs.range([-180, 180], {\n value: 105,\n format: (t) => -t,\n label: \"Standard merdian:\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1188,"value":"p = plain_pic(d3.geoTransverseMercator().rotate([r, 0]), {\n w: 500,\n h: 600,\n scale: 95,\n translate: [240, 300]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1229,"value":"Transverse Mercator projections are often used to map regions that extend a short East-West distance but are relatively longer North to South. A concrete example is the state Map of New Hampshire designed for [the State Plane Coordinate System](https://www.usgs.gov/faqs/what-state-plane-coordinate-system-can-gps-provide-coordinates-these-values), which is a transverse Mercator projection with central meridian 71° 40'W and Latitude of Origin 42° 30'N:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1676,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1248,"value":"#### Azimuthal projections\n\n*Azimuthal* is just a groovy word meaning *planar*. Conceptually, a polar, azimuthal projection can be visualized by placing a plane tangent to the globe at one pole and projecting the sphere onto this plane. \n\nThere are multiple ways this projection process could go. Two possibilities called the *stereograph* and the *orthographic* projections are shown here:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1503,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1478,"value":"$38","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1567,"value":"plain_pic(d3.geoAzimuthalEquidistant().rotate([0, -90]), {\n scale: 120,\n w: 600,\n h: 600\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1586,"value":"Finally, we can certainly create azimuthal maps by projecting onto a plane that's tangent at some point *other* than a pole. The map below is an azimuthal projection centered on Asheville. The shaded regions represent the one day flight range of a couple of species of unladen swallows. We would expect those regions to be circles and they are represented as such on the equidistant map but not generally on other maps.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1806,"value":"asheville_projection.proj([-82.5, 35.5])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1374,"value":"viewof asheville_projection = {\n let projections = [\n {\n name: \"Asheville equdistant\",\n proj: d3\n .geoAzimuthalEquidistant()\n .rotate([82.55, -35.6])\n .scale(2100)\n .translate([300, 230])\n },\n {\n name: \"Equal Earth\",\n proj: d3.geoEqualEarth().scale(2400).translate([3000, 1900])\n }\n ];\n return Inputs.radio(projections, {\n format: (o) => o.name,\n label: \"Asheville projection:\",\n value: projections[0]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1263,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1588,"value":"#### Conic projections\n\nConceptually, a conic projection is obtained by projecting a sphere onto a cone and then cutting the cone so that it lies flat on a plane:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1591,"value":"FileAttachment(\"cone.png\").image({ width: 700 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1610,"value":"$3a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1622,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1743,"value":"The official map of the State of North Carolina is based on a conic conformal map projection with central meridian 80°'W and standard parallels 35° 20'N and 36° 10'N.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1651,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1760,"value":"$3d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1766,"value":"plain_pic(d3.geoWinkel3())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1798,"value":"Often, other projections like this are created with some specific purpose in mind. In the case of the Winkel Tripel, that objective is to minimize the combined distortion of three different quantities - area, direction, and distance. Winkel did this by taking an average of two other map projections. Thus, the projection is called *composite*.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1746,"value":"## Other examples\n\nLet's wrap this up by pointing at some more examples:\n\n- [The NC Congressional redistricting battle](https://observablehq.com/@mcmcclur/the-nc-congressional-district-battle) - a concrete example of a more complex interactive choropleth built on a conic equal-area projection\n- [Map projection playground](https://observablehq.com/@floledermann/projection-playground) - illustrations of a much wide range of map projections including examples with interruptions an complicated ranges.\n\n## Next Time: Mapshaper!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":899,"value":"## Ancillaries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1757,"value":"### Code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":631,"value":"global = ({ projections: [{ projection: d3.geoEquirectangularRaw }] })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":642,"value":"process = {\n global.projections.push(projection);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":932,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"$3f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1748,"value":"### Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1680,"value":"nh = {\n let nh = await FileAttachment(\"nh@1.json\").json();\n let boundary = topojson.feature(nh, nh.objects.nh);\n let roads = topojson.feature(nh, nh.objects.roads);\n return { boundary, roads };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1646,"value":"nc = {\n let nc = await FileAttachment(\"nc@2.json\").json();\n let boundary = topojson.feature(nc, nc.objects.nc);\n let roads = topojson.feature(nc, nc.objects.roads);\n return { boundary, roads };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"land = {\n let land = await FileAttachment(\"ne_110m_land.json\").json();\n return topojson.feature(land, land.objects.ne_110m_land);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1255,"value":"contiguous_us = {\n let contiguous_us = await FileAttachment(\n \"contiguous_us.json\"\n ).json();\n let cities = topojson.feature(\n contiguous_us,\n contiguous_us.objects.cities\n );\n let states = topojson.feature(\n contiguous_us,\n contiguous_us.objects.states\n );\n\n return { cities, states };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1751,"value":"### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1421,"value":"tippy_style = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1404,"value":"tippy = require(\"tippy.js@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"d3 = require(\"d3@7\", \"d3-geo@3\", \"d3-geo-projection@4\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1754,"value":"### Style","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1039,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W40","stdlib":"1"}} 30:"$2f:body"