temp-by-month-6.md

Temperature by Month 6

bind data to circle elements

Inside the d3.csv promise function.

d3.csv("city-month.csv").then(function(dataInFunction){

    var circles = svg.selectAll("circle")
        .data(dataInFunction)
        .enter(); 

Create Function drawCircles()

1. draw a test circle with radius of 5

2. position circle at 100, 100 as a test position

3. function will receive parameters for circles and cities

    function drawCircles(circles, cities){
        circles.append("g")
            .append("circle")
                .attr("cx", "100")
                .attr("cy", "100")
                .attr("r", "5");
    }
   

4. call function from inside of d3.csv promise

   You will have 12 circles with the same position. It will look like one circle.

   

Use Data to Plot Circle Position

The variable circles has the data bound to it. You can access the data through function(d, i)

1. change "cx"

        .attr("cx", function(d){
            return monthPosition(d.month);
        })
   

   

2. change "cy"

Use "honolulu" as first city name for a test.

        .attr("cy", function(d){
            var cityName = "honolulu";
            return yScale(d[cityName]);
        })

Set City Colors

in the d3.csv promise, use scaleOrdinal to set colors.

d3.csv("city-month.csv").then(function(dataInFunction){
      var cities = getCities(dataInFunction);

      var cityColor = d3.scaleOrdinal()
          .domain(cities)
          // .range(d3.schemeSet2);
      .range(["orange", "brown", "red", "blue", "purple"]);

Edit drawCities to pass it cityColors

in the d3.csv promise:

   drawCircles(circles, cities, cityColor);

in the drawCircles function

    function drawCircles(circles, cities, cityColor){
    ...

Set color fill

        .attr("fill", function(){
            var cityName = "honolulu";
            var color = cityColor(cityName);
            console.log(color);
            return color;
        })

Put drawCircles in loop

Set up loop to to go through all cities

for (var i = 0; i < cities.length; i++) {
    drawCircles(circles, cities, cityColor);
}

You should now have 60 circles, but only 12 will be visible. Each of the 12 circles will be overlayed by four additional circles.

In the next section we will separate the circles out by going through data for the other four cities.

pass index value to drawCircles

in the d3.csv promise, move i from zero to 4.

for (var i = 0; i < cities.length; i++) {
    drawCircles(circles, cities, cityColor, i);
}

in the drawCircles function receive the index (0 through 4)

function drawCircles(circles, cities, cityColor, index){

use index to go through each city

First adjust the y position.
In the code example below, d[cityName] uses square brackets to access the value of the cityName key.

Questions:

1. What is cityName the first time through the loop? Hint: The index is 0 and the cities are in cityArray. Look at the data file to see which city is read in first.

2. What is d in function(d)?

3. What is the value of d[cityName] the first time through the loop? Hint: it's a key value pair.

        .attr("cy", function(d){
            var cityName = cities[index];
            return yScale(d[cityName]);
        })
   

next adjust the fill color

        .attr("fill", function(){
            var cityName = cities[index];
            var color = cityColor(cityName);
            console.log(color);
            return color;
        })

Use d3 color scheme

https://github.com/d3/d3-scale-chromatic

 var cityColor = d3.scaleOrdinal()
    .domain(cities)
    .range(d3.schemeSet2);