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

Resolved Merge Conflict

This commit is contained in:
sirsandmann 2017-12-17 23:11:54 +01:00
parent 6713b50716 312aa854ac
commit 4f60b315f1
8 changed files with 84 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
index.html
View File

@ -36,8 +36,7 @@
<main role="main" class="container">
<div class="container">
<div class="content-box">
<form>
<div class="form-group">
<label for="seasonByYearSelector">Wähle ein Jahr aus!</label>
@ -48,26 +47,10 @@
</form>
</div>
<div class="content-box">
<h1>Rennen, Brumm, Brumm!</h1>
<p class="lead">
Eingerückt wird mit 2 Leerzeichen pro Einrückungsebene.<br>
Charset ist UTF-8.<br>
TODO
</p>
</div>
<div class="content-box chart-box">
<p>Hier erscheint gleich ein Diagramm.</p>
<div id="lineGraphBox"></div>
</div>
<div class="content-box chart-box">
<p>Hier erscheint gleich ein Test-Diagramm.</p>
<div id="testchartbox"></div>
</div>
</main><!-- /.container -->

50
js/diagrams.js
View File

@ -2,6 +2,8 @@
// https://bl.ocks.org/mbostock/3884955
function createLineGraph(containerId, raceData){
var linePointSize = 4;
console.log(raceData);
var height = 1000;
@ -10,7 +12,7 @@ function createLineGraph(containerId, raceData){
var amountClickedLines = 0;
// set the dimensions and margins of the graph
var margin = {top: 20, right: 20, bottom: 30, left: 50},
var margin = {top: 50, right: 100, bottom: 50, left: 100},
width = width - margin.left - margin.right,
height = height - margin.top - margin.bottom;
@ -42,13 +44,10 @@ function createLineGraph(containerId, raceData){
// Adds all lines
enhancedLapData.forEach((driverLapData, driverIndex) => {
//console.log(driverLapData);
console.log(driverLapData);
svg.append("path")
.data([driverLapData.laps])
.attr("class", "line")
.attr("data-line", driverLapData.driver.driverId)// custom data to Specify the line
.attr("data-highlightable", 1)
.attr("data-highlighted", 0)
.attr("stroke", getColorValue(driverIndex, enhancedLapData.length) )
.attr("d", lineDataDefinition);
@ -56,15 +55,11 @@ function createLineGraph(containerId, raceData){
svg.selectAll(".linepoint")
.data(driverLapData.laps)
.enter().append("circle") // Uses the enter().append() method
.attr("class", "dot linedot") // Assign a class for styling
.attr("data-line", driverLapData.driver.driverId)
.attr("data-highlightable", 0)
.attr("data-highlighted", 0)
.attr("class", "dot") // Assign a class for styling
.attr("fill", getColorValue(driverIndex, enhancedLapData.length))
.attr("cx", function(d, i) {return x(d.lap) })
.attr("cy", function(d, i) { return y(d.position) })
.attr("r", linePointSize)
.on("click", handleClickOnPoint)
.on("mouseover", handleMouseOverLinePoint)
.on("mouseout", handleMouseOutLinePoint)
.style("opacity", 0);
@ -75,15 +70,11 @@ function createLineGraph(containerId, raceData){
svg.selectAll(".pitstoppoint")
.data([singleLap])
.enter().append("circle") // Uses the enter().append() method
.attr("class", "dot pitstopdot") // Assign a class for styling
.attr("data-line", driverLapData.driver.driverId)
.attr("data-highlightable", 1)
.attr("data-highlighted", 0)
.attr("class", "dot") // Assign a class for styling
.attr("fill", getColorValue(driverIndex, enhancedLapData.length))
.attr("cx", function(d, i) {return x(d.lap) })
.attr("cy", function(d, i) { return y(d.position) })
.attr("r", linePointSize * 1.2)
.on("click", handleClickOnPoint)
.on("mouseover", handleMouseOverLinePoint)
.on("mouseout", handleMouseOutLinePoint);
}
@ -103,35 +94,6 @@ function createLineGraph(containerId, raceData){
.call(d3.axisRight(y))
.attr("transform", "translate( " + (width) + ", 0 )");
function handleClickOnPoint(d,i){
console.log(this);
//select elements that are highlightable but are not highlighted
d3.selectAll("[data-highlightable='" + 1 +"'][data-highlighted='" + 0 +"']")
.style("opacity", 0.3);
// if clicked on already highlighted line, remove highlight
if(this.getAttribute("data-highlighted") == 1){
d3.selectAll("[data-line='" + d.driverId +"'][data-highlightable='" + 1 +"']")
.attr("data-highlighted", 0)
.style("opacity", 0.3);
}else{
//select elements that belong to line and are highlightable
d3.selectAll("[data-line='" + d.driverId +"'][data-highlightable='" + 1 +"']")
.attr("data-highlighted", 1)
.style("opacity", 1);
}
// if no element highlighted, then everything normal again
var highlightedElements = d3.selectAll("[data-highlightable='" + 1 +"'][data-highlighted='" + 1 +"']");
console.log(highlightedElements);
if(highlightedElements.size() == 0){
//select elements that are highlightable but are not highlighted
d3.selectAll("[data-highlightable='" + 1 +"'][data-highlighted='" + 0 +"']")
.style("opacity", 1);
}
}
function handleMouseOverLinePoint(d, i) {
// Add interactivity
// Use D3 to select element, change color and size

4
js/main.js
View File

@ -7,8 +7,8 @@
preprocessor.load(function(data) {
// Some sample code for a year selector - TODO: Improve a lot and move somewhere else
var yearSelector = $("#seasonByYearSelector");
var seasons = preprocessor.getResults().seasons;
for(var year in seasons) yearSelector.append("<option>" + year + "</option>");
var seasons = processor.getSeasonsWithLapData();
for(var season in seasons){ yearSelector.append("<option>" + seasons[season].year + "</option>"); }
createLineGraph("#lineGraphBox", processor.getRace(970));
});

10
js/preprocessor.js
View File

@ -201,7 +201,6 @@ var preprocessor = {
// data/races.csv
fetchRaces: function (callback) {
d3.csv('data/races.csv', function(data) {
var result = {};
// preprocess data
data.forEach(function(d, i) {
d["circuitId"] = parseInt(d["circuitId"]);
@ -210,10 +209,8 @@ var preprocessor = {
d["round"] = parseInt(d["round"]);
d["time"] = new Date(d["time"]);
d["year"] = parseInt(d["year"]);
// store processed data by its primary key in an object
result[d["raceId"]] = d;
});
preprocessor.results.races = result; // Store results
preprocessor.results.races = data; // Store results
loadingDialog.itemFinished(); // Update loading dialog progress bar
callback(null); // Tell the queue we're done.
});
@ -254,14 +251,11 @@ var preprocessor = {
// data/seasons.csv
fetchSeasons: function (callback) {
d3.csv('data/seasons.csv', function(data) {
var result = {};
// preprocess data
data.forEach(function(d, i) {
d["year"] = parseInt(d["year"]);
// store processed data by its primary key in an object
result[d["year"]] = d;
});
preprocessor.results.seasons = result; // Store results
preprocessor.results.seasons = data; // Store results
loadingDialog.itemFinished(); // Update loading dialog progress bar
callback(null); // Tell the queue we're done.
});

73
js/processor.js
View File

@ -23,33 +23,42 @@ var processor = {
return race;
},
getEnhancedLapDataPerDriver: function(raceData) {
var result = [];
raceData.drivers.forEach((driver) => {
var lapData = {
driver: null,
laps: [],
};
lapData.driver = driver;
//Attach Qualifying Data
lapData.qualifying = processor.getQualifyingForDriver(raceData, driver);
//add Qualifying Data to the Laps
lapData.laps.push({'driverId': driver.driverId, 'lap': 0, 'position': lapData.qualifying.position})
raceData.lapTimes.forEach(lap => {
lap.forEach(curLap => {
if( curLap.driverId == driver.driverId ){
var pitstop = raceData.pitStops.filter(pitstop => pitstop.driverId == driver.driverId && pitstop.lap == curLap.lap);
if(pitstop.length > 0){
curLap.pitStop = pitstop[0];
}
lapData.laps.push(curLap);
}
});
});
result.push(lapData);
});
return result;
},
getEnhancedLapDataPerDriver: function(raceData) {
var result = [];
raceData.drivers.forEach((driver) => {
var lapData = {
driver: null,
laps: [],
};
lapData.driver = driver;
//Attach Qualifying Data
lapData.qualifying = processor.getQualifyingForDriver(raceData, driver);
//add Qualifying Data to the Laps
var lap0 = {'driverId': driver.driverId, 'lap': 0, 'position': lapData.qualifying.position};
var endResult = raceData.results.filter(res => res.driverId == driver.driverId && res.laps == 0);
if(endResult.length > 0){
lap0.finished = endResult[0];
}
lapData.laps.push(lap0);
raceData.lapTimes.forEach(lap => {
lap.forEach(curLap => {
if( curLap.driverId == driver.driverId ){
var pitstop = raceData.pitStops.filter(pitstop => pitstop.driverId == driver.driverId && pitstop.lap == curLap.lap);
var endResult = raceData.results.filter(res => res.driverId == driver.driverId && res.laps == curLap.lap);
if(pitstop.length > 0){
curLap.pitStop = pitstop[0];
}
if(endResult.length > 0){
curLap.finished = endResult[0];
}
lapData.laps.push(curLap);
}
});
});
result.push(lapData);
});
return result;
},
getRacesByYear: function(year) {
var races = queries.getRacesByYear(year);
@ -70,6 +79,16 @@ getEnhancedLapDataPerDriver: function(raceData) {
getQualifyingForDriver: function(raceData, driver){
var qualData = raceData.qualifying.filter( qualData => qualData.driverId == driver.driverId);
return qualData[0];
},
getSeasonsWithLapData: function(){
var seasons = queries.getSeasons();
var raceIds = queries.getRaceIdWithLapTimes();
var races = queries.getRaces().filter(race => raceIds.includes(race.raceId));
var seasonsWithLapData = seasons.filter((season) => races.filter(race => race.year == season.year).length > 0).reduce(removeDuplicates,[]);
seasonsWithLapData.sort((o1,o2) => o1["year"] - o2["year"]);
return seasonsWithLapData;
}
};

19
js/queries.js
View File

@ -128,6 +128,25 @@ var queries = {
return races;
},
getSeasons: function(){
var rawData = preprocessor.getResults();
return rawData.seasons;
},
getLapTimes: function(){
var rawData = preprocessor.getResults();
return rawData.lapTimes;
},
getRaces: function(){
var rawData = preprocessor.getResults();
return rawData.races;
},
getRaceIdWithLapTimes: function(){
return queries.getLapTimes().map(time => time.raceId).reduce(removeDuplicates,[]);
},
getQualifingDataByRaceId: function(raceId) {

9
js/util.js
View File

@ -16,7 +16,7 @@ var loadingDialog = {
this.progressItems = progressItems;
this.progressItemsDone = 0;
this._updateProgressBar();
$(this.id).modal('show');
//$(this.id).modal('show');
},
// Function to signal that another item was progressed
itemFinished: function() {
@ -27,7 +27,7 @@ var loadingDialog = {
// Hide the dialog
hide: function() {
console.log("hide");
$(this.id).modal('hide');
//$(this.id).modal('hide');
},
// Private function to update the progress bar shown
_updateProgressBar: function() {
@ -90,6 +90,11 @@ function getDriverCodeById(raceData,driverId){
return raceData.drivers.filter(driv=> driv.driverId == driverId)[0].code;
}
function removeDuplicates(result,obj){
if (result.indexOf(obj) < 0 ) result.push(obj);
return result;
}
function getColorValue(index, all){
var r = 0;
var g = 0;

1
python3_run.bat Normal file
View File

@ -0,0 +1 @@
python -m http.server