# How to Run HTM School Visualizations

**URL:** <https://discourse.numenta.org/t/how-to-run-htm-school-visualizations/2346>\
**Category:** Engineering\
**Tags:** visualization, tutorial\
**Created:** [May 23, 2017, 5:39pm UTC](https://discourse.numenta.org/t/how-to-run-htm-school-visualizations/2346 "2017-05-23T17:39:00Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![rhyolight](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.numenta.org/rhyolight/32/3922_2.png) [@rhyolight](https://discourse.numenta.org/u/rhyolight)\
**Post date:** [February 5, 2018, 9:47pm UTC](https://discourse.numenta.org/t/how-to-run-htm-school-visualizations/2346/21 "2018-02-05T21:47:31Z")

</div>

> [@vedhas](#):
>
> For visualisation 10 though, I continue to get a page with only the text: “Ep10/Choose Gif” ☹

It should look like this:

 ![54%20PM](https://canada1.discourse-cdn.com/flex030/uploads/numenta/original/2X/9/9d9809cd822dc127ade4265a44bc8bd6a8533132.png)

what errors do you have in your console?

---

<div class="post-metadata">

**Author:** ![vedhas](https://avatars.discourse-cdn.com/v4/letter/v/dc4da7/32.png) [@vedhas](https://discourse.numenta.org/u/vedhas)\
**Post date:** [February 5, 2018, 10:27pm UTC](https://discourse.numenta.org/t/how-to-run-htm-school-visualizations/2346/22 "2018-02-05T22:27:33Z")

</div>

Episode 10 (Doesn’t work):  
As I click “Episode 10: Topology Topology” the terminal output does not change at all.

Episode 11 (works fine, stating here for comparison. Only a few minor issues listed):

For your ready info, when I clicked “Episode 11: Temporal Memory Part 1 Sequencer”, I get following text, and visualisation works fine:

> {u’boostStrength’: 1,  
> u’columnDimensions’: [1024],  
> u’dutyCyclePeriod’: 1000,  
> u’globalInhibition’: True,  
> u’inputDimensions’: [100],  
> u’localAreaDensity’: 0,  
> u’minPctOverlapDutyCycle’: 0.001,  
> u’numActiveColumnsPerInhArea’: 20,  
> u’potentialPct’: 0.85,  
> u’potentialRadius’: 100,  
> u’stimulusThreshold’: 1,  
> u’synPermActiveInc’: 0.05,  
> u’synPermConnected’: 0.1,  
> u’synPermInactiveDec’: 0.008,  
> u’wrapAround’: True}  
> \_conjureActiveColumns: 6.79492950439e-05 seconds  
> \_conjurePotentialPools: 0.0749340057373 seconds  
> \_conjureConnectedSynapses: 0.00297904014587 seconds  
> \_conjurePermanences: 0.00664615631104 seconds  
> Saving SP db350db1 to memory…  
> 127.0.0.1:46026 - - [05/Feb/2018 23:16:35] “HTTP/1.1 POST /\_sp/” - 200 OK  
> {u’activationThreshold’: 10,  
> u’cellsPerColumn’: 16,  
> u’columnDimensions’: [1024],  
> u’connectedPermanence’: 0.5,  
> u’initialPermanence’: 0.21,  
> u’maxNewSynapseCount’: 20,  
> u’maxSegmentsPerCell’: 255,  
> u’maxSynapsesPerSegment’: 255,  
> u’minThreshold’: 10,  
> u’permanenceDecrement’: 0.02,  
> u’permanenceIncrement’: 0.1,  
> u’predictedSegmentDecrement’: 0}  
> Created TM db350db1  
> \_conjureActiveCells: 8.10623168945e-06 seconds  
> 127.0.0.1:46028 - - [05/Feb/2018 23:16:35] “HTTP/1.1 POST /\_tm/” - 200 OK

Visualisation is not as neat as your video though, also not the controls. Transparency level of the cell gets very high, as soon as I click the play button. Screenshot attached.

 ![Blurred-11](https://canada1.discourse-cdn.com/flex030/uploads/numenta/original/2X/3/3f019035a7c502033b93dcca6bf2e127d0c0b14f.jpg)

As for the 3d controls, do you use any keys other than WASDQE? How do you pitch and yaw?

PS: I am presenting HTM theory in the morning to my colleagues, I am preparing the notes and visualisations therefore. 🙂 Kindly help!

---

<div class="post-metadata">

**Author:** ![rhyolight](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.numenta.org/rhyolight/32/3922_2.png) [@rhyolight](https://discourse.numenta.org/u/rhyolight)\
**Post date:** [February 5, 2018, 10:32pm UTC](https://discourse.numenta.org/t/how-to-run-htm-school-visualizations/2346/23 "2018-02-05T22:32:41Z")

</div>

> [@vedhas](#):
>
> As I click “Episode 10: Topology Topology” the terminal output does not change at all.

Not the terminal output, the browser console output.

> [@vedhas](#):
>
> As for the 3d controls, do you use any keys other than WASDQE? How do you pitch and yaw?

Use the arrow keys, too. I use a combination of both (arrows for strafe).

---

<div class="post-metadata">

**Author:** ![vedhas](https://avatars.discourse-cdn.com/v4/letter/v/dc4da7/32.png) [@vedhas](https://discourse.numenta.org/u/vedhas)\
**Post date:** [February 5, 2018, 10:35pm UTC](https://discourse.numenta.org/t/how-to-run-htm-school-visualizations/2346/24 "2018-02-05T22:35:57Z")

</div>

The page is blank with only the text: Ep10/Choose Gif

Do I need to download these images from somewhere first?

Chrome screenshot below:

 ![Blank-10](https://canada1.discourse-cdn.com/flex030/uploads/numenta/original/2X/9/920497466277f765f392c44e34c6347029721940.png)

---

<div class="post-metadata">

**Author:** ![rhyolight](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.numenta.org/rhyolight/32/3922_2.png) [@rhyolight](https://discourse.numenta.org/u/rhyolight)\
**Post date:** [February 5, 2018, 10:37pm UTC](https://discourse.numenta.org/t/how-to-run-htm-school-visualizations/2346/25 "2018-02-05T22:37:42Z")

</div>

No, but I need to see what errors are occurring in your browser. Look up what browser you have and how to show the “web console” logs.

---

<div class="post-metadata">

**Author:** ![vedhas](https://avatars.discourse-cdn.com/v4/letter/v/dc4da7/32.png) [@vedhas](https://discourse.numenta.org/u/vedhas)\
**Post date:** [February 5, 2018, 10:54pm UTC](https://discourse.numenta.org/t/how-to-run-htm-school-visualizations/2346/26 "2018-02-05T22:54:58Z")

</div>

I use google chrome. I opened DevTools/console using ctrl+shift+J as per: [Chrome DevTools - Chrome for Developers](https://developers.google.com/web/tools/chrome-devtools/#console)  
I see the following:

> Tone.min.js:7 [Deprecation] GainNode.gain.value setter smoothing is deprecated and will be removed in M64, around January 2018. Please use setTargetAtTime() instead if smoothing is needed. See [Chrome Platform Status](https://www.chromestatus.com/features/5287995770929152) for more details.  
> (anonymous) @ Tone.min.js:7  
> s.\_initAudioContext @ Tone.min.js:7  
> (anonymous) @ Tone.min.js:7  
> t @ Tone.min.js:1  
> (anonymous) @ Tone.min.js:7  
> (anonymous) @ Tone.min.js:1  
> (anonymous) @ Tone.min.js:1  
> Tone.min.js:7 \* Tone.js r9 \*

 ![Debug-10](https://canada1.discourse-cdn.com/flex030/uploads/numenta/original/2X/c/c3715517106e1fef92603aad5083b840e6c7690a.png)

Kindly let me know how do I generate the log by which you can best help me out. (My apologies, but I have never done java script/web debugging, so I am not sure how do I proceed next.)

---

<div class="post-metadata">

**Author:** ![rhyolight](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.numenta.org/rhyolight/32/3922_2.png) [@rhyolight](https://discourse.numenta.org/u/rhyolight)\
**Post date:** [February 5, 2018, 10:57pm UTC](https://discourse.numenta.org/t/how-to-run-htm-school-visualizations/2346/27 "2018-02-05T22:57:43Z")

</div>

That’s strange. I don’t see any errors. But I also don’t see anything loaded. What does this URL show you?

[http://localhost:8001/client/ep10/topology.html?load=bird](http://localhost:8001/client/ep10/topology.html?load=bird)

---

<div class="post-metadata">

**Author:** ![vedhas](https://avatars.discourse-cdn.com/v4/letter/v/dc4da7/32.png) [@vedhas](https://discourse.numenta.org/u/vedhas)\
**Post date:** [February 5, 2018, 11:02pm UTC](https://discourse.numenta.org/t/how-to-run-htm-school-visualizations/2346/28 "2018-02-05T23:02:44Z")

</div>

I get the following:

> Tone.min.js:7 [Deprecation] GainNode.gain.value setter smoothing is deprecated and will be removed in M64, around January 2018. Please use setTargetAtTime() instead if smoothing is needed. See [Chrome Platform Status](https://www.chromestatus.com/features/5287995770929152) for more details.  
> (anonymous) @ Tone.min.js:7  
> Tone.min.js:7 \* Tone.js r9 \*  
> cell-viz-1.1.2.bundle.js:20388 THREE.WebGLRenderer 81

---

<div class="post-metadata">

**Author:** ![vedhas](https://avatars.discourse-cdn.com/v4/letter/v/dc4da7/32.png) [@vedhas](https://discourse.numenta.org/u/vedhas)\
**Post date:** [February 5, 2018, 11:05pm UTC](https://discourse.numenta.org/t/how-to-run-htm-school-visualizations/2346/29 "2018-02-05T23:05:11Z")

</div>

As I click somewhere, I additionally get:

> clicked: 6, 6, 1 == column 78  
> topology.js:254 Uncaught TypeError: Cannot read property ‘78’ of undefined  
> at updateCellRepresentations (topology.js:254)  
> at spClicked (topology.js:407)  
> at cellClicked (topology.js:412)  
> at HTMLCanvasElement.onDocumentMouseDown (topology.js:433)  
> at HTMLCanvasElement.dispatch (jquery.min.js:5)  
> at HTMLCanvasElement.y.handle (jquery.min.js:5)

 ![Debug-10bird](https://canada1.discourse-cdn.com/flex030/uploads/numenta/original/2X/7/71a2c9dc2aa926ac389a0300317547b6e22bcadf.png)

---

<div class="post-metadata">

**Author:** ![rhyolight](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.numenta.org/rhyolight/32/3922_2.png) [@rhyolight](https://discourse.numenta.org/u/rhyolight)\
**Post date:** [February 5, 2018, 11:10pm UTC](https://discourse.numenta.org/t/how-to-run-htm-school-visualizations/2346/30 "2018-02-05T23:10:18Z")

</div>

I can’t replicate this, so in order to help you out, you’re going to have to help me debug.

Go to [http://localhost:8001/client/ep10/choose-gif.html](http://localhost:8001/client/ep10/choose-gif.html) and open up your web console again. Go to the “sources” tab and find the source file at `client/ep10/choose-gif.js`, then put a breakpoint here:

 ![10%20PM](https://canada1.discourse-cdn.com/flex030/uploads/numenta/original/2X/6/617cf29f50c9ceaf526a6cbf41a31bbbbcdb2cd7.png)

Then refresh the page and inspect the `resp` object. Does it contain stuff like this?

 ![30%20PM](https://canada1.discourse-cdn.com/flex030/uploads/numenta/original/2X/6/68783f4c94a7e9e43c29e0fff5fe1c12e3cbfd00.png)

---

<div class="post-metadata">

**Author:** ![vedhas](https://avatars.discourse-cdn.com/v4/letter/v/dc4da7/32.png) [@vedhas](https://discourse.numenta.org/u/vedhas)\
**Post date:** [February 5, 2018, 11:18pm UTC](https://discourse.numenta.org/t/how-to-run-htm-school-visualizations/2346/31 "2018-02-05T23:18:31Z")

</div>

I do not see client/ep10/choose-gif.js.

localhost:8001 expansion looks like this:

 ![Debug10-FileStructure](https://canada1.discourse-cdn.com/flex030/uploads/numenta/original/2X/0/0abf0baf4b99afc3c49eaf127dcb7c827ed6e089.png)

---

<div class="post-metadata">

**Author:** ![rhyolight](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.numenta.org/rhyolight/32/3922_2.png) [@rhyolight](https://discourse.numenta.org/u/rhyolight)\
**Post date:** [February 5, 2018, 11:19pm UTC](https://discourse.numenta.org/t/how-to-run-htm-school-visualizations/2346/32 "2018-02-05T23:19:22Z")

</div>

That highlighted `js` folder contains it.

---

<div class="post-metadata">

**Author:** ![vedhas](https://avatars.discourse-cdn.com/v4/letter/v/dc4da7/32.png) [@vedhas](https://discourse.numenta.org/u/vedhas)\
**Post date:** [February 5, 2018, 11:26pm UTC](https://discourse.numenta.org/t/how-to-run-htm-school-visualizations/2346/33 "2018-02-05T23:26:38Z")

</div>

I don’t see it.  
Entire structure for your ready info, perhaps you see some missing files that I need to generate or something?

 ![Debug10-Dir1](https://canada1.discourse-cdn.com/flex030/uploads/numenta/original/2X/8/817e9d6407b226101b41718746b6f34a046c3133.png) ![Debug10-Dir2](https://canada1.discourse-cdn.com/flex030/uploads/numenta/original/2X/b/b446aa39e58c075a635f3fc353fd4fc4f82ddb91.png) ![Debug10-Dir3](https://canada1.discourse-cdn.com/flex030/uploads/numenta/original/2X/0/0a2db16447bc402b7700d5ca4849fdbed60233cc.png)

---

<div class="post-metadata">

**Author:** ![rhyolight](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.numenta.org/rhyolight/32/3922_2.png) [@rhyolight](https://discourse.numenta.org/u/rhyolight)\
**Post date:** [February 5, 2018, 11:31pm UTC](https://discourse.numenta.org/t/how-to-run-htm-school-visualizations/2346/34 "2018-02-05T23:31:21Z")

</div>

Click on your “Elements” tab, does it not look like this? It should link `/static/js/ep10/choose-gif.js`:

 ![24%20PM](https://canada1.discourse-cdn.com/flex030/uploads/numenta/original/2X/f/fc41588c4c4165ed5f21fb156bcc18851f483546.png)

---

<div class="post-metadata">

**Author:** ![vedhas](https://avatars.discourse-cdn.com/v4/letter/v/dc4da7/32.png) [@vedhas](https://discourse.numenta.org/u/vedhas)\
**Post date:** [February 5, 2018, 11:42pm UTC](https://discourse.numenta.org/t/how-to-run-htm-school-visualizations/2346/35 "2018-02-05T23:42:28Z")

</div>

Yes, I do have that line under ‘Elements’.

However, I do not see /static/js/lib/grid-cells/\* ( = 3 js files) + dat.gui.min.js + [d3is.org/d3.v4.min.js](http://d3is.org/d3.v4.min.js)

Screenshot below

 ![Debug10-Elements](https://canada1.discourse-cdn.com/flex030/uploads/numenta/original/2X/9/9721a17492c0f7fe7b40b570611047875b6be3b0.png)

---

<div class="post-metadata">

**Author:** ![rhyolight](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.numenta.org/rhyolight/32/3922_2.png) [@rhyolight](https://discourse.numenta.org/u/rhyolight)\
**Post date:** [February 5, 2018, 11:47pm UTC](https://discourse.numenta.org/t/how-to-run-htm-school-visualizations/2346/36 "2018-02-05T23:47:19Z")

</div>

You should not see those grid cell files. Keep looking for the choose-gif.js in your source tab. It has to be there, or else there will be an error somewhere.

---

<div class="post-metadata">

**Author:** ![vedhas](https://avatars.discourse-cdn.com/v4/letter/v/dc4da7/32.png) [@vedhas](https://discourse.numenta.org/u/vedhas)\
**Post date:** [February 5, 2018, 11:56pm UTC](https://discourse.numenta.org/t/how-to-run-htm-school-visualizations/2346/37 "2018-02-05T23:56:14Z")

</div>

Ok, I navigated using the line and I now see that js file. 🙂

I added the breakpoint, but Resp Object looks empty?

Screenshot:

 ![Debug10-RespObject](https://canada1.discourse-cdn.com/flex030/uploads/numenta/original/2X/d/debaa3e18335982f8b4f8b788020c07c5dc995c0.png)

---

<div class="post-metadata">

**Author:** ![rhyolight](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.numenta.org/rhyolight/32/3922_2.png) [@rhyolight](https://discourse.numenta.org/u/rhyolight)\
**Post date:** [February 5, 2018, 11:58pm UTC](https://discourse.numenta.org/t/how-to-run-htm-school-visualizations/2346/38 "2018-02-05T23:58:47Z")

</div>

So when you hit `http://localhost:8001/_gifList` in your browser, are there any errors from the NodeJS terminal window?

---

<div class="post-metadata">

**Author:** ![vedhas](https://avatars.discourse-cdn.com/v4/letter/v/dc4da7/32.png) [@vedhas](https://discourse.numenta.org/u/vedhas)\
**Post date:** [February 6, 2018, 12:01am UTC](https://discourse.numenta.org/t/how-to-run-htm-school-visualizations/2346/40 "2018-02-06T00:01:06Z")

</div>

> [@rhyolight](#):
>
> [http://localhost:8001/\_gifList](http://localhost:8001/_gifList)

I get a page with only the following text. Nothing in the console tab (ctrl+shift+J):

> {“gifs”:}

---

<div class="post-metadata">

**Author:** ![rhyolight](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.numenta.org/rhyolight/32/3922_2.png) [@rhyolight](https://discourse.numenta.org/u/rhyolight)\
**Post date:** [February 6, 2018, 12:01am UTC](https://discourse.numenta.org/t/how-to-run-htm-school-visualizations/2346/41 "2018-02-06T00:01:55Z")

</div>

The gif data should be loaded from here: [https://github.com/htm-community/htm-school-viz/tree/master/static/data/gifData](https://github.com/htm-community/htm-school-viz/tree/master/static/data/gifData)

In your local environment, you should look to make sure this path leads to something:

> <https://github.com/htm-community/htm-school-viz/blob/master/index.js#L14>

[Previous page](https://discourse.numenta.org/t/how-to-run-htm-school-visualizations/2346.md?page=1)

[Next page](https://discourse.numenta.org/t/how-to-run-htm-school-visualizations/2346.md?page=3)