Demonstration of Doping in Professional Bicycle Racing

Developer
Bob Sutton
Size
2,996 Kb
Views
26,312
  1. Demonstration of Doping in Professional Bicycle Racing Previews
  2. Demonstration of Doping in Professional Bicycle Racing HTML Codes
  3. Demonstration of Doping in Professional Bicycle Racing CSS Codes
  4. Demonstration of Doping in Professional Bicycle Racing JS Codes

How do I make an demonstration of doping in professional bicycle racing?

What is a demonstration of doping in professional bicycle racing? How do you make a demonstration of doping in professional bicycle racing? This script and codes were developed by Bob Sutton on 11 September 2022, Sunday.

Demonstration of Doping in Professional Bicycle Racing Previews
IQ Test

Demonstration of Doping in Professional Bicycle Racing - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Demonstration of Doping in Professional Bicycle Racing</title> <meta charset="utf-8" /> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="main"> <h2>Demonstration of Doping in Professional Bicycle Racing</h2> <h3>Fastest Times up Alpe d'Huez</h3> <svg></svg> <h5>Normalized to 13.8 km distance</h5> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/763768/d3.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Demonstration of Doping in Professional Bicycle Racing - Script Codes CSS Codes

body
{ font-family: Open Sans; background-color: blue;
}
.axis path, .axis line
{ fill: none; stroke: black; shape-rendering: crispEdges;
}
.axis text
{ font-family: sans-serif; font-size: 11px;
}
.cyclist
{ font-size: 10px;
}
h1, h2, h3, h4, h5
{ text-align: center;
}
#main
{ margin-top: 50px; margin-left: auto; margin-right: auto; padding: 20px; width: 1100px; opacity: 0.8; background: white; border: 1px solid black; border-radius: 10px;
}

Demonstration of Doping in Professional Bicycle Racing - Script Codes JS Codes

$.ajax(
{ url: "https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/cyclist-data.json", method: "GET", dataType: "json", crossDomain: true, success: onSuccess, error: onError
});
function onError(xhr)
{ console.log("Error occurred"); console.log(JSON.stringify(xhr));
}
function onSuccess(data)
{ var width = 900; var height = 500; var leftPadding = 100; var rightPadding = 125; var topPadding = 20; var bottomPadding = 75; var ratio = 5; var xScale = d3.scale.linear() .domain([d3.min(data, function(d) { return d.Seconds }) - 10, d3.max(data, function(d) { return d.Seconds }) + 10]) .range([width, 0]); var yScale = d3.scale.linear() .domain([d3.min(data, function(d) { return d.Place} ), d3.max(data, function(d) { return d.Place} )]) .range([0, height]); var yAxis = d3.svg.axis() .scale(yScale) .orient("left"); var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom") .tickFormat(function(sec) { return Math.floor(sec / 60) + (sec % 60 < 10 ? ":0" : ":") + sec % 60; } ); var svg = d3.select("svg") .attr("width", leftPadding + width + rightPadding) .attr("height", topPadding + height + bottomPadding); svg.selectAll("circle") .data(data) .enter() .append("svg:circle") .attr("stroke", "gray") .attr("fill", function(d) { return !d.Doping ? "gray" : "red" }) .attr("cx", function(d) { return xScale(d.Seconds) + leftPadding; }) .attr("cy", function(d) { return yScale(d.Place) + topPadding; }) .attr("r", ratio) .append("svg:title") .text(function(d) { return d.Doping && d.Doping.trim().length > 0 ? d.Doping : "No doping allegations"; }); svg.selectAll("text") .data(data) .enter() .append("svg:text") .text(function(d) { return d.Name; }) .attr("class", "cyclist") .attr("x", function(d) { return xScale(d.Seconds) + leftPadding + ratio + 10; }) .attr("y", function(d) { return yScale(d.Place) + topPadding + 5; }) .append("svg:title") .text(function(d) { return "Nationality: " + d.Nationality + "; Year: " + d.Year + "; Time: " + (Math.floor(d.Seconds / 60) + ":" + (d.Seconds % 60 < 10 ? "0" : "") + d.Seconds % 60); }); svg.append("g") .attr("class", "axis") .attr("transform", "translate(" + leftPadding + ", " + topPadding + ")") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", -40) .attr("dy", "0.71em") .style("text-anchor", "end") .text("Place"); svg.append("g") .attr("class", "axis") .attr("transform", "translate(" + leftPadding + ", " + (topPadding + height + 20) + ")") .call(xAxis) .append("text") .attr("x", width) .attr("y", 40) .style("text-anchor", "end") .text("Time to complete heat");
}
Demonstration of Doping in Professional Bicycle Racing - Script Codes
Demonstration of Doping in Professional Bicycle Racing - Script Codes
Home Page Home
Developer Bob Sutton
Username anischyros
Uploaded September 11, 2022
Rating 3
Size 2,996 Kb
Views 26,312
Do you need developer help for Demonstration of Doping in Professional Bicycle Racing?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Bob Sutton (anischyros) Script Codes
Name
Worldwide Meteor Strikes Map
The Recipe Engine
Web calculator
Wikipedia Lookup Page
U.S. Gross Domestic Product of the United States
Twitchy Twitch.tv User Display
Generic Simon Game
Winston Churchill
Contiguity Graph of Countries
Git Markup Language Editor
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!