d3.js code from javascript console to html page
d3.js, javascript
Solution
- 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>
Problem
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"); ```