Set y-coordinate position with D3.js

Craig Oda
CodeCakes
Published in
2 min readNov 5, 2018

US Rainfall Part 9 — Plotting circle position based on data set

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

Basic Pattern

  1. select
  2. data
  3. exit
  4. update
  5. enter
  6. append

You need to edit the update and enter steps.

Steps

send d.rainfall to yScale to get the y-coordinate

Adjust yScale min and max

Adjust yScale min and max values of domain by 10.

Nevada is no longer covering the x-axis.

Next Lesson

D3.js Adjust Color and Style

--

--

Craig Oda
CodeCakes

open source advocate, writer, Flutter developer, father, husband, fly fisherman, surfer