I'd like to try using D3.js and have access to microsoft hosted SharePoint sites.

Is this possible? Where do I start on the Sharepoint side?

Specifically, where can I put the .js files and the html files that will call the .js files via the script tags?

(edit: I added the "specifically" line to clarify my question after some Q&A in the comments)

(I've found this but it seems overkill.)

  • Are you saying you want to use D3.js to display data stored in a SharePoint site? – Dylan Cristy Jan 13 '16 at 19:07
  • @DylanCristy I want all of the d3js libraries and code to be hosted on the sharepoint so that I can display it in a page via Sharepoint. (IE, i point the brower to the sharepoint page and that page loads a d4gs based visualization.) – Alex Jan 13 '16 at 19:21
  • Ok, but where is the data coming from that you are using D3 to visualize? From within SharePoint, or from another data source? – Dylan Cristy Jan 13 '16 at 19:24
  • @DylanCristy Hmm, I would assume so, yes. ( I want to say obviously but that makes me think there's something in the question that I don't understand.) – Alex Jan 13 '16 at 19:27

The short answer is yes. There are a number of places you can host the D3.js library file(s?) and any other Javascript files you would write that contain the code for your visualization.

If you had an on-prem farm that might include somewhere in the _layouts folder, but you say "Microsoft hosted" so I am assuming you are talking about SharePoint Online, and thus have no access to a file system.

In that case, there are plenty of places in a site itself you can host JS files. Most sites have a "Site Assets" library and/or a "Style Library" library. Or, you could even create a dedicated document library just to hold your scripts.

Once your scripts are uploaded to the site, you can create a new site page (aka wiki page), and use either Content Editor web parts or Script Editor web parts to link to your JS files and load them on the page.

The next step is to figure out how you are getting the data you are going to feed into D3. If the data is stored in SharePoint somewhere, like maybe a custom list, then the JavaScript Object Model is absolutely a reasonable way to go. The link you have in your question is about how to use the JSOM, but it is from a series of articles about creating a "SharePoint Add-In", which I don't think you need to do.

Here are some other links about using the JSOM to work with SharePoint data:

JavaScript API reference for SharePoint 2013

Complete basic operations using JavaScript library code in SharePoint 2013

Using the JavaScript object model (JSOM) in apps for SharePoint

Another possible option would be to use the SP2013 REST services:

Get to know the SharePoint 2013 REST service

REST API reference and samples

Now, if your data is stored in a file, like a .csv, you can store that file somewhere in SharePoint (like a document library), and retrieve it, open and parse it with your code.

If the data is coming from somewhere else entirely, you'll have to figure out how you can retrieve it from your code.

  • see comments in the other answer by Lucas. The parts of your answer that really helped me were. Short answer is Yes and suggesting the Style Library. ( it looks like i can put everything (the html and js files) in there) – Alex Jan 13 '16 at 20:49

I'm assuming that you want to visualize SharePoint data as D3 Graphs. What you think is an overkill is the JavaScript Object Model (JSOM). An alternative to that, in terms of getting data from SharePoint, would be using SharePoint REST Endpoints.

You could host d3.js in a library like the Style Library, or use a CDN. You have many options to load d3 into SharePoint, which include adding it to a Masterpage or Page Layout, adding it to a Script Editor Webpart, using JSLink in an existing webpart, using it within a Display Template, etc, etc.

After adding that reference, you could add it to a Script Editor webpart, an add-in, or a custom webpart. Your code would look something like this:

    //TASK 1
    //process http call here. 

    //TASK 2
    //render the graph here
  • is your example pointing to the style library? (ie, what is /_api/web/lists/GetByTitle(‘Test')/items ? ) – Alex Jan 13 '16 at 20:01
  • You could host the d3.js file in the Style Library as means to include it in your code. /_api/web/list/... Is the endpoint URL through which you can retrieve data using d3's implementation of AJAX. – Lucas Rodrigues Jan 13 '16 at 20:15
  • ack. i think I'm more newbie than you're assuming. if I put myscript.js in the Style Library, then what goes in front of myscript.js in the src of: <script type="text/javascript" src="myscript.js"></script> – Alex Jan 13 '16 at 20:30
  • ok. so you don't think i'm totally lost :) I figured out that if i put both a html page and the myscript.js in the Style Library then I can just say src="myscript.js. – Alex Jan 13 '16 at 20:47
  • @Alex, usually when linking scripts I use a server relative URL, i.e. src='/sites/mysite/StyleLibrary/SomeFolder/myscript.js' – Dylan Cristy Jan 13 '16 at 20:51

If you are talking about only being a user of Sharepoint, with no access to the "controls", then you can upload the .js files to a document library and use them from there. I have web parts that include the d3 graph code and call the .js files(s) from their library location. The biggest bugbear, though, is not being able to upload .JSON files to use as a data source. Extremely limiting for me as a newbie to D3.js graph coding.

  • see comments in answer from Lucas. – Alex Mar 14 '18 at 12:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.