console.clear()
var ƒ = d3.f

var width = 600, height = 600

var color = d3.scaleLinear()
  .domain([0, 100])
  .range(['purple', 'orange'])

d3.select('#graph').html('')

var color = d3.scaleOrdinal(d3.schemeCategory20);


d3.loadData('west_hex_map.json', function(err, res) {
  points = res[0].features
  points.forEach(d => {
    d.latlng = mult(d.geometry.coordinates[0][0], 10)
  })

  x = d3.scaleLinear()
    .domain(d3.extent(points.map(d => d.latlng[0])))
    .range([0, width*.8])
  y = d3.scaleLinear()
    .domain(d3.extent(points.map(d => d.latlng[1])))
    .range([height, 0])

  points.forEach(d => {
    d.pos = [x(d.latlng[0]), y(d.latlng[1])]
  })

  var svg = d3.select('#graph').append('svg').at({ width, height })

  svg 
    .appendMany(points, 'circle')
    .translate(d => d.pos)
    .at({ r: d => 8, fill: d => color(d.properties.Region_Nam) })
    .call(d3.attachTooltip)



})

function dist([x0, y0], [x1, y1]) {
  var xDif = x0 - x1
  var yDif = y0 - y1
  return Math.sqrt(xDif * xDif + yDif * yDif)
}

function subtract([x0, y0], [x1, y1]){
  return [x0 - x1, y0 - y1]
}

function add([x0, y0], [x1, y1]){
  return [x0 + x1, y0 + y1]
}

function mult([x0, y0], a){
  return [x0*a, y0*a]
}