SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It only takes a minute to sign up.
Sign up to join this community
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.)
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.
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:
d3.json("/_api/web/lists/GetByTitle(‘Test')/items",function(error,response){
//TASK 1
//process http call here.
//TASK 2
//render the graph here
});
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.
