wind tests 2

forked from fogonwater's block: wind tests

<!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>
  <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")

const ox = width / 2,
        oy = height / 2
  			sf = 16

// Get the data from our CSV file
//d3.csv('wind-a3925-y2016.csv', function(error, data) {
d3.csv('wind-welly-y2016.csv', function(error, data) {
  
	if (error) throw error;
  
	data.forEach(function(d) {
    		d.speed = +d['Speed(m/s)']
        d.dir = round( +d['Dir(DegT)'], 10 )
   })
  
  var dots = svg.selectAll('.dots')
			.data(data)
			.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) => 1)
  		.attr('opacity', 0.2)
			.style('fill', 'steelblue')
  
});

Math.radians = function(degrees) {
  return degrees * Math.PI / 180;
}

function round(x, n) {
    return Math.round(x/n)*n;
}
  </script>
</body>

https://d3js.org/d3.v4.min.js

https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.4/chroma.min.js