New Twiddle

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Heatmap Test'
});

controllers.index.js

import Ember from 'ember';

const world = {"board":{"food":[{"x":8,"y":7},{"x":3,"y":1},{"x":10,"y":5},{"x":5,"y":4},{"x":8,"y":0},{"x":4,"y":1}],"height":11,"snakes":[{"body":[{"x":1,"y":1},{"x":1,"y":1},{"x":1,"y":1}],"health":100,"id":"gs_dTGHX4BtPC4QXfdW9wyH9BrX","name":"Zullybur / Inclusivity Snek"},{"body":[{"x":9,"y":9},{"x":9,"y":9},{"x":9,"y":9}],"health":100,"id":"gs_vmRbJxCQFbtX8wxY6TykRpD7","name":"mvliet / David Hasslesnake"},{"body":[{"x":1,"y":9},{"x":1,"y":9},{"x":1,"y":9}],"health":100,"id":"gs_4r8xXcrQhtWkDCG8p4Rp7T4W","name":"danielberndt / naive"},{"body":[{"x":9,"y":1},{"x":9,"y":1},{"x":9,"y":1}],"health":100,"id":"gs_6YxX6pTfBcrqCTPBpJTTWq9G","name":"buhikon / Flatwhite"},{"body":[{"x":5,"y":1},{"x":5,"y":1},{"x":5,"y":1}],"health":100,"id":"gs_yTRD6xkbW3MRqH7MYgcTqQ4C","name":"xtagon / Nagini"},{"body":[{"x":9,"y":5},{"x":9,"y":5},{"x":9,"y":5}],"health":100,"id":"gs_GXFybk7yqfRtRCb7xSFS4BB4","name":"MikeShi42 / Boba Apprentice"}],"width":11},"game":{"id":"0cea5d0c-a5bb-4af4-a560-0efc80932867"},"turn":0,"you":{"body":[{"x":5,"y":1},{"x":5,"y":1},{"x":5,"y":1}],"health":100,"id":"gs_yTRD6xkbW3MRqH7MYgcTqQ4C","name":"xtagon / Nagini"}};

export default Ember.Controller.extend({
  heatmapdata: [],
  heatmapmax: 0,
  heatmapconfig: {
      radius: 40,
      maxOpacity: 1,
      minOpacity: 0,
      blur: .75
  },
  init(){
      this._super();
      this.get('loadHeatmapData')(this);
  },
  loadHeatmapData(controller){
    const points = world.board.snakes.map(({body: {x, y}} => {
      {x, y, 1.0};
    });
                                          
    controller.set('heatmapdata', points);
    controller.set('heatmapmax', 1.0);
  },
});

router.js

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
});

export default Router;

routes.index.js

import Ember from 'ember';

export default Ember.Route.extend({
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.heatmap-canvas {
  width: 400px;
  height: 400px;
}

templates.application.hbs

<h1>{{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>

templates.index.hbs

{{ember-heatmap config=heatmapconfig data=heatmapdata max=heatmapmax}}

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2",
     "ember-heatmap": "1.1.1"
  }
}