Public
Edited
Mar 20, 2023
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
// Defining the dimensions and margins of the chart
const margin = { top: 70, right: 120, bottom: 50, left: 120 };
const width = 1000 - margin.left - margin.right;
const height = 600 - margin.top - margin.bottom;
// Creating the SVG element for the chart
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width + margin.left + margin.right, height + margin.top + margin.bottom])
.attr("width", "100%")
.attr("height", "100%");
// Creating the scales for the X and Y axes
const x = d3.scaleLinear()
.domain([1, 58]).nice()
.range([margin.left, width - margin.right]);
const y = d3.scaleLinear()
.domain([0, 750000000]).nice()
.range([height - margin.bottom, margin.top]);

// Setting up axes
const xAxis = d3.axisBottom(x);
const yAxis = d3.axisLeft(y);

// Adding the X and Y axes to the chart
svg.append("g")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(xAxis)
.append("text")
.attr("x", width / 2)
.attr("y", 40)
.attr("fill", "black")
.attr("text-anchor", "middle")
.text("Rank of the Counties in California in 2021 based on change in GDP from 2020 to 2021");
svg.append("g")
.attr("transform", `translate(${margin.left},0)`)
.call(yAxis)
.append("text")
.attr("x", -150)
.attr("y", -margin.left / 1.5)
.attr("fill", "black")
.attr("transform", "rotate(-90)")
.text("Real GDP of each County in California");
// Adding the data points to the chart as circles
svg.append("g")
.attr("fill", "steelblue")
.selectAll("circle")
.data(Scatterplot_Data)
.join("circle")
.attr("cx", d => x(d.Rank_When_Percent_Change_from_2020_to_2021))
.attr("cy", d => y(d.Real_GDP))
.attr("r", 3);
// Adding the title to the chart
svg.append("text")
.attr("class", "chart-title")
.attr("x", width / 11)
.attr("y", margin.top / 1.5)
.text("With increased GDP the change in GDP from 2020 to 2021 in California seems to decrease.");
return svg.node();
}
Insert cell
Insert cell
viewof Bar_Data =
RealGDP
.filter (d => op.includes(['Alaska', 'Texas', 'California', 'Montana', 'New Mexico'], d.State) && op.equal(d.Year, 2021) && !op.includes(d.Real_GDP, 'NA'))
.view()
Insert cell
Insert cell
viewof Bar_Data_1 =
Bar_Data
.groupby('State')
.rollup({
Real_GDP: d => op.sum(d.Real_GDP)
})
.orderby(aq.desc('Real_GDP'))
.view()
Insert cell
Insert cell
{
const totalWidth = 904
const totalHeight = 400
const margin = ({top: 40, bottom: 45, left: 75, right: 10})
const visWidth = totalWidth - margin.left - margin.right
const visHeight = totalHeight - margin.top - margin.bottom
const format = d3.format('~s')
// set up outer svg container
const svg = d3.create('svg')
.attr('width', totalWidth).attr('height', totalHeight);

// set up scales
const x = d3.scaleLinear()
.domain([0, d3.max(Bar_Data_1, d => d.Real_GDP)]).nice()
.range([0, visWidth]);
const y = d3.scaleBand()
.domain(Bar_Data_1.objects().map(d => d.State))
.range([0, visHeight])
.padding(0.2);

// set up svg group for chart
const g = svg.append("g")
.attr('transform', `translate(${margin.left}, ${margin.top})`);
// NEW: set up axes
const xAxis = d3.axisBottom(x).tickFormat(format);
const yAxis = d3.axisLeft(y);

// set up y-axis and label (no label)
g.append('g').call(yAxis);

// set up x-axis and label
g.append('g')
.attr('transform', `translate(0, ${visHeight})`)
.call(xAxis)
.append('text')
.attr('fill', 'black')
.attr('x', visWidth / 2)
.attr('y', 40)
.text("Real GDP of the States in the U.S. for the Year 2021");
const colorScale = d3.scaleOrdinal()
.domain(Bar_Data_1.objects().map(d => d.State))
.range(d3.schemeCategory10);

// draw mark for each element in data
g.selectAll('rect')
.data(Bar_Data_1)
.join('rect')
.attr('x', 0)
.attr('y', d => y(d.State))
.attr('width', d => x(d.Real_GDP))
.attr('height', y.bandwidth())
.attr('fill', d => colorScale(d.State));

svg.append("text")
.attr("x", (width / 2))
.attr("y", margin.top / 1.25)
.attr("text-anchor", "middle")
.style("font-size", "20px")
.text("California has the highest GDP among the top 5 biggest states in the U.S.");
return svg.node();
}
Insert cell
Insert cell
Insert cell
{
const totalWidth = 878
const totalHeight = 500
const margin = ({top: 30, bottom: 40, left: 40, right: 30})
const visWidth = totalWidth - margin.left - margin.right
const visHeight = totalHeight - margin.top - margin.bottom
// set up outer svg container
const svg = d3.create('svg')
.attr('width', totalWidth).attr('height', totalHeight);

// set up scales
const x = d3.scaleBand()
.domain(Unemployement_Suicide_Rates.objects().map(d => d.Year))
.range([0, visWidth]);
const y = d3.scaleLinear()
.domain([0, d3.max(Unemployement_Suicide_Rates, d => d.UR_16to24)]).nice()
.range([visHeight, 0]);

// NEW: set up path generator
const line = d3.line()
.x(d => x(d.Year))
.y(d => y(d.UR_16to24));

// set up svg group for the chart
const g = svg.append("g")
.attr('transform', `translate(${margin.left}, ${margin.top})`);

// set up axes
const xAxis = d3.axisBottom(x).ticks(10);
const yAxis = d3.axisLeft(y);

// configure x-axis and label
g.append('g')
.attr('transform', `translate(0, ${visHeight})`)
.call(xAxis);

// configure y-axis and label
g.append('g').call(yAxis)
.append('text')
.attr('fill', 'black')
.attr('text-anchor', 'start')
.attr('dominant-baseline', 'hanging')
.attr('font-weight', 'bold')
.attr('y', -margin.top + 5)
.attr('x', visHeight/2)
.attr("transform", "rotate(-90)")
.text('Rates');

svg.append("text")
.attr("class", "axis-label")
.attr("x", -240)
.attr("y", 15)
.attr("text-anchor", "middle")
.attr("transform", "rotate(-90)")
.text("Unemployment for the age group 16-24");
// add the x-axis label
svg.append("text")
.attr("class", "axis-label")
.attr("x", visWidth / 2)
.attr("y", visHeight + margin.bottom + 30)
.attr("text-anchor", "middle")
.text("Year");

// draw mark for each element in data
// SINGLE LINE CHART: only drawing 1 line, so can append without doing select/data/join
g.append('path')
.attr('stroke', 'steelblue')
.attr('stroke-width', 2)
.attr('fill', 'none')
.attr('d', line(Unemployement_Suicide_Rates)); // NEW: specify the path generator

return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
const totalWidth = 878
const totalHeight = 500
const margin = ({top: 30, bottom: 40, left: 40, right: 30})
const visWidth = totalWidth - margin.left - margin.right
const visHeight = totalHeight - margin.top - margin.bottom
// set up outer svg container
const svg = d3.create('svg')
.attr('width', totalWidth).attr('height', totalHeight);

// set up scales
const x = d3.scaleBand()
.domain(Unemployement_Suicide_Rates.objects().map(d => d.Year))
.range([0, visWidth]);
const y = d3.scaleLinear()
.domain(domains.y).nice()
.range([visHeight, 0]);

const color = d3.scaleOrdinal()
.domain(domains.groups)
.range(d3.schemeTableau10);

// set up path generator
const line = d3.line()
.x(d => x(d.Year))
.y(d => y(d.Rate));
// set up svg group for chart
const g = svg.append("g")
.attr('transform', `translate(${margin.left}, ${margin.top})`);

// set up axes
const xAxis = d3.axisBottom(x).ticks(10);
const yAxis = d3.axisLeft(y);

// configure x-axis and label
g.append('g')
.attr('transform', `translate(0, ${visHeight})`)
.call(xAxis);

// configure y-axis and label
g.append('g').call(yAxis)
.append('text')
.attr('fill', 'black')
.attr('text-anchor', 'start')
.attr('dominant-baseline', 'hanging')
.attr('font-weight', 'bold')
.attr('y', -margin.top + 5)
.attr('x', visHeight/2)
.attr("transform", "rotate(-90)")
.text('Rates');

svg.append("text")
.attr("class", "axis-label")
.attr("x", -240)
.attr("y", 15)
.attr("text-anchor", "middle")
.attr("transform", "rotate(-90)")
.text("Unemployment and Suicide Rates for 16-24 and 45-64");
// add the x-axis label
svg.append("text")
.attr("class", "axis-label")
.attr("x", visWidth / 2)
.attr("y", visHeight + margin.bottom + 30)
.attr("text-anchor", "middle")
.text("Year");

// draw mark for each element in data
g.append("g")
.attr("fill", "none")
.attr("stroke-width", 1.5)
.selectAll("path")
.data(linedata)
.join("path")
.attr("d", d => line(d.values))
.attr('stroke', d => color(d.Population_Group));
return svg.node();
}
Insert cell
Insert cell
Insert cell
{
const totalWidth = 878
const totalHeight = 500
const margin = ({top: 30, bottom: 40, left: 50, right: 30})
const visWidth = totalWidth - margin.left - margin.right
const visHeight = totalHeight - margin.top - margin.bottom
// set up outer svg container
const svg = d3.create('svg')
.attr('width', totalWidth).attr('height', totalHeight);
const x = d3.scaleLinear()
.domain(d3.extent(area_data, d => d.Year))
.range([0, visWidth]);
const y = d3.scaleLinear()
.domain([0, d3.max(area_data, d => d.Rate)])
.range([visHeight, 0]);
const xAxis = g => g
.attr("transform", `translate(50, ${visHeight})`)
.call(d3.axisBottom(x).ticks(area_data.length).tickFormat(d3.format("d")))
.style("font-size", "14px");
const yAxis = g => g
.attr("transform", `translate(${margin.left}, 0)`)
.call(d3.axisLeft(y))
.style("font-size", "14px");
const areaSR = d3.area()
.x(d => x(d.Year))
.y0(visHeight)
.y1(d => y(d.Rate));
const lineUR = d3.line()
.x(d => x(d.Year))
.y(d => y(d.Rate));
const g = svg.append("g")
.attr('transform', `translate(${margin.left}, ${margin.top})`);
svg.append("path")
.datum(area_data.filter(d => d.Population_Group === "SR_16to24"))
.attr("fill", "steelblue")
.attr("opacity", 0.3)
.attr("d", areaSR)
.attr("transform", `translate(${margin.left}, 0)`);
svg.append("path")
.datum(area_data.filter(d => d.Population_Group === "UR_16to24"))
.attr("fill", "none")
.attr("stroke", "red")
.attr("stroke-width", 2)
.attr("d", lineUR)
.attr("transform", `translate(${margin.left}, 0)`);
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);


svg.append("text")
.attr("class", "axis-label")
.attr("x", -220)
.attr("y", 15)
.attr("text-anchor", "middle")
.attr("transform", "rotate(-90)")
.text("Unemployment and Suicide Rates for 16-24");
// add the x-axis label
svg.append("text")
.attr("class", "axis-label")
.attr("x", visWidth / 2)
.attr("y", visHeight + margin.bottom + 20)
.attr("text-anchor", "middle")
.text("Year");

return svg.node();
}
Insert cell
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