import {Scrubber} from "@mbostock/scrubber"
Education_v2.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
d3 = require('d3@7')
data = FileAttachment("Education_v2.csv").csv()
svg = {
var width = 1000;
var height = 400;
const svg = d3.select(DOM.svg(width, height));
const margin = {top: 20, right: 20, bottom: 50, left: 50};
var width = +svg.attr("width") - margin.left - margin.right;
var height = +svg.attr("height") - margin.top - margin.bottom;
return svg;
}
function parseDate(yearAndMonth) {
const [year, month] = yearAndMonth.toString().split("-").map(Number);
return new Date(year, month - 1); // month - 1 because JavaScript month is 0-indexed
}
chart = {
const height = 600;
const width = 1000;
const margin = { top: 20, right: 20, bottom: 50, left: 50 };
const filteredData = data.filter(d => {
const dataYear = +d.yearAndMonth.split('-')[0];
return dataYear >= year && dataYear <= year + 4;
});
const filteredDataBachelor = filteredData.filter(d => d.education_attainment === "Bachelor's Degree");
const filteredDataHighSchool = filteredData.filter(d => d.education_attainment === "High School Graduates, No College");
const filteredDataAssociateDegree = filteredData.filter(d => d.education_attainment === "Other College or Associate Degree");
const filteredDataLessThanHighSchool = filteredData.filter(d => d.education_attainment === "Less than High School Diploma");
const x = d3.scaleTime()
.domain([parseDate(year + '-01'), parseDate((year + 4) + '-12')])
.range([0, width - margin.left - margin.right]);
// Generate the array of years
const startYear = year;
const endYear = year + 4;
const years = d3.range(startYear, endYear + 1).map(y => new Date(y, 0, 1));
// Modify the xAxis to use specific ticks
const xAxis = d3.axisBottom(x).tickFormat(d3.timeFormat("%Y")).tickValues(years);
console.log("y max"+Math.ceil(d3.max(data, d => d.unemployment_rate)))
const y = d3.scaleLinear()
// .domain([0, Math.ceil(d3.max(data, d => d.unemployment_rate))])
.domain([0, 22])
.range([height - margin.bottom, margin.top]);
const color = d3.scaleOrdinal()
.domain(["Bachelor's Degree","High School Graduates, No College","Other College or Associate Degree","Less than High School Diploma"])
.range(['blue','red','green','grey']);
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const g = svg.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
const line = d3.line()
.x(d => x(parseDate(d => d.yearAndMonth)))
.y(d => y(d => d.unemployment_rate));
// Line for Men
g.append("path")
.datum(filteredDataBachelor)
.attr("fill", "none")
.attr("stroke", color("Bachelor's Degree"))
.attr("stroke-width", 3)
.attr("d", line);
g.append("path")
.datum(filteredDataAssociateDegree)
.attr("fill", "none")
.attr("stroke", color("Other College or Associate Degree"))
.attr("stroke-width", 3)
// .attr("d", line(d => d.unemployment_rate));
.attr("d", line);
g.append("path")
.datum(filteredDataHighSchool)
.attr("fill", "none")
.attr("stroke", color("High School Graduates, No College"))
.attr("stroke-width", 3)
// .attr("d", line(d => d.unemployment_rate));
.attr("d", line);
// Line for Women
g.append("path")
.datum(filteredDataLessThanHighSchool)
.attr("fill", "none")
.attr("stroke", color("Less than High School Diploma"))
.attr("stroke-width", 3)
// .attr("d", line(d => d.unemployment_rate));
.attr("d", line);
// Append Year Label at the bottom
svg.append("text")
.attr("x", width / 2)
.attr("y", height - 40)
.attr("text-anchor", "middle")
.attr("font-size", "100px")
.attr("fill", "#888")
.attr("opacity", 0.3)
.text(year + "-" + (year + 4));
g.append("g")
.attr("transform", `translate(0, ${height - margin.bottom})`)
.call(xAxis);
g.append("g")
.attr("transform", `translate(0,${margin.top})`)
.call(d3.axisLeft(y));
console.log("Filtered Data:", filteredData);
console.log("Bachelor:", filteredDataBachelor);
console.log("Associate:", filteredDataAssociateDegree);
console.log("HighSchool:", filteredDataHighSchool);
console.log("Less than High School:", filteredDataLessThanHighSchool);
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.
