25:["$","title",null,{"children":"Let's draw a map 🗺 | Toby Zhu | Observable"}] 49:T531,The creation of maps is intimately tied with **map data**. We need to know: * The **scale** of the data. Country-level? State/province-level? City-level? * The representation of **spatial coordinates**. We want to start from geographic coordinates: latitude/longitude, and explore different projections that fit our needs. * The representation of **geometry**. At a given scale, what does a single data item encompass? A single polygon? Multiple polygons? Do we know whether 2 polygons share boundaries? (the latter is useful for things like cartograms) * What other **attributes** are provided. Country/province/city names? Geographic attributes, e.g. terrain. Now obtaining data is kind of a mess. 😵‍💫 You have to do a bit of searching to find high-quality datasets. _Very often_ you can find good geographic data from official government websites. Europe is great about this. See [the following website](https://ec.europa.eu/eurostat/web/gisco/geodata/reference-data/administrative-units-statistical-units/nuts#nuts21). Below are different spatial scales of geographic data for Europe. These particular data formats are known as **geojson**, and readable as json. Thus, they are typed, and easily inspectable via Observable. This _really_ comes in handy when we grab a dataset and we are blind to its attributes.4a:T411,europe_geo_data = { let geo_data = [] // top-level: for(let c = 0; c < europe_10M.features.length; c++) { let region = europe_10M.features[c] let props = region.properties // we will use this to label the geometric regions that we will eventually draw let geometry = region.geometry let geometry_type = geometry.type // a single polygon, or multiple polygons? if(geometry_type == 'Polygon') { for(let i = 0; i < geometry.coordinates.length; i++) { let coords = geometry.coordinates[i] if(coords.map(d => d[1]).some(d => d < 34 || d > 69)) continue geo_data.push({props:props,geometry:coords}) } } else if(geometry_type == 'MultiPolygon') { for(let i = 0; i < geometry.coordinates.length; i++) { let multi_polygons = geometry.coordinates[i] for(let j = 0; j < multi_polygons.length; j++) { let coords = multi_polygons[j] geo_data.push({props:props,geometry:coords}) } } } } return geo_data }4b:T4a9,geographic_coord_plot = { let svg = d3.create('svg') .attr('width', width) .attr('height', height) let width_pad = 20 let height_pad = width_pad*(europe_exts_lat[1]-europe_exts_lat[0])/(europe_exts_lon[1]-europe_exts_lon[0]) let g = svg.append('g') .attr('transform', `translate(${width_pad},${height_pad})`) let x_scale = d3.scaleLinear().domain(europe_exts_lon).range([0,width-2*width_pad]) let y_scale = d3.scaleLinear().domain(europe_exts_lat).range([height-2*height_pad,0]) let all_polys_g = g.selectAll() .data(europe_geo_data) .join('g') let draw_region = function(path_selection, fill_color, stroke_color) { path_selection .attr('d', d => { let d_str = 'M' let coords = d.geometry for(let i = 0; i < coords.length; i++) { d_str += x_scale(coords[i][0])+','+y_scale(coords[i][1]) if(i != d.length-1) d_str += ' ' } d_str += 'z' return d_str }) .attr('fill', fill_color) .attr('stroke', stroke_color).attr('stroke-width', .5) } all_polys_g.append('path') .call(draw_region, d3.hcl(80,8,83), d3.hcl(0,0,40)) return svg.node() }4c:T517,confic_conformal_plot = { let svg = d3.create('svg') .attr('width', width) .attr('height', height) let width_pad = 20 let height_pad = width_pad*(europe_exts_lat[1]-europe_exts_lat[0])/(europe_exts_lon[1]-europe_exts_lon[0]) let g = svg.append('g') .attr('transform', `translate(${width_pad},${height_pad})`) let x_scale = d3.scaleLinear().domain(europe_exts_lon).range([0,width-2*width_pad]) let y_scale = d3.scaleLinear().domain(europe_exts_lat).range([height-2*height_pad,0]) let regular_grid = d3.cross(d3.range(europe_exts_lon[0],europe_exts_lon[1],5), d3.range(europe_exts_lat[0],europe_exts_lat[1],5)) let all_polys_g = g.selectAll() .data(europe_geo_data) .join('g') let draw_region = function(path_selection, fill_color, stroke_color) { path_selection .attr('d', d => { let d_str = 'M' let coords = d.geometry for(let i = 0; i < coords.length; i++) { d_str += cc_projection(coords[i]) if(i != d.length-1) d_str += ' ' } d_str += 'z' return d_str }) .attr('fill', fill_color) .attr('stroke', stroke_color).attr('stroke-width', .5) } all_polys_g.append('path') .call(draw_region, d3.hcl(80,8,83), d3.hcl(0,0,40)) return svg.node() }4d:T802,interactive_map = { let height = width*(europe_exts_lat[1]-europe_exts_lat[0])/(europe_exts_lon[1]-europe_exts_lon[0]) let svg = d3.create('svg') .attr('width', width) .attr('height', height) let width_pad = 20 let height_pad = width_pad*(europe_exts_lat[1]-europe_exts_lat[0])/(europe_exts_lon[1]-europe_exts_lon[0]) let g = svg.append('g') .attr('transform', `translate(${width_pad},${height_pad})`) let x_scale = d3.scaleLinear().domain(europe_exts_lon).range([0,width-2*width_pad]) let y_scale = d3.scaleLinear().domain(europe_exts_lat).range([height-2*height_pad,0]) let regular_grid = d3.cross(d3.range(europe_exts_lon[0],europe_exts_lon[1],5), d3.range(europe_exts_lat[0],europe_exts_lat[1],5)) let all_polys_g = g.selectAll() .data(europe_geo_data) .join('g') let draw_region = function(path_selection, fill_color, stroke_color) { path_selection .attr('d', d => { let d_str = 'M' let coords = d.geometry for(let i = 0; i < coords.length; i++) { d_str += cc_projection(coords[i]) if(i != d.length-1) d_str += ' ' } d_str += 'z' return d_str }) .attr('fill', fill_color) .attr('stroke', stroke_color).attr('stroke-width', .5) } all_polys_g.append('path') .call(draw_region, d3.hcl(80,10,75), d3.hcl(0,0,40)) all_polys_g.on('mouseover', function(e,d) { g.selectAll('path').attr('fill', d3.hcl(80,10,75)) d3.select(this).selectAll('path').attr('fill', d3.hcl(200,10,75)) let geographic_coords = d.geometry let ave_lon = d3.mean(geographic_coords, d_v => d_v[0]) let ave_lat = d3.mean(geographic_coords, d_v => d_v[1]) let cartesian_coord = cc_projection([ave_lon,ave_lat]) g.selectAll('.label').remove() g.append('text').classed('label', true) .text(d.props.NAME_LATN) .attr('x', cartesian_coord[0]).attr('y', cartesian_coord[1]) .attr('text-anchor', 'middle') .attr('fill', d3.hcl(0,0,0)) }) return svg.node() }4e:T494,Let's say we were provided an open curve - a curve with boundary - on the sphere, e.g. could be a subset of a latitude, or the shortest path connecting 2 points. Call these points ${tex`\mathbf{s}_1 \in \mathbb{R}^2`} and ${tex`\mathbf{s}_2 \in \mathbb{R}^2`} - these are geographic coordinates (longitude, latitude). We will introduce 2 functions. The first is what we just saw: a parameterization of the sphere. This is a **map**, which we can write in abstract terms as ${tex`\mathbf{f} : \mathbb{R}^2 \rightarrow \mathbb{R}^3`}. Hence, we supply geographic coordinates, and we obtain a 3D point. The second is a description of the curve, as a function of geographic coordinates. A curve being a one-dimensional object, we can write this as 2 separate functions of a single variable, call it ${tex`t \in [0,1]`}: ${tex`\mathbf{r}(t) = (u(t),v(t))`} Composing the 2 functions, we can now express this curve, in 3D: ${tex`(\mathbf{f} \circ \mathbf{r})(t) = \mathbf{f}(u(t),v(t))`} And in particular, we have 2 constraints on our curve. It gives us back our starting point ${tex`\mathbf{r}(0) = \mathbf{s}_1`}, and ending point ${tex`\mathbf{r}(1) = \mathbf{s}_1`}.4f:Tac7,To compute the distance of the curve, we integrate the length of the **tangent vector** of this curve: ${tex`\int_0^1 \lVert \frac{d \mathbf{f}(u(t),v(t))}{d t} \rVert dt`} It is straightforward to see that this is the limiting behavior of the sum of a sequence of infinitesimally-small line segments that approximate the curve. Invoking the chain rule: ${tex`\frac{d \mathbf{f}(u(t),v(t))}{d t} = \frac{d \mathbf{f}}{d \mathbf{r}} \frac{d \mathbf{r}(t)}{d t} `}. The first term is the **Jacobian matrix** - all partial derivatives of our parameterization (from geographic coordinates to 3D). The second term is the tangent vector, expressed in geographic coordinates. This matrix-vector product can be expressed as: ${tex`\frac{d \mathbf{f}(u(t),v(t))}{d t} = \frac{d \mathbf{f}}{d \mathbf{r}_u} \frac{d u(t)}{d t} + \frac{d \mathbf{f}}{d \mathbf{r}_v} \frac{d v(t)}{d t} `}. Namely, the first term is the first column of the Jacobian matrix, scaled by the u component of the 2D curve's partial derivative (likewise for second term). And for notational convenience, we will write the partial derivatives with prime (') notation: ${tex`\frac{d \mathbf{f}(u(t),v(t))}{d t} = \mathbf{f}'_u u'(t) + \mathbf{f}'_v v'(t)`}. Returning to our integral, we see that we need to take the length (Euclidean norm) of a 3D vector. Which is, equivalently, the square root of the sum-of-squares of the vector's component. In particular, for a 3D vector, call it ${tex`\mathbf{p}`}, then its squared length: ${tex`\lVert \mathbf{p} \rVert^2 = p_0^2 + p_1^2 + p_2^2 = \mathbf{p}^T\mathbf{p}`}. And so we will just consider the squared length of the tangent vector: a dot product between the vector, and itself: ${tex`\lVert \frac{d \mathbf{f}(u(t),v(t))}{d t} \rVert^2 = (\mathbf{f}'_u u'(t) + \mathbf{f}'_v v'(t))^T(\mathbf{f}'_u u'(t) + \mathbf{f}'_v v'(t))`}. Expanding terms, we obtain: ${tex`u'(t)^2 (\mathbf{f}_u'^T \mathbf{f}_u') + + 2 u'(t) v'(t)(\mathbf{f}_u'^T \mathbf{f}_v') + v'(t)^2 (\mathbf{f}_v'^T \mathbf{f}_v')`}. This is known as a **bilinear form**. In particular, it is a quadratic function in the tangent vector. And what will be a bit more convenient for analysis is to write this squared length as a vector-matrix-vector product. To see this, let's assign ${tex`E = (\mathbf{f}_u'^T \mathbf{f}_u')`}, ${tex`G = (\mathbf{f}_v'^T \mathbf{f}_v')`}, ${tex`F = (\mathbf{f}_u'^T \mathbf{f}_v')`}. Then more explicitly: ${tex`\lVert \frac{d \mathbf{f}(u(t),v(t))}{d t} \rVert^2 = \begin{bmatrix}u'(t) & v'(t) \end{bmatrix} \begin{bmatrix}E & F \\ F & G\end{bmatrix} \begin{bmatrix}u'(t) \\ v'(t) \end{bmatrix}`}. The symmetric matrix above is known as a **metric tensor**, and is used to study distortion in parameterizations of the sphere.50:T458,That matrix above can actually be computed quite easily, given the formulas for spherical coordinates. Specifically: 1. ${tex`F = 0`}. 2. ${tex`G = 1`}. 3. ${tex`E = \cos \theta`}. Plugging these in to our squared distance: ${tex`ds^2 = \begin{bmatrix}d \psi & d \theta \end{bmatrix} \begin{bmatrix} \cos \theta & 0 \\ 0 & 1\end{bmatrix} \begin{bmatrix}d \psi \\ d \theta \end{bmatrix}`}. So we now see the dependence on where we are, on Earth, when it comes to distortion: the latitude coordinate. In fact, it influences the longitude coordinate. Specifically: _for a large latitude value, a big change in longitude will induce a small change in distance_. If we wish to compensate, then we need to _divide_ by the ${tex`\cos (\theta)`} term. We can frame visualizing this action as showing the following matrix: ${tex`\begin{bmatrix} \frac{1}{\cos(\theta)} & 0 \\ 0 & 1\end{bmatrix}`}, as an ellipse, whose semi-major and semi-minor axes are aligned with latitude/longitude axes, but whose _scale_ (or equivalently eccentricity), applied to longitude, is proportional to ${tex`\frac{1}{\cos(\theta)}`}.51:T7e6,tissot_plot = { let svg = d3.create('svg') .attr('width', width) .attr('height', height) let width_pad = 20 let height_pad = width_pad*(europe_exts_lat[1]-europe_exts_lat[0])/(europe_exts_lon[1]-europe_exts_lon[0]) let g = svg.append('g') .attr('transform', `translate(${width_pad},${height_pad})`) let x_scale = d3.scaleLinear().domain(europe_exts_lon).range([0,width-2*width_pad]) let y_scale = d3.scaleLinear().domain(europe_exts_lat).range([height-2*height_pad,0]) let regular_grid = d3.cross(d3.range(europe_exts_lon[0],europe_exts_lon[1],5), d3.range(europe_exts_lat[0],europe_exts_lat[1],5)) let all_polys_g = g.selectAll() .data(europe_geo_data) .join('g') let draw_region = function(path_selection, fill_color, stroke_color) { path_selection .attr('d', d => { let d_str = 'M' let coords = d.geometry for(let i = 0; i < coords.length; i++) { d_str += x_scale(coords[i][0])+','+y_scale(coords[i][1]) if(i != d.length-1) d_str += ' ' } d_str += 'z' return d_str }) .attr('fill', fill_color) .attr('stroke', stroke_color).attr('stroke-width', .5) } let draw_ellipse = function(path_selection, fill_color, stroke_color) { let R = 10, res = 60 path_selection .attr('d', d => { let d_str = 'M' for(let i = 0; i < res; i++) { let angle = 2*Math.PI*i/(res-1) let x = x_scale(d[0]) + R*Math.cos(angle)/Math.cos(d[1]*Math.PI/180), y = y_scale(d[1]) + R*Math.sin(angle) d_str += x+','+y if(i != res-1) d_str += ' ' } d_str += 'z' return d_str }) .attr('fill', fill_color) .attr('stroke', stroke_color).attr('stroke-width', .5) } g.selectAll() .data(regular_grid) .join('path') .call(draw_ellipse, 'none', d3.hcl(0,0,20)) all_polys_g.append('path') .call(draw_region, d3.hcl(80,8,83), d3.hcl(0,0,40)) return svg.node() }52:T528,Cartography is all about finding a pair of functions that map geographic coordinates to the 2D Cartesian plane: 1. ${tex`x(\psi,\theta)`} 2. ${tex`y(\psi,\theta)`} We wish to understand the distortion, induced by these functions, on distances over the sphere: ${tex`\begin{bmatrix} dx \\ dy \end{bmatrix}`}. E.g. if we make a small change in x-coordinate, how does this relate to a change in distance on the sphere? These differentials can be computed by, again, invoking the chain rule, combining the Jacobian of this mapping: ${tex`J = \begin{bmatrix} \frac{\partial x}{\partial \psi} & \frac{\partial x}{\partial \theta} \\ \frac{\partial y}{\partial \psi} & \frac{\partial y}{\partial \theta} \end{bmatrix}`}, with the differential from the geographic coordinates, giving: ${tex`\begin{bmatrix} dx \\ dy \end{bmatrix} = \begin{bmatrix} \frac{\partial x}{\partial \psi} & \frac{\partial x}{\partial \theta} \\ \frac{\partial y}{\partial \psi} & \frac{\partial y}{\partial \theta} \end{bmatrix} \begin{bmatrix} \frac{1}{\cos(\theta)} & 0 \\ 0 & 1\end{bmatrix} \begin{bmatrix}d \psi \\ d \theta \end{bmatrix}`}. From right-to-left, we (1) take the geographic differential, (2) apply the compensated distortion from the metric tensor, and then (3) relate this to the coordinate system of our proposed projection.53:T818,The following matrix: ${tex`T(\psi,\theta) = \begin{bmatrix} \frac{\partial x}{\partial \psi} & \frac{\partial x}{\partial \theta} \\ \frac{\partial y}{\partial \psi} & \frac{\partial y}{\partial \theta} \end{bmatrix} \begin{bmatrix} \frac{1}{\cos(\theta)} & 0 \\ 0 & 1\end{bmatrix}`}, fully characterizes the distortion _local_ to a given (x,y) coordinate in our projection. In particular, we can best understand the distortion by factorizing this matrix via its **singular value decomposition**: ${tex`T(\psi,\theta) = U \Lambda V^T`}. These are all ${tex`2 \times 2`} matrices. And really, _they depend on the geographic coordinates_: ${tex`T(\psi,\theta) = U(\psi,\theta) \Lambda(\psi,\theta) V^T(\psi,\theta)`}. But for notational simplicity we will exclude this dependency going forward. Now, the matrix ${tex`\Lambda`} is diagonal, with strictly positive entries on its diagonal. The matrices ${tex`U`} and ${tex`V`} are orthogonal matrices, e.g. ${tex`U^T U = I`}. In 2D, in fact, these can be understood as **rotations**, e.g. a rotation of the geographic coordinate system. For understanding distortion, the matrix ${tex`\Lambda`} is best to inspect: ${tex`\Lambda = \begin{bmatrix} \sigma_1 & 0 \\ 0 & \sigma_2 \end{bmatrix}`}. If ${tex` \sigma_1 \cdot \sigma_2 = 1`}, then we say that this projection is **area-preserving**. And, if ${tex` \sigma_1 = \sigma_2`}, then we say that this projection is **shape-preserving**. Its mathematical term is that it is a **conformal map**. If a projection is both area-preserving, and shape-preserving, then it introduces **no distortions**. For the sphere, this is impossible to achieve. Virtually _all_ projection schemes are trade-offs in area preservation, and shape preservation. We can apply Tissot's indicatrix to this broader class of projections by taking the column vectors of ${tex`V`} as the semi-major and semi-minor axes, and ${tex`\sigma_1, \sigma_2`} as the respective scaling applied to these axes. We can compare projections [right here](https://observablehq.com/@d3/tissots-indicatrix).54:[{"id":"77e969a79da10203ba84bb78eeba74fcfe113b0b8c79c1e4958cadc17fa55e13ff6e594e5bfb35cbd0eef903d540658311aaa2ad8ffecc8cd5779114f6bee849","href":"https://static.observableusercontent.com/files/77e969a79da10203ba84bb78eeba74fcfe113b0b8c79c1e4958cadc17fa55e13ff6e594e5bfb35cbd0eef903d540658311aaa2ad8ffecc8cd5779114f6bee849","name":"NUTS_RG_01M_2021_4326.geojson","type":"application/geo+json","lastModified":1677691008036.356,"size":39069590},{"id":"566ae5418d9ea220b20c4e9f57fd06e53f5e2ddeff724029f96188fc0a4e4eaeecb1084ff1cd2e547adea6d58d06ae963a049d877b6340a5989dd81fcc3fe5a7","href":"https://static.observableusercontent.com/files/566ae5418d9ea220b20c4e9f57fd06e53f5e2ddeff724029f96188fc0a4e4eaeecb1084ff1cd2e547adea6d58d06ae963a049d877b6340a5989dd81fcc3fe5a7","name":"NUTS_RG_03M_2021_4326.geojson","type":"application/geo+json","lastModified":1677691008036.356,"size":8955731},{"id":"0c8cab5b7a310e55c20e0cce8edd217c1c1662a79999e5b19d27e6982b226213ff886e9f66b58698bfb89cc5f8a58776ded02df6f9c51129ff74dd57776e6098","href":"https://static.observableusercontent.com/files/0c8cab5b7a310e55c20e0cce8edd217c1c1662a79999e5b19d27e6982b226213ff886e9f66b58698bfb89cc5f8a58776ded02df6f9c51129ff74dd57776e6098","name":"NUTS_RG_10M_2021_4326.geojson","type":"application/geo+json","lastModified":1677691008036.356,"size":2680611},{"id":"63905c59c04c0997dbf143eb31d56683963f7b631c46bfd661fe296904fe57e39ffa790c02a5fe8bec181494743ca462574615a976e10fad29e0be8b07464ec9","href":"https://static.observableusercontent.com/files/63905c59c04c0997dbf143eb31d56683963f7b631c46bfd661fe296904fe57e39ffa790c02a5fe8bec181494743ca462574615a976e10fad29e0be8b07464ec9","name":"NUTS_RG_20M_2021_4326.geojson","type":"application/geo+json","lastModified":1677691008036.356,"size":1644087},{"id":"ff420f97bd1c80b726a6375a0e679eb443e196774c6023115bea7bacda949c62e064fb0c91e76838b88bda9dac96f6ba6c7e8ded10ce2b27c287d86f9d89763f","href":"https://static.observableusercontent.com/files/ff420f97bd1c80b726a6375a0e679eb443e196774c6023115bea7bacda949c62e064fb0c91e76838b88bda9dac96f6ba6c7e8ded10ce2b27c287d86f9d89763f","name":"NUTS_RG_60M_2021_4326.geojson","type":"application/geo+json","lastModified":1677691008036.356,"size":987530}] 29:{"id":"4c6a524217f7531c","slug":null,"title":"Let's draw a map 🗺","thumbnail":"dfad2318097d0d7538adbc6b190685228e318326b5d36da729fafef60a65b5ca","access_level":"public","create_time":"$D2023-03-01T17:16:48.036Z","update_time":"$D2023-03-01T17:16:48.036Z","view_time":null,"first_public_time":"$D2023-03-01T17:16:48.036Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"50ba3ab87865222e","login":"tobyzhu","name":"Toby Zhu","avatar_url":"https://avatars-next.observableusercontent.com/16f7991fbd592946eff73e262dbfa58c16e735759dd313d388c0cf2baa2b72b4","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":823,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a53831491c225e96","login":"tobyzhu","name":"Toby Zhu","avatar_url":"https://avatars-next.observableusercontent.com/16f7991fbd592946eff73e262dbfa58c16e735759dd313d388c0cf2baa2b72b4","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"a53831491c225e96","login":"tobyzhu","name":"Toby Zhu","avatar_url":"https://avatars-next.observableusercontent.com/16f7991fbd592946eff73e262dbfa58c16e735759dd313d388c0cf2baa2b72b4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Let's draw a map 🗺","cells":[{"id":0,"value":"# Let's draw a map 🗺","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":101,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"europe_01M = await FileAttachment(\"NUTS_RG_01M_2021_4326.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"europe_03M = await FileAttachment(\"NUTS_RG_03M_2021_4326.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"europe_10M = await FileAttachment(\"NUTS_RG_10M_2021_4326.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"europe_20M = await FileAttachment(\"NUTS_RG_20M_2021_4326.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"europe_60M = await FileAttachment(\"NUTS_RG_60M_2021_4326.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"# Drawing Continental Europe","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":111,"value":"Let's draw Continental Europe.\n\nTo do so, we will draw a set of polygons. Each of which will be drawn as a single `` element, where we specify a sequence of 2D coordinates that forms a polygon's boundary. Unlike the polygon, this curve itself is expected to be without boundary, e.g. a closed curve, and one that does not self-intersect.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":274,"value":"The data provided by eurostat is pretty nicely structured. But we will do some processing to make the drawing of polygons convenient for D3.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":278,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"The data is provided in **geographic coordinates**. A latitude and a longitude value. These are defined with respect to the standard [Earth-centered, Earth-fixed coordinate system](https://en.wikipedia.org/wiki/Earth-centered,_Earth-fixed_coordinate_system).\n\nThat doesn't mean we need to simply _plot_ the data in this coordinate system. But we will start here, for now.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":70,"value":"europe_exts_lon = [-31,50] // limit to, in general, mainland Europe","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"europe_exts_lat = [34,81] // limit to, in general, mainland Europe","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"# Drawing from geographic coordinates","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":123,"value":"To start, we will draw each region directly from its geographic coordinates.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":678,"value":"height = width*(europe_exts_lat[1]-europe_exts_lat[0])/(europe_exts_lon[1]-europe_exts_lon[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"So this looks a bit unusual. We may be used to seeing European countries [like this](https://upload.wikimedia.org/wikipedia/commons/6/67/EU-Belgium.svg). Whereas in our plot, Sweden & Finland look enormous!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":183,"value":"# D3 Projections","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":187,"value":"D3 has _excellent_ support for **projections**, maps from geographic coordinates to the Cartesian plane that have certain properties.\n\nYou should interpret projections as trade-offs. We cannot guarantee a **perfect projection**. We will be sacrificing something, somewhere.\n\nLet's first consider the so-called **Conic Conformal** projection.\n\nWhat this projection requires of us is a minimum and maximum **parallel** - curves of constant latitude. These function as the lower and upper regions of our view.\n\nWe also need to supply the **center** geographic coordinates. This is essential: what we center our projection on will typically have the _smallest distortion_, and regions away from the center will have a larger distortion.\n\nPast that, the remaining parameters ultimately function as scales - how to give us coordinates in a 2D region that we wish to draw.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":192,"value":"cc_projection = d3.geoConicConformal()\n .parallels([europe_exts_lon[0]-4.8, europe_exts_lon[1]+4.8])\n .rotate([0, 0])\n .scale(.8*width)\n .center([d3.mean(europe_exts_lon), d3.mean(europe_exts_lat)])\n .translate([width / 2, height / 2])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"cc_projection([europe_exts_lon[0],europe_exts_lat[0]])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"# Interacting with Maps","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":240,"value":"Now once we have our geographic entities drawn as `` elements, we can use the same class of techniques for interaction that we have previously covered!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":246,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"# Understanding mapping distortions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":693,"value":"Of course, this projection isn't perfect. No one is. **Distortion of space is inevitable**.\n\nIn general, Euclidean distance in the 2D plane will _not_ faithfully represent the _actual_ distance between 2 locations. Namely, their geodesic distance, e.g. the distance of shortest path connecting two points, restricted to the surface of the Earth.\n\nThere are _tons_ of projection methods within the area of cartography, all of which present certain trade offs. Studying projection methods is an entire course in cartography.\n\nInstead, what we will study are mathematical tools for characterizing the distortion caused by a projection. So, should you decide you need a projection, you will have a better (mathematical) understanding of its strengths & weaknesses.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":360,"value":"What we are attempting to do in cartography is to find a good **projection**: from a (almost) sphere, to the 2D plane.\n\nStandard geographic coordinates are a **2D parameterization** of the sphere. We can express the parameterization as spherical coordinates.\n\nFor a 3D position ${tex`\\mathbf{p} \\in \\mathbb{R}^3`} on the Earth's surface, we have for its x component, denoted ${tex`p_x`}:\n\n${tex`p_x = \\cos \\theta \\cos \\psi`}\n\nAnd for its y component:\n\n${tex`p_y = \\cos \\theta \\sin \\psi`}\n\nAnd last, for its z component:\n\n${tex`p_z = \\sin \\theta`}\n\nThe geographic coordinates ${tex`\\theta`} and ${tex`\\psi`} are, respectively, the latitude and longitude. I have omitted the radius, as this introduces a single global scaling that gets factored out. The convention here is that points whose ${tex`p_z`} component is a constant are **latitudes**, e.g. the equator.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":407,"value":"# Computing the distance of a curve on the sphere","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":409,"value":"$4e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":430,"value":"$4f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":499,"value":"## Relation to projections","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":501,"value":"The above equation can be seen as a way to relate (1) the squared distance between two 3D points on the surface, with (2) the squared distance between two 2D points (geographic coordinates). Of course, here we need to think in infinitesimally-small distances.\n\nSpecifically, let's simplify notation a bit:\n\n${tex`ds^2 = \\begin{bmatrix}d \\psi & d \\theta \\end{bmatrix} \\begin{bmatrix}E & F \\\\ F & G\\end{bmatrix} \\begin{bmatrix}d \\psi \\\\ d \\theta \\end{bmatrix}`}.\n\nHere, ${tex`ds^2`} is squared distance (on sphere), and the vector, ${tex`(d \\psi , d \\theta)`} is a **differential**, in geographic coordinates. Another way to view this: when we take a small step in longitude/latitude, how does this impact distances on the sphere?\n\nIt turns out, the impact _depends on where we are on the sphere_.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":702,"value":"## Metric tensor for spherical coordinates","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":704,"value":"$50","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":732,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":740,"value":"The ellipses above are known as **Tissot's indicatrix** - they help us visualize local distortions in a projection.\n\nAnd as we would expect, Sweden & Finland appearing so wide in this map, is due to the very distortion described above.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":748,"value":"# Analyzing other projections","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":751,"value":"$52","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":777,"value":"# Tissot's indicatrix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":779,"value":"$53","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W54","stdlib":"1"}} 24:null