31:T403,md`# Beaufort Wind Force Scale You've probably heard of this scale many times in weather forecasts! At least I have, but it struck me that I didn't know it actually meant. So, I read up on it and made this little Observable notebook. ## So what is it? Beafort's wind scale is system to classify wind speed. The Beaufort scale is not an exact nor an objective scale. It's an empirical measure of wind speed that was based on visual and subjective observation of a ship at sea and the sea by the Irish hydrographer Francis Beaufort in 1805. Later it was extended to land observations. The corresponding integral wind speeds were determined in the 1946 revision of the scale. Wind speed on the revised Beaufort scale is based on the empirical relationship: ${beafortEquation}
## Sources & Links * The [Wikipedia article](https://en.wikipedia.org/wiki/Beaufort_scale) on it is really good, especially the history part. * [Royal Meteorological Society: Beaufort scale](https://www.rmets.org/resource/beaufort-scale) `32:T557,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); svg.append("g") .call(xAxis); svg.append("g").attr("class", "top-axis") .call(xAxisTop); svg.append("g") .call(yAxis); svg.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "darkorange") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); const beaufortNumbers = svg.append("g") .attr("class", "labels") .selectAll("rect") .data(labels) .join("g") .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("font-weight", 500) .attr("stroke-linecap", "round") .attr("stroke-linejoin", "round") .attr("text-anchor", "center") beaufortNumbers.append("text") .text((d,i) => `${i}: ${d.title}`) .attr("dy", "0.35em") .attr("dx", "-0.3em") .attr("fill", (d,i) => (i < 9) ? "black" : "white") .attr("x", d => x(d.speed)) .attr("y", d => y(d.beaufort)) .clone(true).lower() .attr("fill", "none") .attr("stroke", (d) => colorStrokeScale(d.speed)) .attr("stroke-width", labelPadding); beaufortNumbers.append("title") .text((d) => (descriptions === "Sea") ? d.sea : d.land) return svg.node(); }33:Tbe9,categories = [ { title: "Calm", sea: "Sea like a mirror", land: "Smoke rises vertically" }, { title: "Light air", sea: "Ripples with appearance of scales are formed, without foam crests", land: "Direction shown by smoke drift but not by wind vanes" }, { title: "Light breeze", sea: "Small wavelets still short but more pronounced; crests have a glassy appearance but do not break", land: "Wind felt on face; leaves rustle; wind vane moved by wind" }, { title: "Gentle breeze", sea: "Large wavelets; crests begin to break; foam of glassy appearance", land: "Leaves and small twigs in constant motion; light flags extended" }, { title: "Moderate breeze", sea: "Small waves becoming longer; fairly frequent white horses", land: "Raises dust and loose paper; small branches moved" }, { title: "Fresh breeze", sea: "Moderate waves taking a more pronounced long form; many white horses are formed; chance of some spray", land: "Small trees in leaf begin to sway; crested wavelets form on inland waters" }, { title: "Strong breeze", sea: "Large waves begin to form; the white foam crests are more extensive everywhere; probably some spray", land: "Large branches in motion; whistling heard in telegraph wires; umbrellas used with difficulty" }, { title: "Moderate gale", sea: "Sea heaps up and white foam from breaking waves begins to be blown in streaktitles along the direction of the wind; spindrift begins to be seen", land: "Whole trees in motion; inconvenience felt when walking against the wind. " }, { title: "Gale", sea: "Moderately high waves of greater length; edges of crests break into spindrift; foam is blown in well-marked streaks along the direction of the wind", land: "Twigs break off trees; generally impedes progress" }, { title: "Strong gale", sea: "High waves; dense streaks of foam along the direction of the wind; sea begins to roll; spray affects visibility", land: "Slight structural damage (chimney pots and slates removed)" }, { title: "Storm", sea: "Very high waves with long overhanging crests; resulting foam in great patches is blown in dense white streaks along the direction of the wind; on the whole the surface of the sea takes on a white appearance; rolling of the sea becomes heavy; visibility affected", land: "Seldom experienced inland; trees uprooted; considerable structural damage" }, { title: "Violent storm", sea: "Exceptionally high waves; small- and medium-sized ships might be for a long time lost to view behind the waves; sea is covered with long white patches of foam; everywhere the edges of the wave crests are blown into foam; visibility affected", land: "Very rarely experienced; accompanied by widespread damage" }, { title: "Hurricane", sea: "The air is filled with foam and spray; sea is completely white with driving spray; visibility very seriously affected", land: "Devastation" } ]34:[] 2f:{"title":"Beaufort Wind Force Scale","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"viewof descriptions = radio({title: 'Descriptions', options: [\"Sea\", \"Land\"], description: 'Hover your mouse over the labels for a description of the conditions at sea or land', value: \"Land\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":581,"value":"{\n let columnNames = [\n \"Beaufort number\",\n `Wind speed (m/s)`,\n \"Sea Conditions\",\n \"Land conditions\"\n ];\n\n return md`\n ${columnNames.join(\"|\")}\n ${columnNames.map((d) => \"---\").join(\"|\")}\n ${labels.map(\n (d) =>\n `${d.beaufort} | ${d3.format(\".1f\")(d.speed)} | ${d.sea} | ${d.land} \\n`\n )}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":405,"value":"labelPadding = 4.5","pinned":true,"hidden":false,"mode":"ojs"},{"id":422,"value":"colorStrokeScale = d3.scaleSequential(d3.interpolateYlOrBr)\n .domain(xExtent)","pinned":true,"hidden":false,"mode":"ojs"},{"id":355,"value":"colorScale = d3.scaleSequential(d3.interpolateYlOrBr)\n .domain(xExtent)","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"line = d3.line()\n .x(d => x(d.speed))\n .y(d => y(d.beaufort))","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"x = d3.scaleLinear()\n .domain(xExtent)\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"xKnots = d3.scaleLinear()\n .domain(d3.extent(knots))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.beaufort)]).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x)\n .ticks(width / 80)\n .tickSizeOuter(0)\n )\n .call(g =>\n g.append(\"text\")\n .attr(\"x\", (width - margin.right)/2 - margin.left )\n .attr(\"y\", margin.bottom - 5)\n .attr(\"fill\", \"currentColor\")\n .attr(\"font-size\", 14) \n .attr(\"text-anchor\", \"start\")\n .text(\"Wind speed (m/s)\")\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"xAxisTop = g => g\n .attr(\"transform\", `translate(0,${margin.top})`)\n .call(d3.axisTop(xKnots).ticks(width / 80).tickSizeOuter(0))\n .call(g =>\n g.append(\"text\")\n .attr(\"x\", (width - margin.right)/2 - margin.left)\n .attr(\"y\", -20)\n .attr(\"fill\", \"currentColor\")\n .attr(\"font-size\", 14)\n .attr(\"text-anchor\", \"start\")\n .text(\"Wind speed (knots)\")\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.selectAll(\".tick line\").clone()\n .attr(\"stroke-opacity\", 0.2)\n .attr(\"x2\", width - margin.left - margin.right)\n )\n .call(g =>\n g.append(\"text\")\n .attr(\"font-size\", 14)\n .attr(\"transform\", \n `translate(${-margin.left/1.75},${height/2 - margin.top})rotate(-90)`)\n .attr(\"fill\", \"currentColor\")\n .text(\"Beaufort number\")\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"md`## Data/Values`","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"beafortEquation = tex`v = 0.836 \\times B^{\\frac{3}{2}} \\left(\\frac{m}{s}\\right) `","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"xExtent = [0, 40] // m/s","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"speeds = d3.range(...xExtent, 0.5) // m/s","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"data = speeds.map(speed => ({speed, beaufort: beaufortScale(speed) }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":267,"value":"knots = speeds.map(speed => speed * mpsToKnots)","pinned":false,"hidden":false,"mode":"ojs"},{"id":592,"value":"mpsToKnots = 0.514444444","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"beaufortScale = (v) => (1/0.836) * v ** (2/3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"invBeaufortScale = (b) => (0.836 * b) ** (3/2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"labels = categories.map(({title, land, sea}, i) => ({ title, land, sea, speed: invBeaufortScale(i), beaufort: i }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"margin = ({top: 35, right: 40, bottom: 35, left: 40})","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@6\", \"d3-array\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":521,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"html`

To-do list

\n
\n
\n* km/h and mph conversion option for an axis\n* Make a small table with same color scale\n
\n\n
\n

`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":623,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}