d3.csv("https://raw.githubusercontent.com/polygraph-cool/this-american-life/master/data/act1.csv")
  .then(function(data) {
  
	  // settings
  	const width = 750
    const height = 450
    const margins = {left: 0, right: 40, top: 40, bottom: 20}
  
  	const maleColor = "#6767FF"
    const femaleColor = "#FA676C"
    
    const colorScale = d3.scaleLinear()
    	.domain([0, 100])
    	.range([femaleColor, maleColor])
    
    // binning
    const x = d3.scaleLinear()
      .domain([0, 100])
      .range([0, width - margins.left - margins.right])

    // Generate a histogram using 30 uniformly-spaced bins.
  	const histogram = d3.histogram()
    	.value(d => +d.malePercent)
      .domain(x.domain())
      .thresholds(d3.range(30).map(d => d * 100/30))
    
    const binnedData = histogram(data)

    function showTooltip(episode) {
      // constants used in tooltip info
      const episodeData = data.filter(d => d.episode === episode)[0]
      const malePerc = d3.format(".01f")(episodeData.malePercent)
      const femalePerc = d3.format(".01f")(100 - episodeData.malePercent)
      
      // position tooltip relative to pointer
      const coords = [d3.event.clientX, d3.event.clientY]
      const ttBoundingRect = d3.select(".chart-tooltip").node().getBoundingClientRect()
      
      d3.select(".chart-tooltip")
      	.style("left", `${coords[0] <= width / 2 ? coords[0] + 25 : coords[0] - 25 - 300}px`)
      	.style("top", `${coords[1] - ttBoundingRect.height / 2}px`)

      // 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)
    }
  
    const svg = d3.select("body").append("svg")
      .attr("width", width + margins.left + margins.right)
      .attr("height", height + margins.top + margins.bottom)
    
    binnedData.forEach(function(bin, ind) {
      d3.select("svg")
        .append("g")
        .attr("class", `col-${ind}`)
      	.attr("transform", `translate(${margins.left}, ${margins.top})`)
    
    d3.select(`.col-${ind}`)
    	.selectAll(".rect")
    	.data(bin)
    	.enter()
    	.append("rect")
    	.attr("class", "rect")
    	.attr("width", width / 30)
    	.attr("height", 8)
    	.attr("x", width / 30 * ind)
    	.attr("y", (d, i) => 8 * i)
    	.attr("fill", d => colorScale(+d.malePercent))
    	.attr("stroke", "white")
    	.attr("stroke-width", 1)
    	.style("opacity", 0.3)

    })
    
    	
    
    d3.selectAll(".rect")
      .on("mouseover", function(d, i) {
        
        d3.select(this)
        	.style("opacity", 1)
        	.style("cursor", "pointer")
        
        showTooltip(d.episode)
        
    	})
    	.on("mouseout", function(d, i) {
      	d3.select(this)
        	.style("opacity", 0.3)
        
        d3.select(".chart-tooltip")
        	.style("opacity", 0)
    	})
  	
  });