Skip to content

Instantly share code, notes, and snippets.

@gyulalaszlo

gyulalaszlo/index.html

Last active November 25, 2016 11:09
Show Gist options
  • Save gyulalaszlo/b45ebc796414103f1a3ca0c1c9f9ceba to your computer and use it in GitHub Desktop.
Save gyulalaszlo/b45ebc796414103f1a3ca0c1c9f9ceba to your computer and use it in GitHub Desktop.
Download ZIP
D3 training 2016.11.25
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src="https://d3js.org/d3-ease.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-selection.v1.min.js"></script>
<script src="https://d3js.org/d3-timer.v1.min.js"></script>
<script src="https://d3js.org/d3-transition.v1.min.js"></script>
<script src="https://d3js.org/d3-drag.v1.min.js"></script>
<script src="https://d3js.org/d3-zoom.v1.min.js"></script>
<!-- CSV loading -->
<script src="https://d3js.org/d3-dsv.v1.min.js"></script>
<!-- CSV load queueing -->
<script src="https://d3js.org/d3-queue.v3.min.js"></script>
</head>
<body>
<div class="brakes">
<h3>Speed (m/s)</h3>
<svg class='graph' id='graph-speed' width="1120" height="200"></svg>
</div>
<div class="brakes">
<h3>Brakes</h3>
<svg class='graph' id='graph-brakes' width="1120" height="200"></svg>
</div>
<div class="brakes">
<h3>Throttle</h3>
<svg class='graph' id='graph-throttle' width="1120" height="200"></svg>
</div>
<script src="/telemetry2.js" type='text/javascript'></script>
</body>
</html>
Raw
telemetry2.js
function drawLap(data, svgCanvas, color, yDelegate) {
var xScale = d3.scaleLinear()
.domain([0, 1])
.range([0, 1120]);
var yScale = d3.scaleLinear()
.domain([0, 1])
.range([0, 200]);
//This is the accessor function we talked about above
var lineFunction = d3.line()
.x(function(d) { return xScale(d.LapDistPct); })
.y(function(d) { return yScale(yDelegate(d)); });
var lineGraph = svgCanvas.append("path")
.attr("d", lineFunction(data))
.attr("stroke", color)
.attr("stroke-width", 2)
.attr("fill", "none");
}
function drawGraphPair(data1, data2, canvas, simicskaLajos) {
drawLap( data1, canvas, "blue", simicskaLajos);
drawLap( data2, canvas, "red", simicskaLajos);
}
d3.queue()
.defer( d3.csv, "/data/lap0.csv" )
.defer( d3.csv, "/data/lap1.csv" )
.await(function(error, lapData1, lapData2){
if (error) { console.error("ERROR", error, error.stack); }
var lap1 = lapData1.slice(3);
var lap2 = lapData2.slice(3);
var speedCanvas = d3.select("#graph-speed");
var brakesCanvas = d3.select("#graph-brakes");
var throttleCanvas = d3.select("#graph-throttle");
drawGraphPair( lap1, lap2, speedCanvas, function(d) { return d.Speed / 100.0 });
drawGraphPair( lap1, lap2, brakesCanvas, function(d) { return d.Brake });
drawGraphPair( lap1, lap2, throttleCanvas, function(d) { return d.Throttle });
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment