{
const width = 1000;
const height = 1000;
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height);
const bg = svg
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", height)
.attr("fill", "#121212");
const plot = svg
.append("rect")
.attr("x", 150)
.attr("y", 150)
.attr("width", 700)
.attr("height", 700)
.attr("fill", "none")
.attr("stroke", "#dedede")
.attr("stroke-width", "1px")
.attr("stroke-opacity", "0.5");
for (let i = 250; i < 850; i = i + 100) {
const verticalPlotLines = svg
.append("line")
.attr("x1", i)
.attr("y1", 150)
.attr("x2", i)
.attr("y2", 850)
.attr("stroke", "#dedede")
.attr("stroke-width", "1px")
.attr("stroke-opacity", "0.2");
}
for (let i = 250; i < 850; i = i + 100) {
const horizontalPlotLines = svg
.append("line")
.attr("x1", 150)
.attr("y1", i)
.attr("x2", 850)
.attr("y2", i)
.attr("stroke", "#dedede")
.attr("stroke-width", "1px")
.attr("stroke-opacity", "0.2");
}
svg
.append("text")
.attr("x", width - 200)
.attr("y", height - 100)
.style("font-family", "Helvetica")
.style("font-size", 16)
.style("text-anchor", "middle")
.style("fill", "white")
.text("Spanish-speaking population");
svg
.append("text")
.attr("x", 200)
.attr("y", 100)
.style("font-family", "Helvetica")
.style("font-size", 16)
.style("text-anchor", "middle")
.style("fill", "white")
.text("Gujarati-speaking population");
const censusData = [];
for (let i = 1; i < languageData.length; i++) {
const state = languageData[i];
censusData.push({
name: state[0],
totalPopulation: parseInt(state[1]),
gujarati: state[3] == null ? 0 : parseInt(state[2]),
gujaratiPercent: state[3] == null ? 0 : parseInt(state[2]) / state[1],
spanish: state[3] == null ? 0 : parseInt(state[3]),
spanishPercent: state[3] == null ? 0 : parseInt(state[3]) / state[1],
fipsCode: state[4]
});
}
const gujMin = d3.min(censusData, (d) => d.gujaratiPercent);
const gujMax = d3.max(censusData, (d) => d.gujaratiPercent);
const spanishMin = d3.min(censusData, (d) => d.spanishPercent);
const spanishMax = d3.max(censusData, (d) => d.spanishPercent);
const gujScale = d3.scaleLinear().domain([gujMin, gujMax]).range([150, 850]);
const spanishScale = d3
.scaleLinear()
.domain([spanishMin, spanishMax])
.range([150, 850]);
const populationToParameter = d3
.scaleLinear()
.domain(d3.extent(censusData, (d) => d.spanishPercent))
.range([0, 1]);
for (let i = 0; i < censusData.length; i++) {
const xPosition = spanishScale(censusData[i].spanishPercent);
const yPosition = height - gujScale(censusData[i].gujaratiPercent);
svg
.append("circle")
.attr("cx", xPosition)
.attr("cy", yPosition)
.attr("r", 8)
.attr(
"fill",
d3.interpolateViridis(
populationToParameter(censusData[i].spanishPercent)
)
);
svg
.append("text")
.attr("x", xPosition)
.attr("y", yPosition - 20)
.style("font-family", "courier")
.style("font-size", 10)
.style("text-anchor", "middle")
.style("fill", "white")
.text(censusData[i].name);
}
return svg.node();
}