.x.label, .y.label {
	font-weight: bold;
	font-size: 1rem;
}
.x.label {
    margin-left: -50%;
}

rect {
    pointer-events: all;
    fill-opacity: 0;
    stroke-opacity: 0;
    z-index: 1;
    background-color: transparent;
}

.tooltip {
    position: absolute;
    padding: 10px;
    background-color: steelblue;
    color: white;
    border: 1px solid white;
    border-radius: 10px;
    display: none;
    opacity: .8;
	z-index: 999;
}

var data = [ {'year':'2007', 'percent':'.05'}, {'year':'2008', 'percent':'.10'}, {'year':'2009', 'percent':'.15'}, {'year':'2010', 'percent':'.25'} ];

sendData(data);
function sendData(data) {
    const width = 1140;
    const height = 400;
    const marginTop = 20;
    const marginRight = 20;
    const marginBottom = 50;
    const marginLeft = 70;
	
   const thisContainer = d3.select("#container").append("div").attr("id", "container0"); //this works
			
    const x = d3.scaleUtc()
        .domain([new Date("2007-01-01"), new Date("2023-01-01")])
        .range([marginLeft, width - marginRight]); //same as .range([70,1120])

    const y = d3.scaleLinear()
        .domain([0, .5])
        .range([height - marginBottom, marginTop]); //same as .range([350, 20])

    const svg = d3.create("svg")
        .attr("width", width)
        .attr("height", height);

    svg.append("g")
        .attr("transform", `translate(0,${height - marginBottom})`)
        .call(d3.axisBottom(x)
            .ticks(d3.utcYear.every(1))
        );

    svg.append("text")
        .attr("class", "x label")
        .attr("text-anchor", "end")
        .attr("x", width/2)
        .attr("y", height - 6)
        .text("Year");

    svg.append("text")
        .attr("class", "y label")
        .attr("text-anchor", "end")
        .attr("x", -height/3)
        .attr("y", 6)
        .attr("dy", ".75em")
        .attr("transform", "rotate(-90)")
        .text("Percent");

    svg.append("g")
        .attr("transform", `translate(${marginLeft},0)`)
        .call(d3.axisLeft(y));

    var heightOfY = height-marginBottom;
    var Xmin = 2007;
    var Xmax = 2023;
    var numTicks = Xmax - Xmin + 1; //have to count the 0 point, so add 1
    var XmaxRange = width - marginRight;
    var eachTickWidth = XmaxRange / numTicks;

    let path=svg.append("path")
        .datum(data)
        .attr("fill", "none")
        .attr("stroke", "steelblue")
        .attr("stroke-width", 1.5)
        .attr("d", d3.line()
            .x(function(d) {
                //return x(d.year)
                var mine = ((d.year - Xmin)*eachTickWidth) + marginLeft;
                //return x(d.year);
                return(mine); console.log(d.year);
            })
            .y(function(d) {
                return y(d.percent)
            })
        );

    /*const tooltip = d3.select("svg")
        .append("div")
        .attr("class", "tooltip");
	*/

    const circle = svg.append("circle")
        .attr("r", 0)
        .attr("fill","steelblue")
        .style("stroke","white")
        .attr("opacity", .70)
        .style("pointer-events","none");

    const listeningRect = svg.append("rect")
        .datum(data)
        .attr("width", width)
        .attr("height", height);
		
	const tooltip = d3.select("#container")
        .append("div")
        .attr("class", "tooltip");
	/*const tooltip = svg.append("div").attr("class", "tooltip");*/
	
	
	const dataToDate = d => new Date(d.year, 0, 1);

    listeningRect.on("mousemove", function(event){
        const [xCoord] = d3.pointer(event, this);
        const bisectData = d3.bisector(d => dataToDate(d)).left;
        const x0 = x.invert(xCoord);
        const i = bisectData(data, x0, 1);
        const d0 = data[i-1];
        const d1 = data[i];
        const d = d1 && (x0 - dataToDate(d0) > dataToDate(d1) - x0) ? d1 : d0;
        const xPos = x(dataToDate(d));
        const yPos = y(d.percent);
		
		
        circle.attr("cx", xPos)
            .attr("cy", yPos);
		
		circle.transition()
		.duration(50)
		.attr("r", 5);
		
		tooltip
		.style("display","block")
		.style("left",`${xPos + 10}px`)
		.style("top", `${yPos + 10}px`)
		.html("<strong>Year:</strong> " + d.year + "<br/><strong>% with non-medial exemption: </strong> " + (d.percent*100) + "%");

        //console.log({xCoord, x0, d0, d1, d: dataToDate(d), xPos});
    });
	
	listeningRect.on("mouseout", function(event){
		tooltip
		.style("display","none");
	});
	
    thisContainer.append(svg.node());//doesn't work
//container.append(svg.node());//this does work but a) I don't know why you can refer to a div with an ID of container as just container without some jquery and b) I don't understand why the same statement using a different div ID doesn't work