Built with blockbuilder.org
forked from ZoeLeBlanc's block: Line Chart
forked from cmuth001's block: Line Chart-project
xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
.line {
fill: none;
stroke: #000;
stroke-width: 1.5px;
}
</style>
</head>
<svg width="960" height="500">
<body>
<script>
// Feel free to change or delete any of the code you see in this editor!
var data = [];
var svg = d3.select("svg"),
margin = {
top: 20,
right: 20,
bottom: 20,
left: 40
},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom;
var g1 = svg.append("g")
.attr("transform", "translate(" + margin.left + "," +margin.top + ")");
const hpFormatter = d3.format(".1f");
var parseTime = d3.timeParse("%Y"),
dataValue = function (d) { return +d.athletes; }
color = "steelblue";
d3.csv('https://www.cs.odu.edu/~cmuthyal/cs725/project.csv')
.then(function(data) {
console.log(data);
data = data.map(function (d, i) {
d.year = +d.year;
d.athletes = +d.athletes;
console.log(d.athletes);
return { time: d.Year, value: d.athletes };
console.log(value)
});
var x = d3.scaleTime()
.rangeRound([0, width ])
.domain(d3.extent(data, function(d) { return d.time; }));
var y = d3.scaleLinear()
.rangeRound([height, 0])
.domain(d3.extent(data, function(d) { return d.value; }));
var line = d3.line()
.x(function(d) {return x(d.time); })
.y(function(d) { return y(d.value); });
svg.data([data])
.enter()
.append("g");
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 3.5)
.attr("cx", function(d) { return x(d.time); })
.attr("cy", function(d) { return y(d.value); });
var g = d3.selectAll("g")
g.append("path")
.data([data])
.attr("class", "data")
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("stroke-width", 2.5);
g.append("g").attr("class", "axis x").attr("transform", "translate(0,"
+(height - margin.bottom) + ")").call(d3.axisBottom(x).ticks(5))
.select(".domain")
.remove();
g.append("g").attr("class", "axis y")
.append("text")
.attr("fill", "#000")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end")
.text("Data");
g.select("g.axis.y")
.attr("class", "axis y")
.call(d3.axisLeft(y));
g.append("path")
.attr("class", "data");
function transition(path) {
path.transition()
.duration(2000).attrTween("stroke-dasharray", tweenDash);
}
function tweenDash() {
var l = this.getTotalLength(),
i = d3.interpolateString("0," + l, l + "," + l);
return function (t) { return i(t); };
}
g.select("path.data")
.datum(data)
.attr("d", line)
.call(transition);
});
</script>
</body>
https://d3js.org/d3.v5.min.js