Hosting d3.js visualizations on Squarespace

Question

I recently came across two blog posts (1, 2) that detail ways one can implement d3.js visualizations on Squarespace. I was interested in uploading an interactive network visualization to my Squarespace site, so I tried following the directions in each of these blog posts, but I can't seem to get any visualization to appear.

Here is my workflow in brief. First I followed the directions on Neal Caren's site to download some data and create a co-citation network visualization using the d3_j3 plugin for Python's networkx package. Running the script on that site on the test data on that site generates a cites.js file, a cites.json file, and a cites.html file, and places each of these files in a directory that contains a subdirectory d3, in which d3.js, d3.geom.js, d3.layout.js, and force.css are located. If I double click on the cites.html file, I see the desired viz in a browser window. (Here is the aforementioned directory in zipped form.)

The trouble is that I can't seem to get the visualization to load on Squarespace. Following Toke Frello's blog post, I modified line 5 of my cites.js file to make it read:

var vis = d3.select(".sqs-block-content")

I then modified line 10 of that file to make it read:

d3.json("/s/cites.json", function(json) {

(Here's the modified file.) I then uploaded d3.js--along with cites.js, cites.json, d3geom.js, and d3layout.js--to the /s/ directory on my site, went to Blog--> Advanced --> Post Blog Item Code Injection and inserted:

<script src="/s/d3.js"></script>.

Finally, I went to my blog, created a new code block on an old page, used the dropdown menu to identify the block as html code, and typed:

<script type="text/javascript" src="/s/d3.js"></script>
<script type="text/javascript" src="/s/d3geom.js"></script>
<script type="text/javascript" src="/s/d3layout.js"></script>
<script type="text/javascript" src="/s/mod_cites.js"></script>

I saved the page and attempted to view it in a browser, and I see nothing but a large white rectangle where the viz should appear. If anyone can offer any insight regarding steps I might try to make the visualization appear, I would be tremendously grateful.

P.S. Squarespace automatically renamed d3.geom.js to d3geom.js, and automatically renamed d3.layout.js to d3layout.js. I can't seem to prevent this renaming.

Answer 1

When blank areas display on a site where you would expect content to be, you should look at the network trace in Developer Tools, and the Console for page errors. Here's a screenshot of these tools showing the root cause of the error:

In your case, SquareSpace is trying to serve your JSON data from https://static.squarespace.com, which your visualization scripts running on http://douglasduhaime.com cannot load the data from.

I'm not sure how to get SquareSpace to host the .json file without rewriting its URL. There are several open questions on their message boards about this, and I think you may need to e-mail SquareSpace Support for an answer.

My SquareSpace-using friends have had good experiences with their Support when they've needed it.

Answer 2

So a year and a half later I've figured out a fairly straightforward way to do this. Because SquareSpace uploads .json files to evidently random servers (as of late 2015) that don't provide CORS headers for outgoing assets, one needs to upload the relevant .json files to a dependable server that enables CORS headers. I use Amazon Web Service's S3 for this. Using the Amazon cli, one can upload files to a bucket with a command like:

aws s3 cp dirToCopy/ s3://myBucketName --content-type application/json --acl public-read

Then one can call the files in dirToCopy from js applications (such as d3.js) from Squarespace.