part 4 of interval timer

2018-09-14-interval-part-4.md

Interval Timer Part 4

• example
• code on GitHub

Goals

• Use data from 50 cities

Learning Objectives

• Adapt program to handle large datasets by using variables instead of numbers

Replace First Label

When you run your application, the first circle is black with no label. This section fixes the problem.

adjust text element above the main update loop

Change first temperature and city values to first elements of array

  .text(temperatureData[0].city +  
      " temperature: " +
       temperatureData[0].lowTemp );

Adjust circle color and radius

   svg.append("circle")
      .attr("cx", width/2)
      .attr("cy", height/2)
      .attr("r", circleSizeScale(temperatureData[0].lowTemp))
      .attr("fill", colorScale(temperatureData[0].lowTemp)
      );

Set index to 1 after using data at index 0

As you used the data from array[0], you now have to set the index set to 1. You just used the element at index 0 in the code section above.

Replace circleSizeScale domain

Use d3.min and d3.max to replace [27, 49]

1. set a variable for minTemperature

2. use the d3 method d3.min -> d3.min(array, callback-function(d) to find the lowest temperature

3. repeat the steps above for maxTemperature using d3.max

     var minTemperature = d3.min(temperatureData, function(d){
         return d.lowTemp;
     });
   
     var maxTemperature = d3.max(temperatureData, function(d){
         return d.lowTemp;
     });