Skip to content

D3 graph of calibrationValues.csv (x-errors only for now) #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
johnboiles wants to merge 2 commits into
base: master
Choose a base branch
from
Open

D3 graph of calibrationValues.csv (x-errors only for now) #6

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
823a9a6
D3 graph of calibrationValues.csv (x-errors only for now)
johnboiles Oct 14, 2018
c2c610e
Use d3 v5
johnboiles Oct 14, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 98 additions & 0 deletions calibrationValuesGraph.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
<!--
D3 calibration graph. Run the following to start a simple python web server in this directory:

python -m SimpleHTTPServer 8888

Now you can open the graph of calibrationValues.csv at

http://localhost:8888/calibrationValuesGraph.html
-->
<!DOCTYPE html>
<meta charset="utf-8">
<style>

.line {
fill: none;
stroke-width: 1.5px;
}

</style>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>

var svg = d3.select("svg"),
margin = {top: 20, right: 80, bottom: 30, left: 50},
width = svg.attr("width") - margin.left - margin.right,
height = svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3.scaleLinear().range([0, width]),
y = d3.scaleLinear().range([height, 0]),
z = d3.scaleSequential(d3.interpolateBrBG);

var line = d3.line()
.curve(d3.curveBasis)
.x(function(d) { return x(d.index); })
.y(function(d) { return y(d.value); });

d3.text("calibrationValues.csv").then(function(text) {
var data = d3.csvParseRows(text).slice(0, 15).map(function(row) {
return row.slice(0,31).map(function(d, i) {
return {
index: i-15,
value: +d
};
});
});

x.domain([-15, 15]);
y.domain([
d3.min(data, function(c) { return d3.min(c, function(d) { return d.value; }); }),
d3.max(data, function(c) { return d3.max(c, function(d) { return d.value; }); })
]);
z.domain(data.map(function(c, i) { return i; }));

g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
.append("text")
.attr("x", 37)
.attr("y", -3)
.attr("fill", "#000")
.text("Column index");


g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("fill", "#000")
.text("Error (mm)");

var graphLine = g.selectAll(".graph-line")
.data(data)
.enter().append("g")
.attr("class", "graph-line");

graphLine.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d); })
.style("stroke", function(d, i) { return z(i/14); });

graphLine.append("text")
.attr("class", "line-label")
.datum(function(d, i) { return {id: i - 7, value: d[d.length - 1].value}; })
.attr("transform", function(d) { return "translate(" + (850 - ((d.id + 7) % 3) * 10) + "," + y(d.value) + ")"; })
.attr("x", 3)
.attr("dy", "0.35em")
.style("font", "10px sans-serif")
.style("stroke", function(d, i) { return z(i/14); })
.text(function(d) { return d.id; });
});

</script>