New Year's Resolution for 2017: Make a D3 Block a day to teach myself D3. This is Number 2. This example is taken from Malcolm Maclean's D3.js Tips and Tricks V4. This example shamelessly copies one of his examples and modifies the content to something related to education.
xxxxxxxxxx
<meta charset="utf-8">
<head>
<title>D3 Block-a-Day: Day 2, January 2, 2017</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<script src="https://d3js.org/d3.v4.min.js"></script> <!-- Load the d3.js library -->
<style> /* set the CSS */
body {
font: 20px Helvetica Neue;
}
.line {
fill: none;
stroke-linecap: "round";
stroke-dasharray: 10,5;
stroke: darkgrey;
stroke-width: 2px;
}
.xaxis {
font: 12px Helvetica Neue;
}
.yaxis {
font: 14px Helvetica Neue;
}
</style>
</head>
<body>
<script>
// set the dimensions and margins of the graph
var margin = {top: 20, right: 20, bottom: 50, left: 70},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// parse the date / time
var parseTime = d3.timeParse("%d-%b-%y");
// set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
// define the line
var valueline = d3.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });
// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var 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 data
d3.csv("data.csv", function(error, data) {
if (error) throw error;
// format the data
data.forEach(function(d) {
d.date = parseTime(d.date);
d.close = +d.close;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.close; })]);
// Add the valueline path.
svg.append("path")
.data([data])
.attr("class", "line")
.attr("d", valueline);
// Add the x Axis
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).ticks(5))
.attr("class", "xaxis");
// text label for the x axis
svg.append("text")
.attr("transform",
"translate(" + (width*0.1) + " ," +
(height + margin.top + 30) + ")")
.style("text-anchor", "middle")
.style("font-family", "Helvetica Neue")
.text("Date");
// Add the y Axis
svg.append("g")
.call(d3.axisLeft(y))
.style("font-family", "Helvetica Neue")
.attr("class", "yaxis");
// text label for the y axis
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x", - 0.75*height)
.attr("dy", "1em")
.style("text-anchor", "middle")
.style("font-family", "Helvetica Neue")
.text("Scale Score");
});
</script>
</body>
https://d3js.org/d3.v4.min.js