price_production_plot = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("overflow", "display");
const circles = svg
.selectAll("circle")
.data(price)
.join("circle")
.attr("r", 7)
.attr("cx", d => xScale(d.Production))
.attr("cy", d => yScale(d.CostForTwo))
.attr("fill", d => colorScale(d.Country))
.attr("opacity", 1);
const tip = svg
.append("g")
.style("pointer-events", "none")
.style("text-anchor", "middle");
circles.on("mouseenter", event => {
const value = event.target.__data__;
const pointer = d3.pointer(event, this);
tip.call(hover, pointer, value);
});
circles.on("mouseout", event => {
tip.selectAll("*").remove();
});
svg.append("text")
.style("text-anchor", "middle")
.attr("x", 500)
.attr("y", -20)
.text("Total Production vs Average Cost for Two")
const xlabel = svg
.append("text")
.attr("class", "x label")
.style("text-anchor", "middle")
.attr("x", width / 2)
.attr("y", height - 10)
.text("Total Crop Production (Tonnes)")
const ylabel = svg
.append("text")
.attr("class", "y label")
.style("text-anchor", "middle")
.attr("x", -250)
.attr("y", margin.left / 2 - 25)
.attr("transform", "rotate(-90)")
.text("Average Meal Cost For Two (USD)")
svg.append("g").call(xAxis)
svg.append("g").call(yAxis)
return svg.node()
}