d3.js

d3.scale doesn't work when offline?

This doesn't work offline, it works just fine when internet connection is available :

<!doctype html>
<html>
<head>
  <title>d3 SVG barchart</title>
    <script src="http://d3js.org/d3.v3.min.js"></script><!--Line A-->
    <script src="d3.js"></script>       
    <script src="d3.min.js"></script>
</head>
<body>
    <script>
    var dataArray = [20, 40, 50, 60];
    var width=500;
    var height=500;

    var canvas = d3.select("body")
              .append("svg")
              .attr("width", width)
              .attr("height", height);

    var widthScale = d3.scale.linear()
                     .domain([0, 60])
                     .range([0, width]);

    var bars = canvas.selectAll("rect")
                .data(dataArray)
                .enter()
                    .append("rect")
                    .attr("width", function(d){
                                    return widthScale(d);
                                })
                    .attr("height", 50)
                    .attr("y", function(d, i){
                                return i*100;
                        });
    </script>
</body>
</html>

It seems like the scale operation(s) of d3.js library doesn't work when I'm offline (or when Line A in is put in a comment block), why? Is there any d3.js version that works for offline user?

I enjoy snap.svg practices offline (I don't have private internet connection available), is there any way to do this with d3.js?

Solution

  • Your problem is here

        <script src="http://d3js.org/d3.v3.min.js"></script><!--Line A-->
    <script src="d3.js"></script>       
    <script src="d3.min.js"></script>

    Download

        <script src="http://d3js.org/d3.v3.min.js"></script>

    Refer correctly to it locally and remove:

        <script src="d3.js"></script>       
    <script src="d3.min.js"></script>