A scatter plot showing the average cost of tuition for one year of college over time (adjusted for inflation to 2016 dollars). Data from College Board.
Forked from curran's block: Scatter Plot with Time Axis.
Additional code borrowed from curran's block: Stylized Scatter Plot with Color Legend
forked from seschultz's block: Average Tuition Over Time
forked from seschultz's block: Average Tuition Over Time
xxxxxxxxxx
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.13.0/d3-legend.js"></script>
<title>Tuition Visualization</title>
<style>
body {
margin: 0px;
}
.domain {
display: none;
}
.tick line {
stroke: gray;
}
.tick text{
fill: green;
font-size: 12pt;
font-family: sans-serif;
}
.axis-label{
fill: gray;
font-size: 26pt;
font-family: sans-serif;
}
.legend-label{
fill: gray;
font-size: 20pt;
font-family: sans-serif;
}
.legendCells text{
fill: gray;
font-size: 16pt;
font-family: sans-serif;
}
/* Make the chart container fill the page using CSS. */
#chart {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}
</style>
</head>
<body>
<div id="chart"></div>
<script>
var chartDiv = document.getElementById("chart");
var svg = d3.select(chartDiv).append("svg");
const xValue = d => d.year;
const yValue = d => d.tuition;
const xLabel = 'Year'
const yLabel = 'Tuition in 2016 Dollars';
const colorValue = d => d.type;
const colorLabel = 'Type of School';
const margin = { left: 150, right: 300, top: 20, bottom: 120 };
//const svg = d3.select('svg');
//const width = svg.attr('width');
//const height = svg.attr('height');
//const innerWidth = width - margin.left - margin.right;
//const innerHeight = height - margin.top - margin.bottom;
const g = svg.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`);
const xAxisG = g.append('g')
.attr('transform', `translate(0, ${innerHeight})`);
const yAxisG = g.append('g');
xAxisG.append('text')
.attr('class', 'axis-label')
/*.attr('x', innerWidth / 2)
.attr('y', 100)
.text(xLabel);*/
yAxisG.append('text')
.attr('class', 'axis-label')
/*.attr('x', -innerHeight / 2)
.attr('y', -100)
.attr('transform', `rotate(-90)`)
.style('text-anchor', 'middle')
.text(yLabel);*/
const colorLegendG = g.append('g')
//.attr('transform', `translate(${innerWidth + 60}, 180)`);
const xScale = d3.scaleTime();
const yScale = d3.scaleLinear();
const colorScale = d3.scaleOrdinal()
.range(d3.schemeCategory10);
const xAxis = d3.axisBottom()
.scale(xScale)
.tickPadding(15)
.tickSize(-innerHeight);
const yAxis = d3.axisLeft()
.scale(yScale)
.ticks(5)
.tickPadding(15)
.tickSize(-innerWidth);
colorLegendG.append('text')
.attr('class', 'legend-label')
.attr('x', -30)
.attr('y', -40)
.text(colorLabel);
const colorLegend = d3.legendColor()
.scale(colorScale)
.shape('circle');
var title = g.append('text')
.attr('class', 'subtitle');
var x_label = g.append('text')
.attr('class', 'axis-label');
var y_label = g.append('text')
.attr('class', 'axis-label');
const row = d => {
d.year = new Date(d.year);
d.tuition = +d.tuition;
return d;
};
function redraw(){
var width = chartDiv.clientWidth;
var height = chartDiv.clientHeight;
svg
.attr("width", width)
.attr("height", height);
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
g.attr('transform',`translate(${margin.left},${margin.top+50})`);
xAxisG
.attr('transform', `translate(0, ${innerHeight})`);
colorLegendG
.attr('transform', `translate(${innerWidth - 100}, 50)`);
d3.csv('tuition2.csv', row, data => {
xScale
.domain(d3.extent(data, xValue))
.range([0, innerWidth])
.nice();
yScale
.domain(d3.extent(data, yValue))
.range([innerHeight, 0])
.nice();
g.selectAll('circle').data(data)
.enter().append('circle')
.attr('cx', d => xScale(xValue(d)))
.attr('cy', d => yScale(yValue(d)))
.attr('fill', d => colorScale(colorValue(d)))
.attr('fill-opacity', 0.6)
.attr('r', 8);
xAxisG.call(xAxis);
yAxisG.call(yAxis);
colorLegendG.call(colorLegend)
.selectAll('.cell text')
.attr('dy', '0.1em');
})};
</script>
</body>
</html>
https://d3js.org/d3.v4.min.js
https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.13.0/d3-legend.js