Hochschulprojekte
/
f1vis
0
0
Fork 0
Code Issues Pull Requests Activity

Added Start Positions and Colors

This commit is contained in:
sirsandmann 2017-12-12 21:20:09 +01:00
parent 582e31f82a
commit 8c97d8280f
4 changed files with 40 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
css/main.css
View File

@ -34,6 +34,5 @@ body {
.line {
fill: none;
stroke: steelblue;
stroke-width: 2px;
stroke-width: 4px;
}

5
js/diagrams.js
View File

@ -15,7 +15,7 @@ function createLineGraph(containerId, raceData){
var x = d3.scaleLinear().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
var allLineData = raceDataToLineData(raceData);
var allLineData = transformRaceDataToLineData(raceData);
// defines how the passed in Data, at "svg.append" shall be interpreted
var lineDataDefinition = d3.line()
@ -37,10 +37,11 @@ function createLineGraph(containerId, raceData){
y.domain([raceData.drivers.length, 1]);
// Adds all lines
allLineData.forEach((singleLineData) => {
allLineData.forEach((singleLineData, i) => {
svg.append("path")
.data([singleLineData])
.attr("class", "line")
.attr("stroke", getColorValue(i, allLineData.length) )
.attr("d", lineDataDefinition);
});

11
js/processor.js
View File

@ -25,5 +25,16 @@ var processor = {
getRacesByYear: function(year) {
var races = queries.getRacesByYear(year);
return races.map(race => processor.getRace(race.raceId));
},
//Gets the position of Driver with driverid in specific lap
getPositionOfDriver: function(driver, lap, defaultReturn){
var lapEntryWithDrivId =lap.filter( drivLap => drivLap.driverId == driver.driverId );
if(lapEntryWithDrivId.length > 0){
return lapEntryWithDrivId[0].position;
}else{
return defaultReturn;
}
},
};

34
js/util.js
View File

@ -38,27 +38,37 @@ var loadingDialog = {
},
};
//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){
function transformRaceDataToLineData(raceData){
// define the lines
var lineData = [];
raceData.drivers.forEach((driver, drivIn)=>{
lineData.push();
var lapsOfDriverInLineDataFormat = [];
lapsOfDriverInLineDataFormat.push({'lap': 0, 'position': getPositionOfQualifying(raceData, driver) });
raceData.lapTimes.forEach((lap, lapIn) => {
lapsOfDriverInLineDataFormat.push({ 'lap': lapIn, 'position': getPositionOfDriver(driver, lap, raceData.drivers.length)});
var drivPos = processor.getPositionOfDriver(driver, lap, raceData.drivers.length + 1 );
if( drivPos < raceData.drivers.length + 1 ){
lapsOfDriverInLineDataFormat.push({ 'lap': lapIn, 'position': processor.getPositionOfDriver(driver, lap, raceData.drivers.length + 1 )});
}
});
lineData.splice(drivIn, 0, lapsOfDriverInLineDataFormat);
});
return lineData;
}
function getPositionOfQualifying(raceData, driver){
var qualData = raceData.qualifying.filter( qualData => qualData.driverId == driver.driverId);
return qualData[0].position;
}
function getColorValue(index, all){
var r = 0;
var g = 0;
var b = 0;
var step = 255*3 / all;
var colorValue = index * step;
return "hsl(" + colorValue + ", " + 100 + "%, 35% )";
}