Problem running a site/program

JavaScript
#1

Hello, I want to run this: https://ebemunk.com/chess-dataviz/
It is supposed to be super easy.
I wanted to test on my computer offline first.
So i downloaded the zip file and extracted all the contents to a folder.
I also copied the dist folder contents to root folder.

And then i’m using the following(with the help of index.html on test folder and the Javascript code on the first example on the site) to run it.
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄

<html>
<head>
<link href="/dist/ChessDataViz.css" rel="stylesheet">
<style>
	body {
		background-color: lightgray;
		font-family: Roboto, sans-serif;
	}
</style>
</head>
<body>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/ChessDataViz.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.7/d3-tip.min.js"></script>

<script>
d3.json('https://ebemunk.com/chess-dataviz/data/wrc.json', function(err, data) {
  var heatmapExample1 = new ChessDataViz.HeatMap('#heatmap-example-1', null, data.heatmaps.squareUtilization);
});
</script>

<div id="heatmap-example-1" class="cdv-heatmap"></div>
<div class="caption">World Rapid Chess Championship 2015, square utilization by white (how many times a piece landed on a square)</div>

</body>
</html>

▄▄▄▄▄▄▄▄▄▄▄▄
But it doesn’t provide any visualization like it has in the site.
Why? What i’m doing wrong?

Thanks in advance.

#2

What errors are you seeing in the browser console?

#3

Except that visualization does not appear, i get the following errors too:
It’s like not recognizing <link href="/dist/ChessDataViz.css" rel="stylesheet"> code or something.

Errors:

The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.  index2.html
ReferenceError: ChessDataViz is not defined[Learn More]
#4

Can you show a screenshot of the root folder of your project, so we can see the folder/file structure? Also, try using <script src="dist/ChessDataViz.js"></script>

1 Like
#5

I removed the / from there before, but nothing… :frowning:

fhfhh777
fhfhh777720×656 34.1 KB

#6

Why are you referecing the ChessDataViz.js file in the dist folder, if it is in the root folder?

#7

It’s in the dist folder also. :slight_smile:
But your previous comment(even though i think i applied that too(removing /) before) made it work.
Strange but thanks.

#8