d3 is not defined - ReferenceError

Had the same issue, though I initially thought it is because of security restrictions of browser, that wasn't the case. It worked when I added the charset to the script tag as shown below:

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

The same is shown in the d3 docs, though it doesn't mention this issue specifically: http://d3js.org/

Yes, having it locally works too.

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

Here is the full example:

<!doctype html>
<html>
<head>
    <title>D3 tutorial</title>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <!--<script src="d3.min.js"></script>-->
</head> 
<body>
    <script>
        var canvas = d3.select("body")
                        .append("svg")
                        .attr("width", 500)
                        .attr("height", 500);
        var circle = canvas.append("circle")
                        .attr("cx",250)
                        .attr("cy", 250)
                        .attr("r", 50)
                        .attr("fill", "red");
    </script>
</body> 
</html>

There may be security restrictions that prevent your browser from downloading the D3 script. What you can do is to download the scripts, place them in the same folder as your files, and change the referenced paths in your source.

Tags:

Javascript

D3.Js

Referenceerror

Sunburst Diagram

Recent Posts