Finish D3.js US Rainfall Project — Adjust Color and Style

US Rainfall — Part 10

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
4. Set Up SVG Viewport with D3.js
5. D3.js Data Update Pattern
6. D3.js Scales for x-Axis
7. Use D3.js Data for x-coordinate Plotting
8. Generate y-Axis with D3.js scaleLinear
9. Set y-coordinate position with D3.js

Steps

Colors

Font

1. create rainfall.css
2. link from html to css
3. add attr class axis.

in rainfall.css

Add Chart Title

Create a new function that only uses local variables. Pass the new function the svg viewport, width, and height.

Draw the chart title at the top of the chart area.

Add title class to rainfall.css

Add Y-Axis Label

Add style

Apply Style to Buttons

Completed Project