{
const margin = {left:40, right:15, top:15, bottom:35};
const width = 500;
const height = 500;
const graphWidth = width - (margin.left + margin.right);
const graphHeight = height - (margin.top + margin.bottom);
const svg = d3.create("svg")
.attr("viewbox", [0, 0, width, height])
.style("height", `${height}px`)
.style("width", `${width}px`);
const innerGraph = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const x = d3.scaleLinear()
.domain([0, d3.max(oranges, (d)=>+d.age)])
.range([0, graphWidth])
.nice();
const y = d3.scaleLinear()
.domain([0, d3.max(oranges, (d)=>+d.circumference)])
.range([graphHeight, 0])
.nice();
const trees = d3.groups(oranges, d=>d.tree);
const color = d3.scaleOrdinal()
.domain(trees.map(d => d[0]))
.range(d3.schemeCategory10)
.unknown("black");
const line = d3.line()
.x(d=>x(d.age))
.y(d=>y(d.circumference))
.curve(d3.curveCardinal);
innerGraph.selectAll("path")
.data(trees)
.join("path")
.attr("d", d=> line(d[1]))
.style("fill", "None")
.style("stroke", d=>color(d[0]));
const xAxis = svg.append("g")
.attr("transform", `translate(${margin.left}, ${height - margin.bottom})`)
.call(d3.axisBottom(x));
const yAxis = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`)
.call(d3.axisLeft(y));
const xLabel = svg.append("text")
.attr("text-anchor", "middle")
.attr("transform", `translate(${width/2}, ${height - 5})`)
.style("font-weight", "bold")
.style("font-size","10px")
.text("Name X")
const yLabel = svg.append("text")
.attr("text-anchor", "middle")
.attr("transform", `translate(${margin.left - 30}, ${height/2}) rotate(-90) `)
.style("font-weight", "bold")
.style("font-size","10px")
.text("Name Y")
return svg.node();
}