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.

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.

• javascript
• python
• json
• d3.js
• squarespace

• Do you have a link to the malfunctioning blog post on SquareSpace? This sounds like something you'd need to look at with the error console in Chrome's Developer Tools to solve, and I don't have a SquareSpace site to test the .zip file with. – Will Angley Commented May 24, 2014 at 21:35
• Many thanks for your reply, @WillAngley! Here is a link to the blog post: douglasduhaime./blog/calling-mallet-from-python If I were to try and diagnose the situation with Chrome's Developer Tools, what sorts of things would I be looking for? – duhaime Commented May 24, 2014 at 21:44

2 Answers 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 mand 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.

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., which your visualization scripts running on http://douglasduhaime. 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.