part2 of d3 interval

2018-09-12-interval-2.md

d3 interval part 2 - Using complex data from an array of objects

Review how color is temperature is pulled from array of objects.

Questions

What does this line do?

    var rowOfData = temperatureData[index];

How are you getting a color from using the temperature data?

change fill to use color from the temperature dataset

.attr("fill", function(d){
    var rowOfData = temperatureData[index];
    // lowTemp is the attribute of the array of objects
    // from the dataset
    var temperatureOfrow = rowOfData.lowTemp;
    // use the linear scale called colorScale
    var currentColor = colorScale(temperatureOfrow);
    return currentColor;
});

change text to show city

  .text(function(d){
      var rowOfData = temperatureData[index];
      // lowTemp is the attribute of the array of objects
      // from the dataset
      var cityOfRow = rowOfData.city;
      var textLabel =  cityOfRow + " Temperature";
      return textLabel;
  });

change text to include temperature

   var temperatureOfRow = rowOfData.lowTemp;
    var textLabel =  cityOfRow + " Temperature: " +  
        temperatureOfRow + "F" ;

Change Size of Circle with Temperature

set scale

var minCircle = 10;

var circleSizeScale = d3.scaleLinear()
    .domain([27, 49])
    .range([minCircle, maxCircle]);