wind tests 6

<!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; shape-rendering="crispEdges"}
    .annotation-note-title, text.title { font-weight: normal; }
    text.title { font-size: 1em; }
  </style>
</head>
<body>
  
  <svg width="960" height="1220"></svg>
  
<script>
function color(n) {
  if (n <= 2) { return '#888' }
  if (n <= 5) { return '#444' }
  return '#000'
}

const svg   = d3.select("svg"),
  		width = +svg.attr("width"),
  		height= +svg.attr("height"),
      bar_length = d3.scaleLinear().range([2.75,27]).domain([1,40]),
      bar_width = d3.scaleLinear().range([.8,8]).domain([1,40]),
      opac = d3.scaleLinear().range([.4,1]).domain([1,40]),
      parseDate = d3.timeParse("%Y %m %d")
			/*color = d3.scaleLinear()
      	.range(['#888', '#444', '#000'])
      	.domain([1,5])*/

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

const g = svg.append("g")
    //.attr("transform", 'rotate( 180, ' + ox +', ' + oy +')')

//const src = 'wind-gisb-y2016.csv', title = 'Gisborne, 2016'
//const src = 'wind-gisb-y2012.csv', title = 'Gisborne, 2012'
const src = 'wind-welly-y2016.csv', title = 'Wellington, 2016'
//const src = 'wind-auck-y2016.csv', title = 'Auckland, 2016'
//const src = 'wind-a3925-y2016.csv', title = 'Reefton'

// Get the data from our CSV file
d3.csv(src, function(error, data) {
  
	if (error) throw error;
  
	data.forEach(function(d) {
    		d.speed = round( +d['Speed(m/s)'], 1)
        //d.speed = round( +d['Speed(km/hr)'], 1)
        //d.speed = +d['Speed(m/s)']
        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)
  
  const bars = g.selectAll('.bars')
			.data(wind_buckets)
			.enter().append('rect')
			.attr('x', (d) => ox + (Math.sin(Math.radians(d.dir % 360)) * d.speed * sf))
			.attr('y', (d) => oy - (Math.cos(Math.radians(d.dir % 360)) * d.speed * sf))
  		.attr('width',  (d) => bar_width(d.speed))
			.attr('height',  (d) => bar_length(d.speed))
  		.attr("transform", (d) => compose_rotate(d))
  		//.style('fill', '#0a0a0a')
  		.style('fill', (d) => color(d.count))
  
  svg.append("text")
      .text(title)
      .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")
  svg.append("text")
      .text('Max speed: ' + d3.max(wind_buckets, (d) => d.speed))
      .attr("x", 10)
      .attr("y", 80)
      .attr("class", "title")
  
  svg.append("rect")
      .attr("x", 1)
      .attr("y", 1)
      .attr("width", width - 2)
  		.attr("height", height - 2)
  		.style('fill', 'none')
  		.style('stroke', '#ddf')
  
  //d3.select("#out").text(JSON.stringify(nest.map((a) => a.value), null, 4))
  document.title = title
  
});

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

function compose_rotate(d) {
  x1 = ox + (Math.sin(Math.radians(d.dir % 360)) * d.speed * sf)
  y2 = oy - (Math.cos(Math.radians(d.dir % 360)) * d.speed * sf)
  w = bar_width(d.speed)
  h = bar_length(d.speed)
  return 'rotate( ' + d.dir + ', ' + (w/2 + x1) +', ' + (h/2 + y2) +')'
}

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