Search code examples
d3.jsweb-maker

ReferenceError: d3 is not defined using web-maker

I followed this instruction, entering the complete code into the HTML pane of web-maker:

<!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>

That results in an empty page.

The I moved the script "content" to the JS pane, that results in "ReferenceError: d3 is not defined".

Solution

  • The script content will move to the JS pane. But the external scripts need to be loaded through the "Add library" button. In the "Add library" box, simply select D3 from the list of popular libraries.

    enter image description here