Set Up SVG Viewport with D3.js

US Rainfall Part 4 — setting up SVG viewport with margins

Previous Lessons

1. Remove Characters from Beginning of JavaScript String
2. Divide Large Data Set into Smaller Data Sets
3. Handling Radio Buttons in D3.js

Steps

1. set constants for width and height
2. set margin as object
3. set constants for svgWidth and svgHeight
4. select body append svg, add attributes for width and height
5. append SVG group g and then translate chart chart by the appropriate margins

Hint: translate is an attribute of transform

Answer is below

Next Lesson

D3.js Data Update Pattern

Code Cakes Project Information

• Introduction
• YouTube
• Publication