Skip to content

Commit

Permalink
added views
Browse files Browse the repository at this point in the history 
website now has an intro page and a page to show charts. post pilot test
  • Loading branch information
@yuahmed
yuahmed committed May 4, 2024
1 parent 460d898 commit f78e795
Show file tree
Hide file tree
Showing 3 changed files with 91 additions and 112 deletions.
67 changes: 36 additions & 31 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<title>Formula 1 Data Analysis</title>

<!-- Bootstrap CSS -->
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Font -->
<link href="https://fonts.cdnfonts.com/css/orbitron" rel="stylesheet">
Expand All @@ -23,49 +23,54 @@



<div class="container">
<div class="container-fluid view" id="intro">
<div class="col-12 col-md-12 col-lg-12">
<h1>F1 Through 1950 to 2023</h1>
<h3>Hover on the bars to see more information about each constructor team. Click on a bar to see the top drivers for that constructor. </h3>
<h3>Hover on the bars to see more information about each constructor team. Click on a bar to see the top
drivers for that constructor. </h3>
<button class="btn btn-dark mt-2" onclick="displayView('charts')"> Continue </button>
</div>

</div>

<div class="container">
<div>
<h2>Top 10 Constructors in F1</h2>
<!-- Parent container for the visualization -->
<div><svg id="const-chart-area"></svg></div>
<div id="tooltip"></div>

<!-- Select box to choose the ranking type -->
<form class="form-inline">
<div class="form-group">
<label for="ranking-type">Sort</label>
<select class="form-control" id="ranking-type" onchange="updateSorting()">
<option value="wins">by Wins</option>
<option value="points" selected>by Points</option>
</select>
</div>
</form>
</div>

<!-- <div class="col-1 col-md-1 col-lg-1"> -->

<div class="container-fluid view" id="charts">
<!-- Select box to choose the ranking type -->
<div class="row">
<div class="col-5">
<form class="form mb-5">
<div class="form-group">
<label for="ranking-type">
<h2>Sort</h2>
</label>
<select class="form-control" id="ranking-type" onchange="updateSorting()">
<option value="wins">by Wins</option>
<option value="points" selected>by Points</option>
</select>
</div>
</form>
</div>
</div>

<!-- </div> -->
<div class="row">
<div class="col-6 col-md-6 col-lg-6">
<!-- Parent container for the visualization -->
<h2>Top 10 Constructors in F1</h2>
<div><svg id="const-chart-area"></svg></div>
<div id="tooltip"></div>

</div>

<div class="margin-right">
<div id="driverChart" style="display: none;">
<h2 id="driverTitle">Top 7 Drivers of XXX</h2>
<!-- Parent container for the visualization -->
<div><svg id="driver-chart-area"></svg></div>
<div class="col-6 col-md-6 col-lg-6">
<div id="driverChart" style="display: none;">
<h2 id="driverTitle"></h2>
<!-- Parent container for the visualization -->
<div><svg id="driver-chart-area"></svg></div>

<div id="tooltip"></div>
<div id="tooltip"></div>
</div>
</div>
</div>

</div>


Expand Down
2 changes: 1 addition & 1 deletion js/driverChart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ class DriverChart {
this.config = {
parentElement: _config.parentElement,
colorScale: _config.colorScale,
margin: _config.margin || { top: 40, right: 10, bottom: 60, left: 60 },
margin: _config.margin || { top: 40, right: 10, bottom: 60, left: 50 },
containerWidth: _config.containerWidth || 960,
containerHeight: _config.containerHeight || 500,
tooltipPadding: _config.tooltipPadding || 15,
Expand Down
134 changes: 54 additions & 80 deletions js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,95 +2,69 @@ let constructorChart;

// let driverChart;

// creating the CONSTRUCTOR CHART
// Loading data CSV file
d3.csv("data/constructor_data.csv")
.then((csv) => {
data = csv;


//converting to numerics
data.forEach(function (d) {
d.points = +d.points;
d.wins = +d.wins;
});

//sorting by constructor points
data = data.sort((a, b) => b.points - a.points);

//console.log(data.slice(0,10))

top10data = data.slice(0, 10);

//console.log(top10data)



// Draw the visualization for the first time
constructorChart = new ConstructorChart(
{ parentElement: "#const-chart-area"},
top10data
);

constructorChart.updateVis();
})

.catch((error) => {
console.log("Error loading the data");
console.log(error);
});

function updateSorting(){
constructorChart.updateVis()
let views = {
intro: document.getElementById("intro"),
charts: document.getElementById("charts"),
};

if (window.location.hash) {
displayView(window.location.hash);
} else {
//default view: intro
displayView("intro");
}

function displayView(view) {
//view = view.replace("#", "");

for (key in views) {
views[key].style.display = "none";
}
console.log(view);
views[view].style.display = "block";

// function createDriverChart(teamName){
// // creating the DRIVER chart
// d3.csv("data/racexpole.csv")
// .then((csv) => {
// data = csv;

// //converting to numerics
// data.forEach(function (d) {
// d.racexgrid = +d.racexgrid;
// d.race_poles = +d.race_poles;
// d.grid_poles = +d.grid_poles

// });

// data = data.filter((d) => d.name === teamName);

// //sorting by constructor points
// data = data.sort((a, b) => b.points - a.points);

if (view == "charts") {
createConstructorChart();
}
}

// //console.log(data.slice(0,10))
function createConstructorChart() {
// creating the CONSTRUCTOR CHART
// Loading data CSV file
d3.csv("data/constructor_data.csv")
.then((csv) => {
data = csv;

// data = data.slice(0, 7); // TEMPORARY!!!
//converting to numerics
data.forEach(function (d) {
d.points = +d.points;
d.wins = +d.wins;
});

// //console.log(top10data)
//sorting by constructor points
data = data.sort((a, b) => b.points - a.points);

// // creating the color scale
// const colorScale = d3
// .scaleLinear()
// .domain([data[0].racexgrid, 0]) //MAY NEED CHANGE
// .range(["red", "green"]); //TEMPORARY
//console.log(data.slice(0,10))

// // Draw the visualization for the first time
// driverChart = new DriverChart(
// { parentElement: "#driver-chart-area", colorScale: colorScale },
// data
// );
top10data = data.slice(0, 10);

// driverChart.updateVis();
// })
//console.log(top10data)

// .catch((error) => {
// console.log("Error loading the data");
// console.log(error);
// });
// Draw the visualization for the first time
constructorChart = new ConstructorChart(
{ parentElement: "#const-chart-area" },
top10data
);

// }
constructorChart.updateVis();
})

.catch((error) => {
console.log("Error loading the data");
console.log(error);
});
}

//createDriverChart('Ferrari');
function updateSorting() {
constructorChart.updateVis();
}

0 comments on commit f78e795

Please sign in to comment.