Адаптировать координаты под сетку D3.JS?

Есть такие данные, JSON):

{
  [{
      "id": 1,
      "coordinate": {
        "x": 1,
        "y": 0,
      },
      "name": "John Smith",
      "email": "asdasd@yahoo.com",
      "nickname": "Titch"
    },
    {
      "id": 2,
      "coordinate": {
        "x": 1,
        "y": 1,
      },
      "name": "Harvey Jackson",
      "email": "zxc@yahoo.com",
      "nickname": "Yank"
    },
    {
      "id": 3,
      "coordinate": {
        "x": 0,
        "y": 1,
      },
      "name": "Scott Winn",
      "email": "dvgre@yahoo.com",
      "nickname": "Jade"
    },
    {
      "id": 33,
      "coordinate": {
        "x": -1,
        "y": 1,
      },
      "name": "Scott Winn",
      "email": "dvgre@yahoo.com",
      "nickname": "Jade"
    },
    {
      "id": 43,
      "coordinate": {
        "x": -1,
        "y": 0,
      },
      "name": "Scott Winn",
      "email": "dvgre@yahoo.com",
      "nickname": "sdf"
    },
    {
      "id": 32,
      "coordinate": {
        "x": 0,
        "y": -1,
      },
      "name": "sdf sdf",
      "email": "dvgre@yahoo.com",
      "nickname": "wad"
    }
  ]
}

На основе координат (х, y), хочу разместить элементы, примерно так: https://jsfiddle.net/p5w2d39k/2/, соответственно, вместо точек использовать координаты из JSON.

Пробовал преобразовать координаты так (но думаю, это не совсем правильно):

points = [];
_.forEach(data[1], function(value) {
  if (value.coordinate.x === 0) {
    x = height / 2;
  } else {
    x = Math.abs(value.coordinate.x * width / 2);
  }
  if (value.coordinate.y === 0) {
    y = width / 2;
  } else {
    y = Math.abs(value.coordinate.y * height / 2);
  }
  points.push([x, y]);
});

Сама сетка координат выглядит так:

Строится по принципу:

Вправо вверх:
Чет: (+1; +1)
Нечет: (+1; 0)

Право
(0; +1)

Вправо вниз
Чет: (-1; 1)
Нечет: (-1; 0)

Влево вниз
Чет: (-1; 0)
Нечет: (-1; -1)

Влево
(0; -1)

Влево вверх
Чет: (+1; 0)
Нечет: (+1; -1)

Как правильно это сделать?