31:T482,viewof parameters = form(html``)32:[{"id":"7b6ff41e373e01d7b5b95773e297d40625bd9ccc1936a023a066a7edd8da5eaadec4ab7a565303539e41e001f2e6730f3ee1e259fae4f19dc59e8d6b2f2ec22b","href":"https://static.observableusercontent.com/files/7b6ff41e373e01d7b5b95773e297d40625bd9ccc1936a023a066a7edd8da5eaadec4ab7a565303539e41e001f2e6730f3ee1e259fae4f19dc59e8d6b2f2ec22b","name":"land-50m.json","type":"application/json","lastModified":1606842883009.256,"size":545534},{"id":"f3fd67b739213db23653aa05dbc7420f340139cb2b4d52afb58c57a6b13631204ff6c3c031f3936e77add84bcef4a6fabb3a98b1f20534f563fde0de51b49762","href":"https://static.observableusercontent.com/files/f3fd67b739213db23653aa05dbc7420f340139cb2b4d52afb58c57a6b13631204ff6c3c031f3936e77add84bcef4a6fabb3a98b1f20534f563fde0de51b49762","name":"world-110m.geo.json","type":"application/json","lastModified":1606985580317.018,"size":252486}] 2f:{"title":"Geographic visualization","cells":[{"id":0,"value":"md`# Geographic visualization`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`Today, we will see how to work with maps and geographic information in D3. You will see more on Cartography in the next course *\"Cartography and visualization\"* (second trimester). Most of the D3 elements that are needed to work with cartography and map are on the [d3.geo](https://github.com/d3/d3-geo/tree/v2.0.0) module. \n\n## Geographic data\n\nTo represent geographic data, D3 uses [GeoJSON](https://en.wikipedia.org/wiki/GeoJSON), which is an open standard format designed for representing simple geographical features, along with their non-spatial attributes. It is based on the JSON format. As you can see in the next cell, the *GeoJSON* object has the *features* array that contains not only the geometry of each country but also some qualitative and quantitative values related to that country.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"world = FileAttachment(\"world-110m.geo.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":221,"value":"md`[TopoJSON](https://en.wikipedia.org/wiki/GeoJSON#TopoJSON) is an extension of GeoJSON that encodes topology. Rather than representing geometries discretely, geometries in TopoJSON files are stitched together from shared line segments called arcs. Arcs are sequences of points, while line strings and polygons are defined as sequences of arcs. Each arc is defined only once but can be referenced several times by different shapes, thus reducing redundancy and decreasing the file size. In addition, TopoJSON facilitates applications that use topology, such as topology-preserving shape simplification, automatic map coloring, and cartograms.\nIn D3, we can also use the TopoJSON format using the library *topojson-client* in this way:\n\n~~~{js}\ntopojson = require(\"topojson-client@3\")\nworld = FileAttachment(\"land-50m.json\").json()\nland = topojson.feature(world, world.objects.land)\n~~~\n\nFor instance, you can see an example in [this notebook](https://observablehq.com/@d3/world-map).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"worldTopojson = FileAttachment(\"land-50m.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":230,"value":"md`## Implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"md`Since the earth's surface is a spherical curve and our screen is (ideally) a plane, we need a way to convert from one to the other. These kinds of functions are called **projection** and they can transform spherical polygonal geometry to planar polygonal geometry. D3 provides implementations of several classes of standard projections:\n\n- *Azimuthal*: project the sphere directly onto a plane\n- *Composite*: consist of several projections that are composed into a single display\n- *Conic*: project the sphere onto a cone, and then unroll the cone onto the plane\n- *Cylindrical*: project the sphere onto a containing cylinder, and then unroll the cylinder onto the plane. *Pseudocylindrical* projections are a generalization of cylindrical projections.\n\nFor many more projections, see [d3-geo-projection](https://github.com/d3/d3-geo-projection). Next, a pseudocylindrical projection (The Natural Earth projection) is defined:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"projection = d3.geoNaturalEarth1()\n//projection = d3.geoMercator()\n//projection = d3.geoAzimuthalEqualArea()\n//projection = d3.geoConicEqualArea()\n//projection = d3.geoOrthographic()\n .center([parameters.centerX,parameters.centerY])\n .rotate([parameters.angleX, parameters.angleY])\n .scale(parameters.scale);//(width / (2 * Math.PI));\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":237,"value":"md`The geographic path generator, [d3.geoPath](https://github.com/d3/d3-geo/tree/v2.0.0#paths), is similar to the shape generators in d3-shape: given a GeoJSON geometry or feature object, it generates an SVG path data string or renders the path to a Canvas. Canvas is recommended for dynamic or interactive projections to improve performance. Paths can be used with projections or transforms, or they can be used to render planar geometry directly to Canvas or SVG. Next, we define the path that uses the previously defined projection:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":260,"value":"md`D3 also provides us a *graticule* (a uniform grid of meridians and parallels for showing projection distortion) and a way to show the limits of the map (*outline*). To define it, simply do:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"graticule = d3.geoGraticule10();","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"outline = ({type: \"Sphere\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"value":"md`Let's draw!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"worldmap = {\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height);\n\n svg.selectAll(\"path\")\n .data(world.features)\n .join(\"path\")\n .attr(\"fill\",\"#555\")\n .attr(\"d\", path)\n .attr(\"class\", \"countries\");\n \n svg.append(\"path\")\n .attr(\"d\", path(graticule))\n .attr(\"stroke\", \"#ddd\")\n .attr(\"stroke-width\",0.5)\n .attr(\"fill\", \"none\");\n \n svg.append(\"path\")\n .attr(\"id\", \"outline\")\n .attr(\"d\", path(outline))\n .attr(\"stroke\", \"#000\")\n .attr(\"stroke-width\",0.5)\n .attr(\"fill\", \"none\");\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":268,"value":"md`## Adding points`","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"md`We can also add extra elements to the map. For instance, we could add some points on *random* cities in the world. Let's first define an array of the elements that we want to represent:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"coordinates = [\n {name: \"Girona\", coords:[2.8313468690796206, 41.96389664365718]},\n {name: \"Barcelona\", coords:[2.1774322, 41.3828939]},\n {name: \"Cornellà de Llobregat\", coords:[2.066376209259033,41.35615921020508]},\n {name: \"Sant Cugat del Vallès\", coords:[2.0817809,41.4728432]},\n {name: \"Cassà de la Selva\", coords:[2.8742461,41.8874685]},\n {name: \"West Chester\", coords:[-75.6059638,39.9597213]},\n {name: \"Turku\", coords:[22.2670522,60.4517531]},\n {name: \"Longueuil\", coords:[-73.4467466,45.5172382]},\n {name: \"Singapore\", coords:[103.8520359,1.2904753]}\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":278,"value":"md`The *coords* property of the elements on this array corresponds to the latitude and longitude of each city. Then, we need the *projection* function to convert from the [*latitude, longitude*] coordinate system to the SVG coordinate system:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"projection(coordinates[0].coords)","pinned":true,"hidden":false,"mode":"ojs"},{"id":282,"value":"md`Once we know the SVG coordinates, we can draw there the *mark* we want, for instance, a circle.\n\nLet's draw again!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"worldmapwithpoints = {\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height);\n\n svg.selectAll(\"path\")\n .data(world.features)\n .join(\"path\")\n .attr(\"fill\",\"#555\")\n .attr(\"d\", path)\n .attr(\"class\", \"countries\");\n \n svg.append(\"path\")\n .attr(\"d\", path(graticule))\n .attr(\"stroke\", \"#ddd\")\n .attr(\"stroke-width\",0.5)\n .attr(\"fill\", \"none\");\n \n svg.append(\"path\")\n .attr(\"id\", \"outline\")\n .attr(\"d\", path(outline))\n .attr(\"stroke\", \"#000\")\n .attr(\"stroke-width\",0.5)\n .attr(\"fill\", \"none\");\n\n svg.selectAll(\"circle\")\n .data(coordinates)\n .join(\"circle\")\n .attr(\"stroke\",\"red\")\n .attr(\"stroke-width\",0.5)\n .attr(\"fill\",\"red\")\n .attr(\"fill-opacity\",0.6)\n .attr(\"r\", 5)\n .attr(\"cx\", d => projection(d.coords)[0])\n .attr(\"cy\", d => projection(d.coords)[1])\n .append(\"title\")\n .text(d => d.name);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"md`## Choropleth map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"md`A [choropleth map](https://en.wikipedia.org/wiki/Choropleth_map) is a type of thematic map in which a set of pre-defined areas is colored or patterned in proportion to a statistical variable that represents an aggregate summary of a geographic characteristic within each area, such as population density or per-capita income.\n\nTo implement it we only need to use the fill attribute of the path. Usually, the problem is how to link the path (or the country with the data. For example, let's say that we want to represent for each country the value of its Human Development Index, which is on the Our World in Data-COVID dataset:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"OWiDdata= d3.json(\"https://covid.ourworldindata.org/data/owid-covid-data.json\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":296,"value":"md`We see that the property name of the OWiDdata corresponds to the country acronym. So, we can obtain from the GeoJSON data this acronym on the property *id* on the property *features*. This is the link!\n\nSo, let's draw!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"legend({color:countrycolor, title: \"Human Development Index\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"choropleth = {\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height);\n\n svg.selectAll(\"path\")\n .data(world.features)\n .join(\"path\")\n //In case OWiDdata[d.id] exists (i.e., the acronym is a property on OWiDdata), we paint with the corresponding color (related to the Human Development Index). In case it isn't defined, we use gray. \n .attr(\"fill\", d => OWiDdata[d.id] ? countrycolor(OWiDdata[d.id].human_development_index) : \"#555\")\n .attr(\"d\", path)\n .attr(\"class\", \"countries\");\n \n svg.append(\"path\")\n .attr(\"id\", \"outline\")\n .attr(\"d\", path(outline))\n .attr(\"stroke\", \"#000\")\n .attr(\"stroke-width\",0.5)\n .attr(\"fill\", \"none\");\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"countrycolor = d3.scaleSequential(d3.interpolateYlGnBu)\n .domain(d3.extent(Object.entries(OWiDdata).map(d=>d[1].human_development_index)))\n .unknown(\"#ccc\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"d3.extent( Object.entries(OWiDdata).map(d=>d[1].human_development_index))","pinned":true,"hidden":false,"mode":"ojs"},{"id":391,"value":"Object.entries(OWiDdata).map(d=>d[1].human_development_index)","pinned":true,"hidden":false,"mode":"ojs"},{"id":357,"value":"Object.entries(OWiDdata);","pinned":true,"hidden":false,"mode":"ojs"},{"id":252,"value":"md`## Weekly task (optional)\n\nSince you have work on the final project, the task of this week is optional.\n\nThe weekly task consists of creating a [bubble map](https://observablehq.com/@d3/bubble-map) with a given variable on the Our World in Data-COVID dataset (you can choose the variable of interest). Consider the use of the *[path.centroid()](https://github.com/d3/d3-geo/tree/v2.0.0#path_centroid)* function for that exercise.\n\nYou can also take a look at these Observable collections:\n- [d3-geo](https://observablehq.com/collection/@d3/d3-geo)\n- [maps](https://observablehq.com/collection/@observablehq/maps)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"md`## Working with base maps`","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"md`Sometimes we want to work with a tiled base map, such as Google Maps, Leaflet or Mapbox. Here you have examples on how to do that:\n- [Leaflet](https://observablehq.com/@tmcw/leaflet)\n- [Leaflet and interactivity](https://observablehq.com/@sfu-iat355/intro-to-leaflet-d3-interactivity)\n- [Mapbox](https://observablehq.com/@mbostock/static-mapbox-map)\n- [Mapbox and D3](https://observablehq.com/@john-guerra/mapbox-d3)\n- [Open Layers](https://observablehq.com/@tmcw/using-openlayers)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"width = 800;","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"height = 500;/*{\n const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, outline)).bounds(outline);\n const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);\n projection.scale(projection.scale() * (l - 1) / l).precision(0.2);\n return dy;\n}*/","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}