Skip to content

Instantly share code, notes, and snippets.

@putnik
Forked from d3noob/data-3.csv
Last active February 14, 2018 23:40
Show Gist options
  • Save putnik/a862f9923cecb49ca0bef04ea8f2bfdb to your computer and use it in GitHub Desktop.
Save putnik/a862f9923cecb49ca0bef04ea8f2bfdb to your computer and use it in GitHub Desktop.
v4 curve interpolation comparison

This bl.ock demonstrates the range of interpolation curves available in v4 of d3.js.

You can click on any of the legend labels to toggle visibility of the lines.

Details of the curve can be found on the D3 wiki.

This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 4 of d3.js.

date close
1907-01-01 51815
2011-01-01 310956
2017-01-01 269022
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
.line {
fill: none;
stroke: steelblue;
stroke-width: 2px;
}
body { font: 12px Arial;}
.legend {
font-size: 16px;
font-weight: bold;
text-anchor: left;
}
</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 graph
var margin = {top: 20, right: 150, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 470 - margin.top - margin.bottom;
// array of curve functions and tites
var curveArray = [
{"d3Curve":d3.curveLinear,"curveTitle":"curveLinear"},
{"d3Curve":d3.curveBasis,"curveTitle":"curveBasis"},
{"d3Curve":d3.curveCardinal,"curveTitle":"curveCardinal"},
{"d3Curve":d3.curveMonotoneX,"curveTitle":"curveMonotoneX"},
{"d3Curve":d3.curveCatmullRom,"curveTitle":"curveCatmullRom"}
];
// parse the date / time
var parseTime = d3.timeParse("%Y-%m-%d");
// set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
// define the line
var valueline = d3.line()
.curve(d3.curveCatmullRomOpen)
.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-3.csv", function(error, data) {
if (error) throw error;
// format the data
data.forEach(function(d) {
d.date = parseTime(d.date);
d.close = +d.close;
});
// set the colour scale
var color = d3.scaleOrdinal(d3.schemeCategory10);
curveArray.forEach(function(daCurve,i) {
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain(d3.extent(data, function(d) { return d.close; }));
// Add the paths with different curves.
svg.append("path")
.datum(data)
.attr("class", "line")
.style("stroke", function() { // Add the colours dynamically
return daCurve.color = color(daCurve.curveTitle); })
.attr("id", 'tag'+i) // assign ID
.attr("d", d3.line()
.curve(daCurve.d3Curve)
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); })
);
// Add the Legend
svg.append("text")
.attr("x", width + 5) // space legend
.attr("y", margin.top + 20 + (i * 20))
.attr("class", "legend") // style the legend
.style("fill", function() { // Add the colours dynamically
return daCurve.color = color(daCurve.curveTitle); })
.on("click", function(){
// Determine if current line is visible
var active = daCurve.active ? false : true,
newOpacity = active ? 0 : 1;
// Hide or show the elements based on the ID
d3.select("#tag"+i)
.transition().duration(100)
.style("opacity", newOpacity);
// Update whether or not the elements are active
daCurve.active = active;
})
.text(daCurve.curveTitle);
});
// Add the scatterplot
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 4)
.attr("cx", function(d) { return x(d.date); })
.attr("cy", function(d) { return y(d.close); });
// Add the X Axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Add the Y Axis
svg.append("g")
.attr("class", "axis")
.call(d3.axisLeft(y));
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment