This visualization is a line chart tracking average income across the various levels of maximum attained education.
Data Source: Table 2A of What It's Worth: FIeld of Training and Economic Status, US Census Bureau, Survey of Income and Program Participation, 2008 Panel.
Visualization modified from d3noobs scatterplot example.
Built with blockbuilder.org
xxxxxxxxxx<meta charset="utf-8"><style> /* set the CSS */.line { fill: none; stroke: black; stroke-width: 2px;}</style><body><!-- load the d3.js library --> <script src="https://d3js.org/d3.v4.min.js"></script><script>// set the dimensions and margins of the graphvar margin = {top: 20, right: 20, bottom: 30, left: 60}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom;//color dotsvar color = d3.scaleOrdinal(d3.schemeCategory10); // set the rangesvar x = d3.scaleBand().range([0, width]);var y = d3.scaleLinear().range([height, 0]);// define the linevar valueline = d3.line() .x(function(d) { return x(d.Education); }) .y(function(d) { return y(d.Average); });// append the svg obgect to the body of the page// appends a 'group' element to 'svg'// moves the 'group' element to the top left marginvar svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")");// Get the datad3.csv("Table 2A.csv", function(error, data) { if (error) throw error; // format the data data.forEach(function(d) { d.Education = (d.Education); d.Average = +d.Average; }); // Scale the range of the data x.domain(data.map(function(d) { return d.Education; })); y.domain([0, d3.max(data, function(d) { return d.Average; })]); // Add the valueline path. svg.append("path") .data([data]) .attr("class", "line") .attr("d", valueline); // Add the scatterplot svg.selectAll("dot") .data(data) .enter().append("circle") .attr("r", 4) .attr("cx", function(d) { return x(d.Education); }) .attr("cy", function(d) { return y(d.Average); }) .style("fill", function(d) {return color(d.Education);}); // Add the X Axis svg.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)); // Add the Y Axis svg.append("g") .call(d3.axisLeft(y)) .append("text") .attr("x", 0 - (height / 2)) .attr("y", 15 - margin.left) .attr("dy", "0.32em") .attr("fill", "#000") .attr("font-weight", "bold") .attr("text-anchor", "middle") .attr("transform", "rotate(-90)") .text("Average Income $");});</script></body> https://d3js.org/d3.v4.min.js