Published
Edited
Sep 21, 2021
Insert cell
# ScatterPlot Challenge
Insert cell
censusData = await d3.json(
"https://api.census.gov/data/2019/acs/acs1?get=NAME,B01001_001E&for=state:*"
)
Insert cell
//remove first row for census
states = {
const cleanedStatesData = [];

for (let i = 1; i < censusData.length; i++) {
const currentState = censusData[i];
cleanedStatesData.push({
name: currentState[0],
population: parseInt(currentState[1]),
fipsCode: currentState[2]
});
}
return cleanedStatesData;
}
Insert cell
languageData = await d3.json(
"https://api.census.gov/data/2019/acs/acs1?get=NAME,B01001_001E,B16001_075E,B16001_081E&for=state:*"
)
Insert cell
//remove first row for language
//parseInt() prevents non-integers
languageStates = {
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],
korean: state[3] == null ? 0 : parseInt(state[3]),
koreanPercent: state[3] == null ? 0 : parseInt(state[3]) / state[1],
fipsCode: state[4]
});
}
return data;
}
Insert cell
populationScatterPlot= {
// set the dimensions and margins of the graph
const margin = {top: 10, right: 40, bottom: 30, left: 30},
width = 1000 - margin.left - margin.right,
height = 1000 - margin.top - margin.bottom;

//create SVG artboard
const svg = d3.create("svg").attr("width", width).attr("height", height);

//background color
const background = svg
.append("rect")
.attr("width", width)
.attr("height", height)
.attr("fill", "#EAE6EB");

//add korean and Chinese population into language states data set
const koreanPopulation = [];
const chinesePopulation = [];

for (let i = 0; i < languageStates.length; i ++){
koreanPopulation.push(languageStates[i].korean);
chinesePopulation.push(languageStates[i].chinese);
}

//extract the min and the max of the korean population
const koreanExtent = d3.extent(koreanPopulation);

//create scale to convert the korean population to pixels
const koreanScale = d3.scaleLinear().domain(koreanExtent).range([200, 800]);

//extract the min and the max of the chinese population
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-speaking People")
.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-speaking People")
.style("font-size", "17px")
.style("font-weight", "500");

//title for scatter plot
const title = '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', 300)
.attr('fill', "#4B3869")
.text("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 population as input into the appropriate scale function
for (let i = 0; i < languageStates.length; i++) {
svg.append('circle')
.attr('cy', chineseScale(languageStates[i].chinese))
.attr('cx', koreanScale(languageStates[i].korean))
.attr('r', 5)
.attr('fill', colors(d3.randomUniform()(200 / 15)));
svg.append("text")
.attr("y",chineseScale(languageStates[i].chinese))
.attr("x", koreanScale(languageStates[i].korean))
.style("font-size", "15px")
.style("font-weight", "550")
.style('font-family', '"Open Sans", sans-serif')
.style("fill", "#4B3869")
.text(languageStates[i].name);
}


//show visualization in Observable
return svg.node();

}


Insert cell
ScatterPlot= {

// set the dimensions and margins of the graph
const margin = {top: 10, right: 40, bottom: 30, left: 30},
width = 1000 - margin.left - margin.right,
height = 1000 - margin.top - margin.bottom;

//create SVG artboard
const svg = d3.create("svg").attr("width", width).attr("height", height);

//background color
const background = svg
.append("rect")
.attr("width", width)
.attr("height", height)
.attr("fill", "#EAE6EB");

//add korean and chinese percentage into language states data set
const koreanPopulation = [];
const chinesePopulation = [];

for (let i = 0; i < languageStates.length; i ++){
koreanPopulation.push(languageStates[i].koreanPercent);
chinesePopulation.push(languageStates[i].chinesePercent);
}

//extract the min and the max of the korean population
const koreanExtent = d3.extent(koreanPopulation);

//create scale to convert the korean population to pixels
const koreanScale = d3.scaleLinear().domain(koreanExtent).range([200, 800]);

//extract the min and the max of the chinese population
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();

}


Insert cell
function gridData() {
var data = new Array();
var xpos = 1; //starting xpos and ypos at 1 so the stroke will show when we make the grid below
var ypos = 1;
var width = 50;
var height = 50;

// iterate for rows
for (var row = 0; row < 10; row++) {
data.push( new Array() );

// iterate for cells/columns inside rows
for (var column = 0; column < 10; column++) {
data[row].push({
x: xpos,
y: ypos,
width: width,
height: height
})
// increment the x position. I.e. move it over by 50 (width variable)
xpos += width;
}
// reset the x position after a row is complete
xpos = 1;
// increment the y position for the next row. Move it down 50 (height variable)
ypos += height;
}
return data;
}

Insert cell

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.
Learn more