ScatterPlot_CNJP = {
//svg variables
const height = 500;
const width = 500;
const margin = 50;
//SVG artboard
const svg = d3.create("svg").attr("width", width).attr("height", height);
//background colors
const background = svg
.append("rect")
.attr("width", width)
.attr("height", height)
.attr("fill", "666666");
//create element for each state
const data = [];
for (let i = 1; i < languageData.length; i++) {
const state = languageData[i];
data.push({
name: state[0],
totalPopulation: parseInt(state[1]),
chinese: state[3] == null ? 0 : parseInt(state[2]),
chinesePercent: state[3] == null ? 0 : parseInt(state[2]) / state[1],
japanese: state[3] == null ? 0 : parseInt(state[3]),
japanesePercent: state[3] == null ? 0 : parseInt(state[3]) / state[1],
fipsCode: state[4]
});
}
//scales to transform data to x_y value
const CNnumber = []
const JPnumber = []
for(let i=0; i<data.length;i++){
const state = data[i]
CNnumber.push(state.chinese)
JPnumber.push(state.japanese)
}
const extentCN = d3.extent(CNnumber);
const extentJP = d3.extent(JPnumber);
const CNx= d3.scaleLinear().domain(extentCN).range([margin, width-margin]);
const JPy = d3.scaleLinear().domain(extentJP).range([height-margin, margin]);
const CNcolor= d3.scaleLinear().domain(extentCN).range([0, 255]);
const JPcolor = d3.scaleLinear().domain(extentJP).range([0, 255]);
//create headline&lable
svg
.append("text")
.attr("x", width/2)
.attr("y", margin / 2)
.attr("fill", "white")
.style("font-family", "courier")
.style("font-size", 10)
.style("text-anchor", "middle")
.text("Population that speaks Chinese compare to Japanese");
svg
.append("text")
.attr("x", width-margin)
.attr("y", height-margin / 2)
.attr("fill", "white")
.style("font-family", "courier")
.style("font-size", 9)
.style("text-anchor", "left")
.text("+Chinese-Speaking people");
svg
.append("text")
.attr("x", margin/2)
.attr("y", margin)
.attr("fill", "white")
.attr("transform","rotate(90)")
.style("font-family", "courier")
.style("font-size", 10)
.style("text-anchor", "left")
.text("+Japanese-Speaking people");
//create guideline
for(let i=0;i<10;i++){
svg
.append("line")
.attr("x1", width-margin)
.attr("y1", margin+i*(height/10))
.attr("x2", margin)
.attr("y2", margin+i*(height/10))
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-width", "0.5");
svg
.append("line")
.attr("x1", margin+i*(width/10))
.attr("y1", height-margin)
.attr("x2", margin+i*(width/10))
.attr("y2", margin)
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-width", "0.5");
}
//loop through all items in dataset
for(let i=0; i<data.length;i++){
svg
.append("circle")
.attr("cx", CNx(data[i].chinese))
.attr("cy", JPy(data[i].japanese))
.attr("r", 5)
.attr("fill", "rgb("+CNcolor(data[i].chinese)+","+JPcolor(data[i].japanese)+",255)")
.attr("stroke", "white")
.attr("stroke-width", "1");
svg
.append("text")
.attr("x", CNx(data[i].chinese)+5)
.attr("y", JPy(data[i].japanese)+2)
.attr("fill", "white")
.style("font-family", "courier")
.style("font-size", 10)
.style("text-anchor", "left")
.text(data[i].name);
}
//show visualization in Observale
return svg.node();
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
