Tributary inlet

_.md

[ Launch: Tributary inlet ] 6054515 by muyueh

config.json

{"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":560,"height":680,"hide":false},"endpoint":"","editor_json0":{"vim":false,"emacs":false,"width":813,"height":457,"hide":true},"description":"Tributary inlet","display":"svg","public":true,"require":[],"fileconfigs":{"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12},"ksfo.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

//Live example from: https://gist.github.com/3589712
//https://groups.google.com/forum/?fromgroups=#!searchin/d3-js/windhistory.com/d3-js/0fYBKF8mYvE/0VXPUCBBtXsJ
//ksfo is taken from windhistory.com server
var data = tributary.ksfo;

//scroll to bottom to see how we call the drawBigWindrose function with the data


//we don't have a selectedMonthControl so we just turn on all the months
var months = [];
for(var i = 0; i < 12; i++) {
  months.push(true);
}


var svg = d3.select("svg");


//setup some containers to put the plots inside
var big = svg.append("g")
  .attr("id", "windrose")
  .attr("transform", "translate(" + [35, 100] + ")");


var avg = svg.append("g")
  .attr("id", "avg")
  .attr("transform", "translate(" + [464, 100] + ")");






// This is the core Javascript code for http://windhistory.com/
// I haven't done a full open source release, but I figured I'd put the most important
// D3 code out there for people to learn from.   --nelson@monkey.org

/** Common wind rose code **/

// Function to draw a single arc for the wind rose
// Input: Drawing options object containing
//   width: degrees of width to draw (ie 5 or 15)
//   from: integer, inner radius
//   to: function returning the outer radius
// Output: a function that when called, generates SVG paths.
//   It expects to be called via D3 with data objects from totalsToFrequences()
var arc = function(o) {
    return d3.svg.arc()
        .startAngle(function(d) { return (d.d - o.width) * Math.PI/180; })
        .endAngle(function(d) { return (d.d + o.width) * Math.PI/180; })
        .innerRadius(o.from)
        .outerRadius(function(d) { return o.to(d) });
};

/** Code for data manipulation **/

// Convert a dictionary of {direction: total} to frequencies
// Output is an array of objects with three parameters:
//   d: wind direction
//   p: probability of the wind being in this direction
//   s: average speed of the wind in this direction
function totalsToFrequencies(totals, speeds) {
    var sum = 0;
    // Sum all the values in the dictionary
    for (var dir in totals) {
        sum += totals[dir];
    }
    if (sum == 0) {  // total hack to work around the case where no months are selected
        sum = 1;
    }
    
    // Build up an object containing frequencies
    var ret = {};
    ret.dirs = []
    ret.sum = sum;
    for (var dir in totals) {
        var freq = totals[dir] / sum;
        var avgspeed;
        if (totals[dir] > 0) { 
            avgspeed = speeds[dir] / totals[dir];
        } else {
            avgspeed = 0;
        }
        if (dir == "null") {   // winds calm is a special case
            ret.calm = { d: null, p: freq, s: null };
        } else {
            ret.dirs.push({ d: parseInt(dir), p: freq, s: avgspeed });
        }
    }
    return ret;
}

// Filter input data, giving back frequencies for the selected month 
function rollupForMonths(d, months) {
    var totals = {}, speeds = {};
    for (var i = 1; i < 361; i += 1) { totals[""+i] = 0; speeds[""+i] = 0 }
    totals["null"] = 0; speeds["null"] = 0;
     
    for (var key in d.data) {
        var s = key.split(":")
        if (s.length == 1) {
            var direction = s[0];
        } else {
            var month = s[0];
            var direction = s[1];
        }
        
        if (months && !months[month-1]) { continue; }
        
        // count up all samples with this key
        totals[direction] += d.data[key][0];
        // add in the average speed * count from this key
        speeds[direction] += d.data[key][0] * d.data[key][1];  
    }
    return totalsToFrequencies(totals, speeds);
}

/** Code for big visualization **/

// Transformation to place a mark on top of an arc
function probArcTextT(d) {
    var tr = probabilityToRadius(d);
    return "translate(" + visWidth + "," + (visWidth-tr) + ")" +
           "rotate(" + d.d + ",0," + tr + ")"; };
function speedArcTextT(d) {
    var tr = speedToRadius(d);
    return "translate(" + visWidth + "," + (visWidth-tr) + ")" +
           "rotate(" + d.d + ",0," + tr + ")"; };   

// Return a string representing the wind speed for this datum
function speedText(d) { return d.s < 10 ? "" : d.s.toFixed(0); };
// Return a string representing the probability of wind coming from this direction
function probabilityText(d) { return d.p < 0.02 ? "" : (100*d.p).toFixed(0); };

// Map a wind speed to a color
var speedToColorScale = d3.scale.linear()
                          .domain([5, 25])
                          .range(["hsl(220, 70%, 90%)", "hsl(220, 70%, 30%)"])
                          .interpolate(d3.interpolateHsl);
function speedToColor(d) { return speedToColorScale(d.s); }
// Map a wind probability to a color                     
var probabilityToColorScale = d3.scale.linear()
                                .domain([0, 0.2])
                                .range(["hsl(0, 70%, 99%)", "hsl(0, 70%, 40%)"])
                                .interpolate(d3.interpolateHsl);
function probabilityToColor(d) { return probabilityToColorScale(d.p); }
                                
// Width of the whole visualization; used for centering               
var visWidth = 200;

// Map a wind probability to an outer radius for the chart      
var probabilityToRadiusScale = d3.scale.linear().domain([0, 0.15]).range([34, visWidth-20]).clamp(true);
function probabilityToRadius(d) { return probabilityToRadiusScale(d.p); }
// Map a wind speed to an outer radius for the chart      
var speedToRadiusScale = d3.scale.linear().domain([0, 20]).range([34, visWidth-20]).clamp(true);
function speedToRadius(d) { return speedToRadiusScale(d.s); }

// Options for drawing the complex arc chart
var windroseArcOptions = {
    width: 5,
    from: 34,
    to: probabilityToRadius
}   
var windspeedArcOptions = {
    width: 5,
    from: 34,
    to: speedToRadius
}
// Draw a complete wind rose visualization, including axes and center text
function drawComplexArcs(parent, plotData, colorFunc, arcTextFunc, complexArcOptions, arcTextT) {
    // Draw the main wind rose arcs
  
	  console.log(plotData.dirs);
    parent.append("svg:g")
        .attr("class", "arcs")
        .selectAll("path")
        .data(plotData.dirs)
      .enter().append("svg:path")
        .attr("d", arc(complexArcOptions))
        .style("fill", colorFunc)
        .attr("transform", "translate(" + visWidth + "," + visWidth + ")")
      .append("svg:title")
        .text(function(d) { return d.d + "\u00b0 " + (100*d.p).toFixed(1) + "% " + d.s.toFixed(0) + "kts" });
        
    // Annotate the arcs with speed in text
    if (false) {    // disabled: just looks like chart junk
        parent.append("svg:g")
            .attr("class", "arctext")
            .selectAll("text")
            .data(plotData.dirs)
          .enter().append("svg:text")
            .text(arcTextFunc)
            .attr("dy", "-3px")
            .attr("transform", arcTextT);
    }

    // Add the calm wind probability in the center
    var cw = parent.append("svg:g").attr("class", "calmwind")
        .selectAll("text")
        .data([plotData.calm.p])
        .enter();
    cw.append("svg:text")
        .attr("transform", "translate(" + visWidth + "," + visWidth + ")")
        .text(function(d) { return Math.round(d * 100) + "%" });
    cw.append("svg:text")
        .attr("transform", "translate(" + visWidth + "," + (visWidth+14) + ")")
        .attr("class", "calmcaption")
        .text("calm");
}

// Update the page text after the data has been loaded
// Lots of template substitution here
function updatePageText(d) {
    if (!('info' in d)) {
        // workaround for stations missing in the master list
        d3.selectAll(".stationid").text("????")
        d3.selectAll(".stationname").text("Unknown station");
        return;
    }
    document.title = "Wind History for " + d.info.id;
    d3.selectAll(".stationid").text(d.info.id);
    d3.selectAll(".stationname").text(d.info.name.toLowerCase());

    var mapurl = 'map.html#10.00/' + d.info.lat + "/" + d.info.lon;  
    d3.select("#maplink").html('<a href="' + mapurl + '">' + d.info.lat + ', ' + d.info.lon + '</a>');
    d3.select("#whlink").attr("href", mapurl);

    var wsurl = 'http://weatherspark.com/#!dashboard;loc=' + d.info.lat + ',' + d.info.lon + ';t0=01/01;t1=12/31';
    d3.select("#wslink").attr("href", wsurl);
    
    var wuurl = 'http://www.wunderground.com/cgi-bin/findweather/getForecast?query=' + d.info.id;
    d3.select("#wulink").attr("href", wuurl);
    
    var vmurl = 'http://vfrmap.com/?type=vfrc&lat=' + d.info.lat + '&lon=' + d.info.lon + '&zoom=10';
    d3.select("#vmlink").attr("href", vmurl);
    
    var rfurl = 'http://runwayfinder.com/?loc=' + d.info.id;
    d3.select("#rflink").attr("href", rfurl);
    
    var nmurl = 'http://www.navmonster.com/apt/' + d.info.id;
    d3.select("#nmlink").attr("href", nmurl);
}

// Update all diagrams to the newly selected months
function updateWindVisDiagrams(d) {
    updateBigWindrose(d, "#windrose");
    updateBigWindrose(d, "#windspeed");
}

// Update a specific digram to the newly selected months
function updateBigWindrose(windroseData, container) {
    var vis = d3.select(container).select("svg");
    var rollup = rollupForMonths(windroseData, selectedMonthControl.selected());

    if (container == "#windrose") {
        updateComplexArcs(vis, rollup, speedToColor, speedText, windroseArcOptions, probArcTextT);
    } else {
        updateComplexArcs(vis, rollup, probabilityToColor, probabilityText, windspeedArcOptions, speedArcTextT);
    }
}

// Update drawn arcs, etc to the newly selected months
function updateComplexArcs(parent, plotData, colorFunc, arcTextFunc, complexArcOptions, arcTextT) {
    // Update the arcs' shape and color
    parent.select("g.arcs").selectAll("path")
        .data(plotData.dirs)
        .transition().duration(200)
        .style("fill", colorFunc)
        .attr("d", arc(complexArcOptions));

    // Update the arcs' title tooltip
    parent.select("g.arcs").selectAll("path").select("title")
        .text(function(d) { return d.d + "\u00b0 " + (100*d.p).toFixed(1) + "% " + d.s.toFixed(0) + "kts" });
        
    // Update the calm wind probability in the center
    parent.select("g.calmwind").select("text")
        .data([plotData.calm.p])
        .text(function(d) { return Math.round(d * 100) + "%" });            
}

// Top level function to draw all station diagrams
function makeWindVis(station) {
    var url = "data/" + station + ".json";
    var stationData = null;
    d3.json(url, function(d) {
        stationData = d;
        updatePageText(d);        
        drawBigWindrose(d, "#windrose", "Frequency by Direction");
        drawBigWindrose(d, "#windspeed", "Average Speed by Direction");
        selectedMonthControl.setCallback(function() { updateWindVisDiagrams(d); });
    });

    selectedMonthControl = new monthControl(null);
    selectedMonthControl.install("#monthControlDiv");
}

// Draw a big wind rose, for the visualization
function drawBigWindrose(windroseData, container, captionText) {
    // Various visualization size parameters
    var w = 400,
        h = 400,
        r = Math.min(w, h) / 2,      // center; probably broken if not square
        p = 20,                      // padding on outside of major elements
        ip = 34;                     // padding on inner circle
        
    // The main SVG visualization element
    var vis = d3.select(container)
        .append("svg:svg")
        .attr("width", w + "px").attr("height", (h + 30) + "px");

    // Set up axes: circles whose radius represents probability or speed
    if (container == "#windrose") {
        var ticks = d3.range(0.025, 0.151, 0.025);
        var tickmarks = d3.range(0.05,0.101,0.05);
        var radiusFunction = probabilityToRadiusScale;
        var tickLabel = function(d) { return "" + (d*100).toFixed(0) + "%"; }
    } else {
        var ticks = d3.range(5, 20.1, 5);
        var tickmarks = d3.range(5, 15.1, 5);
        var radiusFunction = speedToRadiusScale;
        var tickLabel = function(d) { return "" + d + "kts"; }
    }

    // Circles representing chart ticks
    vis.append("svg:g")
        .attr("class", "axes")
      .selectAll("circle")
        .data(ticks)
      .enter().append("svg:circle")
        .attr("cx", r).attr("cy", r)
        .attr("r", radiusFunction);
    // Text representing chart tickmarks
    vis.append("svg:g").attr("class", "tickmarks")
        .selectAll("text")
        .data(tickmarks)
      .enter().append("svg:text")
        .text(tickLabel)
        .attr("dy", "-2px")
        .attr("transform", function(d) {
            var y = visWidth - radiusFunction(d);
            return "translate(" + r + "," + y + ") " })
            
    // Labels: degree markers
    vis.append("svg:g")
      .attr("class", "labels")
      .selectAll("text")
        .data(d3.range(30, 361, 30))
      .enter().append("svg:text")
        .attr("dy", "-4px")
        .attr("transform", function(d) {     
            return "translate(" + r + "," + p + ") rotate(" + d + ",0," + (r-p) + ")"})        
        .text(function(dir) { return dir; });

    //var rollup = rollupForMonths(windroseData, selectedMonthControl.selected());
    var rollup = rollupForMonths(windroseData, months);

  
    if (container == "#windrose") {
        drawComplexArcs(vis, rollup, speedToColor, speedText, windroseArcOptions, probArcTextT);
    } else {
        drawComplexArcs(vis, rollup, probabilityToColor, probabilityText, windspeedArcOptions, speedArcTextT);
    }
    vis.append("svg:text")
       .text(captionText)
       .attr("class", "caption")
       .attr("transform", "translate(" + w/2 + "," + (h + 20) + ")");
}

/** Code for small wind roses **/

// Plot a small wind rose with the specified percentage data
//   parent: the SVG element to put the plot on
//   plotData: a list of 12 months, each a list of 13 numbers. plotData[month][0] is winds calm percentage,
//     plotData[month][1, 2, 3...] is percentage of winds at 30 degrees, 60, 90, ...
var smallArcScale = d3.scale.linear().domain([0, 0.15]).range([5, 30]).clamp(true)
var smallArcOptions = {
    width: 15,
    from: 5,
    to: function(d) { return smallArcScale(d.p); }
}
    
function plotSmallRose(parent, plotData) {
    var winds = [];
    //var months = selectedMonthControl.selected();
  
    // For every wind direction (note: skip plotData[0], winds calm)
    for (var dir = 1; dir < 13; dir++) {
        // Calculate average probability for all selected months
        var n = 0; sum = 0;
        for (var month = 0; month < 12; month++) {
            if (months[month]) {
                n += 1;
                sum += plotData[month][dir];
            }
        }
        var avg = sum/n;
        winds.push({d: dir * 30, p: avg / 100});
    }
    parent.append("svg:g")
        .selectAll("path")
        .data(winds)
      .enter().append("svg:path")
        .attr("d", arc(smallArcOptions));
    parent.append("svg:circle")
        .attr("r", smallArcOptions.from);
}









drawBigWindrose(data, "#windrose", "caption")
drawBigWindrose(data, "#avg", "caption")
  
  
  
//need to reformat the data to get smallPlot to work, not sure how yet
//var rollup = rollupForMonths(data, months);
//var small = svg.append("g")
//.attr("id", "small");
//plotSmallRose(small, rollup)
  
  

//Style the plots, this doesn't capture everything from windhistory.com  
svg.selectAll("text").style( { font: "14px sans-serif", "text-anchor": "middle" });

svg.selectAll(".arcs").style( {  stroke: "#000", "stroke-width": "0.5px", "fill-opacity": 0.9 })
svg.selectAll(".caption").style( { font: "18px sans-serif" });
svg.selectAll(".axes").style( { stroke: "#aaa", "stroke-width": "0.5px", fill: "none" })
svg.selectAll("text.labels").style( { "letter-spacing": "1px", fill: "#444", "font-size": "12px" })
svg.selectAll("text.arctext").style( { "font-size": "9px" })

inlet.svg

<svg class="tributary_svg" width="1429" height="774"><g id="windrose" transform="translate(35,100)"><svg width="400px" height="430px"><g class="axes" style="stroke: #aaaaaa; stroke-width: 0.5px; fill: none; "><circle cx="200" cy="200" r="58.333333333333336"></circle><circle cx="200" cy="200" r="82.66666666666667"></circle><circle cx="200" cy="200" r="107"></circle><circle cx="200" cy="200" r="131.33333333333334"></circle><circle cx="200" cy="200" r="155.66666666666669"></circle><circle cx="200" cy="200" r="180"></circle></g><g class="tickmarks"><text dy="-2px" transform="translate(200,117.33333333333333) " style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-family: sans-serif; text-anchor: middle; ">5%</text><text dy="-2px" transform="translate(200,68.66666666666666) " style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-family: sans-serif; text-anchor: middle; ">10%</text></g><g class="labels"><text dy="-4px" transform="translate(200,20) rotate(30,0,180)" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-family: sans-serif; text-anchor: middle; ">30</text><text dy="-4px" transform="translate(200,20) rotate(60,0,180)" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-family: sans-serif; text-anchor: middle; ">60</text><text dy="-4px" transform="translate(200,20) rotate(90,0,180)" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-family: sans-serif; text-anchor: middle; ">90</text><text dy="-4px" transform="translate(200,20) rotate(120,0,180)" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-family: sans-serif; text-anchor: middle; ">120</text><text dy="-4px" transform="translate(200,20) rotate(150,0,180)" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-family: sans-serif; text-anchor: middle; ">150</text><text dy="-4px" transform="translate(200,20) rotate(180,0,180)" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-family: sans-serif; text-anchor: middle; ">180</text><text dy="-4px" transform="translate(200,20) rotate(210,0,180)" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-family: sans-serif; text-anchor: middle; ">210</text><text dy="-4px" transform="translate(200,20) rotate(240,0,180)" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-family: sans-serif; text-anchor: middle; ">240</text><text dy="-4px" transform="translate(200,20) rotate(270,0,180)" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-family: sans-serif; text-anchor: middle; ">270</text><text dy="-4px" transform="translate(200,20) rotate(300,0,180)" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-family: sans-serif; text-anchor: middle; ">300</text><text dy="-4px" transform="translate(200,20) rotate(330,0,180)" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-family: sans-serif; text-anchor: middle; ">330</text><text dy="-4px" transform="translate(200,20) rotate(360,0,180)" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-family: sans-serif; text-anchor: middle; ">360</text></g><g class="arcs" style="stroke: #000000; stroke-width: 0.5px; fill-opacity: 0.9; "><path d="M3.988649989672959,-45.59047799937043A45.764626218851575,45.764626218851575 0 0,1 11.844756857436948,-44.205234395254564L8.799847533485705,-32.84147809382832A34,34 0 0,0 2.9632952534203767,-33.87061973511935Z" style="fill: #d0ddf7; " transform="translate(200,200)"><title>10° 1.2% 5kts</title></path><path d="M11.87460890963255,-44.316643770758745A45.87996569158541,45.87996569158541 0 0,1 19.389711349300754,-41.58137017525819L14.36902089918378,-30.814464759246096A34,34 0 0,0 8.799847533485705,-32.84147809382832Z" style="fill: #d4e0f7; " transform="translate(200,200)"><title>20° 1.2% 5kts</title></path><path d="M18.985827790206738,-40.71523908770105A44.92429577464789,44.92429577464789 0 0,1 25.767517476002897,-36.799828722046136L19.50159883593557,-27.85116950582572A34,34 0 0,0 14.36902089918378,-30.814464759246096Z" style="fill: #d7e2f8; " transform="translate(200,200)"><title>30° 1.1% 5kts</title></path><path d="M24.699570558465027,-35.27464246045804A43.06238714337306,43.06238714337306 0 0,1 30.44970596315949,-30.449705963159488L24.041630560342618,-24.041630560342615A34,34 0 0,0 19.50159883593557,-27.85116950582572Z" style="fill: #d3dff7; " transform="translate(200,200)"><title>40° 0.9% 5kts</title></path><path d="M29.867153653812505,-29.867153653812498A42.23853376670278,42.23853376670278 0 0,1 34.59978128276419,-24.227027674598705L27.85116950582572,-19.501598835935567A34,34 0 0,0 24.041630560342618,-24.041630560342615Z" style="fill: #d3dff7; " transform="translate(200,200)"><title>50° 0.8% 5kts</title></path><path d="M34.653770176979705,-24.264831105308012A42.304442036836406,42.304442036836406 0 0,1 38.34084524422543,-17.878629757517974L30.814464759246096,-14.369020899183779A34,34 0 0,0 27.85116950582572,-19.501598835935567Z" style="fill: #d2def7; " transform="translate(200,200)"><title>60° 0.9% 5kts</title></path><path d="M38.01231276273823,-17.72543254544783A41.94194655110148,41.94194655110148 0 0,1 40.51280937854464,-10.855374556097045L32.84147809382832,-8.799847533485703A34,34 0 0,0 30.814464759246096,-14.369020899183779Z" style="fill: #cddbf6; " transform="translate(200,200)"><title>70° 0.8% 6kts</title></path><path d="M39.52604062407905,-10.590970665221729A40.92036836403034,40.92036836403034 0 0,1 40.76465400820822,-3.566445098274834L33.87061973511935,-2.9632952534203745A34,34 0 0,0 32.84147809382832,-8.799847533485703Z" style="fill: #d0ddf7; " transform="translate(200,200)"><title>80° 0.7% 5kts</title></path><path d="M40.05883621358245,-3.5046940427302102A40.211854460093896,40.211854460093896 0 0,1 40.05883621358245,3.504694042730219L33.87061973511935,2.963295253420382A34,34 0 0,0 33.87061973511935,-2.9632952534203745Z" style="fill: #d3dff7; " transform="translate(200,200)"><title>90° 0.6% 5kts</title></path><path d="M41.765930414537785,3.654045432884657A41.92546948356807,41.92546948356807 0 0,1 40.496893753472605,10.85110997721197L32.84147809382832,8.79984753348571A34,34 0 0,0 33.87061973511935,2.963295253420382Z" style="fill: #cbd9f6; " transform="translate(200,200)"><title>100° 0.8% 6kts</title></path><path d="M39.876184375663605,10.684791400693623A41.282863849765256,41.282863849765256 0 0,1 37.414980978216064,17.44689215986575L30.814464759246096,14.369020899183779A34,34 0 0,0 32.84147809382832,8.79984753348571Z" style="fill: #bacdf3; " transform="translate(200,200)"><title>110° 0.7% 7kts</title></path><path d="M41.4171039345146,19.31311274326568A45.69871794871795,45.69871794871795 0 0,1 37.434198229078355,26.211707786837216L27.851169505825723,19.501598835935557A34,34 0 0,0 30.814464759246096,14.369020899183779Z" style="fill: #aac1f0; " transform="translate(200,200)"><title>120° 1.2% 8kts</title></path><path d="M39.66124011546805,27.771099303596053A48.41743409172987,48.41743409172987 0 0,1 34.23629597391492,34.23629597391491L24.041630560342618,24.041630560342615A34,34 0 0,0 27.851169505825723,19.501598835935557Z" style="fill: #9cb7ee; " transform="translate(200,200)"><title>130° 1.5% 9kts</title></path><path d="M33.74695203406345,33.74695203406344A47.72539725532683,47.72539725532683 0 0,1 27.37416328114837,39.094356726205206L19.501598835935575,27.851169505825716A34,34 0 0,0 24.041630560342618,24.041630560342615Z" style="fill: #a8c0f0; " transform="translate(200,200)"><title>140° 1.4% 8kts</title></path><path d="M26.56138952089831,37.93359550057179A46.308369447453956,46.308369447453956 0 0,1 19.570762599929104,41.96963583519761L14.36902089918378,30.814464759246096A34,34 0 0,0 19.501598835935575,27.851169505825716Z" style="fill: #b4c8f2; " transform="translate(200,200)"><title>150° 1.3% 7kts</title></path><path d="M20.420310775954444,43.791497777990216A48.31857168652943,48.31857168652943 0 0,1 12.505766584625253,46.672156281418516L8.799847533485712,32.84147809382832A34,34 0 0,0 14.36902089918378,30.814464759246096Z" style="fill: #a0baee; " transform="translate(200,200)"><title>160° 1.5% 9kts</title></path><path d="M12.309595955911307,45.94003752810534A47.56062657999278,47.56062657999278 0 0,1 4.145181735123303,47.37964403691016L2.9632952534203914,33.87061973511935A34,34 0 0,0 8.799847533485712,32.84147809382832Z" style="fill: #8fadeb; " transform="translate(200,200)"><title>170° 1.4% 10kts</title></path><path d="M4.181083511602735,47.79000321983211A47.972553268327914,47.972553268327914 0 0,1 -4.181083511602709,47.79000321983211L-2.9632952534203723,33.87061973511935A34,34 0 0,0 2.9632952534203914,33.87061973511935Z" style="fill: #8aaaea; " transform="translate(200,200)"><title>180° 1.4% 11kts</title></path><path d="M-4.1710310141884674,47.675102648613965A47.85721379559408,47.85721379559408 0 0,1 -12.386358375842825,46.226518779401815L-8.799847533485694,32.84147809382833A34,34 0 0,0 -2.9632952534203723,33.87061973511935Z" style="fill: #91afec; " transform="translate(200,200)"><title>190° 1.4% 10kts</title></path><path d="M-12.548412373476085,46.83131253213879A48.48334236186349,48.48334236186349 0 0,1 -20.48994587234996,43.94083072412077L-14.369020899183777,30.8144647592461A34,34 0 0,0 -8.799847533485694,32.84147809382833Z" style="fill: #96b3ec; " transform="translate(200,200)"><title>200° 1.5% 10kts</title></path><path d="M-20.364602698838024,43.67203142108579A48.186755146262186,48.186755146262186 0 0,1 -27.63878729611348,39.47227898571378L-19.501598835935557,27.85116950582573A34,34 0 0,0 -14.369020899183777,30.8144647592461Z" style="fill: #a2bbef; " transform="translate(200,200)"><title>210° 1.5% 9kts</title></path><path d="M-27.430868427212307,39.17534006752849A47.82425966052727,47.82425966052727 0 0,1 -33.81685831118509,33.81685831118509L-24.041630560342615,24.041630560342618A34,34 0 0,0 -19.501598835935557,27.85116950582573Z" style="fill: #aac2f0; " transform="translate(200,200)"><title>220° 1.4% 8kts</title></path><path d="M-34.84215037563579,34.84215037563579A49.27424160346696,49.27424160346696 0 0,1 -40.36309574026964,28.26254390281705L-27.851169505825712,19.501598835935578A34,34 0 0,0 -24.041630560342615,24.041630560342618Z" style="fill: #a4bdef; " transform="translate(200,200)"><title>230° 1.6% 9kts</title></path><path d="M-44.10182666469355,30.88043147943643A53.8383893102203,53.8383893102203 0 0,1 -48.79415147336338,22.753086505204383L-30.81446475924609,14.369020899183797A34,34 0 0,0 -27.851169505825712,19.501598835935578Z" style="fill: #98b4ed; " transform="translate(200,200)"><title>240° 2.0% 10kts</title></path><path d="M-57.739194946582856,26.924228779296016A63.70815276273023,63.70815276273023 0 0,1 -61.53735009869039,16.488883263295346L-32.84147809382832,8.7998475334857A34,34 0 0,0 -30.81446475924609,14.369020899183797Z" style="fill: #799ee7; " transform="translate(200,200)"><title>250° 3.1% 12kts</title></path><path d="M-98.46160026578964,26.382706276694332A101.93494944023112,101.93494944023112 0 0,1 -101.54705618260839,8.884216230408327L-33.87061973511935,2.9632952534203785A34,34 0 0,0 -32.84147809382832,8.7998475334857Z" style="fill: #5a88e2; " transform="translate(200,200)"><title>260° 7.0% 14kts</title></path><path d="M-141.69659863969264,12.396846041155973A142.23785662694115,142.23785662694115 0 0,1 -141.69659863969264,-12.396846041155937L-33.87061973511935,-2.96329525342037A34,34 0 0,0 -33.87061973511935,2.9632952534203785Z" style="fill: #5080e0; " transform="translate(200,200)"><title>270° 11.1% 15kts</title></path><path d="M-161.9355135414035,-14.167521657121524A162.5540808956302,162.5540808956302 0 0,1 -157.01518490577163,-42.07209199492499L-32.84147809382832,-8.799847533485721A34,34 0 0,0 -33.87061973511935,-2.96329525342037Z" style="fill: #6a93e5; " transform="translate(200,200)"><title>280° 13.2% 13kts</title></path><path d="M-143.2322535933975,-38.3789666804407A148.28494041170097,148.28494041170097 0 0,1 -134.39179619539019,-62.66792375911629L-30.814464759246093,-14.369020899183788A34,34 0 0,0 -32.84147809382832,-8.799847533485721Z" style="fill: #779de7; " transform="translate(200,200)"><title>290° 11.7% 12kts</title></path><path d="M-87.21751851275191,-40.6701968077716A96.23388407367281,96.23388407367281 0 0,1 -78.83018286881894,-55.19748828319695L-27.85116950582572,-19.50159883593557A34,34 0 0,0 -30.814464759246093,-14.369020899183788Z" style="fill: #7ba0e8; " transform="translate(200,200)"><title>300° 6.4% 12kts</title></path><path d="M-41.21342082416389,-28.85794793648859A50.312296858071505,50.312296858071505 0 0,1 -35.576166285412995,-35.57616628541299L-24.04163056034262,-24.041630560342615A34,34 0 0,0 -27.85116950582572,-19.50159883593557Z" style="fill: #99b5ed; " transform="translate(200,200)"><title>310° 1.7% 10kts</title></path><path d="M-30.158429808486,-30.15842980848599A42.650460455037916,42.650460455037916 0 0,1 -24.463299116531875,-34.937211871611105L-19.501598835935578,-27.851169505825712A34,34 0 0,0 -24.04163056034262,-24.041630560342615Z" style="fill: #a4bdef; " transform="translate(200,200)"><title>320° 0.9% 9kts</title></path><path d="M-23.26304019151144,-33.22306448026873A40.55787287829541,40.55787287829541 0 0,1 -17.140497735725486,-36.75791601524167L-14.369020899183798,-30.81446475924609A34,34 0 0,0 -19.501598835935578,-27.851169505825712Z" style="fill: #b7cbf2; " transform="translate(200,200)"><title>330° 0.7% 7kts</title></path><path d="M-16.848030330864304,-36.13071764149339A39.86583604189238,39.86583604189238 0 0,1 -10.318037616576236,-38.50744061946941L-8.799847533485702,-32.84147809382832A34,34 0 0,0 -14.369020899183798,-30.81446475924609Z" style="fill: #a9c1f0; " transform="translate(200,200)"><title>340° 0.6% 8kts</title></path><path d="M-10.271127248840292,-38.33236874367714A39.68458829902492,39.68458829902492 0 0,1 -3.458739768836544,-39.533576459442344L-2.9632952534203802,-33.87061973511935A34,34 0 0,0 -8.799847533485702,-32.84147809382832Z" style="fill: #a6bfef; " transform="translate(200,200)"><title>350° 0.6% 8kts</title></path><path d="M-3.7287211279618746,-42.61947751501546A42.78227699530517,42.78227699530517 0 0,1 3.7287211279618973,-42.619477515015454L2.9632952534203985,-33.87061973511935A34,34 0 0,0 -2.9632952534203802,-33.87061973511935Z" style="fill: #bdcff3; " transform="translate(200,200)"><title>360° 0.9% 7kts</title></path></g><g class="calmwind"><text transform="translate(200,200)" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-family: sans-serif; text-anchor: middle; ">13%</text><text transform="translate(200,214)" class="calmcaption" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-family: sans-serif; text-anchor: middle; ">calm</text></g><text class="caption" transform="translate(200,420)" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 18px; line-height: normal; font-family: sans-serif; text-anchor: middle; ">caption</text></svg></g><g id="avg" transform="translate(464,100)"><svg width="400px" height="430px"><g class="axes" style="stroke: #aaaaaa; stroke-width: 0.5px; fill: none; "><circle cx="200" cy="200" r="70.5"></circle><circle cx="200" cy="200" r="107"></circle><circle cx="200" cy="200" r="143.5"></circle><circle cx="200" cy="200" r="180"></circle></g><g class="tickmarks"><text dy="-2px" transform="translate(200,129.5) " style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-family: sans-serif; text-anchor: middle; ">5kts</text><text dy="-2px" transform="translate(200,93) " style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-family: sans-serif; text-anchor: middle; ">10kts</text><text dy="-2px" transform="translate(200,56.5) " style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-family: sans-serif; text-anchor: middle; ">15kts</text></g><g class="labels"><text dy="-4px" transform="translate(200,20) rotate(30,0,180)" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-family: sans-serif; text-anchor: middle; ">30</text><text dy="-4px" transform="translate(200,20) rotate(60,0,180)" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-family: sans-serif; text-anchor: middle; ">60</text><text dy="-4px" transform="translate(200,20) rotate(90,0,180)" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-family: sans-serif; text-anchor: middle; ">90</text><text dy="-4px" transform="translate(200,20) rotate(120,0,180)" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-family: sans-serif; text-anchor: middle; ">120</text><text dy="-4px" transform="translate(200,20) rotate(150,0,180)" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-family: sans-serif; text-anchor: middle; ">150</text><text dy="-4px" transform="translate(200,20) rotate(180,0,180)" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-family: sans-serif; text-anchor: middle; ">180</text><text dy="-4px" transform="translate(200,20) rotate(210,0,180)" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-family: sans-serif; text-anchor: middle; ">210</text><text dy="-4px" transform="translate(200,20) rotate(240,0,180)" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-family: sans-serif; text-anchor: middle; ">240</text><text dy="-4px" transform="translate(200,20) rotate(270,0,180)" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-family: sans-serif; text-anchor: middle; ">270</text><text dy="-4px" transform="translate(200,20) rotate(300,0,180)" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-family: sans-serif; text-anchor: middle; ">300</text><text dy="-4px" transform="translate(200,20) rotate(330,0,180)" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-family: sans-serif; text-anchor: middle; ">330</text><text dy="-4px" transform="translate(200,20) rotate(360,0,180)" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-family: sans-serif; text-anchor: middle; ">360</text></g><g class="arcs" style="stroke: #000000; stroke-width: 0.5px; fill-opacity: 0.9; "><path d="M6.30621235860277,-72.08033709114966A72.35567226890757,72.35567226890757 0 0,1 18.727026004389597,-69.89021252304556L8.799847533485705,-32.84147809382832A34,34 0 0,0 2.9632952534203767,-33.87061973511935Z" style="fill: #fcebeb; " transform="translate(200,200)"><title>10° 1.2% 5kts</title></path><path d="M18.181230230724648,-67.85327496517162A70.24687933425798,70.24687933425798 0 0,1 29.68761403695277,-63.66529375566193L14.36902089918378,-30.814464759246096A34,34 0 0,0 8.799847533485705,-32.84147809382832Z" style="fill: #fbebeb; " transform="translate(200,200)"><title>20° 1.2% 5kts</title></path><path d="M28.990968947803594,-62.171333540842525A68.59847662141779,68.59847662141779 0 0,1 39.34646975962337,-56.19258235954499L19.50159883593557,-27.85116950582572A34,34 0 0,0 14.36902089918378,-30.814464759246096Z" style="fill: #fcecec; " transform="translate(200,200)"><title>30° 1.1% 5kts</title></path><path d="M40.57493268008524,-57.94700923075921A70.74023636363637,70.74023636363637 0 0,1 50.02090083546648,-50.02090083546647L24.041630560342618,-24.041630560342615A34,34 0 0,0 19.50159883593557,-27.85116950582572Z" style="fill: #fcefef; " transform="translate(200,200)"><title>40° 0.9% 5kts</title></path><path d="M50.06266513326074,-50.06266513326073A70.7993,70.7993 0 0,1 57.99539132922962,-40.60881019014862L27.85116950582572,-19.501598835935567A34,34 0 0,0 24.041630560342618,-24.041630560342615Z" style="fill: #fcf0f0; " transform="translate(200,200)"><title>50° 0.8% 5kts</title></path><path d="M58.67210648555083,-41.08265124382549A71.62541666666667,71.62541666666667 0 0,1 64.91467287474465,-30.270209088119984L30.814464759246096,-14.369020899183779A34,34 0 0,0 27.85116950582572,-19.501598835935567Z" style="fill: #fcf0f0; " transform="translate(200,200)"><title>60° 0.9% 5kts</title></path><path d="M67.3688098918152,-31.41459197334165A74.3332572614108,74.3332572614108 0 0,1 71.8004129409861,-19.238862663758354L32.84147809382832,-8.799847533485703A34,34 0 0,0 30.814464759246096,-14.369020899183779Z" style="fill: #fcf0f0; " transform="translate(200,200)"><title>70° 0.8% 6kts</title></path><path d="M69.95460216678234,-18.74427915742979A72.42233333333334,72.42233333333334 0 0,1 72.14674449009976,-6.312022253185143L33.87061973511935,-2.9632952534203745A34,34 0 0,0 32.84147809382832,-8.799847533485703Z" style="fill: #fdf2f2; " transform="translate(200,200)"><title>80° 0.7% 5kts</title></path><path d="M70.38025699525517,-6.157474623125931A70.64909814323607,70.64909814323607 0 0,1 70.38025699525517,6.157474623125946L33.87061973511935,2.963295253420382A34,34 0 0,0 33.87061973511935,-2.9632952534203745Z" style="fill: #fdf3f3; " transform="translate(200,200)"><title>90° 0.6% 5kts</title></path><path d="M75.20888889876568,6.579925175022721A75.49617463617463,75.49617463617463 0 0,1 72.92370486711077,19.539847828227877L32.84147809382832,8.79984753348571A34,34 0 0,0 33.87061973511935,2.963295253420382Z" style="fill: #fcf0f0; " transform="translate(200,200)"><title>100° 0.8% 6kts</title></path><path d="M82.11414121975103,22.00241782700747A85.01081447963801,85.01081447963801 0 0,1 77.04596314522392,35.9271226445457L30.814464759246096,14.369020899183779A34,34 0 0,0 32.84147809382832,8.79984753348571Z" style="fill: #fdf1f1; " transform="translate(200,200)"><title>110° 0.7% 7kts</title></path><path d="M84.9998884228063,39.636098913874974A93.787,93.787 0 0,1 76.82581277773168,53.79401323605554L27.851169505825723,19.501598835935557A34,34 0 0,0 30.814464759246096,14.369020899183779Z" style="fill: #fcebeb; " transform="translate(200,200)"><title>120° 1.2% 8kts</title></path><path d="M83.28298238463354,58.31537207030684A101.66974857142858,101.66974857142858 0 0,1 71.89136865638847,71.89136865638845L24.041630560342618,24.041630560342615A34,34 0 0,0 27.851169505825723,19.501598835935557Z" style="fill: #fbe8e8; " transform="translate(200,200)"><title>130° 1.5% 9kts</title></path><path d="M67.11946698129582,67.11946698129582A94.92126050420168,94.92126050420168 0 0,1 54.44459833394932,77.75494458850473L19.501598835935575,27.851169505825716A34,34 0 0,0 24.041630560342618,24.041630560342615Z" style="fill: #fbe9e9; " transform="translate(200,200)"><title>140° 1.4% 8kts</title></path><path d="M50.76982264523536,72.50682101344351A88.51448460508702,88.51448460508702 0 0,1 37.40783762267578,80.22136666312603L14.36902089918378,30.814464759246096A34,34 0 0,0 19.501598835935575,27.851169505825716Z" style="fill: #fbeaea; " transform="translate(200,200)"><title>150° 1.3% 7kts</title></path><path d="M41.94688073528597,89.95537603060984A99.25477560414271,99.25477560414271 0 0,1 25.68902624372921,95.8727511385676L8.799847533485712,32.84147809382832A34,34 0 0,0 14.36902089918378,30.814464759246096Z" style="fill: #fbe8e8; " transform="translate(200,200)"><title>160° 1.5% 9kts</title></path><path d="M28.270323138420775,105.50628229897627A109.22814094775212,109.22814094775212 0 0,1 9.519859753247275,108.81249489456856L2.9632952534203914,33.87061973511935A34,34 0 0,0 8.799847533485712,32.84147809382832Z" style="fill: #fbe9e9; " transform="translate(200,200)"><title>170° 1.4% 10kts</title></path><path d="M9.745295736389782,111.38923997281181A111.81472877358489,111.81472877358489 0 0,1 -9.74529573638972,111.38923997281181L-2.9632952534203723,33.87061973511935A34,34 0 0,0 2.9632952534203914,33.87061973511935Z" style="fill: #fbe8e8; " transform="translate(200,200)"><title>180° 1.4% 11kts</title></path><path d="M-9.390876867199633,107.3382137608836A107.74822829964327,107.74822829964327 0 0,1 -27.88729356000204,104.07679645151612L-8.799847533485694,32.84147809382833A34,34 0 0,0 -2.9632952534203723,33.87061973511935Z" style="fill: #fbe8e8; " transform="translate(200,200)"><title>190° 1.4% 10kts</title></path><path d="M-27.17970093644376,101.43602482933565A105.01430034129694,105.01430034129694 0 0,1 -44.38096106815464,95.17527814952295L-14.369020899183777,30.8144647592461A34,34 0 0,0 -8.799847533485694,32.84147809382833Z" style="fill: #fbe8e8; " transform="translate(200,200)"><title>200° 1.5% 10kts</title></path><path d="M-41.59971441375953,89.21087545152857A98.43331010452962,98.43331010452962 0 0,1 -56.459027227993495,80.63184719825773L-19.501598835935557,27.85116950582573A34,34 0 0,0 -14.369020899183777,30.8144647592461Z" style="fill: #fbe8e8; " transform="translate(200,200)"><title>210° 1.5% 9kts</title></path><path d="M-53.68616650951955,76.67179169019568A93.59897497020262,93.59897497020262 0 0,1 -66.1844699135402,66.18446991354021L-24.041630560342615,24.041630560342618A34,34 0 0,0 -19.501598835935557,27.85116950582573Z" style="fill: #fbe9e9; " transform="translate(200,200)"><title>220° 1.4% 8kts</title></path><path d="M-68.775135398135,68.77513539813502A97.26272923408847,97.26272923408847 0 0,1 -79.67296348523023,55.7876096238652L-27.851169505825712,19.501598835935578A34,34 0 0,0 -24.041630560342615,24.041630560342618Z" style="fill: #fbe7e7; " transform="translate(200,200)"><title>230° 1.6% 9kts</title></path><path d="M-85.18383880044128,59.64636606170979A103.9902657807309,103.9902657807309 0 0,1 -94.24718765308725,43.94818536220588L-30.81446475924609,14.369020899183797A34,34 0 0,0 -27.851169505825712,19.501598835935578Z" style="fill: #fae1e1; " transform="translate(200,200)"><title>240° 2.0% 10kts</title></path><path d="M-109.91236879956178,51.252979297192255A121.27488075429841,121.27488075429841 0 0,1 -117.14253940070392,31.388248831749564L-32.84147809382832,8.7998475334857A34,34 0 0,0 -30.81446475924609,14.369020899183797Z" style="fill: #f7d4d4; " transform="translate(200,200)"><title>250° 3.1% 12kts</title></path><path d="M-133.82018628785187,35.85701084681228A138.54085132185304,138.54085132185304 0 0,1 -138.01366155594678,12.074630797848986L-33.87061973511935,2.9632952534203785A34,34 0 0,0 -32.84147809382832,8.7998475334857Z" style="fill: #eea1a1; " transform="translate(200,200)"><title>260° 7.0% 14kts</title></path><path d="M-143.79109151961012,12.580090423984517A144.34035012939563,144.34035012939563 0 0,1 -143.79109151961012,-12.580090423984482L-33.87061973511935,-2.96329525342037A34,34 0 0,0 -33.87061973511935,2.9632952534203785Z" style="fill: #e56c6c; " transform="translate(200,200)"><title>270° 11.1% 15kts</title></path><path d="M-129.281100548901,-11.31063070618392A129.77493335042297,129.77493335042297 0 0,1 -125.35295972811606,-33.588224327999804L-32.84147809382832,-8.799847533485721A34,34 0 0,0 -33.87061973511935,-2.96329525342037Z" style="fill: #e05252; " transform="translate(200,200)"><title>280° 13.2% 13kts</title></path><path d="M-118.17197416603922,-31.664085045781757A122.3406300461361,122.3406300461361 0 0,1 -110.87826568178308,-51.70338441036005L-30.814464759246093,-14.369020899183788A34,34 0 0,0 -32.84147809382832,-8.799847533485721Z" style="fill: #e46565; " transform="translate(200,200)"><title>290° 11.7% 12kts</title></path><path d="M-108.7454358293186,-50.708829516614266A119.98731268202276,119.98731268202276 0 0,1 -98.28785247222142,-68.8218952154933L-27.85116950582572,-19.50159883593557A34,34 0 0,0 -30.814464759246093,-14.369020899183788Z" style="fill: #f0a9a9; " transform="translate(200,200)"><title>300° 6.4% 12kts</title></path><path d="M-84.88768379252095,-59.43899609268538A103.62872727272728,103.62872727272728 0 0,1 -73.27657578027679,-73.27657578027677L-24.04163056034262,-24.041630560342615A34,34 0 0,0 -27.85116950582572,-19.50159883593557Z" style="fill: #fae5e5; " transform="translate(200,200)"><title>310° 1.7% 10kts</title></path><path d="M-68.71892667480971,-68.7189266748097A97.18323809523812,97.18323809523812 0 0,1 -55.742015379721934,-79.60784815633811L-19.501598835935578,-27.851169505825712A34,34 0 0,0 -24.04163056034262,-24.041630560342615Z" style="fill: #fcefef; " transform="translate(200,200)"><title>320° 0.9% 9kts</title></path><path d="M-49.57828983933569,-70.80513581173004A86.43711055276381,86.43711055276381 0 0,1 -36.52990141169775,-78.33862638291761L-14.369020899183798,-30.81446475924609A34,34 0 0,0 -19.501598835935578,-27.851169505825712Z" style="fill: #fdf2f2; " transform="translate(200,200)"><title>330° 0.7% 7kts</title></path><path d="M-39.7995405909535,-85.35039023040075A94.17373595505619,94.17373595505619 0 0,1 -24.373956413624555,-90.9648437171162L-8.799847533485702,-32.84147809382832A34,34 0 0,0 -14.369020899183798,-30.81446475924609Z" style="fill: #fdf3f3; " transform="translate(200,200)"><title>340° 0.6% 8kts</title></path><path d="M-24.83985402266147,-92.70359726516682A95.97382608695652,95.97382608695652 0 0,1 -8.364670096943275,-95.60861670340535L-2.9632952534203802,-33.87061973511935A34,34 0 0,0 -8.799847533485702,-32.84147809382832Z" style="fill: #fdf3f3; " transform="translate(200,200)"><title>350° 0.6% 8kts</title></path><path d="M-7.269055481478674,-83.0856843449752A83.40305816135086,83.40305816135086 0 0,1 7.269055481478718,-83.0856843449752L2.9632952534203985,-33.87061973511935A34,34 0 0,0 -2.9632952534203802,-33.87061973511935Z" style="fill: #fcefef; " transform="translate(200,200)"><title>360° 0.9% 7kts</title></path></g><g class="calmwind"><text transform="translate(200,200)" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-family: sans-serif; text-anchor: middle; ">13%</text><text transform="translate(200,214)" class="calmcaption" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-family: sans-serif; text-anchor: middle; ">calm</text></g><text class="caption" transform="translate(200,420)" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 18px; line-height: normal; font-family: sans-serif; text-anchor: middle; ">caption</text></svg></g></svg>

ksfo.json

{
    "info": {
        "lat": 25.0221,
        "lon": 121.3130,
        "name": "Taipei",
        "id": "TP"
    },
    "data": {
        "1:22": [128, 2.58],
        "1:45": [264, 3.35],
        "1:67": [1873, 4.39],
        "1:90": [2325, 4.17],
        "1:112": [1205, 3.62],
        "1:135": [357, 1.84],
        "1:157": [624, 1.42],
        "1:180": [571, 1.32],
        "1:202": [306, 1.19],
        "1:225": [293, 1.43],
        "1:247": [313, 2.32],
        "1:270": [392, 2.56],
        "1:292": [346, 2.47],
        "1:315": [331, 2.53],
        "1:337": [298, 2.79],
        "1:360": [159, 2.34],
        "1:null": [215, 0]
    },
    "samples": 100
}