É fácil observar uma alta correlação, já que se tratam variáveis completamente interligadas, o que demonstra uma certa "acurácia" nas projeções feitas para a todos os países. Quanto à outliers é interessante ver o valor do país Afeganistão, que se destaca em relação aos outros, sendo bem distante, possuindo o valor de 7.53 e 7.71 para as variáveis selecionadas.

// aqui eu dei uma selecionada nos dados pq se colocasse tudo ficava ilegível

const margin = { top: 50, right: 30, bottom: 70, left: 150 };

const width = 600 - margin.left - margin.right;

const height = 400 - margin.top - margin.bottom;

const svg = d3

.create("svg")

.attr("width", width + margin.left + margin.right)

.attr("height", height + margin.top + margin.bottom);

const g = svg

.append("g")

.attr("transform", `translate(${margin.left},${margin.top})`);

const x = d3

.scaleLinear()

.domain([0, d3.max(dataToPlot, d => +d.fertility) || 1])

.range([0, width]);

const y = d3

.scaleBand()

.domain(dataToPlot.map(d => d.country))

.range([0, height])

.padding(0.3);

//criando as barras

g

.selectAll(".bar")

.data(dataToPlot)

.enter()

.append("rect")

.attr("class", "bar")

.attr("x", 0)

.attr("y", d => y(d.country))

.attr("width", d => x(+d.fertility))

.attr("height", y.bandwidth())

.attr("fill", "steelblue");

g

.append("g")

.attr("transform", `translate(0,${height})`)

.call(d3.axisBottom(x));

g

.append("g")

.call(d3.axisLeft(y))

.selectAll("text")

.style("text-anchor", "end")

.attr("dx", "-0.5em")

.attr("dy", "0.15em");

// colocando os títulos e legendas dos eixos

svg

.append("text")

.attr("x", (width + margin.left + margin.right) / 2)

.attr("y", margin.top / 2)

.attr("text-anchor", "middle")

.style("font-size", "16px")

.style("font-weight", "bold")

.text("Taxa de Fertilidade por País (25 Maiores no 2000)");

svg

.append("text")

.attr("x", (width + margin.left + margin.right) / 2)

.attr("y", height + margin.top + margin.bottom - 10)

.attr("text-anchor", "middle")

.style("font-size", "12px")

.text("Taxa de Fertilidade");

svg

.append("text")

.attr("x", margin.left / 2)

.attr("y", height / 2 + margin.top)

.attr("text-anchor", "middle")

.style("font-size", "12px")

.attr("transform", `rotate(-90, ${margin.left / 2}, ${height / 2 + margin.top})`)

.text("País");

return svg.node();

const margin = { top: 50, right: 30, bottom: 70, left: 150 };

const width = 600 - margin.left - margin.right;

const height = 400 - margin.top - margin.bottom;

const svg = d3

.create("svg")

.attr("width", width + margin.left + margin.right)

.attr("height", height + margin.top + margin.bottom);

const g = svg

.append("g")

.attr("transform", `translate(${margin.left},${margin.top})`);

const x = d3

.scaleLinear()

.domain([0, d3.max(countries, d => +d.fertility) || 1])

.nice() // arrendonda valores

.range([0, width]);

const y = d3

.scaleLinear()

.domain([0, d3.max(countries, d => +d.p_fertility) || 1])

.nice()

.range([height, 0]);

// colocando os os pontos

g

.selectAll(".point")

.data(countries)

.enter()

.append("circle")

.attr("class", "point")

.attr("cx", d => x(+d.fertility))

.attr("cy", d => y(+d.p_fertility))

.attr("r", 5) // Raio dos pontos

.attr("fill", "steelblue");

// adicionando os eixos X e Y

g

.append("g")

.attr("transform", `translate(0,${height})`)

.call(d3.axisBottom(x));

g

.append("g")

.call(d3.axisLeft(y))

.selectAll("text")

.style("text-anchor", "end")

.attr("dx", "-0.5em")

.attr("dy", "0.15em");

// colocando títulos e as legendas dos eixos

svg

.append("text")

.attr("x", (width + margin.left + margin.right) / 2)

.attr("y", margin.top / 2)

.attr("text-anchor", "middle")

.style("font-size", "16px")

.style("font-weight", "bold")

.text("Fertilidade vs. Fertilidade Projetada");

svg

.append("text")

.attr("x", (width + margin.left + margin.right) / 2)

.attr("y", height + margin.top + margin.bottom - 10)

.attr("text-anchor", "middle")

.style("font-size", "12px")

.text("Taxa de Fertilidade");

svg

.append("text")

.attr("x", margin.left / 2)

.attr("y", height / 2 + margin.top)

.attr("text-anchor", "middle")

.style("font-size", "12px")

.attr("transform", `rotate(-90, ${margin.left / 2}, ${height / 2 + margin.top})`)

.text("Taxa de Fertilidade Projetada");

return svg.node();