Not Finished - Add HTML Form to Chart

Goal

Add form below the SVG viewport by using JavaScript.

Learning Objectives

append additional elements to HTML <body>
review radio buttons

Create Function createButtons

Create a new function in your main JavaScript file called createButtons.
The function receives the array of cities.
use d3.select to select the body and append a form

create a new variable form and assign it to the the result of d3.select...

 function createButtons(cities){
     var form = d3.select("body").append("form");
 }

Call function inside of the d3.csv promise

pass the function the var cities.
run the function below the area you append "svg" to "body"

append label and input

form.append("label").append("input");

Add attributes for input form

form.append("label").append("input")
    .attr("type", "radio")
    .attr("name", "city_button")
    .attr("value", "honolulu");

Put into for loop

Use the array of cities to create buttons for each city

for (var index = 0; index < cities.length; index++){
    form.append("label").append("input")
    .attr("type", "radio")
    .attr("name", "city_button")
    .attr("value", cities[index]);
}

Confirm Buttons Have Values

Create Function to Get Value of Button

    function getCityChange(){
        console.log(this.value);
    }

run function in promise

Make sure you run the function after you create the buttons in HTML.

createButtons(cities);

// selecting "input" must be below createButtons
var buttons = d3.selectAll("input");
buttons.on("change", getCityChange);

return city

    function getCityChange(){
        var nameOfCity = this.value;
        return nameOfCity;
    }

Test.

var currentCity = buttons.on("change", getCityChange);

modify drawCircles

comment out for loop in promise
pass currentCity to drawCircle function
drawCircle receives cityName instead of cities

codetricity/temp-by-month-9-not-finished.md

Select an option

No results found