d3 interval loop part 3

2018-09-13.md

D3 Interval Loop Part 3

Set Radius in update function

Use the anonymous function used to set the color of the circle as an example and edit the radius of the circle.

Example Using Color

You can't copy and paste this in. You must modify the code below and use a similar concept to change the radius of the circle.

Instead of the color scale, you must use the scale for the size of the circle.

1. Explain anonymous function
2. Identify attributes in the HTML code
3. review how d gets into the function

Add Title

1. Start your block of code to add the title above the update loop.
2. use svg.append() to insert the element to add a piece of text
   1. the element you need to add is called text
3. chain the keyword .text to append
4. use these attributes using the .attr keyword
   1. x
   2. y
   3. text
5. modify temperature text to be of class .temperature - add the class attribute
6. remove .temperature class inside of update loop

Adjust Styles

1. Add class for title onto text element for the graph title
   1. use .attr("class") that you used in the previous section
2. create css file
3. link from HTML file to CSS file

Use variables for width and height

var width = 800;
var height = 400;

• width and height of viewport
• cx, cy of circle
• text elements