local host to open html file

Question

I'm learning d3 and try to open a html file in my local machine.

When I use local server using Python then there is no problem in opening the file.

However, I want to skip this step.

So in Sublime, I built a shortcut in Tools > Build System > New Build System as below.

{
 "cmd": ["C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", "$file"]
}

Once I set up, I could open the file by pressing ctr+b. But from time to time it doesn't seem working. When it doesn't work, it shows this error message:

Failed to load _path_of_file_: Cross origin requests are only supported for protocol 
schemes: http, data, chrome, chrome-extension, https.send @ d3.v4.min.js:2

I'm confused if it doesn't work because my file contains errors or the set-up doesn't work.

One more weird thing is, when I open console (ctr+shift+j), the console shows where errors in my file are. For example,

Uncaught TypeError: Cannot read property 'forEach' of null
    at index.html:32

I understand 32th line in my code is probably wrong.

But when I open the same file through Python local server, where errors are is different. For example,

Uncaught TypeError: svg.append(...).attr(...).calls is not a function
    at index.html:59

Like this, the error lies in 59th line.

It maybe because my code contains a lot of errors? and console shows any errors randomly?

Or, it is something wrong with the setting in sublime?

Basically, I'm worried if the setting in Sublime is reliable. If anyone knows other ways to open a html file without using local server, please let me know as well.

Thanks so much for reading this,

--

Here is my code in d3

    <!DOCTYPE html>
    <meta charset = 'utf-8'>

    <body>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>

    var w = 960,
        h = 500;

    var parseTime = d3.timeParse('%Y');

    var xScale = d3.scaleTime().range([0, w]);
    var yScale1 = d3.scaleLinear().range([h, 0]);
    var yScale2 = d3.scaleLinear().range([h, 0]);

    var line1 = d3.line()
                .x(function(d) {return xScale(d.time); })
                .y(function(d) {return yScale1(d.value); });

    var line2 = d3.line()
                .x(function(d) {return xScale(d.time); })
                .y(function(d) {return yScale2(d.gdp/1000); }); 

    var svg = d3.select('body')
                .append('svg')
                .attr('width', w)
                .attr('height', h); 

    d3.csv("data.csv", function(d) {

        d.forEach(function(d) {
            d.date = parseTime(d.time),
            d.value = + d.value;
            d.gdp = + d.gdp_per_capita;
        }); 

        xScale.domain(d3.extent(d, function(d) { return d.date; }));
        yScale1.domain(d3.extent(d, function(d) { return d.value;}));
        yScale2.domain(d3.extent(d, function(d) { return d.gdp/1000; }));

        svg.append('path')
            .data([d]) 
            .attr('class', 'line')
            .attr('d', line1);

        svg.append('path')
            .data([d]) 
            .attr('class', 'line')
            .style('stroke', 'red')
            .attr('d', line2);

        svg.append('g')
            .attr('transform', 'translate(0,' + h + ')')
            .call(d3.axisBottom(xScale));

        svg.append('g')
            .attr('class', 'axisLeft')
            .calls(d3.axisLeft(yScale1));

        svg.append('g')
            .attr('class', 'axisRight')
            .attr('transform', 'translate(' + w + ', 0)')
            .calls(d3.axisRight(yScale2));
    });    
    </script>
</body>

@jdv, Thank you for your reply. I wanted to make the post simple. But I will appreciate if you can go through my code. I'm editing my question adding my code. Thanks a lot. — Brian, May 25 '18 at 20:43

Steve · Accepted Answer · 2018-05-26T01:28:06.297

There are a few things going on:

The first error that you get:

Uncaught TypeError: Cannot read property 'forEach' of null
    at index.html:32

Is because the data isn't loading correctly (hence being null). That's because you're opening the file directly in Chrome, and Chrome treats the page differently than if you were to load it through a web server. You may have more luck with Firefox which tends to be less strict about file loading.

Generally you should be opening and testing pages through a web server, like you do with your Python server, because it reflects the web environment more closely. As you saw, when you opened the page through the web server, you didn't get this error.

The other error you're getting,

Uncaught TypeError: svg.append(...).attr(...).calls is not a function
     at index.html:59

Indicates you're trying to invoke a function that doesn't exist. If you look at it carefully, you can see that calls probably isn't right. It should be call. After I fixed that instance on line 59, and the other one on line 64, it loaded for me.

Thanks Steve, now I understand the two settings showed different errors. — Brian, May 26 '18 at 07:50

local host to open html file

1 Answers1