D3js on webflow

Design help Custom code
1

Hi there, I wish to know if I will be able to host JS and JSON files on webflow? Primary reason for this is to ensure that I will be able show d3js visualizations with data on webflow.

I do know that you can host these files elsehwere but I am concern that my JSON data link can’t be resolved by the Javascript and so it can’t actually generate a graph. I am moving on from Squarespace precisely because of this.
Squarespace disallows certain kinds of requests by other domains to an origin domain for some resource. This means that there is no way (at least none that I can tell) of accessing that data in the context of a call by some script.

Paraphrased and more info from: http://adamdedwards.com/blog/2015/1/9/using-d3js-on-squarespace

2

Hi at the moment you can’t. But you can host them anywhere, on a private CDN, server, Dropbox, and link them from there.

3

Got it. That said, I do have other concerns. I have updated my original post with more details.

4

Just link to it using cdnjs. Place it in the Custom Code (footer) section.

1 Like
5

Thanks. I am really new to cdnjs. I see that they have a list of existing libraries I can link to. How about my own js files? I assume they allow me to upload my own? I can’t seem to find out how.

6

Hi @vincent and @howiechang, actually, js, css and json can all be directly added to the site footer or header using custom code: http://help.webflow.com/faq/how-to-add-custom-head-and-body-code-to-a-webflow-site.

The limitation is that there is a limitation of 5k characters.

7

Thanks for responding @cyberdave. These are the scripts/files which I would like to call upon. In this case, I will have to host these files somewhere else, correct? What @vincent and @jwburkhard noted here make sense because I can’t seem to find a way to host these on Webflow. I just want to make sure that Webflow does not disallows certain kinds of requests by other domains to an origin domain for some resource if I host these elsewhere.

I hope I am making sense here. It will be great to hear from someone who have managed to load d3js visualization with external data on a JSON in Webflow.

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/d3.min.js"></script>

<script type="text/javascript" src="js/Tooltip.js"></script>
<script src="js/coffee-script.js"></script>
<script type="text/coffeescript" src="coffee/vis.coffee"></script>
8

Hi @howiechang, yes, in that case, with so much extra script, it would be needed to host since there is a 5k limit for custom code on the footer.

I would use an external storage, such as dropbox. In general those scripts should run, on the Webflow site if you are linking to the script and the script runs on the front end in the browser.

You might need to check the jQuery version, and use a noConflict jQuery function. The version of Webflow that is added by default is jQuery 2.2.0.

In the above, link the css in the header, and put all the js scripts in the footer to test out. Sometimes it is process of trial and error to get the custom integration working. If you have a test site, please share the read-only link: Share a read-only link | Webflow University

9

Hosting such files on Dropbox proved to be efficient during development and even sometimes in production, although this is not a real CDN and if I was working for a client I would find a better solution (aka Amazon S3).

If you need help hosting files on Dropbox feel free to ping me here, I have a “little” level at it :smiley:

1 Like
10

This topic was automatically closed after 60 days. New replies are no longer allowed.