31:T71c,md`This notebook was used to experiment with patterns, design and generate a basemap for the map that locates the 1772 hurricane that slammed into the Caribbean islands on Aug. 30 and Aug. 31, 1772. The map illustrates the approximate storm path based on historical reports. The graphic was published with a story by Bob Henson about the hurricane that prompted a teenage Alexander Hamilton to write an evocative description published in a local newspaper. Impressed by his essay, leaders of the Caribbean island of St. Croix took up a collection to send him to the American Colonies for formal education. The story was publsihed at Washington Post's Capital Weather Gang on Sep. 26 2020. [Inside the hurricane that drove Alexander Hamilton to America](https://www.washingtonpost.com/weather/2020/09/26/alexander-hamilton-hurricane/)

${await FileAttachment("2300-HAMILTON-HURRICANE.jpg").image()}

ADRIÁN BLANCO/THE WASHINGTON POST

For inspiration, I looked into the Library of Congress maps collection. This [~1715 map of the West-indies](https://www.loc.gov/resource/g4390.ct003986/?r=-0.332,-0.014,1.456,0.671,0) is one of the main references I took to recreate the style and details of an 18th century map. Although created a few years before 1772, this map was a great starting point for working on the wave patterns, the scale bar and the labels. In this notebook, you can learn... * how to create patterns * how to and scale using Harry Stevens' [d3-geo-scale-bar](https://observablehq.com/@harrystevens/introducing-d3-geo-scale-bar) * how to add curved labels Finally, the notebook can be used as a template to create other maps with similar styles from other parts of the world just tweaking the projection, scale, etc. `32:T436,function locateIslands(svg) { svg .append("g") .selectAll("title") .data(islands) .attr("d", d3.geoPath(projection)) .enter() .append("text") .attr("x", function(d) { // define the x position d.position = projection([d.coordinates[0], d.coordinates[1]]); return d.position[0]; }) .attr("y", function(d) { // define the y position return d.position[1] - 6; }) .attr("fill", "#454545") .attr("class", "island-label") .attr("text-anchor", "left") .html(d => d.name + ", " + d.info); svg .append("g") .selectAll("circle") .data(islands) .attr("d", d3.geoPath(projection)) .enter() .append("circle") .attr("cx", function(d) { // define the x position d.position = projection([d.coordinates[0], d.coordinates[1]]); return d.position[0]; }) .attr("cy", function(d) { // define the y position return d.position[1]; }) .attr("r", 3) .attr("fill", "orange") .attr("stroke", "black") .attr("stroke-width", .6); }33:[{"id":"c0283ebf6aed16663d5689a4034247ecc9fc68ae1dd94ff517a67fb32b37c64cb5aa9a1f3de27eef5d61e5287d80c93850d35d0435891b7921c5c11647acf84f","href":"https://static.observableusercontent.com/files/c0283ebf6aed16663d5689a4034247ecc9fc68ae1dd94ff517a67fb32b37c64cb5aa9a1f3de27eef5d61e5287d80c93850d35d0435891b7921c5c11647acf84f","name":"2300-HAMILTON-HURRICANE.jpg","type":"image/jpeg","lastModified":1602192253464.808,"size":1810952}] 2f:{"title":"Designing patterns for vintage maps","cells":[{"id":0,"value":"md`# Designing patterns for vintage maps`","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"viewof mapdetail = radio({\n title: 'Scale data',\n description:\n 'Select the scale of your data: large, medium or small. Sorce: Natural Earth',\n options: [\n { label: '110m', value: 110 },\n { label: '50m', value: 50 },\n { label: '10m', value: 10 }\n ],\n value: 110\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"viewof wave = radio({\n title: 'Waves',\n description: 'Please select the type of wave you want for your pattern',\n options: [\n { label: 'Calm water', value: \"M1,10 Q5,5 10,10\" },\n {\n label: 'Small waves',\n value: \"M0,5 Q2.5,0 5,5 S7.5,10 10,5\"\n },\n { label: 'Large waves', value: \"M1,10 L5,5 L10,10\" },\n {\n label: 'Heavy sea',\n value:\n \"M0,2.5 Q2.5,0 5,2.5 S7.5,10 10,2.5 M0,7.5 Q2.5,0 5,7.5 S7.5,10 10,7.5\"\n }\n ],\n value: 'M1,10 Q5,5 10,10'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"html`\n

Pick a color!

${viewof oceanColor}

${viewof waveColor}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"viewof cb = checkbox({\n title: \"Label islands\",\n //description: \"\",\n options: [\n {\n value: \"labelIslands\",\n label: \"Show me the Caribbean islands!\"\n }\n ],\n value: \"labelIslands\",\n submit: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"globe = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, 975, 610]); //d3.select(DOM.svg(width, height));\n\n const ocean = svg\n .append(\"circle\")\n .attr(\"cx\", width / 2)\n .attr(\"cy\", height / 2)\n .attr(\"r\", projection.scale())\n .style(\"fill\", oceanColor);\n\n drawPattern(svg);\n\n drawLand(svg);\n\n if (cb == \"labelIslands\") {\n locateIslands(svg);\n }\n\n labelAtlanticOcean(svg);\n\n svg.append(\"g\").attr(\"class\", \"scale-bar-wrapper\").call(scaleBar);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":469,"value":"function labelAtlanticOcean(svg) {\n svg\n .append(\"defs\")\n .append(\"path\")\n .attr('dx', 500)\n .attr('dy', 100)\n .attr(\"id\", \"curve\")\n .attr(\"d\", \"M80,80 Q300,280 600,220\");\n\n svg\n .append(\"text\")\n .attr(\"id\", \"curved-text\")\n .append(\"textPath\")\n .attr(\"xlink:href\", \"#curve\")\n .attr(\"fill\", \"#988773\")\n .style(\"text-shadow\", textShadow)\n .text(\"Atlantic Ocean\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"function drawLand(svg) {\n svg\n .append(\"path\")\n .datum(worldOuter)\n .attr(\"class\", \"outer\")\n .attr(\"stroke-alignment\", \"outer\")\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"d\", path);\n\n svg\n .append(\"path\")\n .datum(world)\n .attr(\"d\", path)\n .style(\"fill\", \"#f0e8d8\")\n .style(\"stroke\", \"#bbb\")\n .style(\"stroke-width\", \"0.5px\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"function drawPattern(svg) {\n const defs = svg.append('defs');\n\n const globePattern = svg\n .append(\"circle\")\n .attr(\"cx\", width / 2)\n .attr(\"cy\", height / 2)\n .attr(\"r\", projection.scale())\n .style(\"fill\", \"#cfb684\");\n\n defs\n .append('pattern')\n .attr('width', 10)\n .attr('height', 10)\n .attr('patternUnits', 'userSpaceOnUse')\n .attr('id', 'hatching2')\n .append('path')\n .attr('d', wave)\n .style(\"fill\", \"none\")\n .style('stroke', waveColor)\n .style('strokeWidth', 2)\n .style('opacity', 1);\n\n globePattern.style('fill', 'url(#hatching2)');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"projection = d3\n //.geoOrthographic()\n .geoAzimuthalEqualArea()\n .scale(scale)\n .translate([width / 2, height / 2])\n .rotate([65, -18]) //75, 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"scale = Math.min(width, height) / 0.25 // scale globe 0.6","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"scaleBar = d3\n .geoScaleBar()\n .size([width, height])\n .projection(projection)\n .left(.8)\n .top(.9)\n .units(d3.geoScaleMiles)\n .distance(200)\n .label(\"200 MILES\")\n .labelAnchor(\"middle\")\n .tickValues(null)\n .tickSize(null)","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"viewof oceanColor = color({\n value: '#d5c4a5',\n description: \"Ocean color\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"viewof waveColor = color({\n value: '#DCD0BB',\n description: \"Wave color\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"md`# Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"textShadow = \"-1.5px -1.5px #dcd0bb, -1.5px 1.5px #dcd0bb, 1.5px 1.5px #dcd0bb, 1.5px -1.5px #dcd0bb, -1.5px 0 #dcd0bb, 0 1.5px #dcd0bb, 1.5px 0 #dcd0bb, 0 -1.5px #dcd0bb\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"md`# Data processing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"worldOuter = {\n if (mapdetail == 110) {\n return topojson.mesh(world110m, world110m.objects.land, (a, b) => a === b);\n }\n if (mapdetail == 50) {\n return topojson.feature(world50m, world50m.objects.countries);\n } else {\n return topojson.mesh(world10m, world10m.objects.land, (a, b) => a === b);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"world = {\n if (mapdetail == 110) {\n return topojson.feature(world110m, world110m.objects.countries);\n } if (mapdetail == 50){\n return topojson.feature(world50m, world50m.objects.countries);\n \n }else {\n return topojson.feature(world10m, world10m.objects.countries);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":335,"value":"md`# Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"islands = [\n {\n name: 'Antigua',\n coordinates: [-61.814115, 17.073220],\n info: 'Aug. 30, 8:15 – 9:00 pm'\n },\n {\n name: \"St. Kitts\",\n coordinates: [-62.759964, 17.341628],\n info: 'Aug. 31, 11:00 – 11:55 am'\n },\n {\n name: \"St. Croix\",\n coordinates: [-64.842681, 17.729957],\n info: 'Aug. 31, 7:30 – 8:00 pm'\n },\n {\n name: \"St. Thomas\",\n coordinates: [-64.892646, 18.337344],\n info: 'Aug. 31, 10:00 – 11:00 pm'\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"world110m = d3.json(\n \"https://gist.githubusercontent.com/adrianblanco/5e161debd883527d33dff970ea43ef51/raw/1135a7eadd01759c8b009b7c825e692588765c70/world-countries-110m.json\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"world10m = d3.json(\n \"https://gist.githubusercontent.com/adrianblanco/5e161debd883527d33dff970ea43ef51/raw/1135a7eadd01759c8b009b7c825e692588765c70/world-countries-10m.json\"\n)\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"world50m = d3.json(\n \"https://gist.githubusercontent.com/adrianblanco/5e161debd883527d33dff970ea43ef51/raw/1135a7eadd01759c8b009b7c825e692588765c70/world-countries-50m.json\"\n)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"md`# Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"import { radio, color, checkbox } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"md`# Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"topojson = require(\"topojson@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"d3@v6\", \"d3-geo-scale-bar@1\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}