Create new HTML file with tag <body></body>
Download and save d3.js to your project.
https://raw.githubusercontent.com/alignedleft/d3-book/master/d3.js
In the HTML file, access the d3.js file using <script>
Create new JavaScript file.
In the HTML file, access the new JavaScript file you created.
In the JavaScript file you created, set two new variables for width and height.
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
use inspector in browser developer tools. use split console to interactively append "rect" to "svg" element.
svg.append("rect").attr("x", "num")
You need to chain these four attributes:
- x
- y
- width
- height
change color create circle
Start with this data.
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
prepend the following code to the rectangle
svg.selectAll("rect")
.data(dataset)
.enter()
You can now access the data.