D3 Examples - wind tests 6

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.4/chroma.min.js"></script>
  <style>
    body { margin:0;top:0;right:0;bottom:0;left:0; text-align:center;}
    svg { font-family: Courier; }
    .annotation-note-title, text.title { font-weight: bold; }
    text.title { font-size: 1.2em; }
  </style>
</head>
<body>
  <!--<textarea id="out" rows="4" cols="90"></textarea>-->
  <svg width="1060" height="960">
    <text class="title" x=40 y=50>wind blows</text>
    <g transform="translate(1,1)"></g>
</svg>
  
<script>
const svg   = d3.select("svg"),
        width = +svg.attr("width"),
        height= +svg.attr("height"),
      parseDate = d3.timeParse("%Y %m %d"),
      color = chroma
                    .scale(['#ED9367','#FAE8CB'])
                    .mode('lch')
                    .colors(12)
​
const ox = width / 2,
        oy = height / 2
            sf = .04
​
const line = d3.line()
    //.x(function(d) { return x(d.speed)})
    .x( (d) => d.x )
        .y( (d) => d.y )
        //.curve(d3.curveBasis)
​
// Get the data from our CSV file
d3.csv('wind-auck-y2016.csv', function(error, data) {
  
    if (error) throw error;
    data.forEach(function(d) {
            d.speed = +d['Speed(m/s)']
        d.dir = (+d['Dir(DegT)'] + 180) % 360
   });
  
  var nested_data = d3.nest()
       .key(function(d) { return d['Date(NZST)']; })
       .entries(data)
  
  var path = [{x:ox, y:oy}]
  
  data.forEach(function(d) {
    path.push({
      x:path[path.length-1].x + (Math.sin(Math.radians(d.dir % 360)) * d.speed * sf),
      y:path[path.length-1].y + (Math.cos(Math.radians(d.dir % 360)) * d.speed * sf)
    }) 
  });
  
  svg.append("path")
    .attr("class", "line")
    .attr("fill", "none")
    .attr("stroke", '#222' )
    .attr("stroke-linejoin", "round")
    .attr("stroke-linecap", "round")
    .attr("stroke-width", 0.5)
    .attr("opacity", 1)
    .attr("d", line(path))
    
  
  //d3.select("#out").text(JSON.stringify(nested_data, null, 4));
});
​
  
Math.radians = function(degrees) {
  return degrees * Math.PI / 180;
}
  </script>
</body>
​
    