d3.csv("https://raw.githubusercontent.com/polygraph-cool/this-american-life/master/data/act1.csv")
  .then(function(data) {
  
  	// settings
  	const maleColor = "#6767FF"
    const femaleColor = "#FA676C"

    showTooltip("165")

    function showTooltip(episode) {
      // constants used in tooltip info
      const episodeData = data.filter(d => d.episode === episode)[0]
      const percFormat = d3.format(".01f")
      const malePerc = percFormat(episodeData.malePercent)
      const femalePerc = percFormat(100 - episodeData.malePercent)

      // adjust the text
      d3.select(".tt-heading")
        .text(`#${episodeData.episode}: ${episodeData.title}`)

      d3.select(".tt-description")
        .text(`${episodeData.description}`)
      
      // size and label the bars
      d3.select(".female-bar")
      	.style("width", `${femalePerc}px`)
        .style("background-color", femaleColor)
      
      d3.select(".gender-label.female")
      	.style("color", femaleColor)
      	.text(`${femalePerc}% female dialogue`)
      
      d3.select(".male-bar")
      	.style("width", `${episodeData.malePercent}px`)
        .style("background-color", maleColor)
      
      d3.select(".gender-label.male")
        .style("color", maleColor)
      	.text(`${malePerc}% male dialogue`)

      d3.select(".chart-tooltip")
      	.transition()
      	.duration(200)
        .style("opacity", 0.9)
    }
  });