4

I'm a total novice in web development. I'm interested in using D3 to create interactive visualizations for my (insurance) work, not for sharing on web. The visualization would need to be pretty self-contained so non-tech-savvy business users can view it without special software setup--just the usual browser, internet access, and access to the same LAN locations I have. Below is my initial investigation into viability.

1) I can save this HTML example to my local machine and view the chart in a browser, no probs: https://bl.ocks.org/mbostock/b5935342c6d21928111928401e2c8608

2) Then I tried a visualization that uses a data file.
https://bl.ocks.org/mbostock/2838bf53e0e65f369f476afd653663a2
I went to the data source website and downloaded the .csv. Simply changing the file address in the d3.csv() command to my local drive didn't work (as I mentioned I'm a novice)

Can anyone show me how to make (2) work locally? I found some related answers
Loading local data for visualization using D3.js
Reading in a local csv file in javascript?
but still over my head--if someone can work the example (2) above I can probably understand better...

Community
  • 1
  • 1
TrialNError
  • 113
  • 2
  • 7
  • I am also interested in the above. Any success on sharing a d3.js visualization on a intranet/local network? – dapaz Jan 10 '18 at 18:06

5 Answers5

2

There are two techniques you can use to load d3 data without a server:

  • load the data yourself without using d3.csv() helpers.
  • use data-urls with d3.csv() to avoid server loading.

Loading the data yourself without d3.csv()

Your first example: Stacked Negative Values works because data is defined at the top of the page without using d3.csv():

  var data = [...];
  ...
  // d3 operates on the data

Your second example: Nested TreeMap doesn't work because the data is loaded by d3.csv() which takes a path, which ordinarily takes assumes a server:

 d3.csv("Home_Office_Air_Travel_Data_2011.csv", type, function(error, data) {
 ...
 // work on data within the anon function passed to d3.csv.

Using data-urls with d3.csv()

However, if you use a data-url as the path, you can get this to work without a server:

var data = [...];
var dataUri = "data:text/plain;base64," + btoa(JSON.stringify(data));

d3.csv(dataUri, function(data){
  // d3 code here
});

Adapted from: Create data uri's on the fly?

As an aside, you may be interested in a Middleman plugin I wrote that creates self-contained d3 HTML pages that can be run from the file system without a server using these approaches:

https://github.com/coldnebo/middleman-static-d3

Larry Kyrala
  • 889
  • 2
  • 8
  • 18
1

Most modern browsers (chrome, mozilla) have full built in html5, css3, and javascript support without need of a webserver (this is the preferred route for developement).

For example, if you're using chrome all you need to do is set the allow local file access flag: How to launch html using Chrome at "--allow-file-access-from-files" mode?

In mozilla set the about:config key security.fileuri.strict_origin_policy to false.

Again, these are options for loading local files without a webserver, but setting up a webserver is a relatively simple task that is the most recommended route.

Community
  • 1
  • 1
Z. Bagley
  • 8,942
  • 1
  • 40
  • 52
0

you'll need to run a local server like python's SimpleHTTPServer to get this to work locally. once you've got it installed, it's as simple as running a single command in your terminal.

however, since you said that your end users should be able to access it through the browser, do you mean that you'll host it online? if so, they'll be able to view it correctly on the server

Conan
  • 670
  • 7
  • 12
  • I don't want to host a server. I want to be able to put the HTML file and data files in the same folder on a LAN, and when someone opens the HTML file, it properly uses the data files as needed to create the visual. Something like in IE when you Save As "complete webpage" and you can open the page offline (well this doesn't actually work when I tried it with the example in my question). – TrialNError Mar 20 '17 at 20:19
0

Notice how in the first example the data in hard coded into the html page with the variable name data? The data is already here so you won't need a server to go and fetch the data. On the other hand, in second example the data is not hardcoded and is fetched with a server. If you want this to work like the first example you will have to hard code the data into the web page.

Harpal
  • 12,057
  • 18
  • 61
  • 74
-1

You may want to use SERVED by Ian Johnson, its pretty good.

http://enjalot.github.io/served/

Sandeepedara
  • 1
  • 4