31:T214f,signature = "M 49.710938 0 C 45.280658 -0.10068817 40.846014 0.20070526 36.507812 1.0078125 A 0.5 0.5 0 0 0 36.109375 1.5917969 A 0.5 0.5 0 0 0 36.691406 1.9921875 C 40.953205 1.1992947 45.319733 0.90068817 49.689453 1 A 0.5 0.5 0 0 0 50.199219 0.51171875 A 0.5 0.5 0 0 0 49.710938 0 z M 43.818359 1.1992188 A 0.5 0.5 0 0 0 43.759766 1.2011719 A 0.5 0.5 0 0 0 43.746094 1.203125 A 0.5 0.5 0 0 0 43.302734 1.7539062 C 43.601346 4.5409497 43.802127 7.4409499 44.103516 10.253906 A 0.5 0.5 0 0 0 44.652344 10.697266 A 0.5 0.5 0 0 0 45.097656 10.146484 C 44.799044 7.3594413 44.598263 4.4594409 44.296875 1.6464844 A 0.5 0.5 0 0 0 43.818359 1.1992188 z M 8.5703125 2.1015625 A 0.50005 0.50005 0 0 0 8.2460938 2.2460938 C 7.5577053 2.934482 6.7738634 4.1882853 6.0390625 5.5058594 C 5.3042616 6.8234334 4.6504693 8.1762227 4.3320312 9.0253906 A 0.5 0.5 0 0 0 4.625 9.6679688 A 0.5 0.5 0 0 0 5.2675781 9.375 C 5.5491401 8.624168 6.1969103 7.2765666 6.9121094 5.9941406 C 7.3884504 5.1400119 7.8257032 4.5843377 8.2714844 3.96875 C 8.9228567 7.441618 9.4243349 10.969843 9.6015625 14.425781 A 0.5 0.5 0 0 0 10.125 14.898438 A 0.5 0.5 0 0 0 10.599609 14.375 C 10.398322 10.449896 9.8951261 6.4257519 9.0898438 2.5 A 0.50005 0.50005 0 0 0 8.5703125 2.1015625 z M 0.88476562 2.9003906 A 0.5 0.5 0 0 0 0.40234375 3.3574219 C 0.19784703 5.7091342 0.09918043 10.996194 0 13.277344 A 0.50005 0.50005 0 0 0 0.578125 13.792969 C 2.4585477 13.49606 4.4593291 13.297232 6.3789062 12.994141 A 0.5 0.5 0 0 0 6.7929688 12.421875 A 0.5 0.5 0 0 0 6.2226562 12.005859 C 4.5372816 12.271971 2.75693 12.468243 1.0234375 12.722656 C 1.1186209 10.224305 1.2147999 5.555192 1.3984375 3.4433594 A 0.5 0.5 0 0 0 0.94335938 2.9023438 A 0.5 0.5 0 0 0 0.88476562 2.9003906 z M 16.912109 3 A 0.50005 0.50005 0 0 0 16.435547 3.3144531 C 15.746338 5.0374758 15.191994 6.8522039 14.710938 8.6660156 C 13.677091 7.4658067 12.983618 6.2822304 12.136719 4.7578125 A 0.50005 0.50005 0 0 0 11.207031 5.0820312 C 11.708512 8.0909178 12.308122 11.190527 12.806641 14.181641 A 0.50005 0.50005 0 0 0 13.800781 14.099609 C 13.800781 14.070473 13.789627 14.046528 13.789062 14.017578 L 13.792969 14.017578 C 13.789204 13.994991 13.785026 13.971816 13.78125 13.949219 C 13.763503 13.441862 13.680433 12.9549 13.589844 12.501953 A 0.5 0.5 0 0 0 13.490234 12.289062 A 0.5 0.5 0 0 0 13.488281 12.287109 C 13.221451 10.763415 12.957565 9.2458558 12.685547 7.7207031 C 13.19004 8.5106184 13.764398 9.2702581 14.546875 10.052734 A 0.50005 0.50005 0 0 0 15.386719 9.8164062 C 15.672124 8.6177056 16.131526 7.4509724 16.53125 6.2675781 C 16.666856 9.8044558 16.990686 13.361533 17.710938 16.802734 A 0.5 0.5 0 0 0 18.302734 17.189453 A 0.5 0.5 0 0 0 18.689453 16.597656 C 17.797697 12.337045 17.400391 7.869697 17.400391 3.5 A 0.50005 0.50005 0 0 0 16.912109 3 z M 32.771484 3.2011719 A 0.5 0.5 0 0 0 32.535156 3.2753906 C 31.733615 3.7763543 31.057917 4.3399084 30.339844 4.8027344 A 0.5 0.5 0 0 0 30.308594 4.8007812 A 0.5 0.5 0 0 0 29.804688 5.2324219 C 29.652385 6.3366167 29.594134 7.4540779 29.583984 8.5703125 C 28.933318 8.8541303 28.2646 9.1478882 27.808594 9.3378906 A 0.5 0.5 0 0 0 27.539062 9.9921875 A 0.5 0.5 0 0 0 28.191406 10.261719 C 28.553833 10.110708 29.08822 9.875646 29.574219 9.6640625 C 29.62336 11.168965 29.80205 12.662169 30.111328 14.105469 A 0.50005 0.50005 0 0 0 30.808594 14.453125 C 32.098259 13.857895 33.299041 13.358676 34.609375 12.753906 A 0.5 0.5 0 0 0 34.853516 12.089844 A 0.5 0.5 0 0 0 34.191406 11.845703 C 33.113205 12.343335 32.083399 12.7862 31.013672 13.267578 C 30.768468 11.948382 30.627132 10.591363 30.591797 9.2265625 C 31.425384 8.8647348 32.265313 8.5035756 32.878906 8.2675781 A 0.5 0.5 0 0 0 33.166016 7.6210938 A 0.5 0.5 0 0 0 32.707031 7.3007812 A 0.5 0.5 0 0 0 32.521484 7.3339844 C 31.991449 7.5378442 31.28742 7.8412988 30.601562 8.1367188 C 30.616268 7.3309828 30.664339 6.5267319 30.761719 5.7265625 A 0.5 0.5 0 0 0 30.765625 5.7246094 C 31.606913 5.1988042 32.305741 4.5972417 33.064453 4.1230469 A 0.5 0.5 0 0 0 33.224609 3.4355469 A 0.5 0.5 0 0 0 32.771484 3.2011719 z M 38.191406 3.71875 C 37.81186 3.6981815 37.431269 3.7727754 37.09375 3.9140625 C 36.418712 4.1966367 35.828349 4.8305923 35.902344 5.6445312 A 0.50005 0.50005 0 0 0 35.904297 5.6699219 C 36.304533 8.4715718 36.705469 11.173047 37.105469 13.873047 A 0.50005 0.50005 0 0 0 37.900391 14.199219 C 38.524391 13.731219 38.666913 12.915858 38.347656 12.277344 A 0.5 0.5 0 0 0 37.841797 12.003906 C 37.761176 11.458824 37.68022 10.899102 37.599609 10.351562 C 40.148578 12.136154 42.417456 14.277402 44.40625 16.808594 A 0.5 0.5 0 0 0 45.109375 16.892578 A 0.5 0.5 0 0 0 45.193359 16.191406 C 43.175143 13.622768 40.85606 11.434734 38.251953 9.5976562 C 38.312565 9.5470933 38.406356 9.4998944 38.453125 9.453125 A 0.50005 0.50005 0 0 0 38.480469 9.4257812 C 39.062604 8.7466237 39.836004 8.0212196 40.085938 7.0214844 C 40.319226 6.0883276 40.21673 4.8844296 39.326172 4.1210938 A 0.50005 0.50005 0 0 0 39.287109 4.0898438 C 38.950513 3.8542261 38.570952 3.7393185 38.191406 3.71875 z M 22.337891 3.9980469 C 21.760145 3.9980202 21.173931 4.1124588 20.615234 4.3359375 A 0.5 0.5 0 0 0 20.335938 4.9863281 A 0.5 0.5 0 0 0 20.986328 5.2636719 C 21.868935 4.9106293 22.835827 4.9192218 23.597656 5.2578125 C 24.343784 5.5894249 25 6.3416429 25 7.1992188 C 25 7.8880978 24.598373 8.4521488 24.0625 8.6875 C 23.975755 8.6939454 23.889581 8.691615 23.802734 8.7089844 A 0.5 0.5 0 0 0 23.582031 8.8144531 A 0.5 0.5 0 0 0 23.203125 9.3496094 A 0.5 0.5 0 0 0 23.75 9.796875 C 23.935733 9.7783017 24.111997 9.7308647 24.283203 9.671875 C 24.558601 9.6879312 24.860326 9.7916497 25.123047 9.9667969 C 25.480597 10.205164 25.743233 10.561867 25.810547 10.898438 C 25.971308 11.702241 25.655647 12.506147 24.984375 13.103516 C 24.296841 13.613432 23.309311 13.888744 22.449219 13.802734 A 0.5 0.5 0 0 0 21.902344 14.25 A 0.5 0.5 0 0 0 22.349609 14.796875 C 23.484251 14.910339 24.687609 14.584391 25.599609 13.900391 A 0.50005 0.50005 0 0 0 25.628906 13.876953 C 26.544346 13.075944 27.02873 11.889745 26.791016 10.701172 C 26.65833 10.037742 26.220184 9.496399 25.677734 9.1347656 C 25.574331 9.0658297 25.463255 9.0089431 25.351562 8.953125 C 25.755402 8.48738 26 7.8704308 26 7.1992188 C 26 5.8567945 25.057778 4.8121376 24.003906 4.34375 C 23.484821 4.1130454 22.915636 3.9980735 22.337891 3.9980469 z M 38.109375 4.7285156 C 38.321681 4.7400711 38.525866 4.8000408 38.689453 4.9082031 C 39.176706 5.3492657 39.279136 6.1236904 39.115234 6.7792969 C 38.966805 7.373014 38.347585 8.0419245 37.736328 8.7539062 C 37.664917 8.8233515 37.552507 8.9111627 37.478516 8.9453125 C 37.447011 8.9598531 37.445489 8.9637264 37.445312 8.9667969 A 0.50005 0.50005 0 0 0 37.394531 8.9414062 C 37.229327 7.8122027 37.063606 6.7106092 36.898438 5.5546875 C 36.872432 5.2686264 37.080507 5.0033633 37.480469 4.8359375 C 37.676641 4.7538188 37.897069 4.7169601 38.109375 4.7285156 z M 21.792969 5.1992188 A 0.5 0.5 0 0 0 21.722656 5.2070312 A 0.5 0.5 0 0 0 21.306641 5.7773438 C 21.607905 7.6853526 22.204522 11.177188 22.611328 13.007812 A 0.5 0.5 0 0 0 23.208984 13.388672 A 0.5 0.5 0 0 0 23.587891 12.791016 C 23.194696 11.021641 22.591704 7.5130849 22.292969 5.6210938 A 0.5 0.5 0 0 0 21.792969 5.1992188 z M 49.978516 14 A 0.5 0.5 0 0 0 49.5 14.521484 C 49.59242 16.647153 48.566957 18.795996 46.804688 20.095703 C 46.149735 20.562818 45.432841 20.900391 44.800781 20.900391 C 44.209115 20.900391 43.511054 20.483668 43.384766 19.978516 A 0.5 0.5 0 0 0 42.779297 19.615234 A 0.5 0.5 0 0 0 42.414062 20.220703 C 42.687774 21.31555 43.792448 21.900391 44.800781 21.900391 C 45.767448 21.900391 46.646639 21.437668 47.390625 20.90625 A 0.50005 0.50005 0 0 0 47.396484 20.902344 C 49.432828 19.40188 50.60754 16.951937 50.5 14.478516 A 0.5 0.5 0 0 0 49.978516 14 z M 2.6816406 15.800781 A 0.5 0.5 0 0 0 2.2011719 16.257812 C 2.1543219 16.820012 2.0709379 17.124791 1.9375 17.447266 C 1.8538373 17.64945 1.7007759 17.95593 1.5664062 18.228516 A 0.5 0.5 0 0 0 1.4003906 18.576172 C 1.406844 18.54164 1.4192416 18.493548 1.4023438 18.527344 C 1.3950221 18.541987 1.3861437 18.610982 1.3730469 18.636719 C 1.3615001 18.661779 1.3574889 18.667431 1.3457031 18.693359 L 1.3574219 18.695312 C 1.33207 18.756884 1.3007812 18.781162 1.3007812 18.900391 A 0.50005 0.50005 0 0 0 2.2558594 19.107422 C 2.4973566 18.576128 2.694766 18.23065 2.8613281 17.828125 C 3.0278902 17.4256 3.1460687 16.979597 3.1992188 16.341797 A 0.5 0.5 0 0 0 2.7421875 15.800781 A 0.5 0.5 0 0 0 2.6816406 15.800781 z "32:T47d,drawtexts = (selection) => { let h = 45; let w = [132, 110, 100, 140, 130]; selection .append("g") .selectAll("rect") .data(w) .join("rect") .attr("x", 20) .attr("y", (d, i) => 26 + i * h) .attr("width", (d) => d) .attr("height", h) .attr("fill", "white") .attr("stroke", "#4a4946"); selection .append("g") .selectAll("text") .data(title) .join("text") .attr("transform", (d, i) => `translate(${25},${i * h})`) .attr("dy", 63) .attr("font-family", "Roboto") .attr("font-weight", "Bold") .text((d) => d) .attr("fill", "#4a4946") .style("font-size", "32pt"); selection .append("g") .selectAll("text") .data(subtitle) .join("text") .attr("transform", (d, i) => `translate(${40},${i * 13})`) .attr("dy", 268) .attr("font-family", "Roboto") .attr("font-weight", "Bold") .text((d) => d) .attr("fill", "#4a4946") .style("font-size", "9pt"); selection .append("path") .attr("d", signature) .attr("transform", "translate(20,485) scale(0.8) ") .attr("fill", "#4a4946"); return selection.node(); }33:[{"id":"9bf58bfc092579988bc21ce04713acd3974bfc9513d2fe4846fff1b42c72800780db59f7ff9a3f1acdd43c4107bdaeff7c54a83c4430e328374d08ad4d3e761d","href":"https://static.observableusercontent.com/files/9bf58bfc092579988bc21ce04713acd3974bfc9513d2fe4846fff1b42c72800780db59f7ff9a3f1acdd43c4107bdaeff7c54a83c4430e328374d08ad4d3e761d","name":"departements_osm@1.json","type":"application/json","lastModified":1624434858475.658,"size":161818},{"id":"0bc6b2c8977ecd8d34b558ce8300cf892ee4f4d50bf599aea795c5e0761e96e27a931516d69f80b9ee66b87c2aa52eb88ba2d796d34f445d5ca0c8849fc68794","href":"https://static.observableusercontent.com/files/0bc6b2c8977ecd8d34b558ce8300cf892ee4f4d50bf599aea795c5e0761e96e27a931516d69f80b9ee66b87c2aa52eb88ba2d796d34f445d5ca0c8849fc68794","name":"arrondissements_osm@4.json","type":"application/json","lastModified":1624434908313.376,"size":187231},{"id":"c585d677753ada2c97d3df6bc732fd663f3b420c0b0f7a25632837fb95d1e0f34cd121d2efb5d09ab4a9e4dbd46ea8b8dfe4b0ed2da603331b5d36f8ae10b7fe","href":"https://static.observableusercontent.com/files/c585d677753ada2c97d3df6bc732fd663f3b420c0b0f7a25632837fb95d1e0f34cd121d2efb5d09ab4a9e4dbd46ea8b8dfe4b0ed2da603331b5d36f8ae10b7fe","name":"highway_osm@1.json","type":"application/json","lastModified":1624435724996.319,"size":41736583},{"id":"326feb8da1615cd723f8303311cb2f0d240bcd3b816a654a3d4cbfb767b324920d877738d3beaa92791d470c0aae8e5ef7c85771972ad107c87d23cfdb174d93","href":"https://static.observableusercontent.com/files/326feb8da1615cd723f8303311cb2f0d240bcd3b816a654a3d4cbfb767b324920d877738d3beaa92791d470c0aae8e5ef7c85771972ad107c87d23cfdb174d93","name":"bar_osm.json","type":"application/json","lastModified":1624437185548.596,"size":256685},{"id":"573abdfb5682bddc37ffb91e58b3fecf9b95200b08167f334bbd9f0137f91aa4ae080d3ae2d5c819adfa8c51493edcdf57f6c53cc9bc5fe5f77e957ebead6290","href":"https://static.observableusercontent.com/files/573abdfb5682bddc37ffb91e58b3fecf9b95200b08167f334bbd9f0137f91aa4ae080d3ae2d5c819adfa8c51493edcdf57f6c53cc9bc5fe5f77e957ebead6290","name":"pub_osm.json","type":"application/json","lastModified":1624438740911.89,"size":86222}] 2f:{"title":"Bars & Pubs in Paris","cells":[{"id":0,"value":"md`# Bars & Pubs in Paris`","pinned":false,"hidden":false,"mode":"ojs"},{"id":951,"value":"[OpenStreetMap](https://www.openstreetmap.org/) (OSM) is a collaborative online mapping project that aims to build a free geographic database of the world (e.g., to create open source maps), using GPS and other open source data. Thanks to the OverPass API, it is possible to fetch all the data contained in the database. Here, I have retrieved the basemap and the location of bars and pubs in Paris. The map below does not use any other data. ","pinned":false,"hidden":false,"mode":"md"},{"id":1390,"value":"Thanks to this map, if one day you come to visit Paris, you'll know in which areas you should go to have a drink. And yeah, cartography is an amazing tool to make decisions ^^","pinned":false,"hidden":false,"mode":"md"},{"id":1438,"value":"viewof layers = Inputs.checkbox([\"bars\", \"pubs\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":550,"value":"map = {\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\")\n .style(\"background\", \"white\");\n\n svg.call(drawcontour);\n svg.call(drawtemplate);\n svg.call(drawdots);\n svg.call(drawtexts);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":754,"value":"# Part 1. Get data from OpenStreetMap","pinned":false,"hidden":false,"mode":"md"},{"id":403,"value":"**1.1. Get a bbox around Paris**","pinned":false,"hidden":false,"mode":"md"},{"id":1402,"value":"getcoords = (location) =>\n d3\n .json(`https://api-adresse.data.gouv.fr/search/?q=${location}`)\n .then((r) => r.features[0].geometry.coordinates)","pinned":false,"hidden":false,"mode":"ojs"},{"id":521,"value":"coords = getcoords(\"Paris\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"getbb = (coords, dlat, dlon) => {\n return `${coords[1] - dlat},${coords[0] - dlon},${coords[1] + dlat},${\n coords[0] + dlon\n }`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"bb = getbb(coords, 0.045, 0.125)","pinned":false,"hidden":false,"mode":"ojs"},{"id":506,"value":"**1.2. Get OSM data**","pinned":false,"hidden":false,"mode":"md"},{"id":137,"value":"function overpass(query) {\n let overpass_api_url = `https://overpass-api.de/api/interpreter?data=${encodeURIComponent(\n query\n )}`;\n return d3.json(overpass_api_url);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"md`The Overpass API (formerly known as OSM Server Side Scripting, or OSM3S before 2011) is a read-only API that serves up custom selected parts of the OSM map data. It acts as a database over the web: the client sends a query to the API and gets back the data set that corresponds to the query.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":938,"value":"In order not to overload the server, we make the requests only once then we store the result as attached files in this notebook. If you want the data queried directly on OSM, select *Fetch data from OSM* and wait for the result. If the query returns an error, run it again. Yolo!","pinned":false,"hidden":false,"mode":"md"},{"id":926,"value":"Departements","pinned":false,"hidden":false,"mode":"md"},{"id":982,"value":"viewof departements_radio = Inputs.radio(\n [\"Use attached data\", \"Fetch data from OSM\"],\n { value: \"Use attached data\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":907,"value":"departements_osm = {\n if (departements_radio == \"Fetch data from OSM\") {\n return overpass(`\n[out:json]\n[timeout:500];\n(\n way[admin_level=6](${bb});\n node(w);\n);\nout;\n`);\n } else {\n return FileAttachment(\"departements_osm@1.json\").json();\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1007,"value":"Arrondissements","pinned":false,"hidden":false,"mode":"md"},{"id":1011,"value":"viewof arrondissements_radio = Inputs.radio(\n [\"Use attached data\", \"Fetch data from OSM\"],\n { value: \"Use attached data\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1013,"value":"arrondissements_osm = {\n if (arrondissements_radio == \"Fetch data from OSM\") {\n return overpass(`\n[out:json]\n[timeout:500];\n(\n way[admin_level=9](${bb});\n node(w);\n);\nout;\n`);\n } else {\n return FileAttachment(\"arrondissements_osm@4.json\").json();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1031,"value":"Highways","pinned":false,"hidden":false,"mode":"md"},{"id":1037,"value":"viewof highway_radio = Inputs.radio(\n [\"Use attached data\", \"Fetch data from OSM\"],\n { value: \"Use attached data\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1034,"value":"highway_osm = {\n if (highway_radio == \"Fetch data from OSM\") {\n return overpass(`\n[out:json]\n[timeout:500];\n(\n way[highway](${bb});\n node(w);\n);\nout;\n`);\n } else {\n return FileAttachment(\"highway_osm@1.json\").json();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1142,"value":"Bars","pinned":false,"hidden":false,"mode":"md"},{"id":1151,"value":"viewof bar_radio = Inputs.radio([\"Use attached data\", \"Fetch data from OSM\"], {\n value: \"Use attached data\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1153,"value":"bar_osm = {\n if (bar_radio == \"Fetch data from OSM\") {\n return overpass(`\n[out:json]\n[timeout:500];\n(\nnode[amenity=bar](${bb});\n);\nout;\n`);\n } else {\n return FileAttachment(\"bar_osm.json\").json();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1181,"value":"Pubs","pinned":false,"hidden":false,"mode":"md"},{"id":1187,"value":"viewof pub_radio = Inputs.radio([\"Use attached data\", \"Fetch data from OSM\"], {\n value: \"Use attached data\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1189,"value":"pub_osm = {\n if (pub_radio == \"Fetch data from OSM\") {\n return overpass(`\n[out:json]\n[timeout:500];\n(\nnode[amenity=pub](${bb});\n);\nout;\n`);\n } else {\n return FileAttachment(\"pub_osm.json\").json();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1077,"value":"**1.3. OSM data to GeoJSON**","pinned":false,"hidden":false,"mode":"md"},{"id":1080,"value":"*osmtogeojson* is a Javascript module for converting OSM data to GeoJSON. This OSM conversion code was written for and is maintained by the overpass-turbo project.","pinned":false,"hidden":false,"mode":"md"},{"id":910,"value":"departements = ({\n type: \"FeatureCollection\",\n features: turf\n .rewind(osmtogeojson(departements_osm))\n .features.filter((d) => d.geometry.type == \"LineString\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1019,"value":"arrondissements = ({\n type: \"FeatureCollection\",\n features: turf\n .rewind(osmtogeojson(arrondissements_osm))\n .features.filter((d) => d.geometry.type == \"LineString\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1044,"value":"highway = ({\n type: \"FeatureCollection\",\n features: turf\n .rewind(osmtogeojson(highway_osm))\n .features.filter((d) => d.geometry.type == \"LineString\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1160,"value":"bar = osmtogeojson(bar_osm)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1212,"value":"pub = osmtogeojson(pub_osm)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1095,"value":"# Part 2. Cartography","pinned":false,"hidden":false,"mode":"md"},{"id":1098,"value":"**2.1. Map Template**","pinned":false,"hidden":false,"mode":"md"},{"id":510,"value":"width = 925","pinned":false,"hidden":false,"mode":"ojs"},{"id":515,"value":"height = 520","pinned":false,"hidden":false,"mode":"ojs"},{"id":519,"value":"projection = d3\n .geoMercator()\n .scale(Math.pow(2, 20.3) / (2 * Math.PI))\n .translate([width / 2, height / 2])\n .center(coords)","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1752,"value":"scaleBar = d3\n .geoScaleBar()\n .projection(projection)\n .size([0, 0])\n .left(0.9)\n .top(0.99)\n .units(d3.geoScaleKilometers)\n .distance(2)\n .label(\"2 km\")\n .labelAnchor(\"middle\")\n .tickSize(null)\n .tickValues(null)","pinned":false,"hidden":false,"mode":"ojs"},{"id":529,"value":"drawtemplate = (selection) => {\n selection\n .append(\"path\")\n .datum(highway)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#bab6ab\")\n .attr(\"stroke-width\", 0.2)\n .attr(\"d\", path);\n\n selection\n .append(\"path\")\n .datum(arrondissements)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#525861\")\n .attr(\"stroke-width\", 0.7)\n .attr(\"d\", path);\n\n selection\n .append(\"path\")\n .datum(departements)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#525861\")\n .attr(\"stroke-width\", 1.2)\n .attr(\"d\", path);\n\n selection\n .append(\"g\")\n .attr(\"transform\", `translate(750, 415)`)\n .append(\"g\")\n .call(scaleBar);\n\n return selection.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1756,"value":"**2.2. Dots**","pinned":false,"hidden":false,"mode":"md"},{"id":1343,"value":"drawdots = (selection) => {\n let r = 2;\n\n if (layers[0] == \"bars\" || layers[1] == \"bars\") {\n selection\n .append(\"g\")\n .attr(\"fill\", \"#363533\")\n .attr(\"fill-opacity\", 0.9)\n .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-width\", 0.3)\n .selectAll(\"circle\")\n .data(bar.features)\n .join(\"circle\")\n .attr(\n \"transform\",\n (d) => `translate(${projection(d.geometry.coordinates)})`\n )\n .attr(\"r\", r);\n }\n\n if (layers[0] == \"pubs\" || layers[1] == \"pubs\") {\n selection\n .append(\"g\")\n .attr(\"fill\", \"#363533\")\n .attr(\"fill-opacity\", 0.9)\n .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-width\", 0.3)\n .selectAll(\"circle\")\n .data(pub.features)\n .join(\"rect\")\n .attr(\"x\", (d) => projection(d.geometry.coordinates)[0] - r)\n .attr(\"y\", (d) => projection(d.geometry.coordinates)[1] - r)\n .attr(\"width\", r * 2)\n .attr(\"height\", r * 2);\n }\n return selection.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1240,"value":"**2.3. Contour**","pinned":false,"hidden":false,"mode":"md"},{"id":1285,"value":"contour_data = {\n let output = [];\n bar.features.forEach((e) => {\n output.push(projection(e.geometry.coordinates));\n });\n pub.features.forEach((e) => {\n output.push(projection(e.geometry.coordinates));\n });\n return output;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1223,"value":"contour = d3\n .contourDensity()\n .x((d) => d[0])\n .y((d) => d[1])\n .size([width, height])\n .bandwidth(bandwidth)\n .thresholds(thresholds)\n .cellSize(cellsize)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1305,"value":"contours = contour(contour_data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1324,"value":"**2.4. map configuration**","pinned":false,"hidden":false,"mode":"md"},{"id":1308,"value":"color = d3.scaleSequentialQuantile([...contours.map((d) => d.value)], (t) =>\n d3.interpolateRdYlGn(1 - Math.pow(0.01 + t, 1 / curve))\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1837,"value":"// color = d3.scaleSequentialQuantile([...contours.map((d) => d.value)], (t) =>\n// d3.interpolateRdYlGn(1 - Math.pow(0.01 + t, 1 / curve))\n// )","pinned":true,"hidden":false,"mode":"ojs"},{"id":1350,"value":"viewof thresholds = Inputs.range([5, 150], {\n step: 1,\n value: 13,\n label: \"Thresholds\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1366,"value":"viewof cellsize = Inputs.range([1, 10], {\n step: 1,\n value: 1,\n label: \"Cellsize\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1357,"value":"viewof curve = Inputs.range([1, 5], {\n value: 2.6,\n label: \"Color Interpolation\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1355,"value":"viewof bandwidth = Inputs.range([2, 60], {\n step: 1,\n value: 8,\n label: \"Bandwith\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1332,"value":"**2.5. draw contour**","pinned":false,"hidden":false,"mode":"md"},{"id":1313,"value":"drawcontour = (selection) => {\n selection\n .append(\"g\")\n .style(\"stroke\", \"white\")\n .style(\"stroke-width\", 0.3)\n .attr(\"stroke-opacity\", 1)\n .selectAll(\".contour\")\n .data(contours)\n .join(\"g\")\n .append(\"path\")\n .attr(\"d\", d3.geoPath())\n .attr(\"fill\", (d) => color(d.value));\n\n return selection.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1817,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1383,"value":"**2.6. texts**","pinned":false,"hidden":false,"mode":"md"},{"id":1779,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1387,"value":"title = \"Where\\nto go\\nfor a\\nbeer in\\nParis?\".split(\"\\n\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1544,"value":"subtitle = \"Pubs & bars, according to\\nOpenStreetMap on June 23, 2021.\".split(\n \"\\n\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1719,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1541,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`# imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":967,"value":"osmtogeojson = require(\"osmtogeojson@3.0.0-beta.4/osmtogeojson.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":671,"value":"turf = require(\"@turf/turf@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"d3 = require(\"d3@6\", \"d3-geo-scale-bar@1.0.2\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}