D3 Examples - wind tests 5

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: 1em; }
  </style>
</head>
<body>
  <!--<textarea id="out" rows="35" cols="90"></textarea>-->
  <svg width="1060" height="960">
    <g transform="translate(1,1)"></g>
</svg>
  
<script>
const svg   = d3.select("svg"),
        width = +svg.attr("width"),
        height= +svg.attr("height"),
      radius = d3.scaleLinear().range([1,10]).domain([1,50]),
      parseDate = d3.timeParse("%Y %m %d")
​
const ox = width / 2,
      oy = height / 2,
        sf = 16
​
​
//const src = 'wind-welly-y2016.csv'
const src = 'wind-auck-y2016.csv'
//const src = 'wind-a3925-y2016.csv'
​
// Get the data from our CSV file
//d3.csv('wind-a3925-y2016.csv', function(error, data) {
d3.csv(src, function(error, data) {
  
    if (error) throw error;
  
    data.forEach(function(d) {
            d.speed = round( +d['Speed(m/s)'], 1)
        d.dir = round(+d['Dir(DegT)'], 1)
        d.bucket = d.speed + ':' + d.dir
   })
  
  var nest = d3.nest()
    .key( (d) => d.bucket )
    .rollup( (leaves) => { return {
      count:leaves.length,
      dir: leaves[0].dir,
      speed: leaves[0].speed,
    }})
    .entries(data)
  
  var wind_buckets = nest.map((a) => a.value)
  
  var dots = svg.selectAll('.dots')
            .data(wind_buckets)
            .enter().append('circle')
            .attr('class', 'bubble')
            .attr('cx', (d) => ox + (Math.sin(Math.radians(d.dir % 360)) * d.speed * sf))
            .attr('cy', (d) => oy + (Math.cos(Math.radians(d.dir % 360)) * d.speed * sf))
            .attr('r',  (d) => radius(d.count))
        .attr('opacity', .75)
            .style('fill', '#222')
  
  svg.append("text")
      .text('Max speed: ' + d3.max(data, (d) => d.speed))
      .attr("x", 10)
      .attr("y", 40)
      .attr("class", "title")
  svg.append("text")
      .text('Max count: ' + d3.max(wind_buckets, (d) => d.count))
      .attr("x", 10)
      .attr("y", 60)
      .attr("class", "title")
  
  //d3.select("#out").text(JSON.stringify(nest.map((a) => a.value), null, 4))
  
});
​
  
Math.radians = function(degrees) {
  return degrees * Math.PI / 180;
}
​
function round(x, n) {
    return Math.round(x/n)*n;
}
  </script>
</body>
​
    