ScatterPlot= {
const margin = {top: 10, right: 40, bottom: 30, left: 30},
width = 1000 - margin.left - margin.right,
height = 1000 - margin.top - margin.bottom;
const svg = d3.create("svg").attr("width", width).attr("height", height);
const background = svg
.append("rect")
.attr("width", width)
.attr("height", height)
.attr("fill", "#EAE6EB");
const koreanPopulation = [];
const chinesePopulation = [];
for (let i = 0; i < languageStates.length; i ++){
koreanPopulation.push(languageStates[i].koreanPercent);
chinesePopulation.push(languageStates[i].chinesePercent);
}
const koreanExtent = d3.extent(koreanPopulation);
const koreanScale = d3.scaleLinear().domain(koreanExtent).range([200, 800]);
const chineseExtent = d3.extent(chinesePopulation);
//create scale to convert the chinese population to pixels
const chineseScale = d3.scaleLinear().domain(chineseExtent).range([800, 200]);
//x-axis label
const xAxisG =svg
.append("g")
.attr("transform", "translate(0,800)") // This controls the vertical position of the Axis
.call(d3.axisBottom(koreanScale).tickFormat("").tickSizeOuter(0));
xAxisG.append('text')
.attr('class', 'axis-label')
.attr('y', 50)
.attr('x', 700)
.attr('fill', '#4B3869')
.text("Korean Percentage")
.style("font-size", "17px")
.style("font-weight", "500");
//y-axis label
const yAxisG =svg
.append("g")
.attr("transform", "translate(200,0)") // This controls the vertical position of the Axis
.call(d3.axisLeft(chineseScale).tickFormat("").tickSizeOuter(0));
yAxisG.append('text')
.attr('class', 'axis-label')
.attr('y',-50)
.attr('x', -230)
.attr('fill', '#4B3869')
.attr('transform', `rotate(-90)`)
.text("Chinese Percentage")
.style("font-size", "17px")
.style("font-weight", "500");
//title for scatter plot
const title = 'Percentage of Population that Speaks Korean Compared to Chinese';
const titleG = svg
.append("g").attr("transform", "translate(0,850)")
titleG.append('text')
.attr('class', 'title')
.attr('y', -750)
.attr('x', 230)
.attr('fill', "#4B3869")
.text("Percentage of Population that Speaks Korean Compared to Chinese")
.style('font-family', '"Open Sans", sans-serif')
.style("font-weight", "540");
//ramdomize the color palette
var colors = d3.interpolate("#553C8B", "#9EA9F0", "#CCC1FF", "#FFEAFE");
//using linear scale function to scale down
//using Chinese and korean percentage as input into the appropriate scale function
for (let i = 0; i < languageStates.length; i++) {
svg.append('circle')
.attr('cy', chineseScale(languageStates[i].chinesePercent))
.attr('cx', koreanScale(languageStates[i].koreanPercent))
.attr('r', 5)
.attr('fill', colors(d3.randomUniform()(200 / 15)));
svg.append("text")
.attr("y",chineseScale(languageStates[i].chinesePercent))
.attr("x", koreanScale(languageStates[i].koreanPercent))
.style("font-size", "15px")
.style("font-weight", "500")
.style('font-family', '"Open Sans", sans-serif')
.style("fill", "#4B3869")
.text(languageStates[i].name);
}
//show visualization in Observable
return svg.node();
}