temp-by-month-8-add-buttons.md

temperature by month 8 - add buttons

https://codetricity.github.io/events-practice/city-button/

Start with city.js

In index.html, change the link from main.js to city.js

Add Titles back in

Add titles for the top of the chart, x axis and y axis

Add variable for buttons

Use d3.selectAll to grab all the input buttons. Put this above the promise loop.

var buttons = d3.selectAll('input'); 

Comment out for loop

modify drawCity to pass it the name of a city. Use 'honolulu' as the test city.

    var dataset = d3.csv("city-month.csv").then(function(data){
        var circles = svg.selectAll("circle")
        .data(data)
        .enter();
        // for (var i = 0; i < cities.length; i++) {
        //     drawCity(circles, i);
        // }
        drawCity(circles, 'honolulu');

modify drawCity to pass it the name of a city, 'honolulu'

function drawCity(circles, cityName){

    circles.append("g")
        .append("circle")
        .attr("cx", function(d){
            return monthPosition(d.month);
        })
        .attr("cy", function(d){
            return yScale(d[cityName]);
        })
        .attr("r", "5")
        .attr("fill", function(){
            var color = cityColor(cityName);
            console.log(color);
            return color;
        });
}

set circles to global variable

add function getCity()

Create a new function called, getCity() at the bottom of the file.

    function getCity() {
        let city = this.value;
        drawCity(circles, city);
    }

trigger getCity from button change

in promise

       buttons.on('change', getCity);

remove circles

in getCity()

 svg.selectAll('circle').remove();

handle case for all circles

1. in html file, add button for 'all'

2. in function getCity(), add for loop to handle all.

    function getCity() {
        svg.selectAll('circle').remove();
        let city = this.value;
        if (city == "all") {
            for (let i=0; i<cities.length; i++) {
                drawCity(circles, cities[i]);
            }
   
        } else {
            drawCity(circles, city);
        }
    }
   

add transition to drawCity

    function drawCity(circles, cityName){

        circles.append("g")
            .append("circle")
            .attr("cx", function(d){
                return monthPosition(d.month);
            })

            .attr("r", "5")
            .attr("fill", function(){
                var color = cityColor(cityName);
                return color;
            })
            .transition()
            .attr("cy", function(d){
                return yScale(d[cityName]);
            })
            .duration(1000);
    }

modify label colors

    /*  add colors to labels.
        this will only work if the sequence of cities
        in the form matches the array.
     */
    d3.selectAll('label')
        .style('color', function(d, i) {
            return cityColor(cities[i]);
        });