d3.js code from javascript console to html page

Question

I'm learning to use d3.js with a tutorial.

The following code is entered in the javascript console (Chrome) and it creates a line graph.

How do now take this code and make it run in an html page?

 var lineData = [ { "x": 1,   "y": 5},  { "x": 20,  "y": 20},
                  { "x": 40,  "y": 10}, { "x": 60,  "y": 40},
                  { "x": 80,  "y": 5},  { "x": 100, "y": 60}];

 //This is the accessor function we talked about above
 var lineFunction = d3.svg.line()
                          .x(function(d) { return d.x; })
                          .y(function(d) { return d.y; })
                         .interpolate("linear");

//The SVG Container
var svgContainer = d3.select("body").append("svg")
                                    .attr("width", 200)
                                    .attr("height", 200);

//The line SVG Path we draw
var lineGraph = svgContainer.append("path")
                            .attr("d", lineFunction(lineData))
                            .attr("stroke", "blue")
                            .attr("stroke-width", 2)
                            .attr("fill", "none");

Put the code in a script tag and put that tag at the end of the body. — plalx
– plalx, Commented Feb 5, 2014 at 18:28

dersvenhesse · Accepted Answer · 2014-02-05 18:48:41Z

9

Create a file called yourfile.html.
Add the basic tags like html, head and body.
Include the d3 JavaScript in a script tag with src="http://d3js.org/d3.v3.min.js".
Add your code above into another script and the end of the body tag.
Open yourfile.html in a browser.

All in all, your file may look like this:

<!DOCTYPE html>
<html>
<head>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
    <script type="text/javascript">
        var lineData = [ { "x": 1,   "y": 5},  { "x": 20,  "y": 20}, { "x": 40,  "y": 10}, { "x": 60,  "y": 40}, { "x": 80,  "y": 5},  { "x": 100, "y": 60}];

        //This is the accessor function we talked about above
        var lineFunction = d3.svg.line().x(function(d) { return d.x; }).y(function(d) { return d.y; }).interpolate("linear");

        //The SVG Container
        var svgContainer = d3.select("body").append("svg").attr("width", 200).attr("height", 200);

        //The line SVG Path we draw
        var lineGraph = svgContainer.append("path").attr("d", lineFunction(lineData)).attr("stroke", "blue").attr("stroke-width", 2).attr("fill", "none");
    </script>
</body>
</html>

edited Feb 5, 2014 at 18:48

answered Feb 5, 2014 at 18:28

dersvenhesse

6,4642 gold badges34 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

AmeliaBR Over a year ago

For more on setting up and getting started, this tutorial is a good reference.

Carlos Muñiz Over a year ago

Yes, that did the job, thank you. I was linking to my local version of d3.v3.js, and that doesn't work. My local version of d3.v3.min.js works. Is there a difference between the two files other than no spaces, smaller size, etc??

dersvenhesse Over a year ago

No, they should be totally the same in their functionality.

FernOfTheAndes Over a year ago

@Charlie...you need to add <meta charset="utf-8">. Read explanation here and here.

Collectives™ on Stack Overflow

d3.js code from javascript console to html page

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related