-

Hallo!

+

Rennen, Brumm, Brumm!

- Mit Bootstrap sieht alles per Default ein wenig hübscher aus.
Eingerückt wird mit 2 Leerzeichen pro Einrückungsebene.
Charset ist UTF-8.
TODO

+
+

Hier erscheint gleich ein Diagramm.

+
+
+

Hier erscheint gleich ein Test-Diagramm.

diff --git a/js/diagrams.js b/js/diagrams.js index 76db5cf..9776cba 100644 --- a/js/diagrams.js +++ b/js/diagrams.js @@ -1,80 +1,58 @@ "use strict"; -/* - * This may be restructured in the future - code to create diagrams will live here. - */ +// https://bl.ocks.org/mbostock/3884955 +function createLineGraph(containerId, raceData){ -function createTestPieChart(containerId, dataset) { - var width = 1000; var height = 1000; - // Build the basic container for the chart - var svg = d3.select(containerId) - .append("div") - .classed("svg-container", true) - .append("svg") - .attr("preserveAspectRatio", "xMinYMin meet") - .attr("viewBox", "0 0 " + width + " " + height + "") - .classed("svg-content-responsive", true) + var width = 1000; + + // set the dimensions and margins of the graph + var margin = {top: 20, right: 20, bottom: 30, left: 50}, + width = width - margin.left - margin.right, + height = height - margin.top - margin.bottom; + + // set the ranges + var x = d3.scaleLinear().range([0, width]); + var y = d3.scaleLinear().range([height, 0]); + + var allLineData = raceDataToLineData(raceData); + + // defines how the passed in Data, at "svg.append" shall be interpreted + var lineDataDefinition = d3.line() + .x(function(d) { return x(d.lap); }) + .y(function(d) { return y(d.position); }); + + // 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(containerId).append("svg") + .attr("width", width + margin.left + margin.right) + .attr("height", height + margin.top + margin.bottom) .append("g") - .classed("main-group", true) - .attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")"); + .attr("transform", + "translate(" + margin.left + "," + margin.top + ")"); - var arcs = svg.append("g").classed("pie-chart-arcs", true); - var labels = svg.append("g").classed("pie-chart-labels", true); - var lines = svg.append("g").classed("pie-chart-lines", true); + // Scale the range of the data + x.domain([0, raceData.lapTimes.size]); + y.domain([raceData.drivers.length, 1]); - // Preparations are done, now let's build the pie chart - var maxRadius = Math.min(width, height) / 2; - var radius = maxRadius * 0.4; - var color = d3.scaleOrdinal(d3.schemeCategory10); + // Adds all lines + allLineData.forEach((singleLineData) => { + svg.append("path") + .data([singleLineData]) + .attr("class", "line") + .attr("d", lineDataDefinition); + }); - var arc = d3.arc() - .innerRadius(radius*0.4) - .outerRadius(radius); - - var pie = d3.pie() - .sort(function(a, b) { return b.count - a.count }) - .value(function(d) { return d.count; }); - - arcs.selectAll("path") - .data(pie(dataset)) - .enter() - .append("path") - .attr("d", arc) - .attr("fill", function(d, i) { - return color(d.data.label); - }); - - labels.selectAll("text") - .data(pie(dataset)) - .enter() - .append("text") - .attr("dy", ".35em") - .text(function(d) { - console.log(d); - return d.data.label; - }); - - function midAngle(d) { - return d.startAngle + (d.endAngle - d.startAngle) / 2; - } - - lines.selectAll("polyline") - .data(pie(dataset)) - .enter() - .append("polyline") - .transition() - .duration(1000) - .attrTween("points", function(d) { - this._current = this._current || d; - var interpolate = d3.interpolate(this._current, d); - this._current = interpolate(0); - return function(t) { - var d2 = interpolate(t); - var pos = outerArc.centroid(d2); - pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1); - return [arc.centroid(d2), outerArc.centroid(d2), pos]; - }; - }) + // Add the X Axis + svg.append("g") + .attr("transform", "translate(0," + height + ")") + .call(d3.axisBottom(x)); + // Add the Y Axis on both sides + svg.append("g") + .call(d3.axisLeft(y)); + svg.append("g") + .call(d3.axisRight(y)) + .attr("transform", "translate( " + (width) + ", 0 )"); } diff --git a/js/main.js b/js/main.js index 71b0ea0..79d43fb 100644 --- a/js/main.js +++ b/js/main.js @@ -6,6 +6,6 @@ preprocessor.load(function(data) { - createTestPieChart("#testchartbox", queries.getDriversByNationality()); + createLineGraph("#lineGraphBox", processor.getRace(1)); }); diff --git a/js/util.js b/js/util.js index a9b3555..0664f04 100644 --- a/js/util.js +++ b/js/util.js @@ -1,6 +1,6 @@ "use strict"; -/* +/* * This file contains utility functions, data structures and * stuff not related to what this project actually does. */ @@ -34,6 +34,31 @@ var loadingDialog = { var percentage = (this.progressItemsDone / this.progressItems) * 100; if(percentage < 0 || isNaN(percentage)) percentage = 0; if(percentage > 100) percentage = 100; - $(this.id + " .progress-bar").attr("style", "width: " + percentage + "%;"); + $(this.id + " .progress-bar").attr("style", "width: " + percentage + "%;"); }, }; + +//Gets the position of Driver with driverid in specific lap +function getPositionOfDriver(driver, lap, defaultReturn){ + var lapEntryWithDrivId =lap.filter( drivLap => drivLap.driverId == driver.driverId ); + if(lapEntryWithDrivId.length > 0){ + return lapEntryWithDrivId[0].position; + }else{ + return defaultReturn; + } +} + +// transforms the raceData to a format, with which lineDataDefinition can work +function raceDataToLineData(raceData){ + // define the lines + var lineData = []; + raceData.drivers.forEach((driver, drivIn)=>{ + lineData.push(); + var lapsOfDriverInLineDataFormat = []; + raceData.lapTimes.forEach((lap, lapIn) => { + lapsOfDriverInLineDataFormat.push({ 'lap': lapIn, 'position': getPositionOfDriver(driver, lap, raceData.drivers.length)}); + }); + lineData.splice(drivIn, 0, lapsOfDriverInLineDataFormat); + }); + return lineData; +}